@xenolithengine/graph-theme-xen 0.7.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 strelok2012
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @xenolithengine/graph-theme-xen
+
+[![BETA](https://img.shields.io/badge/status-BETA-FCB400?style=flat-square)](https://github.com/XenolithEngine/xenolith-graph#status)
+[![MIT](https://img.shields.io/badge/license-MIT-FCB400?style=flat-square)](https://github.com/XenolithEngine/xenolith-graph/blob/main/LICENSE)
+
+**Xen** — the default original design system for XenolithGraph.
+
+> **Beta** — public API in `STABLE-API.md` is the surface we plan to freeze, but it is **NOT frozen yet** — breaking changes can land at any point before v1.0. If you adopt now, pin an exact version.
+
+A dark, gold-accented visual language with typed pins (circle / empty-circle / chevron), four category-coloured headers (logic green / data blue / macro purple / utility white), and glassmorphic header effects.
+
+The Figma source is the canonical authority for all visuals. Static reference assets — including the SVG export and screenshots of all node variants — live under `reference/`.
+
+## Usage
+
+```ts
+import { xenTokens } from '@xenolithengine/graph-theme-xen'
+import { Editor } from '@xenolithengine/graph-editor'
+
+const editor = new Editor({ theme: xenTokens })
+```
+
+Partial overrides:
+
+```ts
+const editor = new Editor({
+  theme: {
+    ...xenTokens,
+    pinType: {
+      ...xenTokens.pinType,
+      float: { ...xenTokens.pinType.float, color: '#7FE067' },
+    },
+  },
+})
+```
+
+## Design rules
+
+- **Edge colour follows the source pin's type colour.** A green-out pin produces a green wire. This is an invariant of the Xen system.
+- **Selected nodes** wear a 1 px white border with a soft white glow. **Hovered nodes** wear a 1 px brand-yellow border with a soft yellow glow.
+- **Pin shapes carry meaning.** Filled circle — typed value. Empty circle — typed but unconnected (`wildcard`). Chevron — `exec` flow pin.
+- **Header backdrop blur** is rendered to a cached texture at theme load — it is not recomputed per frame. See ADR-0004.
+- **Pill nodes** are the collapsed-summary form of any standard node, carrying only essential pins and a horizontal accent glow.

package/dist/fonts.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Register Inter (Regular / SemiBold / Bold) with the document's font set from the WOFF2 files
+ * shipped inside this package. Call once at application start, before rendering any text.
+ *
+ * Bundlers that understand `new URL(..., import.meta.url)` (Vite ≥ 4, webpack 5, esbuild, Rollup
+ * with `@rollup/plugin-url`) emit the WOFF2 as a static asset and rewrite the URL. No external
+ * CDN is contacted; the fonts ride in the npm package.
+ *
+ * Subsequent calls return the same promise — safe to invoke multiple times.
+ *
+ * In non-DOM environments (Node, SSR) this resolves immediately as a no-op.
+ */
+export declare function loadXenFonts(): Promise<void>;
+//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAcA;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CA4B5C"}

package/dist/fonts.js

@@ -0,0 +1,43 @@
+const VARIANTS = [
+    { weight: 400, style: 'normal', file: 'Inter-Regular.woff2' },
+    { weight: 600, style: 'normal', file: 'Inter-SemiBold.woff2' },
+    { weight: 700, style: 'normal', file: 'Inter-Bold.woff2' },
+];
+let loadPromise = null;
+/**
+ * Register Inter (Regular / SemiBold / Bold) with the document's font set from the WOFF2 files
+ * shipped inside this package. Call once at application start, before rendering any text.
+ *
+ * Bundlers that understand `new URL(..., import.meta.url)` (Vite ≥ 4, webpack 5, esbuild, Rollup
+ * with `@rollup/plugin-url`) emit the WOFF2 as a static asset and rewrite the URL. No external
+ * CDN is contacted; the fonts ride in the npm package.
+ *
+ * Subsequent calls return the same promise — safe to invoke multiple times.
+ *
+ * In non-DOM environments (Node, SSR) this resolves immediately as a no-op.
+ */
+export function loadXenFonts() {
+    if (typeof document === 'undefined' || typeof FontFace === 'undefined') {
+        return Promise.resolve();
+    }
+    if (loadPromise)
+        return loadPromise;
+    loadPromise = (async () => {
+        await Promise.all(VARIANTS.map(async ({ weight, style, file }) => {
+            const url = new URL(`./fonts/${file}`, import.meta.url).href;
+            const face = new FontFace('Inter', `url(${url}) format("woff2")`, {
+                weight: String(weight),
+                style,
+                display: 'swap',
+            });
+            await face.load();
+            document.fonts.add(face);
+        }));
+        // `face.load()` resolves when the binary is available, but Canvas2D text measurement only
+        // picks up the new face after `document.fonts.ready` resolves. Without this await PIXI Text
+        // can fall back to the next family in the list during the first measure pass.
+        await document.fonts.ready;
+    })();
+    return loadPromise;
+}
+//# sourceMappingURL=fonts.js.map

package/dist/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAMA,MAAM,QAAQ,GAA2B;IACvC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,qBAAqB,EAAE;IAC7D,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC9D,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAE;CAC3D,CAAA;AAED,IAAI,WAAW,GAAyB,IAAI,CAAA;AAE5C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACvE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;IACD,IAAI,WAAW;QAAE,OAAO,WAAW,CAAA;IAEnC,WAAW,GAAG,CAAC,KAAK,IAAI,EAAE;QACxB,MAAM,OAAO,CAAC,GAAG,CACf,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;YAC7C,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,WAAW,IAAI,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;YAC5D,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,mBAAmB,EAAE;gBAChE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;gBACtB,KAAK;gBACL,OAAO,EAAE,MAAM;aAChB,CAAC,CAAA;YACF,MAAM,IAAI,CAAC,IAAI,EAAE,CAGhB;YAAC,QAAQ,CAAC,KAA+C,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACtE,CAAC,CAAC,CACH,CAAA;QACD,0FAA0F;QAC1F,4FAA4F;QAC5F,8EAA8E;QAC9E,MAAM,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAA;IAC5B,CAAC,CAAC,EAAE,CAAA;IAEJ,OAAO,WAAW,CAAA;AACpB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import type { XenTokens } from './types.js';
+export declare const xenTokens: XenTokens;
+export declare const VERSION: string;
+export { loadXenFonts } from './fonts.js';
+export { mergeTheme } from './merge.js';
+export type { DeepPartial } from './merge.js';
+export type { XenTokens, XenCategoryMap, XenPinTypeMap, XenSurfaceColors, PinTypeToken, CategoryToken, StateStyle, PinShape, TypographyStyle, ShadowStyle, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,eAAO,MAAM,SAAS,EAAwB,SAAS,CAAA;AAEvD,eAAO,MAAM,OAAO,QAAoB,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,YAAY,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,WAAW,GACZ,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,6 @@
+import tokens from './tokens.json' with { type: 'json' };
+export const xenTokens = tokens;
+export const VERSION = xenTokens.version;
+export { loadXenFonts } from './fonts.js';
+export { mergeTheme } from './merge.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AAGxD,MAAM,CAAC,MAAM,SAAS,GAAG,MAA8B,CAAA;AAEvD,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/merge.d.ts

@@ -0,0 +1,12 @@
+import type { XenTokens } from './types.js';
+/** Recursively-optional version of `XenTokens` for partial overrides. */
+export type DeepPartial<T> = T extends ReadonlyArray<infer _> ? T : T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+/**
+ * Produce a new `XenTokens` with `override` deep-merged into `base`. Plain-object branches are
+ * merged recursively; arrays, strings, and numbers in `override` replace whole values. Always
+ * returns a new object — the base is never mutated.
+ */
+export declare function mergeTheme(base: XenTokens, override: DeepPartial<XenTokens>): XenTokens;
+//# sourceMappingURL=merge.d.ts.map

package/dist/merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../src/merge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,yEAAyE;AACzE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GACzD,CAAC,GACD,CAAC,SAAS,MAAM,GACd;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAA;AA0BP;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,SAAS,CAKvF"}

package/dist/merge.js

@@ -0,0 +1,31 @@
+function isPlainObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        (value.constructor === Object || value.constructor === undefined));
+}
+function mergeDeep(base, override) {
+    const result = { ...base };
+    for (const key of Object.keys(override)) {
+        const o = override[key];
+        if (o === undefined)
+            continue;
+        const b = base[key];
+        if (isPlainObject(o) && isPlainObject(b)) {
+            result[key] = mergeDeep(b, o);
+        }
+        else {
+            result[key] = o;
+        }
+    }
+    return result;
+}
+/**
+ * Produce a new `XenTokens` with `override` deep-merged into `base`. Plain-object branches are
+ * merged recursively; arrays, strings, and numbers in `override` replace whole values. Always
+ * returns a new object — the base is never mutated.
+ */
+export function mergeTheme(base, override) {
+    return mergeDeep(base, override);
+}
+//# sourceMappingURL=merge.js.map

package/dist/merge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.js","sourceRoot":"","sources":["../src/merge.ts"],"names":[],"mappings":"AASA,SAAS,aAAa,CAAC,KAAc;IACnC,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB,CAAC,KAAK,CAAC,WAAW,KAAK,MAAM,IAAI,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAClE,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAoC,IAAO,EAAE,QAAiC;IAC9F,MAAM,MAAM,GAA4B,EAAE,GAAG,IAAI,EAAE,CAAA;IACnD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACxC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAA;QACvB,IAAI,CAAC,KAAK,SAAS;YAAE,SAAQ;QAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;QACnB,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACzC,MAAM,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACjB,CAAC;IACH,CAAC;IACD,OAAO,MAAW,CAAA;AACpB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,IAAe,EAAE,QAAgC;IAC1E,OAAO,SAAS,CACd,IAA0C,EAC1C,QAA8C,CACvB,CAAA;AAC3B,CAAC"}

package/dist/tokens.json

@@ -0,0 +1,288 @@
+{
+    "$schema": "./tokens.schema.json",
+    "name": "xen",
+    "version": "0.7.0-beta.0",
+    "color": {
+        "brand": {
+            "primary": "#FCB400",
+            "primaryDark": "#C28B00",
+            "primaryDeep": "#68531D",
+            "primaryLight": "#FFDF67",
+            "primaryPale": "#FFEDA8",
+            "primaryAlpha20": "rgba(252, 180, 0, 0.2)",
+            "primaryAlpha30": "rgba(252, 180, 0, 0.3)",
+            "primaryAlpha50": "rgba(252, 180, 0, 0.5)",
+            "primaryAlpha60": "rgba(255, 237, 168, 0.6)"
+        },
+        "surface": {
+            "canvas": "#1A1A1A",
+            "node": "#0F110E",
+            "panel": "#191919",
+            "elevated": "#232323",
+            "muted": "#292929",
+            "subtle": "#363636",
+            "outline": "#424242",
+            "divider": "#363636",
+            "headerEnd": "#30342E"
+        },
+        "text": {
+            "primary": "#FFFFFF",
+            "secondary": "#B8B8B8",
+            "muted": "rgba(255, 255, 255, 0.5)",
+            "disabled": "rgba(255, 255, 255, 0.3)"
+        },
+        "alpha": {
+            "white10": "rgba(255, 255, 255, 0.1)",
+            "white20": "rgba(255, 255, 255, 0.2)",
+            "white30": "rgba(255, 255, 255, 0.3)",
+            "white50": "rgba(255, 255, 255, 0.5)",
+            "dark50": "rgba(71, 71, 71, 0.5)"
+        },
+        "minimap": {
+            "background": "rgba(20, 20, 20, 0.85)",
+            "border": "#424242",
+            "node": "rgba(255, 255, 255, 0.32)",
+            "frame": "rgba(252, 180, 0, 0.14)",
+            "frameBorder": "#FCB400"
+        },
+        "widget": {
+            "bg": "rgba(255, 255, 255, 0.045)",
+            "bgHover": "rgba(255, 255, 255, 0.09)",
+            "bgFocused": "#0F110E",
+            "track": "rgba(255, 255, 255, 0.08)",
+            "fill": "#FCB400",
+            "fillAlpha": 0.55,
+            "text": "#FFFFFF",
+            "label": "#B8B8B8",
+            "placeholder": "rgba(255, 255, 255, 0.35)",
+            "border": "rgba(255, 255, 255, 0.12)",
+            "borderFocused": "#FCB400",
+            "selection": "rgba(252, 180, 0, 0.35)",
+            "knob": "#FFFFFF"
+        }
+    },
+    "pinType": {
+        "exec": {
+            "label": "Exec",
+            "color": "#FCB400",
+            "shape": "chevron",
+            "edgeColor": "#FCB400",
+            "edgeWidth": 3,
+            "note": "Imperative flow. Carries no value, only ordering."
+        },
+        "float": {
+            "label": "Float",
+            "color": "#85C244",
+            "shape": "circle",
+            "edgeColor": "#85C244",
+            "edgeWidth": 2
+        },
+        "object": {
+            "label": "Object",
+            "color": "#3E95B9",
+            "shape": "circle",
+            "edgeColor": "#3E95B9",
+            "edgeWidth": 2
+        },
+        "string": {
+            "label": "String",
+            "color": "#FF5622",
+            "shape": "circle",
+            "edgeColor": "#FF5622",
+            "edgeWidth": 2
+        },
+        "any": {
+            "label": "Any",
+            "color": "#FFFFFF",
+            "shape": "circle",
+            "edgeColor": "#FFFFFF",
+            "edgeWidth": 2
+        },
+        "wildcard": {
+            "label": "Wildcard",
+            "color": "#9AD6E3",
+            "shape": "circle-empty",
+            "edgeColor": "#9AD6E3",
+            "edgeWidth": 2,
+            "note": "Typed but unconnected; renders with outline only, no fill."
+        }
+    },
+    "category": {
+        "logic": {
+            "label": "Logic",
+            "accent": "#85C244",
+            "gradient": "linear-gradient(90deg, rgba(133, 194, 68, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+        },
+        "data": {
+            "label": "Data",
+            "accent": "#3E95B9",
+            "gradient": "linear-gradient(90deg, rgba(62, 149, 185, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+        },
+        "macro": {
+            "label": "Macro",
+            "accent": "#8A38F5",
+            "gradient": "linear-gradient(90deg, rgba(138, 56, 245, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+        },
+        "utility": {
+            "label": "Utility",
+            "accent": "#FFFFFF",
+            "gradient": "linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+        }
+    },
+    "pill": {
+        "orange": "linear-gradient(90deg, rgba(15, 17, 14, 0.5) 12.63%, rgba(255, 86, 34, 0.3) 51.57%, rgba(15, 17, 14, 0.5) 90.91%), #0F110E",
+        "green": "linear-gradient(90deg, rgba(15, 17, 14, 0.5) 12.63%, rgba(133, 194, 68, 0.3) 51.57%, rgba(15, 17, 14, 0.5) 90.91%), #0F110E"
+    },
+    "state": {
+        "hover": {
+            "border": "#FCB400",
+            "borderWidth": 1,
+            "glow": "rgba(252, 180, 0, 0.52)",
+            "glowBlur": 4
+        },
+        "selected": {
+            "border": "#FFFFFF",
+            "borderWidth": 1,
+            "glow": "rgba(255, 255, 255, 0.4)",
+            "glowBlur": 5
+        },
+        "active": {
+            "border": "#FFDF67",
+            "borderWidth": 1,
+            "glow": "rgba(252, 180, 0, 0.64)",
+            "glowBlur": 6
+        },
+        "disabled": {
+            "opacity": 0.4
+        }
+    },
+    "geometry": {
+        "node": {
+            "radius": 7,
+            "minWidth": 150,
+            "headerHeight": 21,
+            "headerPadding": 2,
+            "innerPaddingX": 4,
+            "innerPaddingY": 4,
+            "pillRadius": 20,
+            "pillHeight": 40,
+            "pillMinWidth": 140
+        },
+        "pin": {
+            "diameter": 8,
+            "stroke": 1,
+            "strokeColor": "#1A1A1A",
+            "labelGap": 7,
+            "rowSpacing": 10,
+            "rowHeight": 11,
+            "hitPadding": 4,
+            "chevronExecWidth": 10,
+            "chevronExecHeight": 8
+        },
+        "header": {
+            "toPinsGap": 15,
+            "chevronSize": 16,
+            "titleGap": 5
+        },
+        "edge": {
+            "width": 2,
+            "execWidth": 3,
+            "bezierTension": 0.5,
+            "minHorizontalSpread": 50,
+            "hitPadding": 6,
+            "pulseEnabled": true,
+            "midpointRadius": 3.5,
+            "arrowSize": 9
+        },
+        "comment": {
+            "headerHeight": 21,
+            "minWidth": 120,
+            "minHeight": 80
+        },
+        "reroute": {
+            "radius": 11,
+            "ringWidth": 2
+        },
+        "widget": {
+            "rowHeight": 22,
+            "gap": 6,
+            "controlMinWidth": 64,
+            "radius": 5,
+            "paddingX": 8,
+            "paddingY": 4,
+            "borderWidth": 1,
+            "toggleWidth": 30,
+            "toggleHeight": 16
+        },
+        "minimap": {
+            "width": 210,
+            "height": 150,
+            "margin": 14,
+            "radius": 10,
+            "padding": 10,
+            "borderWidth": 1,
+            "nodeRadius": 1.5
+        }
+    },
+    "typography": {
+        "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+        "heading": {
+            "size": 12,
+            "weight": 700,
+            "lineHeight": 14,
+            "color": "#FFFFFF",
+            "tracking": 0
+        },
+        "label": {
+            "size": 10,
+            "weight": 400,
+            "lineHeight": 11,
+            "color": "#FFFFFF",
+            "tracking": 0
+        },
+        "comment": {
+            "size": 14,
+            "weight": 600,
+            "lineHeight": 18,
+            "color": "#FFFFFF",
+            "tracking": 0
+        }
+    },
+    "effect": {
+        "headerInnerShadow": {
+            "offsetX": 0,
+            "offsetY": 3,
+            "blur": 6,
+            "color": "rgba(255, 255, 255, 0.5)"
+        },
+        "pillInnerShadow": {
+            "offsetX": 0,
+            "offsetY": 4,
+            "blur": 4,
+            "color": "rgba(255, 255, 255, 0.15)"
+        },
+        "headerBackdropBlur": 4,
+        "pillBackdropBlur": 2,
+        "headerHighlightGradient": "linear-gradient(180deg, #FFFFFF 14.29%, rgba(153, 153, 153, 0) 57.14%)",
+        "headerHighlightStroke": "linear-gradient(180deg, #FFFFFF 0%, rgba(153, 153, 153, 0) 100%)",
+        "nodeDropShadow": {
+            "offsetX": 0,
+            "offsetY": 8,
+            "blur": 18,
+            "color": "rgba(0, 0, 0, 0.85)"
+        }
+    },
+    "background": {
+        "color": "#1A1A1A",
+        "grid": {
+            "kind": "dots",
+            "spacing": 24,
+            "size": 1,
+            "color": "rgba(255, 255, 255, 0.3)"
+        }
+    },
+    "edgeRouting": {
+        "rule": "edgeColorFollowsSourcePinType",
+        "note": "Invariant: every edge inherits the colour of its source pin's type. Per-edge overrides are allowed but discouraged outside special UI states (e.g. error highlighting)."
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,208 @@
+export type PinShape = 'circle' | 'circle-empty' | 'chevron';
+export interface PinTypeToken {
+    label: string;
+    color: string;
+    shape: PinShape;
+    edgeColor: string;
+    edgeWidth: number;
+    note?: string;
+}
+export interface CategoryToken {
+    label: string;
+    accent: string;
+    gradient: string;
+}
+export interface StateStyle {
+    border?: string;
+    borderWidth?: number;
+    glow?: string;
+    glowBlur?: number;
+    /** Width of the stroke that seeds the blurred glow halo. Wider stroke = brighter halo at
+     *  equal alpha (more source energy under the gaussian). Default 3. */
+    glowWidth?: number;
+    opacity?: number;
+}
+export interface XenSurfaceColors {
+    canvas: string;
+    node: string;
+    panel: string;
+    elevated: string;
+    muted: string;
+    subtle: string;
+    outline: string;
+    divider: string;
+    headerEnd: string;
+}
+export interface XenPinTypeMap {
+    exec: PinTypeToken;
+    float: PinTypeToken;
+    object: PinTypeToken;
+    string: PinTypeToken;
+    any: PinTypeToken;
+    wildcard: PinTypeToken;
+}
+export interface XenCategoryMap {
+    logic: CategoryToken;
+    data: CategoryToken;
+    macro: CategoryToken;
+    utility: CategoryToken;
+}
+export interface XenTokens {
+    name: 'xen';
+    version: string;
+    color: {
+        brand: Record<string, string>;
+        surface: XenSurfaceColors;
+        text: {
+            primary: string;
+            secondary: string;
+            muted: string;
+            disabled: string;
+        };
+        alpha: Record<string, string>;
+        minimap: {
+            background: string;
+            border: string;
+            node: string;
+            frame: string;
+            frameBorder: string;
+        };
+        widget: {
+            bg: string;
+            bgHover: string;
+            bgFocused: string;
+            track: string;
+            fill: string;
+            fillAlpha: number;
+            text: string;
+            label: string;
+            placeholder: string;
+            border: string;
+            borderFocused: string;
+            selection: string;
+            knob: string;
+        };
+    };
+    pinType: XenPinTypeMap;
+    category: XenCategoryMap;
+    pill: Record<string, string>;
+    state: {
+        hover: StateStyle;
+        selected: StateStyle;
+        active: StateStyle;
+        disabled: StateStyle;
+    };
+    geometry: {
+        node: {
+            radius: number;
+            minWidth: number;
+            headerHeight: number;
+            headerPadding: number;
+            innerPaddingX: number;
+            innerPaddingY: number;
+            pillRadius: number;
+            pillHeight: number;
+            pillMinWidth: number;
+        };
+        pin: {
+            diameter: number;
+            stroke: number;
+            strokeColor: string;
+            labelGap: number;
+            rowSpacing: number;
+            rowHeight: number;
+            hitPadding: number;
+            chevronExecWidth: number;
+            chevronExecHeight: number;
+        };
+        header: {
+            toPinsGap: number;
+            chevronSize: number;
+            titleGap: number;
+        };
+        edge: {
+            width: number;
+            execWidth: number;
+            bezierTension: number;
+            minHorizontalSpread: number;
+            hitPadding: number;
+            pulseEnabled: boolean;
+            midpointRadius: number;
+            arrowSize: number;
+        };
+        comment: {
+            /** Corner radius. Omit to inherit the node radius (so a comment frame reads 1:1 with a node
+             *  header in any theme); set it to deliberately diverge. */
+            radius?: number;
+            headerHeight: number;
+            minWidth: number;
+            minHeight: number;
+        };
+        reroute: {
+            radius: number;
+            ringWidth: number;
+        };
+        widget: {
+            rowHeight: number;
+            gap: number;
+            controlMinWidth: number;
+            radius: number;
+            paddingX: number;
+            paddingY: number;
+            borderWidth: number;
+            toggleWidth: number;
+            toggleHeight: number;
+        };
+        minimap: {
+            width: number;
+            height: number;
+            margin: number;
+            radius: number;
+            padding: number;
+            borderWidth: number;
+            nodeRadius: number;
+        };
+    };
+    typography: {
+        fontFamily: string;
+        heading: TypographyStyle;
+        label: TypographyStyle;
+        comment: TypographyStyle;
+    };
+    effect: {
+        headerInnerShadow: ShadowStyle;
+        pillInnerShadow: ShadowStyle;
+        headerBackdropBlur: number;
+        pillBackdropBlur: number;
+        headerHighlightGradient: string;
+        headerHighlightStroke: string;
+        nodeDropShadow: ShadowStyle;
+    };
+    background: {
+        color: string;
+        grid: {
+            kind: 'dots' | 'lines';
+            spacing: number;
+            size: number;
+            color: string;
+        };
+    };
+    edgeRouting: {
+        rule: string;
+        note: string;
+    };
+}
+export interface TypographyStyle {
+    size: number;
+    weight: number;
+    lineHeight: number;
+    color: string;
+    tracking: number;
+}
+export interface ShadowStyle {
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    color: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,cAAc,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,QAAQ,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;0EACsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,CAAA;IAClB,KAAK,EAAE,YAAY,CAAA;IACnB,MAAM,EAAE,YAAY,CAAA;IACpB,MAAM,EAAE,YAAY,CAAA;IACpB,GAAG,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,CAAA;IACpB,IAAI,EAAE,aAAa,CAAA;IACnB,KAAK,EAAE,aAAa,CAAA;IACpB,OAAO,EAAE,aAAa,CAAA;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,KAAK,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC7B,OAAO,EAAE,gBAAgB,CAAA;QACzB,IAAI,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;QAC7E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC7B,OAAO,EAAE;YACP,UAAU,EAAE,MAAM,CAAA;YAClB,MAAM,EAAE,MAAM,CAAA;YACd,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE,MAAM,CAAA;YACb,WAAW,EAAE,MAAM,CAAA;SACpB,CAAA;QACD,MAAM,EAAE;YACN,EAAE,EAAE,MAAM,CAAA;YACV,OAAO,EAAE,MAAM,CAAA;YACf,SAAS,EAAE,MAAM,CAAA;YACjB,KAAK,EAAE,MAAM,CAAA;YACb,IAAI,EAAE,MAAM,CAAA;YACZ,SAAS,EAAE,MAAM,CAAA;YACjB,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE,MAAM,CAAA;YACb,WAAW,EAAE,MAAM,CAAA;YACnB,MAAM,EAAE,MAAM,CAAA;YACd,aAAa,EAAE,MAAM,CAAA;YACrB,SAAS,EAAE,MAAM,CAAA;YACjB,IAAI,EAAE,MAAM,CAAA;SACb,CAAA;KACF,CAAA;IACD,OAAO,EAAE,aAAa,CAAA;IACtB,QAAQ,EAAE,cAAc,CAAA;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAA;QACjB,QAAQ,EAAE,UAAU,CAAA;QACpB,MAAM,EAAE,UAAU,CAAA;QAClB,QAAQ,EAAE,UAAU,CAAA;KACrB,CAAA;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAA;YACd,QAAQ,EAAE,MAAM,CAAA;YAChB,YAAY,EAAE,MAAM,CAAA;YACpB,aAAa,EAAE,MAAM,CAAA;YACrB,aAAa,EAAE,MAAM,CAAA;YACrB,aAAa,EAAE,MAAM,CAAA;YACrB,UAAU,EAAE,MAAM,CAAA;YAClB,UAAU,EAAE,MAAM,CAAA;YAClB,YAAY,EAAE,MAAM,CAAA;SACrB,CAAA;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,MAAM,CAAA;YAChB,MAAM,EAAE,MAAM,CAAA;YACd,WAAW,EAAE,MAAM,CAAA;YACnB,QAAQ,EAAE,MAAM,CAAA;YAChB,UAAU,EAAE,MAAM,CAAA;YAClB,SAAS,EAAE,MAAM,CAAA;YACjB,UAAU,EAAE,MAAM,CAAA;YAClB,gBAAgB,EAAE,MAAM,CAAA;YACxB,iBAAiB,EAAE,MAAM,CAAA;SAC1B,CAAA;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAA;YACjB,WAAW,EAAE,MAAM,CAAA;YACnB,QAAQ,EAAE,MAAM,CAAA;SACjB,CAAA;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAA;YACb,SAAS,EAAE,MAAM,CAAA;YACjB,aAAa,EAAE,MAAM,CAAA;YACrB,mBAAmB,EAAE,MAAM,CAAA;YAC3B,UAAU,EAAE,MAAM,CAAA;YAClB,YAAY,EAAE,OAAO,CAAA;YACrB,cAAc,EAAE,MAAM,CAAA;YACtB,SAAS,EAAE,MAAM,CAAA;SAClB,CAAA;QACD,OAAO,EAAE;YACP;wEAC4D;YAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;YACf,YAAY,EAAE,MAAM,CAAA;YACpB,QAAQ,EAAE,MAAM,CAAA;YAChB,SAAS,EAAE,MAAM,CAAA;SAClB,CAAA;QACD,OAAO,EAAE;YACP,MAAM,EAAE,MAAM,CAAA;YACd,SAAS,EAAE,MAAM,CAAA;SAClB,CAAA;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAA;YACjB,GAAG,EAAE,MAAM,CAAA;YACX,eAAe,EAAE,MAAM,CAAA;YACvB,MAAM,EAAE,MAAM,CAAA;YACd,QAAQ,EAAE,MAAM,CAAA;YAChB,QAAQ,EAAE,MAAM,CAAA;YAChB,WAAW,EAAE,MAAM,CAAA;YACnB,WAAW,EAAE,MAAM,CAAA;YACnB,YAAY,EAAE,MAAM,CAAA;SACrB,CAAA;QACD,OAAO,EAAE;YACP,KAAK,EAAE,MAAM,CAAA;YACb,MAAM,EAAE,MAAM,CAAA;YACd,MAAM,EAAE,MAAM,CAAA;YACd,MAAM,EAAE,MAAM,CAAA;YACd,OAAO,EAAE,MAAM,CAAA;YACf,WAAW,EAAE,MAAM,CAAA;YACnB,UAAU,EAAE,MAAM,CAAA;SACnB,CAAA;KACF,CAAA;IACD,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAA;QAClB,OAAO,EAAE,eAAe,CAAA;QACxB,KAAK,EAAE,eAAe,CAAA;QACtB,OAAO,EAAE,eAAe,CAAA;KACzB,CAAA;IACD,MAAM,EAAE;QACN,iBAAiB,EAAE,WAAW,CAAA;QAC9B,eAAe,EAAE,WAAW,CAAA;QAC5B,kBAAkB,EAAE,MAAM,CAAA;QAC1B,gBAAgB,EAAE,MAAM,CAAA;QACxB,uBAAuB,EAAE,MAAM,CAAA;QAC/B,qBAAqB,EAAE,MAAM,CAAA;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B,CAAA;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE;YAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;YAAC,OAAO,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAC/E,CAAA;IACD,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@xenolithengine/graph-theme-xen",
+  "version": "0.7.0-beta.0",
+  "description": "Xen — the default original design system for XenolithGraph. Dark / gold palette with typed pins, categorical headers, and glassmorphic effects.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.json": "./src/tokens.json"
+  },
+  "files": [
+    "dist",
+    "src/tokens.json",
+    "src/fonts",
+    "reference",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@xenolithengine/graph-core": "0.7.0-beta.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "keywords": [
+    "xenolith",
+    "theme",
+    "design-system",
+    "node-editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XenolithEngine/xenolith-graph.git",
+    "directory": "packages/theme-xen"
+  },
+  "homepage": "https://xenolithengine.github.io/xenolith-graph/",
+  "bugs": {
+    "url": "https://github.com/XenolithEngine/xenolith-graph/issues"
+  },
+  "author": "XenolithEngine",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch",
+    "test": "vitest run",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/reference/README.md

@@ -0,0 +1,12 @@
+# Xen — reference assets
+
+Static references for the Xen design system. These files are **read-only ground truth** — when in doubt how something should look, compare to these.
+
+| File | What it shows |
+|---|---|
+| `nodes.svg` | All six node variants exported from Figma at 1:1 scale: default with both pins, only-inputs, three-inputs-two-outputs, without-output, rolled-up (pill, orange variant), rolled-up-without-input (pill, green variant). |
+| `node-variants.png` | Same set rendered as PNG for quick visual scan. |
+| `canvas-150.png` | Sample graph at 150% zoom showing edge colour-by-source-type and category-coloured headers. |
+| `context-menu.png` | Context menu with "Группа нодов" / "Рефакторинг" entries and keyboard hints. |
+
+When adding interactions or visual states that aren't documented here, capture a Figma frame, export PNG, and add it with a row in this table.

package/reference/nodes.svg

@@ -0,0 +1,124 @@
+<!--
+  Xen design system — node variant reference, 1:1 from Figma.
+  Six variants: default · only-inputs · 3-in-2-out · without-output · pill-orange · pill-green.
+  Do not edit. Replace as a whole when Figma source updates.
+-->
+<svg width="198" height="558" viewBox="0 0 198 558" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="197" height="557" rx="4.5" stroke="#FCB400" stroke-dasharray="10 5"/>
+<g clip-path="url(#clip0_155_7675)">
+<rect x="24" y="20" width="150" height="70" rx="7" fill="#0F110E"/>
+<foreignObject x="18" y="14" width="163" height="37"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4px);clip-path:url(#bgblur_1_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_i_155_7675)" data-figma-bg-blur-radius="8">
+<path d="M26 27C26 24.2386 28.2386 22 31 22H168C170.761 22 173 24.2386 173 27V43H26V27Z" fill="url(#paint0_linear_155_7675)" fill-opacity="0.6"/>
+</g>
+<path d="M26.5 29L26.3826 27.3562C26.1758 24.4619 28.4682 22 31.3699 22H167.735C170.778 22 173.115 24.6949 172.685 27.7071L172.5 29" stroke="url(#paint1_linear_155_7675)" stroke-width="0.5"/>
+<path d="M40.5 30.25L37 33.75L33.5 30.25" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip2_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 56.5)" fill="#85C244" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip3_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 178 56.5)" fill="#85C244" stroke="#1A1A1A"/>
+</g>
+</g>
+<g clip-path="url(#clip4_155_7675)">
+<rect x="24.5" y="106.5" width="149" height="84" rx="6.5" fill="#0F110E"/>
+<rect x="24.5" y="106.5" width="149" height="84" rx="6.5" stroke="white"/>
+<foreignObject x="18" y="100" width="163" height="37"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4px);clip-path:url(#bgblur_5_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter1_i_155_7675)" data-figma-bg-blur-radius="8">
+<path d="M26 113C26 110.239 28.2386 108 31 108H168C170.761 108 173 110.239 173 113V129H26V113Z" fill="url(#paint2_linear_155_7675)" fill-opacity="0.6"/>
+</g>
+<path d="M38.5 116.25L35 119.75L31.5 116.25" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip6_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 142.5)" fill="#3E95B9" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip7_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 163.5)" fill="#3E95B9" stroke="#1A1A1A"/>
+</g>
+</g>
+<g clip-path="url(#clip8_155_7675)">
+<rect x="24" y="215" width="150" height="105" rx="7" fill="#0F110E"/>
+<foreignObject x="18" y="209" width="162" height="37"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4px);clip-path:url(#bgblur_9_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter2_i_155_7675)" data-figma-bg-blur-radius="8">
+<path d="M26 222C26 219.239 28.2386 217 31 217H167C169.761 217 172 219.239 172 222V238H26V222Z" fill="url(#paint3_linear_155_7675)" fill-opacity="0.6"/>
+</g>
+<path d="M39.5 226.25L36 229.75L32.5 226.25" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip10_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 252.5)" fill="#85C244" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip11_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 273.5)" fill="white" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip12_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 294.5)" stroke="#9AD6E3"/>
+</g>
+<g clip-path="url(#clip13_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 178 253)" fill="#3E95B9" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip14_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 178 275)" fill="#3E95B9" stroke="#1A1A1A"/>
+</g>
+</g>
+<g clip-path="url(#clip15_155_7675)">
+<rect x="24" y="336" width="150" height="70" rx="7" fill="#0F110E"/>
+<foreignObject x="18" y="330" width="162" height="37"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4px);clip-path:url(#bgblur_16_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter3_i_155_7675)" data-figma-bg-blur-radius="8">
+<path d="M26 343C26 340.239 28.2386 338 31 338H167C169.761 338 172 340.239 172 343V359H26V343Z" fill="url(#paint4_linear_155_7675)" fill-opacity="0.6"/>
+</g>
+<path d="M42.5 347.25L39 350.75L35.5 347.25" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip17_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 373.5)" fill="#FF5622" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip18_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 178 373.5)" fill="#3E95B9" stroke="#1A1A1A"/>
+</g>
+</g>
+<g clip-path="url(#clip19_155_7675)">
+<foreignObject x="20" y="428" width="148" height="48"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_20_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_i_155_7675)" data-figma-bg-blur-radius="4">
+<rect x="24" y="432" width="140" height="40" rx="20" fill="#0F110E"/>
+<rect x="24" y="432" width="140" height="40" rx="20" fill="url(#paint5_linear_155_7675)" fill-opacity="0.5"/>
+</g>
+<g clip-path="url(#clip21_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 37 432)" fill="#FF5622" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip22_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 28 442)" fill="#85C244" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip23_155_7675)">
+<circle cx="33" cy="468" r="3.5" transform="rotate(-180 33 468)" fill="white" stroke="#1A1A1A"/>
+</g>
+<g clip-path="url(#clip24_155_7675)">
+<circle cx="24" cy="458" r="3.5" transform="rotate(-180 24 458)" fill="white" stroke="#1A1A1A"/>
+</g>
+<path d="M48.25 448.5L51.75 452L48.25 455.5" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip25_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 167 448)" fill="white" stroke="#1A1A1A"/>
+</g>
+</g>
+<foreignObject x="11" y="486" width="148" height="48"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_26_155_7675_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter5_i_155_7675)" data-figma-bg-blur-radius="4">
+<rect x="15" y="490" width="140" height="40" rx="20" fill="#0F110E"/>
+<rect x="15" y="490" width="140" height="40" rx="20" fill="url(#paint6_linear_155_7675)" fill-opacity="0.5"/>
+</g>
+<path d="M32.25 506.5L35.75 510L32.25 513.5" stroke="white" stroke-linecap="round"/>
+<g clip-path="url(#clip27_155_7675)">
+<circle cx="4" cy="4" r="3.5" transform="matrix(-1 0 0 1 158 506)" fill="#FF5622" stroke="#1A1A1A"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_155_7675" x1="26" y1="32.5" x2="173" y2="32.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#85C244"/><stop offset="1" stop-color="#30342E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_155_7675" x1="103.5" y1="23" x2="103.5" y2="26" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/><stop offset="1" stop-color="#999999" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_155_7675" x1="26" y1="118.5" x2="173" y2="118.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E95B9"/><stop offset="1" stop-color="#30342E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_155_7675" x1="26" y1="227.5" x2="172" y2="227.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8A38F5"/><stop offset="1" stop-color="#30342E"/>
+</linearGradient>
+<linearGradient id="paint4_linear_155_7675" x1="26" y1="348.5" x2="172" y2="348.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/><stop offset="1" stop-color="#30342E"/>
+</linearGradient>
+<linearGradient id="paint5_linear_155_7675" x1="36.7273" y1="452.513" x2="151.273" y2="452.513" gradientUnits="userSpaceOnUse">
+<stop offset="0.0432692" stop-color="#0F110E"/><stop offset="0.519231" stop-color="#FF5622" stop-opacity="0.6"/><stop offset="1" stop-color="#0F110E"/>
+</linearGradient>
+<linearGradient id="paint6_linear_155_7675" x1="27.7273" y1="510.513" x2="142.273" y2="510.513" gradientUnits="userSpaceOnUse">
+<stop offset="0.0432692" stop-color="#0F110E"/><stop offset="0.519231" stop-color="#85C244" stop-opacity="0.6"/><stop offset="1" stop-color="#0F110E"/>
+</linearGradient>
+</defs>
+</svg>

package/src/tokens.json

@@ -0,0 +1,288 @@
+{
+  "$schema": "./tokens.schema.json",
+  "name": "xen",
+  "version": "0.7.0-beta.0",
+  "color": {
+    "brand": {
+      "primary":       "#FCB400",
+      "primaryDark":   "#C28B00",
+      "primaryDeep":   "#68531D",
+      "primaryLight":  "#FFDF67",
+      "primaryPale":   "#FFEDA8",
+      "primaryAlpha20": "rgba(252, 180, 0, 0.2)",
+      "primaryAlpha30": "rgba(252, 180, 0, 0.3)",
+      "primaryAlpha50": "rgba(252, 180, 0, 0.5)",
+      "primaryAlpha60": "rgba(255, 237, 168, 0.6)"
+    },
+    "surface": {
+      "canvas":   "#1A1A1A",
+      "node":     "#0F110E",
+      "panel":    "#191919",
+      "elevated": "#232323",
+      "muted":    "#292929",
+      "subtle":   "#363636",
+      "outline":  "#424242",
+      "divider":  "#363636",
+      "headerEnd": "#30342E"
+    },
+    "text": {
+      "primary":   "#FFFFFF",
+      "secondary": "#B8B8B8",
+      "muted":     "rgba(255, 255, 255, 0.5)",
+      "disabled":  "rgba(255, 255, 255, 0.3)"
+    },
+    "alpha": {
+      "white10":  "rgba(255, 255, 255, 0.1)",
+      "white20":  "rgba(255, 255, 255, 0.2)",
+      "white30":  "rgba(255, 255, 255, 0.3)",
+      "white50":  "rgba(255, 255, 255, 0.5)",
+      "dark50":   "rgba(71, 71, 71, 0.5)"
+    },
+    "minimap": {
+      "background":  "rgba(20, 20, 20, 0.85)",
+      "border":      "#424242",
+      "node":        "rgba(255, 255, 255, 0.32)",
+      "frame":       "rgba(252, 180, 0, 0.14)",
+      "frameBorder": "#FCB400"
+    },
+    "widget": {
+      "bg":            "rgba(255, 255, 255, 0.045)",
+      "bgHover":       "rgba(255, 255, 255, 0.09)",
+      "bgFocused":     "#0F110E",
+      "track":         "rgba(255, 255, 255, 0.08)",
+      "fill":          "#FCB400",
+      "fillAlpha":     0.55,
+      "text":          "#FFFFFF",
+      "label":         "#B8B8B8",
+      "placeholder":   "rgba(255, 255, 255, 0.35)",
+      "border":        "rgba(255, 255, 255, 0.12)",
+      "borderFocused": "#FCB400",
+      "selection":     "rgba(252, 180, 0, 0.35)",
+      "knob":          "#FFFFFF"
+    }
+  },
+  "pinType": {
+    "exec": {
+      "label":     "Exec",
+      "color":     "#FCB400",
+      "shape":     "chevron",
+      "edgeColor": "#FCB400",
+      "edgeWidth": 3,
+      "note":      "Imperative flow. Carries no value, only ordering."
+    },
+    "float": {
+      "label":     "Float",
+      "color":     "#85C244",
+      "shape":     "circle",
+      "edgeColor": "#85C244",
+      "edgeWidth": 2
+    },
+    "object": {
+      "label":     "Object",
+      "color":     "#3E95B9",
+      "shape":     "circle",
+      "edgeColor": "#3E95B9",
+      "edgeWidth": 2
+    },
+    "string": {
+      "label":     "String",
+      "color":     "#FF5622",
+      "shape":     "circle",
+      "edgeColor": "#FF5622",
+      "edgeWidth": 2
+    },
+    "any": {
+      "label":     "Any",
+      "color":     "#FFFFFF",
+      "shape":     "circle",
+      "edgeColor": "#FFFFFF",
+      "edgeWidth": 2
+    },
+    "wildcard": {
+      "label":     "Wildcard",
+      "color":     "#9AD6E3",
+      "shape":     "circle-empty",
+      "edgeColor": "#9AD6E3",
+      "edgeWidth": 2,
+      "note":      "Typed but unconnected; renders with outline only, no fill."
+    }
+  },
+  "category": {
+    "logic": {
+      "label":    "Logic",
+      "accent":   "#85C244",
+      "gradient": "linear-gradient(90deg, rgba(133, 194, 68, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+    },
+    "data": {
+      "label":    "Data",
+      "accent":   "#3E95B9",
+      "gradient": "linear-gradient(90deg, rgba(62, 149, 185, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+    },
+    "macro": {
+      "label":    "Macro",
+      "accent":   "#8A38F5",
+      "gradient": "linear-gradient(90deg, rgba(138, 56, 245, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+    },
+    "utility": {
+      "label":    "Utility",
+      "accent":   "#FFFFFF",
+      "gradient": "linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(48, 52, 46, 0.6) 100%)"
+    }
+  },
+  "pill": {
+    "orange": "linear-gradient(90deg, rgba(15, 17, 14, 0.5) 12.63%, rgba(255, 86, 34, 0.3) 51.57%, rgba(15, 17, 14, 0.5) 90.91%), #0F110E",
+    "green":  "linear-gradient(90deg, rgba(15, 17, 14, 0.5) 12.63%, rgba(133, 194, 68, 0.3) 51.57%, rgba(15, 17, 14, 0.5) 90.91%), #0F110E"
+  },
+  "state": {
+    "hover": {
+      "border":      "#FCB400",
+      "borderWidth": 1,
+      "glow":        "rgba(252, 180, 0, 0.52)",
+      "glowBlur":    4
+    },
+    "selected": {
+      "border":      "#FFFFFF",
+      "borderWidth": 1,
+      "glow":        "rgba(255, 255, 255, 0.4)",
+      "glowBlur":    5
+    },
+    "active": {
+      "border":      "#FFDF67",
+      "borderWidth": 1,
+      "glow":        "rgba(252, 180, 0, 0.64)",
+      "glowBlur":    6
+    },
+    "disabled": {
+      "opacity": 0.4
+    }
+  },
+  "geometry": {
+    "node": {
+      "radius":        7,
+      "minWidth":      150,
+      "headerHeight":  21,
+      "headerPadding": 2,
+      "innerPaddingX": 4,
+      "innerPaddingY": 4,
+      "pillRadius":    20,
+      "pillHeight":    40,
+      "pillMinWidth":  140
+    },
+    "pin": {
+      "diameter":         8,
+      "stroke":           1,
+      "strokeColor":      "#1A1A1A",
+      "labelGap":         7,
+      "rowSpacing":       10,
+      "rowHeight":        11,
+      "hitPadding":       4,
+      "chevronExecWidth": 10,
+      "chevronExecHeight": 8
+    },
+    "header": {
+      "toPinsGap":   15,
+      "chevronSize": 16,
+      "titleGap":    5
+    },
+    "edge": {
+      "width":               2,
+      "execWidth":           3,
+      "bezierTension":       0.5,
+      "minHorizontalSpread": 50,
+      "hitPadding":          6,
+      "pulseEnabled":        true,
+      "midpointRadius":      3.5,
+      "arrowSize":           9
+    },
+    "comment": {
+      "headerHeight":  21,
+      "minWidth":      120,
+      "minHeight":     80
+    },
+    "reroute": {
+      "radius":    11,
+      "ringWidth": 2
+    },
+    "widget": {
+      "rowHeight":       22,
+      "gap":             6,
+      "controlMinWidth": 64,
+      "radius":          5,
+      "paddingX":        8,
+      "paddingY":        4,
+      "borderWidth":     1,
+      "toggleWidth":     30,
+      "toggleHeight":    16
+    },
+    "minimap": {
+      "width":       210,
+      "height":      150,
+      "margin":      14,
+      "radius":      10,
+      "padding":     10,
+      "borderWidth": 1,
+      "nodeRadius":  1.5
+    }
+  },
+  "typography": {
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+    "heading": {
+      "size":       12,
+      "weight":     700,
+      "lineHeight": 14,
+      "color":      "#FFFFFF",
+      "tracking":   0
+    },
+    "label": {
+      "size":       10,
+      "weight":     400,
+      "lineHeight": 11,
+      "color":      "#FFFFFF",
+      "tracking":   0
+    },
+    "comment": {
+      "size":       14,
+      "weight":     600,
+      "lineHeight": 18,
+      "color":      "#FFFFFF",
+      "tracking":   0
+    }
+  },
+  "effect": {
+    "headerInnerShadow": {
+      "offsetX": 0,
+      "offsetY": 3,
+      "blur":    6,
+      "color":   "rgba(255, 255, 255, 0.5)"
+    },
+    "pillInnerShadow": {
+      "offsetX": 0,
+      "offsetY": 4,
+      "blur":    4,
+      "color":   "rgba(255, 255, 255, 0.15)"
+    },
+    "headerBackdropBlur": 4,
+    "pillBackdropBlur":   2,
+    "headerHighlightGradient": "linear-gradient(180deg, #FFFFFF 14.29%, rgba(153, 153, 153, 0) 57.14%)",
+    "headerHighlightStroke": "linear-gradient(180deg, #FFFFFF 0%, rgba(153, 153, 153, 0) 100%)",
+    "nodeDropShadow": {
+      "offsetX": 0,
+      "offsetY": 8,
+      "blur":    18,
+      "color":   "rgba(0, 0, 0, 0.85)"
+    }
+  },
+  "background": {
+    "color": "#1A1A1A",
+    "grid": {
+      "kind":    "dots",
+      "spacing": 24,
+      "size":    1,
+      "color":   "rgba(255, 255, 255, 0.3)"
+    }
+  },
+  "edgeRouting": {
+    "rule": "edgeColorFollowsSourcePinType",
+    "note": "Invariant: every edge inherits the colour of its source pin's type. Per-edge overrides are allowed but discouraged outside special UI states (e.g. error highlighting)."
+  }
+}