@grafloria/element 0.3.20 → 0.3.22

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

@@ -1,304 +0,0 @@
-"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

@@ -1,63 +0,0 @@
-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

@@ -1,206 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-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>;