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

package/src/css/rc-dock.css

@@ -1,5 +1,5 @@
 .dock {
-    border: 1px solid var(--vscode-settings-sashBorder);
+    border: 1px solid var(--ds-sash-border);
 }
 
 .dock-panel {
@@ -9,36 +9,79 @@
     background: var(--colors-bgCanvas);
 }
 
+/* ---- Tab bar: VSCode editor-group-header style ---- */
+.dock-bar,
 .dock-top .dock-bar {
-    border-bottom-color: var(--color-neutral-stroke-subtle);
-    padding-left: 0px;
+    background: var(--ds-tabs-bg, #181818);
+    border-bottom: 1px solid var(--colors-borderMuted);
+    padding-left: 0;
 }
 
 .dock-tab {
-    color: var(--colors-fg);
-    background: green;
-    border-bottom: none;
+    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-btn[aria-selected="true"] {
-    background: var(--colors-bgSurface);
+.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;
+}
 
-    &:hover {
-        background: var(--colors-bgEmphasis);
-        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-tab {
+.dock-panel.dock-style-main .dock-tab,
+.dock-panel.dock-style-card .dock-tab {
     margin-right: 0;
-    border-right: 1px solid var(--colors-borderSubtle);
-    border-bottom: 1px solid var(--colors-borderSubtle);
+    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 {
@@ -55,12 +98,13 @@
 
 .dock-nav-wrap {
     cursor: move;
-    border-bottom: 1px solid var(--colors-borderDefault);
 }
 
-.dock-panel.dock-style-main .dock-tab,
-.dock-tab {
-    background: var(--color-neutral-canvas-subtle-bg);
+/* 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 {
@@ -70,43 +114,99 @@
 .drag-initiator {
     display: flex;
     align-items: center;
-    gap: 0.5em;
-}
-
-.dock-panel,
-.dock-top .dock-bar,
-.dock-tab {
-    background: var(--vscode-editorGroupHeader-tabsBackground);
+    gap: 0.4em;
+    transition: width 0.2s;
 }
 
-.dock-panel.dock-style-main .dock-bar {
-    border-bottom-color: var(--color-neutral-stroke-subtle);
+/* 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;
 }
 
-.drag-initiator {
-    transition: width 0.2s;
+/* 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 {
-    width: 0.5px;
-    opacity: 0.1;
-    margin-left: -1px;
+    transform: none;
+    width: 4px;
+    margin: 0;
+    cursor: ew-resize;
 }
 
 .dock-vbox>.dock-divider {
-    height: 0.5px;
-    opacity: 0.1;
-    margin-top: -1px;
+    transform: none;
+    height: 4px;
+    margin: 0;
+    cursor: ns-resize;
 }
 
-.dock-divider {
-    background: var(--colors-borderMuted);
-    flex: 0 0 1px;
+.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. */
 
-.dock-divider:hover {
-    background: var(--vscode-button-background, #0078d4);
-    transform: scaleX(5);
-    opacity: 1;
+/* 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

@@ -1,100 +1,101 @@
 .rc-menu {
     color: var(--colors-fg);
     border: none;
-    font-size: var(--fontSizes-small);
-    box-shadow: var(--shadows-focus);
-    font:var(--vscode-editor-font-family) !important;
-}
-
-
-
-.rc-menu-item-active,
-.rc-menu-submenu-active>.rc-menu-submenu-title {
-    background: var(--colors-bgEmphasis);
-    cursor: default;
+    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;
-    background-color: var(--colors-bgCanvas);
+    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-borderSubtle);
+    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: 0em 0.5em;
-    font-size: 0.8em;
-}
-
-.rc-menu-item-selected {
-    background-color: unset;
-    transform: translateZ(0);
-}
-
-.rc-menu-submenu-selected {
-    background-color: unset;
-}
-
-.rc-menu-horizontal>.rc-menu-item:hover,
-.rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title:hover {
-    background: var(--colors-bgEmphasis);
-    border-radius: 2px;
+    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 {
-    color: white;
-    border-radius: 2px;
-    background: var(--colors-bgSubtle);
+    background: var(--ds-list-hover-bg, #2a2d2e);
+    color: var(--ds-fg);
+    border-radius: 4px;
     border-bottom: none;
 }
 
-
-
-
-.rc-menu-submenu>.rc-menu {
-    background-color: var(--colors-bgCanvas);
-    border: 1px solid var(--colors-borderSubtle);
-    font-size: 0.8em;
+.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-vertical-left>.rc-menu-submenu>.rc-menu-submenu-title,
-.rc-menu-vertical-right>.rc-menu-submenu>.rc-menu-submenu-title,
-.rc-menu-inline>.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;
-    padding: var(--sizes-2) var(--sizes-4);
 }
 
 .rc-menu-item-divider {
-    background-color:var(--colors-borderDefault);
+    background-color: var(--ds-border-subtle, #454545);
+    height: 1px;
+    margin: 4px 6px;
 }
 
 .rc-menu-item:hover .inner-menu-item {
-    background-color: var(--vscode-button-background, #0078d4)
+    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 .dock-nav-list {
+    display: none;
 }
 
-.dock-style-headless .drag-initiator{
-    height:0.5em;
-}
+.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 */
+}