@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/css/prosemirror.css

@@ -0,0 +1,57 @@
+.ProseMirror {
+    h1 {
+        font-size: 2em;
+        font-weight: bold;
+        margin: 0.67em 0;
+    }
+
+    h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin: 0.75em 0;
+    }
+
+    h3 {
+        font-size: 1.17em;
+        font-weight: bold;
+        margin: 0.83em 0;
+    }
+
+    p {
+        margin: 0.5em 0;
+    }
+
+    ul,
+    ol {
+        padding-left: 1.5em;
+        margin: 0.5em 0;
+    }
+
+    code {
+        background: var(--ds-code-bg);
+        padding: 0.125em 0.25em;
+        border-radius: 3px;
+        font-family: var(--ds-font-mono);
+    }
+
+    pre {
+        background: var(--ds-code-bg);
+        padding: 0.75em;
+        border-radius: 4px;
+        overflow-x: auto;
+        margin: 0.5em 0;
+    }
+
+    pre code {
+        background: none;
+        padding: 0;
+    }
+
+    li {
+        margin: 0.25em 0;
+    }
+
+    ul {
+        list-style-type: disc;
+    }
+}

package/src/css/rc-dock.css

@@ -0,0 +1,212 @@
+.dock {
+    border: 1px solid var(--ds-sash-border);
+}
+
+.dock-panel {
+    color: inherit;
+    border-color: transparent;
+    border: none;
+    background: var(--colors-bgCanvas);
+}
+
+/* ---- Tab bar: VSCode editor-group-header style ---- */
+.dock-bar,
+.dock-top .dock-bar {
+    background: var(--ds-tabs-bg, #181818);
+    border-bottom: 1px solid var(--colors-borderMuted);
+    padding-left: 0;
+}
+
+.dock-tab {
+    height: 30px;
+    margin-right: 0;
+    border: none;
+    border-right: 1px solid var(--colors-borderMuted);
+    background: var(--ds-tabs-bg, #181818);
+    color: var(--colors-fgSubtle);
+    font-size: var(--fs-body, 0.8125rem);
+    font-weight: 400;
+    z-index: 10;
+}
+
+.dock-tab:hover {
+    color: var(--colors-fg);
+}
+
+/* Active tab matches the editor surface (content-colored, like VSCode): its
+   lighter background against the darker tab bar marks it active. No top accent
+   line — repeated across panels it read as a stray-line artifact. */
+.dock-tab-active,
+.dock-tab-active:hover {
+    color: var(--colors-fg);
+    background: var(--colors-bgCanvas);
+}
+
+.dock-tab-close-btn {
+    position: static;
+    border-radius: 4px;
+}
+
+.dock-tab-close-btn:hover {
+    background: var(--colors-bgEmphasis);
+}
+
+/* rc-dock's per-style rules (.dock-style-main / .dock-style-card) win on
+   specificity and re-introduce hardcoded colors, boxed/rounded card tabs, a
+   raised nav and a 35px extra-content. Flatten all of them to one VSCode look. */
+.dock-panel.dock-style-main .dock-bar,
+.dock-panel.dock-style-card .dock-bar {
+    background: var(--ds-tabs-bg, #181818);
+    border-bottom: 1px solid var(--colors-borderMuted);
+    overflow: hidden;
+}
+
+.dock-panel.dock-style-main .dock-tab,
+.dock-panel.dock-style-card .dock-tab {
+    margin-right: 0;
+    border: none;
+    border-right: 1px solid var(--colors-borderMuted);
+    border-radius: 0;
+    background: var(--ds-tabs-bg, #181818);
+}
+
+.dock-panel.dock-style-main .dock-tab.dock-tab-active,
+.dock-panel.dock-style-card .dock-tab.dock-tab-active {
+    background: var(--colors-bgCanvas);
+}
+
+.dock-panel.dock-style-card .dock-nav-wrap {
+    padding-top: 0;
+    transform: none;
+}
+
+.dock-panel.dock-style-card .dock-extra-content {
+    height: 30px;
+}
+
+.dock-nav-operations-hidden {
+    display: none;
+}
+
+.dock-fbox {
+    overflow: hidden;
+}
+
+.dock-nav {
+    flex-grow: 1;
+}
+
+.dock-nav-wrap {
+    cursor: move;
+}
+
+/* Panel extra controls (maximize/close) sit centered, flush in the bar */
+.dock-extra-content {
+    display: flex;
+    align-items: center;
+    padding-right: 4px;
+}
+
+.dock-fbox>.dock-panel {
+    box-shadow: 0 0 0.25rem var(--color-neutral-canvas-subtle-fg-subtle);
+}
+
+.drag-initiator {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    transition: width 0.2s;
+}
+
+/* Tab padding only , dividers also carry .drag-initiator, and padding there
+   (with box-sizing: border-box) inflates the resize handle. */
+.drag-initiator:not(.dock-divider) {
+    padding: 0px;
+}
+
+/* rc-dock's dark theme inflates dividers with transform: scaleX(3)/scaleY(3)
+   to create a grab zone, which renders as a huge bar. Cancel the transform and
+   use a real, modest 4px gutter that is invisible until hovered. */
+.dock-divider {
+    background: var(--ds-border);
+    flex: 0 0 4px;
+    padding: 0;
+    opacity: 1;
+    transition: background 0.1s ease;
+}
+
+.dock-hbox>.dock-divider {
+    transform: none;
+    width: 4px;
+    margin: 0;
+    cursor: ew-resize;
+}
+
+.dock-vbox>.dock-divider {
+    transform: none;
+    height: 4px;
+    margin: 0;
+    cursor: ns-resize;
+}
+
+.dock-divider:hover {
+    background: var(--ds-sash-hover-border, var(--ds-focus-border, #0078d4));
+}
+
+/* ---- Remaining rc-dock surfaces that the dark theme hardcodes ----
+   These are transient/interactive (active-tab ink bar, the overflow-tab
+   dropdown, drag-and-drop indicators, panel buttons). Map them onto VSCode
+   tokens so the whole dock follows the active theme, not just the static bar. */
+
+/* Active-tab accent line → VSCode focus accent (we also draw an inset top bar). */
+.dock-ink-bar {
+    background-color: var(--ds-focus-border, #0078d4);
+}
+
+/* Overflow-tab dropdown → VSCode menu surface. */
+.dock-dropdown-menu {
+    background-color: var(--ds-menu-bg, var(--colors-bgSurface));
+    border: 1px solid var(--ds-menu-border, var(--colors-borderDefault));
+    box-shadow: var(--shadows-contextMenu, 0 2px 8px rgba(0, 0, 0, 0.36));
+}
+
+.dock-dropdown-menu-item {
+    color: var(--ds-menu-fg, var(--colors-fg));
+}
+
+.dock-dropdown-menu-item:hover {
+    background: var(--ds-menu-selection-bg, var(--ds-list-hover-bg, var(--colors-bgEmphasis)));
+    color: var(--ds-menu-selection-fg, var(--colors-fg));
+}
+
+.dock-dropdown-menu-item-disabled,
+.dock-dropdown-menu-item-disabled:hover {
+    color: var(--colors-fgSubtle);
+    background: transparent;
+}
+
+/* Drag-and-drop placement indicators → neutral surface + focus accent. */
+.dock-drop-layer .dock-drop-square {
+    color: var(--colors-fgSubtle);
+    background: var(--colors-bgSurface);
+}
+
+.dock-drop-layer .dock-drop-square .dock-drop-square-box {
+    border: 1px solid var(--colors-borderDefault);
+}
+
+.dock-drop-layer .dock-drop-square-dropping {
+    background: var(--ds-list-active-bg, var(--ds-focus-border, #0078d4));
+    color: var(--ds-list-active-fg, #ffffff);
+}
+
+/* Panel maximize/restore/close buttons. */
+.dock-panel-max-btn,
+.dock-panel-min-btn {
+    color: var(--colors-fgSubtle);
+}
+
+.dock-panel-max-btn:hover,
+.dock-panel-min-btn:hover {
+    color: var(--colors-fg);
+}

package/src/css/rc-menu.css

@@ -0,0 +1,101 @@
+.rc-menu {
+    color: var(--colors-fg);
+    border: none;
+    font-family: var(--ds-font-mono, monospace);
+    font-size: var(--fs-label, 0.8rem);
+    box-shadow: none;
+}
+
+/* ---- Top menubar (File / Edit / Window) ---- */
+.rc-menu-horizontal {
+    margin: 0;
+    padding: 0.15rem 0.25rem;
+    display: flex;
+    gap: 0.15rem;
+    background-color: var(--ds-tabs-bg, var(--colors-bgCanvas));
+    color: var(--colors-fg);
+    border-radius: 0;
+    border-bottom: 1px solid var(--colors-borderMuted);
+    box-shadow: none;
+}
+
+.rc-menu-horizontal>.rc-menu-item,
+.rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title {
+    padding: 2px 8px;
+    font-size: var(--fs-label, 0.8rem);
+    border-radius: 4px;
+    border-bottom: none;
+}
+
+.rc-menu-horizontal>.rc-menu-item:hover,
+.rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title:hover,
+.rc-menu-horizontal>.rc-menu-submenu-active,
+.rc-menu-horizontal>.rc-menu-item-active {
+    background: var(--ds-list-hover-bg, #2a2d2e);
+    color: var(--ds-fg);
+    border-radius: 4px;
+    border-bottom: none;
+}
+
+.rc-menu-item-selected,
+.rc-menu-submenu-selected {
+    background-color: unset;
+}
+
+/* ---- Dropdown popup (VSCode context-menu style) ---- */
+.rc-menu-submenu>.rc-menu,
+.rc-menu-sub {
+    background-color: var(--ds-widget-bg, #202020);
+    border: 1px solid var(--ds-border-subtle, #454545);
+    border-radius: 4px;
+    box-shadow: var(--shadows-contextMenu, 0 2px 8px rgba(0, 0, 0, 0.36));
+    padding: 4px;
+    font-size: var(--fs-label, 0.8rem);
+    min-width: 200px;
+}
+
+.rc-menu-vertical>.rc-menu-item,
+.rc-menu-vertical-left>.rc-menu-item,
+.rc-menu-vertical-right>.rc-menu-item,
+.rc-menu-inline>.rc-menu-item,
+.rc-menu-sub>.rc-menu-item,
+.rc-menu-vertical>.rc-menu-submenu>.rc-menu-submenu-title,
+.rc-menu-sub>.rc-menu-submenu>.rc-menu-submenu-title {
+    cursor: pointer;
+    padding: 2px 20px 2px 10px;
+    line-height: 1.4;
+    border-radius: 4px;
+}
+
+.rc-menu-vertical>.rc-menu-item:hover,
+.rc-menu-sub>.rc-menu-item:hover,
+.rc-menu-vertical>.rc-menu-submenu>.rc-menu-submenu-title:hover,
+.rc-menu-sub>.rc-menu-submenu>.rc-menu-submenu-title:hover,
+.rc-menu-item-active,
+.rc-menu-submenu-active>.rc-menu-submenu-title {
+    background: var(--ds-list-hover-bg, #2a2d2e);
+    color: var(--ds-fg);
+    cursor: pointer;
+}
+
+.rc-menu-item-divider {
+    background-color: var(--ds-border-subtle, #454545);
+    height: 1px;
+    margin: 4px 6px;
+}
+
+.rc-menu-item:hover .inner-menu-item {
+    background-color: var(--ds-button-bg, #0078d4);
+}
+
+.rc-menu-submenu-popup {
+    z-index: 1000;
+}
+
+.dock-style-headless .dock-nav-list {
+    display: none;
+}
+
+.dock-style-headless .drag-initiator {
+    height: 0.5em;
+}

package/src/css/themes/kiberon.css

@@ -0,0 +1,127 @@
+/*
+ * Kiberon Labs theme — an alternate, opt-in theme for the flow editor.
+ *
+ * Like the VS Code theme (the extension's theme-bridge.css), this re-declares
+ * the design system's intermediary `--ds-*` bridge tokens — every semantic token
+ * (`--colors-*`, `--color-neutral-*`, …) cascades from that layer, so overriding
+ * `--ds-*` re-themes the whole editor. Unlike the VS Code mapping, this does NOT
+ * replace the default: it's scoped to a container, so it only applies where you
+ * opt in, and coexists with the built-in theme.
+ *
+ * Values are the Kiberon Labs design system's DARK tokens (the brand-canonical
+ * appearance), lifted from @kiberon-labs/ui (../ds): css/theme.css `.dark`,
+ * css/brand.css (`--kl-*` crystal palette), and css/typography.css. Each line
+ * notes the source token. Values are inlined (self-contained) so the theme needs
+ * no extra package or import.
+ *
+ * Activate by adding the scope to the editor's root container (or <html>):
+ *     <div data-flow-theme="kiberon"> … </div>
+ *     // or: class="flow-theme-kiberon"
+ *
+ * Fonts: the brand uses Geist / Geist Mono. Load them in the host app (e.g.
+ * @fontsource/geist); the stacks below fall back to Inter / system fonts when
+ * Geist isn't present, so the theme degrades gracefully.
+ */
+[data-flow-theme="kiberon"],
+.flow-theme-kiberon {
+    /* Fonts — typography.css --font-sans / --font-mono */
+    --ds-font-ui: "Geist", "Inter", system-ui, -apple-system, sans-serif;
+    --ds-font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, monospace;
+
+    /* Foreground — theme.css .dark foreground / muted-foreground */
+    --ds-fg: #e3e3e3;
+    --ds-fg-muted: #a8a8a8;
+    --ds-icon-fg: #e3e3e3;
+    --ds-editor-fg: #e3e3e3;
+    --ds-widget-fg: #e3e3e3;
+
+    /* Surfaces — background (canvas) / sidebar / card / secondary */
+    --ds-editor-bg: #090909;          /* --background */
+    --ds-widget-bg: #1f1f1f;          /* --secondary (raised widgets) */
+    --ds-sidebar-bg: #0e0e0e;         /* --sidebar-background / --card */
+    --ds-tabs-bg: #0e0e0e;            /* --sidebar-background */
+    --ds-tab-inactive-bg: #0e0e0e;    /* --sidebar-background */
+    --ds-section-header-bg: #0e0e0e;  /* --sidebar-background */
+    --ds-section-header-fg: #e3e3e3;  /* --foreground */
+    --ds-section-header-border: #1f1f1f; /* --border */
+
+    /* Borders / focus / sashes — border / input / ring (--kl purple) */
+    --ds-border: #1f1f1f;             /* --border */
+    --ds-border-subtle: #2d2d2d;      /* --secondary-active (slightly lifted) */
+    --ds-border-muted: rgba(227, 227, 227, 0.06);
+    --ds-panel-border: #1f1f1f;       /* --border */
+    --ds-focus-border: #876adb;       /* --ring */
+    --ds-sash-hover-border: #876adb;  /* --ring */
+    --ds-sash-border: #1f1f1f;        /* --border */
+
+    /* Buttons — primary (purple) + secondary neutral */
+    --ds-button-bg: #7b5dcd;          /* --primary */
+    --ds-button-fg: #e3e1ed;          /* --primary-foreground */
+    --ds-button-hover-bg: #7052be;    /* --primary-hover */
+    --ds-button-secondary-bg: #1f1f1f;/* --secondary */
+    --ds-button-border: #1f1f1f;      /* --border */
+
+    /* Inputs */
+    --ds-input-bg: #1f1f1f;           /* --secondary (raised field) */
+    --ds-input-border: #2d2d2d;       /* neutral stroke */
+    --ds-input-fg: #e3e3e3;           /* --foreground */
+    --ds-input-option-active-bg: rgba(123, 93, 205, 0.5);  /* --primary wash */
+    --ds-input-option-active-border: #7b5dcd;              /* --primary */
+    --ds-input-option-active-fg: #e3e1ed;                  /* --primary-foreground */
+
+    /* Lists — purple selection wash, neutral hover */
+    --ds-list-active-bg: rgba(123, 93, 205, 0.3);  /* --primary wash */
+    --ds-list-active-fg: #e3e3e3;                   /* --foreground */
+    --ds-list-hover-bg: #252525;                    /* --accent-hover */
+
+    /* Toolbar / badges */
+    --ds-toolbar-active-bg: rgba(227, 227, 227, 0.08);
+    --ds-toolbar-hover-bg: #252525;   /* --accent-hover */
+    --ds-badge-bg: #2d2d2d;           /* --accent-active (neutral chip) */
+    --ds-badge-fg: #e3e3e3;           /* --foreground */
+
+    /* Text variants — code / preformat / blockquote */
+    --ds-preformat-fg: #e3e3e3;       /* --foreground */
+    --ds-blockquote-bg: #141414;      /* --muted */
+    --ds-blockquote-border: #2d2d2d;
+    --ds-code-bg: #141414;            /* --muted */
+
+    /* Editor / status states */
+    --ds-inactive-selection-bg: rgba(123, 93, 205, 0.15); /* dim --primary */
+    --ds-find-match-bg: rgba(254, 204, 92, 0.28);         /* --kl-gold highlight */
+    --ds-error: #ff6578;              /* --destructive */
+    --ds-warning: #ff7f30;            /* warning (legible on dark) */
+    --ds-success: #4beb8f;            /* --success */
+    --ds-error-bg: #310005;           /* --destructive-subtle */
+    --ds-error-border: #ff6578;       /* --destructive */
+    --ds-error-fg: #fbe4e4;           /* --destructive-subtle-foreground */
+    --ds-info-bg: #001135;            /* --info-subtle */
+    --ds-info-border: #006bea;        /* --info */
+
+    /* Charts / git / terminal accents */
+    --ds-chart-blue: #1e7eff;         /* --chart-2 */
+    --ds-git-added: #4beb8f;          /* --success */
+    --ds-git-modified: #fecc5c;       /* --kl-gold */
+    --ds-terminal-cyan: #1e7eff;      /* --info (no cyan in palette) */
+
+    /* Menus — popover surface */
+    --ds-menu-bg: #0e0e0e;            /* --popover */
+    --ds-menu-fg: #e3e3e3;            /* --popover-foreground */
+    --ds-menu-border: #1f1f1f;        /* --border */
+    --ds-menu-selection-bg: #252525;  /* --accent-hover */
+    --ds-menu-selection-fg: #e3e3e3;  /* --foreground */
+
+    /* Graph node accents — the crystal palette (brand.css --kl-*); rounder
+       cards to match the Kiberon card radius (--radius 0.5rem). */
+    --ds-node-red: #ee397a;           /* --kl-pink */
+    --ds-node-green: #4beb8f;         /* --success */
+    --ds-node-lime: #fecc5c;          /* --kl-gold */
+    --ds-node-purple: #9462f4;        /* --kl-purple */
+    --ds-node-blue: #627af4;          /* --kl-blue */
+    --ds-node-radius: 0.5rem;         /* --radius */
+
+    /* Brand-faithful focus ring + floating shadow (override the cascade) */
+    --shadows-focus: 0 0 0 2px #876adb; /* theme.css --shadow-focus */
+    --shadows-contextMenu: 0px 0px 0px 1px #23292f, 0px 6px 12px -3px #01040966,
+        0px 6px 18px 0px #01040966; /* theme.css .dark --shadow-floating-small */
+}

package/src/css/vars.css

@@ -0,0 +1,198 @@
+:root {
+    /* ───────────────────────────────────────────────────────────────────────
+       Theme bridge (--ds-*)
+
+       These are the design system's *intermediary* tokens. Every component and
+       semantic token resolves colors/fonts through this layer — nothing in the
+       flow package references `--vscode-*` directly anymore. The values here are
+       the canonical (VS Code dark) defaults, so the editor looks right when run
+       standalone (Storybook, web, tests).
+
+       Inside the VS Code extension these tokens are re-declared to point at the
+       live `--vscode-*` theme variables (see the extension's theme-bridge.css),
+       which makes the whole editor follow the user's active VS Code theme. This
+       is the ONLY file that needs to enumerate the design tokens; the extension
+       mapping overrides just this layer and everything below cascades.
+       ─────────────────────────────────────────────────────────────────────── */
+
+    /* Fonts */
+    --ds-font-ui: "Segoe UI", system-ui, sans-serif;
+    --ds-font-mono: "Consolas", "Courier New", monospace;
+    --ds-font-mono-size: 14px;
+
+    /* Foreground */
+    --ds-fg: #cccccc;
+    --ds-fg-muted: #9d9d9d;
+    --ds-icon-fg: #cccccc;
+    --ds-editor-fg: #cccccc;
+    --ds-widget-fg: #cccccc;
+
+    /* Surfaces */
+    --ds-editor-bg: #1f1f1f;
+    --ds-widget-bg: #202020;
+    --ds-sidebar-bg: #181818;
+    --ds-tabs-bg: #181818;
+    --ds-tab-inactive-bg: #181818;
+    --ds-section-header-bg: #181818;
+    --ds-section-header-fg: #cccccc;
+    --ds-section-header-border: #2b2b2b;
+
+    /* Borders / focus / sashes */
+    --ds-border: #313131;
+    --ds-border-subtle: #454545;
+    --ds-border-muted: rgba(255, 255, 255, 0.09);
+    --ds-panel-border: #2b2b2b;
+    --ds-focus-border: #0078d4;
+    --ds-sash-hover-border: #0078d4;
+    --ds-sash-border: #2b2b2b;
+
+    /* Buttons */
+    --ds-button-bg: #0078d4;
+    --ds-button-fg: #ffffff;
+    --ds-button-hover-bg: #026ec1;
+    --ds-button-secondary-bg: #313131;
+    --ds-button-border: #313131;
+
+    /* Inputs */
+    --ds-input-bg: #313131;
+    --ds-input-border: #3c3c3c;
+    --ds-input-fg: #cccccc;
+    --ds-input-option-active-bg: rgba(36, 137, 219, 0.51);
+    --ds-input-option-active-border: #2488db;
+    --ds-input-option-active-fg: #ffffff;
+
+    /* Lists */
+    --ds-list-active-bg: #04395e;
+    --ds-list-active-fg: #ffffff;
+    --ds-list-hover-bg: #2a2d2e;
+
+    /* Toolbar / badges */
+    --ds-toolbar-active-bg: rgba(99, 102, 103, 0.31);
+    --ds-toolbar-hover-bg: rgba(90, 93, 94, 0.31);
+    --ds-badge-bg: #616161;
+    --ds-badge-fg: #f8f8f8;
+
+    /* Text variants */
+    --ds-preformat-fg: #d0d0d0;
+    --ds-blockquote-bg: #2b2b2b;
+    --ds-blockquote-border: #616161;
+    --ds-code-bg: #2b2b2b;
+
+    /* Editor / status states */
+    --ds-inactive-selection-bg: #3a3d41;
+    --ds-find-match-bg: rgba(234, 92, 0, 0.33);
+    --ds-error: #f14c4c;
+    --ds-warning: #cca700;
+    --ds-success: #89d185;
+    --ds-error-bg: #5a1d1d;
+    --ds-error-border: #be1100;
+    --ds-error-fg: #cccccc;
+    --ds-info-bg: #063b49;
+    --ds-info-border: #007acc;
+
+    /* Charts / git / terminal accents */
+    --ds-chart-blue: #59a4f9;
+    --ds-git-added: #81b88b;
+    --ds-git-modified: #e2c08d;
+    --ds-terminal-cyan: #11a8cd;
+
+    /* Menus (cascade onto the surfaces above when no host value exists) */
+    --ds-menu-bg: var(--ds-widget-bg);
+    --ds-menu-fg: var(--ds-fg);
+    --ds-menu-border: var(--ds-border);
+    --ds-menu-selection-bg: var(--ds-list-hover-bg);
+    --ds-menu-selection-fg: var(--ds-fg);
+
+    /* Graph node category accents + shape (the left-edge bar on a node header,
+       keyed by category in util/colors.ts). Default values track the editor's
+       syntax-style palette; an alternate theme can recolor these to its own
+       palette without touching the node components. */
+    --ds-node-red: #d16969;
+    --ds-node-green: #89d185;
+    --ds-node-lime: #b5cea8;
+    --ds-node-purple: #c586c0;
+    --ds-node-blue: #4fc1ff;
+    --ds-node-radius: 4px;
+
+    /* ───────────────────────────────────────────────────────────────────────
+       Semantic tokens
+
+       Curated surface/text aliases consumed across the editor. They resolve
+       through the bridge layer above, so theming is handled in one place.
+       ─────────────────────────────────────────────────────────────────────── */
+    --colors-bgCanvas: var(--ds-editor-bg);
+    --colors-bgDefault: var(--ds-sidebar-bg);
+    --colors-bgPanel: var(--ds-sidebar-bg);
+    --colors-bgSecondary: var(--ds-widget-bg);
+    --colors-bgEmphasis: var(--ds-toolbar-hover-bg);
+    --colors-bgSubtle: var(--ds-widget-bg);
+    --colors-bgSurface: var(--ds-widget-bg);
+
+    --colors-border: var(--ds-border);
+    --colors-borderDefault: var(--ds-border);
+    --colors-borderMuted: var(--ds-border-muted);
+    --colors-borderSubtle: var(--ds-border-subtle);
+
+    --colors-fg: var(--ds-fg);
+    --colors-text: var(--ds-fg);
+    --colors-fgSubtle: var(--ds-fg-muted);
+
+    --colors-inputBg: var(--ds-input-bg);
+    --colors-inputBorderRest: var(--ds-input-border);
+
+    --colors-error: var(--ds-error);
+    --colors-success: var(--ds-success);
+
+    --chip-color: var(--ds-badge-bg);
+
+    /* Legacy design-system aliases referenced across many components. */
+    --color-neutral-stroke-subtle: var(--ds-border-subtle);
+    --color-neutral-stroke-default: var(--ds-border);
+    --color-neutral-canvas-subtle-bg: var(--ds-tabs-bg);
+    --color-neutral-canvas-default-bg: var(--ds-editor-bg);
+    --color-neutral-background-strong: var(--ds-code-bg);
+    --color-neutral-canvas-minimal-fg-default: var(--ds-fg);
+    --color-neutral-canvas-minimal-fg-subtle: var(--ds-fg-muted);
+    --color-neutral-canvas-subtle-fg-subtle: rgba(0, 0, 0, 0.36);
+    --color-danger-surface-default-idle-bg: var(--ds-error-bg);
+    --color-danger-surface-default-idle-fg-default: var(--ds-error);
+
+    /* ───────────────────────────────────────────────────────────────────────
+       Non-themed scale tokens (sizing/spacing/typography ramps). These are not
+       host-theme-aware, so they hold literal values.
+       ─────────────────────────────────────────────────────────────────────── */
+
+    /* Shared type scale (compact, VSCode-settings density) */
+    --fs-section: 0.7rem;   /* uppercase group headers */
+    --fs-label: 0.8rem;     /* control labels / list rows */
+    --fs-desc: 0.72rem;     /* secondary descriptions */
+    --fs-body: 0.8125rem;   /* node + general body text */
+
+    /* Shared spacing scale */
+    --space-0: 0.125rem;
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+
+    /* Component scale */
+    --component-spacing-xs: var(--space-1);
+    --component-spacing-sm: var(--space-2);
+    --component-spacing-md: var(--space-3);
+    --component-radii-sm: 4px;
+    --component-radii-md: 6px;
+    --component-border-width-md: 1px;
+
+    /* Sizes scale (N × 0.25rem) */
+    --sizes-2: 0.5rem;
+    --sizes-4: 1rem;
+
+    /* Font tokens. NOTE: --font-body-* are consumed via the `font:` shorthand,
+       so they must be complete font values, not bare sizes. */
+    --fontSizes-small: var(--fs-desc, 0.72rem);
+    --font-body-sm: 400 0.8rem/1.4 var(--ds-font-ui);
+    --font-body-xs: 400 0.72rem/1.4 var(--ds-font-ui);
+
+    /* Shadows */
+    --shadows-contextMenu: 0 2px 8px rgba(0, 0, 0, 0.36);
+    --shadows-focus: 0 0 0 1px var(--ds-focus-border);
+}