@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/themes/theme-css.js

@@ -0,0 +1,304 @@
+"use strict";
+// The renderer's stylesheet, split into the two things it actually is:
+//
+//   1. SHARED RULES  — theme-INDEPENDENT, written entirely in `var(--grafloria-*)`.
+//      Injected ONCE per document, no matter how many diagrams are on the page.
+//      Every selector is scoped under `[data-grafloria-instance]`, so the rules only
+//      ever reach elements inside a Grafloria diagram.
+//
+//   2. INSTANCE VARIABLE BLOCK — one tiny `[data-grafloria-instance="grafloria-3"] { … }`
+//      per renderer, carrying THAT renderer's theme values.
+//
+// This is what makes two diagrams with different themes coexist: the rules are
+// identical for both, and the values are inherited from each diagram's own root.
+// (Before: `.diagram-node { fill: #fff }` was emitted GLOBALLY, keyed by theme
+// name, so the last stylesheet injected repainted every diagram on the page.)
+//
+// Specificity is preserved from the pre-scoping stylesheet because EVERY rule
+// gains exactly the same `[data-grafloria-instance]` prefix:
+//   `[…] .diagram-node`          (0,2,0)
+//   `[…] .diagram-node.selected` (0,3,0)  → state still beats base, as before.
+// The state rules are authored in ASCENDING precedence order (error → disabled →
+// hovered → highlighted → selected) so that, at equal specificity, source order
+// reproduces exactly the precedence `style-cascade.ts` resolves programmatically.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_STYLE_RULES = void 0;
+exports.instanceScopeSelector = instanceScopeSelector;
+exports.generateBaseStyleSheet = generateBaseStyleSheet;
+exports.generateInstanceVarBlock = generateInstanceVarBlock;
+const theme_vars_1 = require("./theme-vars");
+const theme_ref_1 = require("./theme-ref");
+/**
+ * Every themed rule the renderer ships, in cascade order.
+ *
+ * INVARIANT (pinned by svg-renderer.scoped-theme.spec): no rule here may carry a
+ * theme literal — every painted value resolves through `var(--grafloria-*)`, and
+ * every referenced variable is declared in {@link THEME_VARS}. `fill: none` on
+ * links is structural (a link is a stroke, never a fill), not a theme value.
+ */
+exports.BASE_STYLE_RULES = [
+    // ---- Nodes: base, then states in ASCENDING precedence ------------------
+    {
+        selector: '.diagram-node',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('node.fill'),
+            stroke: (0, theme_vars_1.themeVar)('node.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('node.strokeWidth'),
+        },
+    },
+    {
+        selector: '.diagram-node.error',
+        decls: { fill: (0, theme_vars_1.themeVar)('node.error.fill'), stroke: (0, theme_vars_1.themeVar)('node.error.stroke') },
+    },
+    {
+        selector: '.diagram-node.disabled',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('node.disabled.fill'),
+            stroke: (0, theme_vars_1.themeVar)('node.disabled.stroke'),
+            opacity: (0, theme_vars_1.themeVar)('node.disabled.opacity'),
+        },
+    },
+    {
+        selector: '.diagram-node.hovered',
+        decls: { fill: (0, theme_vars_1.themeVar)('node.hovered.fill'), stroke: (0, theme_vars_1.themeVar)('node.hovered.stroke') },
+    },
+    // Authored BEFORE `.selected` so that, at equal specificity, selection wins
+    // when a node is both highlighted and selected.
+    {
+        selector: '.diagram-node.highlighted',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('node.highlighted.fill'),
+            stroke: (0, theme_vars_1.themeVar)('node.highlighted.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('node.highlighted.strokeWidth'),
+        },
+    },
+    {
+        selector: '.diagram-node.selected',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('node.selected.fill'),
+            stroke: (0, theme_vars_1.themeVar)('node.selected.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('node.selected.strokeWidth'),
+        },
+    },
+    // ---- Links -------------------------------------------------------------
+    {
+        selector: '.diagram-link',
+        decls: {
+            stroke: (0, theme_vars_1.themeVar)('link.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('link.strokeWidth'),
+            fill: 'none',
+        },
+    },
+    {
+        selector: '.diagram-link.hovered',
+        decls: { stroke: (0, theme_vars_1.themeVar)('link.hovered.stroke') },
+    },
+    {
+        selector: '.diagram-link.highlighted',
+        decls: {
+            stroke: (0, theme_vars_1.themeVar)('link.highlighted.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('link.highlighted.strokeWidth'),
+        },
+    },
+    {
+        selector: '.diagram-link.selected',
+        decls: {
+            stroke: (0, theme_vars_1.themeVar)('link.selected.stroke'),
+            'stroke-width': (0, theme_vars_1.themeVar)('link.selected.strokeWidth'),
+        },
+    },
+    // ---- Labels ------------------------------------------------------------
+    {
+        selector: '.diagram-label',
+        decls: {
+            'font-family': (0, theme_vars_1.themeVar)('label.fontFamily'),
+            'font-size': (0, theme_vars_1.themeVar)('label.fontSize'),
+            fill: (0, theme_vars_1.themeVar)('label.color'),
+        },
+    },
+    // ---- Ports -------------------------------------------------------------
+    {
+        selector: '.port-input',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('port.fill'),
+            stroke: (0, theme_vars_1.themeVar)('port.input'),
+            'stroke-width': (0, theme_vars_1.themeVar)('port.strokeWidth'),
+        },
+    },
+    {
+        selector: '.port-output',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('port.fill'),
+            stroke: (0, theme_vars_1.themeVar)('port.output'),
+            'stroke-width': (0, theme_vars_1.themeVar)('port.strokeWidth'),
+        },
+    },
+    {
+        selector: '.port-bi',
+        decls: {
+            fill: (0, theme_vars_1.themeVar)('port.fill'),
+            stroke: (0, theme_vars_1.themeVar)('port.bi'),
+            'stroke-width': (0, theme_vars_1.themeVar)('port.strokeWidth'),
+        },
+    },
+    {
+        selector: '.port-hovered',
+        decls: { 'stroke-width': (0, theme_vars_1.themeVar)('port.emphasis.strokeWidth'), cursor: 'pointer' },
+    },
+    {
+        selector: '.port-highlighted',
+        decls: {
+            'stroke-width': (0, theme_vars_1.themeVar)('port.emphasis.strokeWidth'),
+            opacity: (0, theme_vars_1.themeVar)('port.emphasis.opacity'),
+        },
+    },
+    { selector: '.port-input.port-highlighted', decls: { fill: (0, theme_vars_1.themeVar)('port.input') } },
+    { selector: '.port-output.port-highlighted', decls: { fill: (0, theme_vars_1.themeVar)('port.output') } },
+    { selector: '.port-bi.port-highlighted', decls: { fill: (0, theme_vars_1.themeVar)('port.bi') } },
+];
+/**
+ * Structural rules: cursors, transitions, hit-target sizes. No theme values, so
+ * they are emitted verbatim (and unscoped, exactly as before) — `@keyframes`
+ * cannot be scoped anyway.
+ */
+const STATIC_CSS = `
+/* The diagram root is keyboard-focusable (tabindex=0, the a11y entry point),
+   and every node/link group carries tabindex=-1 for programmatic keyboard
+   navigation — which ALSO makes them mouse-focusable, so a click on a link's
+   hit area drew the UA focus ring as "a rectangle around the line" (two live
+   reports: the canvas-wide one, then the per-link one). Keep the ring for
+   keyboard focus (:focus-visible — the a11y harness asserts it); suppress it
+   for pointer focus only, on the root and on every focusable part inside. */
+svg.grafloria-diagram:focus:not(:focus-visible),
+svg.grafloria-diagram :focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Link Path - Disable transitions for performance and visual correctness */
+.link-group path {
+  transition: none !important;
+}
+
+/* Diagram text is a LABEL, not copy: without this, any drag that sweeps
+   across a node leaves its <text> browser-selected and painted with the blue
+   selection highlight (live audit: "a…", "Ingest" left highlighted after
+   pans). Selection stays possible in in-place editors, which are real
+   inputs, not SVG text. */
+svg.grafloria-diagram text {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Phase 2: Port Styles
+   NEVER \`transition: all\` on anything whose geometry tracks the pointer —
+   \`all\` sweeps up cx/cy/transform and the element eases 200ms behind the
+   cursor (the wave15d node-drag lag; then the SAME bug on waypoint handles:
+   "the point is running after the line", live report). Paint-only lists. */
+.port {
+  transition: fill 0.2s ease, stroke 0.2s ease, opacity 0.2s ease, r 0.15s ease;
+  cursor: crosshair;
+}
+
+/* Phase 2: Connection Preview Styles */
+.connection-preview-line {
+  pointer-events: none;
+  transition: stroke 0.2s ease;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+/* Phase 2: Connection Target Highlight — geometry re-anchors between nodes
+   while dragging a connection; easing it smears the highlight across the gap. */
+.connection-target-highlight {
+  transition: opacity 0.2s ease, stroke 0.2s ease, fill 0.2s ease;
+  pointer-events: none;
+}
+
+/* Phase 2: Link Endpoint Handles — dragged directly (reconnect). */
+.link-endpoint-handle {
+  cursor: move;
+  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.15s ease, r 0.15s ease;
+}
+
+.link-endpoint-handle:hover {
+  r: 8;
+  stroke-width: 3px;
+}
+
+/* Phase 2.3a: Waypoint Handles — dragged directly; cx/cy must NEVER ease
+   (the VNode side already knew: "No transition - causes flickering during
+   drag" — but this stylesheet rule was easing the handle anyway). */
+.waypoint-handle {
+  cursor: move;
+  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.15s ease, r 0.15s ease;
+  pointer-events: all;
+}
+
+.waypoint-handle:hover {
+  r: 7;
+  stroke-width: 3px;
+}
+
+/* Phase 2.3b: Control Point Handles — dragged directly, same rule. */
+.control-point-handle {
+  cursor: move;
+  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.15s ease, r 0.15s ease;
+  pointer-events: all;
+}
+
+.control-point-handle:hover {
+  r: 8;
+  stroke-width: 3px;
+}
+
+.control-line {
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+`.trim();
+/** `[data-grafloria-instance="grafloria-3"]` — selects one diagram's root (and scoped hosts). */
+function instanceScopeSelector(instanceId) {
+    return `[${theme_vars_1.GRAFLORIA_INSTANCE_ATTR}="${instanceId}"]`;
+}
+/** Serialize one rule with the given scope prefix. */
+function renderRule(rule, scope) {
+    const body = Object.entries(rule.decls)
+        .map(([prop, value]) => `  ${prop}: ${value};`)
+        .join('\n');
+    return `${scope} ${rule.selector} {\n${body}\n}`;
+}
+/**
+ * The shared, theme-INDEPENDENT stylesheet. Identical for every renderer on the
+ * page, so it is injected once and deduped by element id.
+ */
+function generateBaseStyleSheet() {
+    const scope = `[${theme_vars_1.GRAFLORIA_INSTANCE_ATTR}]`;
+    const rules = exports.BASE_STYLE_RULES.map(rule => renderRule(rule, scope)).join('\n\n');
+    return `/* Grafloria Renderer — shared rules (values come from each instance's --grafloria-* variables) */\n\n${rules}\n\n${STATIC_CSS}`;
+}
+/**
+ * One renderer's variable block: the ONLY place a theme's values are written.
+ * Scoped to that renderer's root, so a second diagram with a different theme
+ * cannot be repainted by it.
+ */
+function generateInstanceVarBlock(theme, instanceId) {
+    // TWO groups of variables, one block:
+    //
+    //   CHROME    the 33 tokens the shared stylesheet above paints (`--grafloria-node-fill`).
+    //   BINDABLE  every other value in the theme, flattened by path
+    //             (`--grafloria-colors-primary`, `--grafloria-category-critical`,
+    //             `--grafloria-numbers-emphasis`) — see theme-ref.ts.
+    //
+    // The bindable half is what makes a theme-bound property (`themeRef(...)`)
+    // live-rebindable: because the value it points at is a variable on this root,
+    // rewriting this block re-colours every bound element WITHOUT rebuilding a
+    // single VNode. That is the mechanism behind the colorMode hot-swap.
+    const chrome = theme_vars_1.THEME_TOKENS.map(token => `  ${theme_vars_1.THEME_VARS[token].cssVar}: ${(0, theme_vars_1.themeVarValue)(token, theme)};`);
+    const bindable = Object.entries((0, theme_ref_1.resolveBindableVars)(theme)).map(([cssVar, value]) => `  ${cssVar}: ${value};`);
+    return `/* Grafloria Renderer Theme: ${theme.name} (instance ${instanceId}) */\n${instanceScopeSelector(instanceId)} {\n${[...chrome, ...bindable].join('\n')}\n}`;
+}
+//# sourceMappingURL=theme-css.js.map

package/src/libs/renderer/src/themes/theme-ref.d.ts

@@ -0,0 +1,63 @@
+import type { Theme } from '../types/theme.types';
+import { type ThemeToken } from './theme-vars';
+/** Brand key. Deliberately ugly — it must never collide with a real style prop. */
+declare const THEME_REF_MARKER = "__grafloriaThemeRef";
+/**
+ * A reference to a theme token, usable anywhere a literal style value is.
+ * Opaque on purpose: build it with {@link themeRef}, read it with
+ * {@link resolveThemeRef}.
+ */
+export interface ThemeRef {
+    readonly [THEME_REF_MARKER]: string;
+}
+/**
+ * Bind a property to a theme token.
+ *
+ *   node.setStyle({ fill: themeRef('category.critical') })
+ *
+ * The `any` return is what lets a ThemeRef sit in a `fill?: string | Gradient | …`
+ * slot: the engine's style types are the PUBLIC model contract and stay free of
+ * any renderer type, so the renderer — the only thing that ever resolves a ref —
+ * owns the marker and detects it structurally with {@link isThemeRef}.
+ */
+export declare function themeRef(token: ThemeToken | string): any;
+/** True when a style value is a theme reference rather than a literal. */
+export declare function isThemeRef(value: unknown): value is ThemeRef;
+/** The token a reference points at. */
+export declare function themeRefToken(ref: ThemeRef): string;
+/**
+ * `node.selected.fill` → `--grafloria-node-selected-fill`.
+ *
+ * Mechanical, not a lookup: the same rule reproduces every entry of THEME_VARS
+ * (pinned by a test), so chrome tokens and caller tokens share ONE naming law
+ * and nothing has to be registered ahead of time.
+ */
+export declare function themeRefVar(token: string): string;
+/**
+ * Resolve a token against a theme. `undefined` when the theme does not define it
+ * — callers must treat that as "this property was never set" (the cascade layer
+ * below it, or the stylesheet, then wins) rather than painting `undefined`.
+ */
+export declare function resolveThemeRef(token: string, theme: Theme): string | number | undefined;
+/**
+ * How a bound property is emitted in CSS mode when the target property accepts
+ * `var()` (i.e. it is written into an inline CSS `style` string):
+ * `var(--grafloria-category-critical, #b91c1c)`.
+ *
+ * The literal FALLBACK matters: a theme that simply does not define the token
+ * would otherwise make the declaration invalid at computed-value time and the
+ * element would lose the property entirely (an SVG shape with no `fill` paints
+ * black). With the fallback it degrades to the value the token had when the
+ * VNode was built, which is the closest thing to "unchanged" available.
+ */
+export declare function themeRefCssValue(token: string, theme: Theme): string | undefined;
+/**
+ * Every BINDABLE token of a theme, as `{ '--grafloria-colors-primary': '#2563eb', … }`.
+ *
+ * This is the second half of the instance variable block (the first being the 33
+ * chrome vars). Together they are the complete set of values a `themeRef` can
+ * point at — which is exactly what makes a theme swap expressible as "rewrite
+ * this instance's variables" instead of "rebuild every VNode".
+ */
+export declare function resolveBindableVars(theme: Theme): Record<string, string>;
+export {};

package/src/libs/renderer/src/themes/theme-ref.js

@@ -0,0 +1,206 @@
+"use strict";
+// Theme-bound properties — `fill: themeRef('category.critical')`.
+//
+// Styling & theming, Card "Theme-bound properties" (GoJS ThemeManager's signature
+// capability).
+//
+// THE PROBLEM. A theme swap used to repaint only CHROME — the renderer's own
+// defaults, states and ports, i.e. the 33 tokens in `theme-vars.ts`. Every colour
+// the CALLER assigned meaning to (`fill: '#ef4444'` because that node is
+// critical) was a literal frozen into the model, so switching to the dark theme
+// left a wall of light-theme reds sitting on a dark canvas. The theme could not
+// reach them because it had never been told they meant anything.
+//
+// THE FIX. Any node/link/label property may hold a REFERENCE to a theme token
+// instead of a literal:
+//
+//     node.setStyle({ fill: themeRef('category.critical') });
+//     link.updateStyle({ strokeWidth: themeRef('numbers.emphasis') });
+//     defineStyle('critical', { stroke: themeRef('category.critical') });
+//
+// The reference resolves against the ACTIVE theme wherever the value is emitted,
+// so the very same model paints red-on-white under the light theme and the dark
+// theme's (different, contrast-checked) critical red under the dark one.
+//
+// TWO RESOLUTIONS, one token:
+//   - CSS mode, and a property whose value lands in an inline CSS `style` string
+//     → emitted as `var(--grafloria-…, <literal>)`. Rebinding the variable is then
+//     enough to recolour it: no VNode is rebuilt. This is what makes the
+//     colorMode hot-swap (Card "colorMode") free for bound elements.
+//   - everywhere else (programmatic/Canvas mode; properties emitted as SVG
+//     PRESENTATION ATTRIBUTES, which cannot hold `var()`)
+//     → resolved to the LITERAL, and the entity is recorded as theme-dependent
+//     so a theme swap re-resolves it on the next frame.
+//
+// TOKEN GRAMMAR — a dotted path, resolved in this order:
+//   1. one of the 33 chrome tokens in THEME_VARS  (`node.selected.fill`)
+//   2. `category.<name>`                          → theme.categories[name]
+//   3. `numbers.<name>`                           → theme.numbers[name]
+//   4. any other path into the Theme object       (`colors.primary`,
+//      `effects.borderRadius.lg`, `typography.fontSize.lg`, `spacing.md`)
+//
+// Every one of those has a CSS custom property, derived MECHANICALLY from the
+// token (`node.selected.fill` → `--grafloria-node-selected-fill`) — the same rule
+// that reproduces the whole THEME_VARS table, which `theme-ref.spec.ts` pins.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeRef = themeRef;
+exports.isThemeRef = isThemeRef;
+exports.themeRefToken = themeRefToken;
+exports.themeRefVar = themeRefVar;
+exports.resolveThemeRef = resolveThemeRef;
+exports.themeRefCssValue = themeRefCssValue;
+exports.resolveBindableVars = resolveBindableVars;
+const theme_vars_1 = require("./theme-vars");
+/** Brand key. Deliberately ugly — it must never collide with a real style prop. */
+const THEME_REF_MARKER = '__grafloriaThemeRef';
+/**
+ * Bind a property to a theme token.
+ *
+ *   node.setStyle({ fill: themeRef('category.critical') })
+ *
+ * The `any` return is what lets a ThemeRef sit in a `fill?: string | Gradient | …`
+ * slot: the engine's style types are the PUBLIC model contract and stay free of
+ * any renderer type, so the renderer — the only thing that ever resolves a ref —
+ * owns the marker and detects it structurally with {@link isThemeRef}.
+ */
+function themeRef(token) {
+    return { [THEME_REF_MARKER]: token };
+}
+/** True when a style value is a theme reference rather than a literal. */
+function isThemeRef(value) {
+    return (value != null &&
+        typeof value === 'object' &&
+        typeof value[THEME_REF_MARKER] === 'string');
+}
+/** The token a reference points at. */
+function themeRefToken(ref) {
+    return ref[THEME_REF_MARKER];
+}
+// ---------------------------------------------------------------------------
+// token → CSS custom property
+// ---------------------------------------------------------------------------
+/** `fontFamily` → `font-family`. */
+function kebab(segment) {
+    return segment.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * `node.selected.fill` → `--grafloria-node-selected-fill`.
+ *
+ * Mechanical, not a lookup: the same rule reproduces every entry of THEME_VARS
+ * (pinned by a test), so chrome tokens and caller tokens share ONE naming law
+ * and nothing has to be registered ahead of time.
+ */
+function themeRefVar(token) {
+    return theme_vars_1.GRAFLORIA_VAR_PREFIX + token.split('.').map(kebab).join('-');
+}
+// ---------------------------------------------------------------------------
+// token → value
+// ---------------------------------------------------------------------------
+/** Walk a dotted path into a plain object; undefined if any hop is missing. */
+function readPath(root, path) {
+    let cursor = root;
+    for (const segment of path.split('.')) {
+        if (cursor == null || typeof cursor !== 'object')
+            return undefined;
+        cursor = cursor[segment];
+    }
+    return cursor;
+}
+/**
+ * Resolve a token against a theme. `undefined` when the theme does not define it
+ * — callers must treat that as "this property was never set" (the cascade layer
+ * below it, or the stylesheet, then wins) rather than painting `undefined`.
+ */
+function resolveThemeRef(token, theme) {
+    var _a, _b;
+    // 1. chrome tokens (the 33 the built-in stylesheet paints)
+    const chrome = theme_vars_1.THEME_VARS[token];
+    if (chrome)
+        return chrome.read(theme);
+    // 2/3. the caller's own palettes. `category.x` reads `theme.categories.x` —
+    // singular token, plural field, because `themeRef('category.critical')` is how
+    // it reads at the call site.
+    const dot = token.indexOf('.');
+    const head = dot < 0 ? token : token.slice(0, dot);
+    const tail = dot < 0 ? '' : token.slice(dot + 1);
+    if (head === 'category') {
+        return (_a = theme.categories) === null || _a === void 0 ? void 0 : _a[tail];
+    }
+    if (head === 'numbers') {
+        return (_b = theme.numbers) === null || _b === void 0 ? void 0 : _b[tail];
+    }
+    // 4. anything else addressable on the Theme itself.
+    const value = readPath(theme, token);
+    return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+}
+/**
+ * How a bound property is emitted in CSS mode when the target property accepts
+ * `var()` (i.e. it is written into an inline CSS `style` string):
+ * `var(--grafloria-category-critical, #b91c1c)`.
+ *
+ * The literal FALLBACK matters: a theme that simply does not define the token
+ * would otherwise make the declaration invalid at computed-value time and the
+ * element would lose the property entirely (an SVG shape with no `fill` paints
+ * black). With the fallback it degrades to the value the token had when the
+ * VNode was built, which is the closest thing to "unchanged" available.
+ */
+function themeRefCssValue(token, theme) {
+    const literal = resolveThemeRef(token, theme);
+    if (literal === undefined)
+        return undefined;
+    return `var(${themeRefVar(token)}, ${literal})`;
+}
+// ---------------------------------------------------------------------------
+// The bindable variable block
+// ---------------------------------------------------------------------------
+/**
+ * Sub-trees of the Theme published as `--grafloria-*` variables so that EVERY token
+ * `resolveThemeRef` can answer is also live-rebindable in CSS.
+ *
+ * `nodes` / `links` are excluded on purpose: they are keyed by NODE TYPE, an
+ * open-ended, per-diagram namespace whose values the cascade resolves inline
+ * anyway (see style-cascade.ts) — publishing them would be a var per node type
+ * that nothing reads.
+ */
+const BINDABLE_ROOTS = ['colors', 'typography', 'spacing', 'effects'];
+/** Flatten `{a: {b: 1}}` under prefix `x` into `{ 'x.a.b': 1 }`. */
+function flatten(value, path, out) {
+    if (typeof value === 'string' || typeof value === 'number') {
+        out[path] = value;
+        return;
+    }
+    if (value == null || typeof value !== 'object')
+        return;
+    for (const [key, child] of Object.entries(value)) {
+        flatten(child, path ? `${path}.${key}` : key, out);
+    }
+}
+/**
+ * Every BINDABLE token of a theme, as `{ '--grafloria-colors-primary': '#2563eb', … }`.
+ *
+ * This is the second half of the instance variable block (the first being the 33
+ * chrome vars). Together they are the complete set of values a `themeRef` can
+ * point at — which is exactly what makes a theme swap expressible as "rewrite
+ * this instance's variables" instead of "rebuild every VNode".
+ */
+function resolveBindableVars(theme) {
+    var _a, _b;
+    const flat = {};
+    for (const root of BINDABLE_ROOTS) {
+        flatten(theme[root], root, flat);
+    }
+    for (const [key, value] of Object.entries((_a = theme.categories) !== null && _a !== void 0 ? _a : {})) {
+        if (value !== undefined)
+            flat[`category.${key}`] = value;
+    }
+    for (const [key, value] of Object.entries((_b = theme.numbers) !== null && _b !== void 0 ? _b : {})) {
+        if (value !== undefined)
+            flat[`numbers.${key}`] = value;
+    }
+    const out = {};
+    for (const [token, value] of Object.entries(flat)) {
+        out[themeRefVar(token)] = String(value);
+    }
+    return out;
+}
+//# sourceMappingURL=theme-ref.js.map

package/src/libs/renderer/src/themes/theme-vars.d.ts

@@ -0,0 +1,49 @@
+import type { Theme } from '../types/theme.types';
+/**
+ * Attribute stamped on a diagram's root `<svg>` (and, via
+ * `SVGRenderer.applyInstanceScope()`, on any HTML host that wraps nodes rendered
+ * outside the SVG) carrying the renderer's instance id. Both the variable block
+ * and every rule in the shared stylesheet are scoped through it.
+ */
+export declare const GRAFLORIA_INSTANCE_ATTR = "data-grafloria-instance";
+/** Prefix of every custom property this renderer defines. */
+export declare const GRAFLORIA_VAR_PREFIX = "--grafloria-";
+/**
+ * Every themed value the built-in stylesheet paints.
+ *
+ * Naming: `<entity>[.<state>].<property>` — mirrors the CSS var it maps to, so
+ * `node.selected.fill` ⇄ `--grafloria-node-selected-fill`.
+ */
+export type ThemeToken = 'node.fill' | 'node.stroke' | 'node.strokeWidth' | 'node.selected.fill' | 'node.selected.stroke' | 'node.selected.strokeWidth' | 'node.highlighted.fill' | 'node.highlighted.stroke' | 'node.highlighted.strokeWidth' | 'node.hovered.fill' | 'node.hovered.stroke' | 'node.disabled.fill' | 'node.disabled.stroke' | 'node.disabled.opacity' | 'node.error.fill' | 'node.error.stroke' | 'link.stroke' | 'link.strokeWidth' | 'link.selected.stroke' | 'link.selected.strokeWidth' | 'link.highlighted.stroke' | 'link.highlighted.strokeWidth' | 'link.hovered.stroke' | 'label.fontFamily' | 'label.fontSize' | 'label.color' | 'port.fill' | 'port.strokeWidth' | 'port.input' | 'port.output' | 'port.bi' | 'port.emphasis.strokeWidth' | 'port.emphasis.opacity';
+/** One token's binding: the custom property + how to read its value from a Theme. */
+export interface ThemeVarBinding {
+    /** CSS custom property name, e.g. `--grafloria-node-fill`. */
+    cssVar: string;
+    /** Pull the raw value out of a Theme. */
+    read: (theme: Theme) => string | number;
+    /** Appended when serializing a numeric value into CSS. */
+    unit?: 'px';
+}
+/**
+ * THE table. One entry per token; nothing else in the renderer may invent a
+ * `--grafloria-*` name.
+ *
+ * A handful of bindings are CONSTANTS today (`() => 2`): the emphasis
+ * stroke-widths the stylesheet has always hardcoded. Routing them through the
+ * table means a later card can bind them to a real theme token (or let users
+ * override the custom property directly) without touching the stylesheet.
+ */
+export declare const THEME_VARS: Record<ThemeToken, ThemeVarBinding>;
+/** All tokens, in table order. */
+export declare const THEME_TOKENS: ThemeToken[];
+/** `--grafloria-node-fill` — the custom property a token maps to. */
+export declare function cssVarName(token: ThemeToken): string;
+/** `var(--grafloria-node-fill)` — the reference the shared stylesheet is written in. */
+export declare function themeVar(token: ThemeToken): string;
+/** Serialize one token's value for CSS (adds the unit for numeric bindings). */
+export declare function themeVarValue(token: ThemeToken, theme: Theme): string;
+/**
+ * The whole theme as `{ '--grafloria-node-fill': '#ffffff', … }`.
+ * Also the natural shape for design-token export / Canvas-side lookups.
+ */
+export declare function resolveThemeVars(theme: Theme): Record<string, string>;