@grafloria/element 0.3.20 → 0.3.21

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

@@ -1,112 +0,0 @@
-"use strict";
-// Theme token → CSS custom property: THE mapping table.
-//
-// Styling & theming — Card "Scoped theme via CSS custom properties".
-//
-// Every themed value the renderer paints lives here ONCE, as a binding of
-//   token name  →  CSS custom property  →  how to read it out of a Theme.
-//
-// Everything downstream reuses this table instead of re-deriving names:
-//   - theme-css.ts        emits the per-instance variable block (`--grafloria-…: #fff`)
-//                         and the shared var-based rules (`fill: var(--grafloria-…)`)
-//   - style-cascade.ts    resolves the same tokens programmatically (Canvas mode)
-//   - later cards         (colorMode, theme-bound props, design-token export)
-//                         enumerate THEME_VARS rather than hardcoding names.
-//
-// WHY custom properties at all: the theme stylesheet used to inline hex literals
-// into GLOBAL rules (`.diagram-node { fill: #fff }`) keyed by theme NAME. Two
-// diagrams with different themes on one page clobbered each other — whichever
-// stylesheet was injected last painted BOTH diagrams. With this table the rules
-// become theme-independent (`fill: var(--grafloria-node-fill)`) and only a tiny
-// per-instance variable block carries the values, scoped to that diagram's root.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.THEME_TOKENS = exports.THEME_VARS = exports.GRAFLORIA_VAR_PREFIX = exports.GRAFLORIA_INSTANCE_ATTR = void 0;
-exports.cssVarName = cssVarName;
-exports.themeVar = themeVar;
-exports.themeVarValue = themeVarValue;
-exports.resolveThemeVars = resolveThemeVars;
-/**
- * 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.
- */
-exports.GRAFLORIA_INSTANCE_ATTR = 'data-grafloria-instance';
-/** Prefix of every custom property this renderer defines. */
-exports.GRAFLORIA_VAR_PREFIX = '--grafloria-';
-/**
- * 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.
- */
-exports.THEME_VARS = {
-    // ---- Nodes ------------------------------------------------------------
-    'node.fill': { cssVar: '--grafloria-node-fill', read: t => t.colors.node.default.fill },
-    'node.stroke': { cssVar: '--grafloria-node-stroke', read: t => t.colors.node.default.stroke },
-    'node.strokeWidth': { cssVar: '--grafloria-node-stroke-width', read: t => t.nodes.default.strokeWidth, unit: 'px' },
-    'node.selected.fill': { cssVar: '--grafloria-node-selected-fill', read: t => t.colors.node.selected.fill },
-    'node.selected.stroke': { cssVar: '--grafloria-node-selected-stroke', read: t => t.colors.node.selected.stroke },
-    'node.selected.strokeWidth': { cssVar: '--grafloria-node-selected-stroke-width', read: () => 2, unit: 'px' },
-    'node.highlighted.fill': { cssVar: '--grafloria-node-highlighted-fill', read: t => t.colors.node.highlighted.fill },
-    'node.highlighted.stroke': { cssVar: '--grafloria-node-highlighted-stroke', read: t => t.colors.node.highlighted.stroke },
-    'node.highlighted.strokeWidth': { cssVar: '--grafloria-node-highlighted-stroke-width', read: () => 2, unit: 'px' },
-    'node.hovered.fill': { cssVar: '--grafloria-node-hovered-fill', read: t => t.colors.node.hovered.fill },
-    'node.hovered.stroke': { cssVar: '--grafloria-node-hovered-stroke', read: t => t.colors.node.hovered.stroke },
-    'node.disabled.fill': { cssVar: '--grafloria-node-disabled-fill', read: t => t.colors.node.disabled.fill },
-    'node.disabled.stroke': { cssVar: '--grafloria-node-disabled-stroke', read: t => t.colors.node.disabled.stroke },
-    'node.disabled.opacity': { cssVar: '--grafloria-node-disabled-opacity', read: t => t.effects.opacity.disabled },
-    'node.error.fill': { cssVar: '--grafloria-node-error-fill', read: t => t.colors.node.error.fill },
-    'node.error.stroke': { cssVar: '--grafloria-node-error-stroke', read: t => t.colors.node.error.stroke },
-    // ---- Links ------------------------------------------------------------
-    'link.stroke': { cssVar: '--grafloria-link-stroke', read: t => t.colors.link.default },
-    'link.strokeWidth': { cssVar: '--grafloria-link-stroke-width', read: t => t.links.default.strokeWidth, unit: 'px' },
-    'link.selected.stroke': { cssVar: '--grafloria-link-selected-stroke', read: t => t.colors.link.selected },
-    'link.selected.strokeWidth': { cssVar: '--grafloria-link-selected-stroke-width', read: () => 3, unit: 'px' },
-    'link.highlighted.stroke': { cssVar: '--grafloria-link-highlighted-stroke', read: t => t.colors.link.highlighted },
-    'link.highlighted.strokeWidth': { cssVar: '--grafloria-link-highlighted-stroke-width', read: () => 3, unit: 'px' },
-    'link.hovered.stroke': { cssVar: '--grafloria-link-hovered-stroke', read: t => t.colors.link.hovered },
-    // ---- Labels -----------------------------------------------------------
-    'label.fontFamily': { cssVar: '--grafloria-label-font-family', read: t => t.typography.fontFamily.default },
-    'label.fontSize': { cssVar: '--grafloria-label-font-size', read: t => t.typography.fontSize.md, unit: 'px' },
-    'label.color': { cssVar: '--grafloria-label-color', read: t => t.colors.text.primary },
-    // ---- Ports ------------------------------------------------------------
-    'port.fill': { cssVar: '--grafloria-port-fill', read: t => t.colors.background.surface },
-    'port.strokeWidth': { cssVar: '--grafloria-port-stroke-width', read: t => t.ports.strokeWidth, unit: 'px' },
-    'port.input': { cssVar: '--grafloria-port-input', read: t => t.colors.port.input },
-    'port.output': { cssVar: '--grafloria-port-output', read: t => t.colors.port.output },
-    'port.bi': { cssVar: '--grafloria-port-bi', read: t => t.colors.port.bi },
-    'port.emphasis.strokeWidth': { cssVar: '--grafloria-port-emphasis-stroke-width', read: () => 3, unit: 'px' },
-    'port.emphasis.opacity': { cssVar: '--grafloria-port-emphasis-opacity', read: () => 1 },
-};
-/** All tokens, in table order. */
-exports.THEME_TOKENS = Object.keys(exports.THEME_VARS);
-/** `--grafloria-node-fill` — the custom property a token maps to. */
-function cssVarName(token) {
-    return exports.THEME_VARS[token].cssVar;
-}
-/** `var(--grafloria-node-fill)` — the reference the shared stylesheet is written in. */
-function themeVar(token) {
-    return `var(${exports.THEME_VARS[token].cssVar})`;
-}
-/** Serialize one token's value for CSS (adds the unit for numeric bindings). */
-function themeVarValue(token, theme) {
-    const binding = exports.THEME_VARS[token];
-    const raw = binding.read(theme);
-    return binding.unit && typeof raw === 'number' ? `${raw}${binding.unit}` : String(raw);
-}
-/**
- * The whole theme as `{ '--grafloria-node-fill': '#ffffff', … }`.
- * Also the natural shape for design-token export / Canvas-side lookups.
- */
-function resolveThemeVars(theme) {
-    const out = {};
-    for (const token of exports.THEME_TOKENS) {
-        out[exports.THEME_VARS[token].cssVar] = themeVarValue(token, theme);
-    }
-    return out;
-}
-//# sourceMappingURL=theme-vars.js.map

package/src/libs/renderer/src/themes/token-bridge.d.ts

@@ -1,62 +0,0 @@
-import { type ThemeToken } from './theme-vars';
-/**
- * A mapping from a Grafloria token to a CSS value in the HOST's vocabulary.
- *
- * The key is a theme token (`'node.fill'`, `'category.critical'`) — the same
- * grammar `themeRef()` uses, so there is one token namespace to learn. A raw
- * `--grafloria-*` custom property name is accepted too, for the odd variable a caller
- * wants to set directly.
- *
- * The value is CSS, verbatim: `var(--card)`, `hsl(var(--primary))`,
- * `oklch(var(--accent))`, or a plain `#hex`. It is NOT resolved by us — the
- * browser does it, which is exactly why a host token that changes (a theme
- * toggle in the host app!) also changes the diagram, live and for free.
- */
-export type TokenBridge = Partial<Record<ThemeToken, string>> & Record<string, string>;
-/** The bridge's CSS block for one instance, or `''` when there is nothing to map. */
-export declare function generateTokenBridgeBlock(bridge: TokenBridge | undefined, instanceId: string): string;
-/**
- * The `@media (forced-colors: active)` variable override for one instance.
- *
- * Emitted for every renderer, unconditionally: it costs one inert media block and
- * it is the FLOOR — it protects hosts that never supplied a high-contrast theme
- * and never touched `colorMode`. (The ColorModeController's high-contrast upgrade
- * is the ceiling: a better-looking, fully-checked theme when one exists.)
- *
- * `forced-color-adjust: none` is deliberately NOT set: we are opting IN to the
- * user's colours, not out of them.
- */
-export declare function generateForcedColorsBlock(instanceId: string): string;
-/**
- * `prefers-contrast: more`, in CSS.
- *
- * The ColorModeController swaps in a whole high-contrast THEME when the host gave
- * it one. This block is what a host that did NOT still gets: thicker strokes.
- * Weight is the half of contrast that colour cannot supply — a 1px hairline is
- * not an accessible border however dark it is — and it is the one thing we can
- * safely strengthen without knowing anything about the host's palette.
- */
-export declare function generateContrastPreferenceBlock(instanceId: string): string;
-/**
- * Everything that must sit AFTER the theme's variable block, in cascade order.
- * One string, one `<style>` element, one guaranteed ordering.
- */
-export declare function generateInstanceOverrideCSS(bridge: TokenBridge | undefined, instanceId: string): string;
-export declare function shadcnBridge(options?: {
-    space?: 'hsl' | 'oklch' | 'raw';
-}): TokenBridge;
-/**
- * MUI (Material UI) with CSS-variable theming enabled
- * (`extendTheme` / `CssVarsProvider`, which publishes `--mui-palette-*`).
- */
-export declare function muiBridge(prefix?: string): TokenBridge;
-/**
- * Tailwind v4, whose theme IS a set of CSS variables (`--color-slate-200`, …).
- * `scale` picks the neutral ramp so a host can stay on its own greys.
- */
-export declare function tailwindBridge(options?: {
-    scale?: string;
-    accent?: string;
-}): TokenBridge;
-/** Every token a bridge MAY set — the contract a custom bridge is checked against. */
-export declare const BRIDGEABLE_TOKENS: ThemeToken[];

package/src/libs/renderer/src/themes/token-bridge.js

@@ -1,354 +0,0 @@
-"use strict";
-// Design-token bridge — point Grafloria's variables at the HOST's design system.
-//
-// Styling & theming, Card "design-token bridge + accessibility-aware theming".
-//
-// React Flow's differentiator is "your design system just applies" — but only
-// because its nodes are React components you style with Tailwind/shadcn classes.
-// Our nodes are SVG produced by a framework-agnostic engine, so we cannot inherit
-// that trick. What we CAN do is better: because every value the renderer paints
-// now resolves through `var(--grafloria-*)`, re-pointing those variables at the
-// host's tokens re-skins the ENTIRE engine — in vanilla, in Angular, in any
-// wrapper, without touching a node template.
-//
-//     renderer.setTokenBridge(shadcnBridge());
-//     renderer.setTokenBridge({ 'node.fill': 'var(--my-card-bg)' });   // or by hand
-//
-// The bridge is emitted as a second variable block, scoped to the SAME instance
-// and placed AFTER the theme's block, so it wins by source order at equal
-// specificity. That ordering is the whole mechanism, and it is why the bridge and
-// the accessibility media queries below share one `<style>` element: their
-// relative order has to be guaranteed, not hoped for.
-//
-// CASCADE INSIDE THE VARIABLE BLOCK (later wins):
-//   1. theme variables            (the active Theme)
-//   2. token bridge               (the host's design system)
-//   3. @media (prefers-contrast)  (the user wants more)
-//   4. @media (forced-colors)     (the OS — always the last word)
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BRIDGEABLE_TOKENS = void 0;
-exports.generateTokenBridgeBlock = generateTokenBridgeBlock;
-exports.generateForcedColorsBlock = generateForcedColorsBlock;
-exports.generateContrastPreferenceBlock = generateContrastPreferenceBlock;
-exports.generateInstanceOverrideCSS = generateInstanceOverrideCSS;
-exports.shadcnBridge = shadcnBridge;
-exports.muiBridge = muiBridge;
-exports.tailwindBridge = tailwindBridge;
-const theme_vars_1 = require("./theme-vars");
-const theme_ref_1 = require("./theme-ref");
-const theme_css_1 = require("./theme-css");
-/** Token (or raw custom property) → the custom property it sets. */
-function bridgeVarName(key) {
-    var _a, _b;
-    if (key.startsWith('--'))
-        return key;
-    return (_b = (_a = theme_vars_1.THEME_VARS[key]) === null || _a === void 0 ? void 0 : _a.cssVar) !== null && _b !== void 0 ? _b : (0, theme_ref_1.themeRefVar)(key);
-}
-/** The bridge's CSS block for one instance, or `''` when there is nothing to map. */
-function generateTokenBridgeBlock(bridge, instanceId) {
-    const entries = Object.entries(bridge !== null && bridge !== void 0 ? bridge : {}).filter(([, value]) => typeof value === 'string' && value !== '');
-    if (entries.length === 0)
-        return '';
-    const decls = entries.map(([key, value]) => `  ${bridgeVarName(key)}: ${value};`).join('\n');
-    return `/* Grafloria Renderer — design-token bridge (instance ${instanceId}) */\n${(0, theme_css_1.instanceScopeSelector)(instanceId)} {\n${decls}\n}`;
-}
-// ---------------------------------------------------------------------------
-// forced-colors — the OS gets the last word
-// ---------------------------------------------------------------------------
-/**
- * Under Windows High Contrast (and any `forced-colors: active` mode) the user has
- * declared that THEIR palette wins. The browser force-overrides most CSS colours
- * — but not the ones we paint through custom properties inside inline styles and
- * presentation attributes, which is most of the diagram. Left alone, a forced-
- * colors user gets our theme with the OS's background behind it: unreadable.
- *
- * So we rebind the variables themselves to CSS SYSTEM COLOURS. Because ALL chrome
- * resolves through these variables, one media block re-themes the whole engine —
- * the single clearest payoff of the CSS-variable architecture.
- *
- * `Canvas` / `CanvasText` / `Highlight` / `GrayText` / `LinkText` are the
- * system-colour keywords the OS maps to the user's chosen palette.
- */
-const FORCED_COLOR_VARS = {
-    'node.fill': 'Canvas',
-    'node.stroke': 'CanvasText',
-    'node.selected.fill': 'Canvas',
-    'node.selected.stroke': 'Highlight',
-    'node.highlighted.fill': 'Canvas',
-    'node.highlighted.stroke': 'LinkText',
-    'node.hovered.fill': 'Canvas',
-    'node.hovered.stroke': 'Highlight',
-    'node.disabled.fill': 'Canvas',
-    'node.disabled.stroke': 'GrayText',
-    // The OS palette carries no "error" colour; CanvasText keeps the shape legible
-    // and the ERROR CLASS is still on the element for a host that wants more.
-    'node.error.fill': 'Canvas',
-    'node.error.stroke': 'CanvasText',
-    'link.stroke': 'CanvasText',
-    'link.selected.stroke': 'Highlight',
-    'link.highlighted.stroke': 'LinkText',
-    'link.hovered.stroke': 'Highlight',
-    'label.color': 'CanvasText',
-    'port.fill': 'Canvas',
-    'port.input': 'CanvasText',
-    'port.output': 'CanvasText',
-    'port.bi': 'CanvasText',
-};
-/**
- * The `@media (forced-colors: active)` variable override for one instance.
- *
- * Emitted for every renderer, unconditionally: it costs one inert media block and
- * it is the FLOOR — it protects hosts that never supplied a high-contrast theme
- * and never touched `colorMode`. (The ColorModeController's high-contrast upgrade
- * is the ceiling: a better-looking, fully-checked theme when one exists.)
- *
- * `forced-color-adjust: none` is deliberately NOT set: we are opting IN to the
- * user's colours, not out of them.
- */
-function generateForcedColorsBlock(instanceId) {
-    const decls = Object.entries(FORCED_COLOR_VARS)
-        .map(([token, value]) => `    ${theme_vars_1.THEME_VARS[token].cssVar}: ${value};`)
-        .join('\n');
-    return [
-        `/* Grafloria Renderer — forced-colors (the OS palette wins) */`,
-        `@media (forced-colors: active) {`,
-        `  ${(0, theme_css_1.instanceScopeSelector)(instanceId)} {`,
-        decls,
-        `  }`,
-        `}`,
-    ].join('\n');
-}
-/**
- * `prefers-contrast: more`, in CSS.
- *
- * The ColorModeController swaps in a whole high-contrast THEME when the host gave
- * it one. This block is what a host that did NOT still gets: thicker strokes.
- * Weight is the half of contrast that colour cannot supply — a 1px hairline is
- * not an accessible border however dark it is — and it is the one thing we can
- * safely strengthen without knowing anything about the host's palette.
- */
-function generateContrastPreferenceBlock(instanceId) {
-    return [
-        `/* Grafloria Renderer — prefers-contrast: more (weight, not colour) */`,
-        `@media (prefers-contrast: more) {`,
-        `  ${(0, theme_css_1.instanceScopeSelector)(instanceId)} {`,
-        `    ${theme_vars_1.THEME_VARS['node.strokeWidth'].cssVar}: 2px;`,
-        `    ${theme_vars_1.THEME_VARS['node.selected.strokeWidth'].cssVar}: 4px;`,
-        `    ${theme_vars_1.THEME_VARS['node.highlighted.strokeWidth'].cssVar}: 4px;`,
-        `    ${theme_vars_1.THEME_VARS['link.strokeWidth'].cssVar}: 3px;`,
-        `    ${theme_vars_1.THEME_VARS['link.selected.strokeWidth'].cssVar}: 5px;`,
-        `    ${theme_vars_1.THEME_VARS['link.highlighted.strokeWidth'].cssVar}: 5px;`,
-        `    ${theme_vars_1.THEME_VARS['port.strokeWidth'].cssVar}: 3px;`,
-        `  }`,
-        `}`,
-    ].join('\n');
-}
-/**
- * Everything that must sit AFTER the theme's variable block, in cascade order.
- * One string, one `<style>` element, one guaranteed ordering.
- */
-function generateInstanceOverrideCSS(bridge, instanceId) {
-    return [
-        generateTokenBridgeBlock(bridge, instanceId),
-        generateContrastPreferenceBlock(instanceId),
-        generateForcedColorsBlock(instanceId),
-    ]
-        .filter(Boolean)
-        .join('\n\n');
-}
-// ---------------------------------------------------------------------------
-// Presets — the "one-line adapter" the card asks for
-// ---------------------------------------------------------------------------
-/**
- * shadcn/ui (and any Tailwind app following its convention).
- *
- * shadcn publishes semantic tokens as bare colour COMPONENTS, to be wrapped at
- * the use site: `hsl(var(--primary))` in the classic setup, `oklch(var(--primary))`
- * in the v4 palettes, and a bare `var(--primary)` when the host has switched to
- * full colour values. `space` picks which — that one flag is the whole difference
- * between the generations, so a host never has to hand-write the map.
- */
-/**
- * shadcn's default LIGHT palette, as the raw HSL triplets its docs ship.
- * Every bridge value carries its token's canonical default as the var()
- * FALLBACK: on a host that never defined the variable, an unresolved var()
- * makes the declaration invalid at computed-value time and SVG's initial
- * fill — BLACK — wins (live report: the Tailwind bridge painted every node
- * solid black on a page without Tailwind variables). A design-token bridge
- * must fail soft to its framework's stock palette, never to a black diagram.
- */
-const SHADCN_DEFAULTS = {
-    '--background': { hsl: '0 0% 100%', hex: '#ffffff' },
-    '--foreground': { hsl: '222.2 84% 4.9%', hex: '#020817' },
-    '--card': { hsl: '0 0% 100%', hex: '#ffffff' },
-    '--card-foreground': { hsl: '222.2 84% 4.9%', hex: '#020817' },
-    '--primary': { hsl: '222.2 47.4% 11.2%', hex: '#0f172a' },
-    '--secondary': { hsl: '210 40% 96.1%', hex: '#f1f5f9' },
-    '--muted': { hsl: '210 40% 96.1%', hex: '#f1f5f9' },
-    '--muted-foreground': { hsl: '215.4 16.3% 46.9%', hex: '#64748b' },
-    '--accent': { hsl: '210 40% 96.1%', hex: '#f1f5f9' },
-    '--destructive': { hsl: '0 84.2% 60.2%', hex: '#ef4444' },
-    '--border': { hsl: '214.3 31.8% 91.4%', hex: '#e2e8f0' },
-    '--ring': { hsl: '222.2 84% 4.9%', hex: '#020817' },
-};
-function shadcnBridge(options = {}) {
-    var _a;
-    const space = (_a = options.space) !== null && _a !== void 0 ? _a : 'hsl';
-    const ref = (token) => {
-        const fallback = SHADCN_DEFAULTS[token];
-        // oklch hosts opted in explicitly and define their own variables — an HSL
-        // triplet fallback would be invalid inside oklch(), so none is emitted.
-        if (space === 'oklch')
-            return `oklch(var(${token}))`;
-        if (space === 'raw')
-            return fallback ? `var(${token}, ${fallback.hex})` : `var(${token})`;
-        return fallback ? `hsl(var(${token}, ${fallback.hsl}))` : `hsl(var(${token}))`;
-    };
-    return {
-        'node.fill': ref('--card'),
-        'node.stroke': ref('--border'),
-        'node.selected.fill': ref('--accent'),
-        'node.selected.stroke': ref('--ring'),
-        'node.highlighted.fill': ref('--accent'),
-        'node.highlighted.stroke': ref('--primary'),
-        'node.hovered.fill': ref('--muted'),
-        'node.hovered.stroke': ref('--border'),
-        'node.disabled.fill': ref('--muted'),
-        'node.disabled.stroke': ref('--border'),
-        'node.error.fill': ref('--card'),
-        'node.error.stroke': ref('--destructive'),
-        // Edges are CONTENT strokes, not card hairlines: shadcn's --border sits at
-        // ~91% lightness and edges painted with it vanish on white (the certify
-        // pass read the themed graph as broken contrast). --muted-foreground is
-        // shadcn's own "readable but muted line" token.
-        'link.stroke': ref('--muted-foreground'),
-        'link.selected.stroke': ref('--ring'),
-        'link.highlighted.stroke': ref('--primary'),
-        'link.hovered.stroke': ref('--foreground'),
-        'label.color': ref('--card-foreground'),
-        'label.fontFamily': 'var(--font-sans, ui-sans-serif, system-ui, sans-serif)',
-        'port.fill': ref('--background'),
-        'port.input': ref('--primary'),
-        'port.output': ref('--secondary'),
-        'port.bi': ref('--accent'),
-    };
-}
-/**
- * MUI (Material UI) with CSS-variable theming enabled
- * (`extendTheme` / `CssVarsProvider`, which publishes `--mui-palette-*`).
- */
-function muiBridge(prefix = '--mui') {
-    // Material's default LIGHT palette, as the var() fallbacks — see the note on
-    // SHADCN_DEFAULTS: a host without CssVarsProvider must degrade to stock
-    // Material, not to a black diagram.
-    const MUI = {
-        'palette-background-paper': '#ffffff',
-        'palette-background-default': '#ffffff',
-        'palette-divider': 'rgba(0, 0, 0, 0.12)',
-        'palette-primary-main': '#1976d2',
-        'palette-secondary-main': '#9c27b0',
-        'palette-text-primary': 'rgba(0, 0, 0, 0.87)',
-        'palette-text-secondary': 'rgba(0, 0, 0, 0.6)',
-        'palette-action-selected': 'rgba(0, 0, 0, 0.08)',
-        'palette-action-hover': 'rgba(0, 0, 0, 0.04)',
-        'palette-action-disabledBackground': 'rgba(0, 0, 0, 0.12)',
-        'palette-action-disabled': 'rgba(0, 0, 0, 0.26)',
-        'palette-error-light': '#ef5350',
-        'palette-error-main': '#d32f2f',
-        'palette-warning-main': '#ed6c02',
-        'palette-success-main': '#2e7d32',
-        'palette-info-main': '#0288d1',
-        'font-body1': 'Roboto, Helvetica, Arial, sans-serif',
-    };
-    const v = (token) => `var(${prefix}-${token}, ${MUI[token]})`;
-    return {
-        'node.fill': v('palette-background-paper'),
-        'node.stroke': v('palette-divider'),
-        'node.selected.fill': v('palette-action-selected'),
-        'node.selected.stroke': v('palette-primary-main'),
-        'node.highlighted.fill': v('palette-action-hover'),
-        'node.highlighted.stroke': v('palette-warning-main'),
-        'node.hovered.fill': v('palette-action-hover'),
-        'node.hovered.stroke': v('palette-text-secondary'),
-        'node.disabled.fill': v('palette-action-disabledBackground'),
-        'node.disabled.stroke': v('palette-action-disabled'),
-        'node.error.fill': v('palette-error-light'),
-        'node.error.stroke': v('palette-error-main'),
-        'link.stroke': v('palette-divider'),
-        'link.selected.stroke': v('palette-primary-main'),
-        'link.highlighted.stroke': v('palette-warning-main'),
-        'link.hovered.stroke': v('palette-text-secondary'),
-        'label.color': v('palette-text-primary'),
-        'label.fontFamily': v('font-body1'),
-        'port.fill': v('palette-background-default'),
-        'port.input': v('palette-success-main'),
-        'port.output': v('palette-warning-main'),
-        'port.bi': v('palette-info-main'),
-    };
-}
-/**
- * Tailwind v4, whose theme IS a set of CSS variables (`--color-slate-200`, …).
- * `scale` picks the neutral ramp so a host can stay on its own greys.
- */
-function tailwindBridge(options = {}) {
-    var _a, _b;
-    const n = (_a = options.scale) !== null && _a !== void 0 ? _a : 'slate';
-    const a = (_b = options.accent) !== null && _b !== void 0 ? _b : 'blue';
-    // Tailwind's stock palette, as the var() fallbacks — see SHADCN_DEFAULTS for
-    // why: a host WITHOUT Tailwind v4's `--color-*` theme variables (v3 has none
-    // at runtime at all) must degrade to the stock ramp, not to a black diagram.
-    const TW = {
-        'white': '#ffffff',
-        'slate-50': '#f8fafc', 'slate-100': '#f1f5f9', 'slate-200': '#e2e8f0', 'slate-300': '#cbd5e1',
-        'slate-400': '#94a3b8', 'slate-500': '#64748b', 'slate-900': '#0f172a',
-        'gray-50': '#f9fafb', 'gray-100': '#f3f4f6', 'gray-200': '#e5e7eb', 'gray-300': '#d1d5db',
-        'gray-400': '#9ca3af', 'gray-500': '#6b7280', 'gray-900': '#111827',
-        'zinc-50': '#fafafa', 'zinc-100': '#f4f4f5', 'zinc-200': '#e4e4e7', 'zinc-300': '#d4d4d8',
-        'zinc-400': '#a1a1aa', 'zinc-500': '#71717a', 'zinc-900': '#18181b',
-        'neutral-50': '#fafafa', 'neutral-100': '#f5f5f5', 'neutral-200': '#e5e5e5', 'neutral-300': '#d4d4d4',
-        'neutral-400': '#a3a3a3', 'neutral-500': '#737373', 'neutral-900': '#171717',
-        'stone-50': '#fafaf9', 'stone-100': '#f5f5f4', 'stone-200': '#e7e5e4', 'stone-300': '#d6d3d1',
-        'stone-400': '#a8a29e', 'stone-500': '#78716c', 'stone-900': '#1c1917',
-        'blue-50': '#eff6ff', 'blue-600': '#2563eb',
-        'indigo-50': '#eef2ff', 'indigo-600': '#4f46e5',
-        'violet-50': '#f5f3ff', 'violet-500': '#8b5cf6', 'violet-600': '#7c3aed',
-        'emerald-50': '#ecfdf5', 'emerald-500': '#10b981', 'emerald-600': '#059669',
-        'rose-50': '#fff1f2', 'rose-600': '#e11d48',
-        'amber-100': '#fef3c7', 'amber-500': '#f59e0b',
-        'red-100': '#fee2e2', 'red-500': '#ef4444',
-    };
-    // A custom ramp we do not carry hexes for falls back to slate/blue at the
-    // same step — a neutral approximation, never black.
-    const tw = (name) => {
-        var _a, _b;
-        const fallback = (_b = (_a = TW[name]) !== null && _a !== void 0 ? _a : TW[name.replace(/^[a-z]+-(?=\d)/, 'slate-')]) !== null && _b !== void 0 ? _b : TW[name.replace(/^[a-z]+-(?=\d)/, 'blue-')];
-        return fallback ? `var(--color-${name}, ${fallback})` : `var(--color-${name})`;
-    };
-    return {
-        'node.fill': tw('white'),
-        'node.stroke': tw(`${n}-300`),
-        'node.selected.fill': tw(`${a}-50`),
-        'node.selected.stroke': tw(`${a}-600`),
-        'node.highlighted.fill': tw('amber-100'),
-        'node.highlighted.stroke': tw('amber-500'),
-        'node.hovered.fill': tw(`${n}-50`),
-        'node.hovered.stroke': tw(`${n}-400`),
-        'node.disabled.fill': tw(`${n}-100`),
-        'node.disabled.stroke': tw(`${n}-200`),
-        'node.error.fill': tw('red-100'),
-        'node.error.stroke': tw('red-500'),
-        'link.stroke': tw(`${n}-400`),
-        'link.selected.stroke': tw(`${a}-600`),
-        'link.highlighted.stroke': tw('amber-500'),
-        'link.hovered.stroke': tw(`${n}-500`),
-        'label.color': tw(`${n}-900`),
-        'label.fontFamily': 'var(--font-sans, ui-sans-serif, system-ui, sans-serif)',
-        'port.fill': tw('white'),
-        'port.input': tw('emerald-500'),
-        'port.output': tw('amber-500'),
-        'port.bi': tw('violet-500'),
-    };
-}
-/** Every token a bridge MAY set — the contract a custom bridge is checked against. */
-exports.BRIDGEABLE_TOKENS = Object.keys(theme_vars_1.THEME_VARS);
-//# sourceMappingURL=token-bridge.js.map

package/src/libs/renderer/src/types/geometry.types.d.ts

@@ -1,10 +0,0 @@
-/**
- * Rectangle defined by position and size
- * Used for viewport queries and rendering bounds
- */
-export interface Rectangle {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}

package/src/libs/renderer/src/types/geometry.types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=geometry.types.js.map

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

@@ -1,5 +0,0 @@
-export * from './geometry.types';
-export * from './vnode.types';
-export * from './renderer.interface';
-export * from './theme.types';
-export * from './property-schema';

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

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// Geometry types
-tslib_1.__exportStar(require("./geometry.types"), exports);
-// VNode types
-tslib_1.__exportStar(require("./vnode.types"), exports);
-// Renderer interface
-tslib_1.__exportStar(require("./renderer.interface"), exports);
-// Theme types
-tslib_1.__exportStar(require("./theme.types"), exports);
-// Property schema types
-tslib_1.__exportStar(require("./property-schema"), exports);
-//# sourceMappingURL=index.js.map