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

package/src/components/panels/variables/CreateVariableScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useStore } from 'zustand';
 import { Variable } from '@kiberon-labs/behave-graph';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph } from '@/system/provider';
 import {
   VscodeButton,
   VscodeTextfield,
@@ -18,8 +18,8 @@ type Props = {
 };
 
 export function CreateVariableScreen({ onBack, onCancel, onCreated }: Props) {
-  const system = useSystem();
-  const registry = useStore(system.registry);
+  const system = useActiveGraph()!;
+  const registry = useStore(system.editor.registry);
   const setVariable = useStore(system.variableStore, (x) => x.setVariable);
   const controls = useStore(system.controlStore, (x) => x.controls);
   const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);

package/src/components/panels/variables/ManageVariablesScreen.tsx

@@ -8,9 +8,10 @@ import {
 } from '@vscode-elements/react-elements';
 import { Plus, TrashSolid } from 'iconoir-react';
 import styles from './styles.module.css';
-import { useSystem } from '@/system';
+import { useActiveGraph } from '@/system';
 import { useStore } from 'zustand';
 import { Icon } from '@/components/primitives/icon';
+import { PanelHeader } from '../common/PanelHeader';
 
 type ValueControlProps = {
   value: any;
@@ -43,8 +44,8 @@ export function ManageVariablesScreen({
   SelectedVarControlComponent,
   onUpdateVariable
 }: Props) {
-  const system = useSystem();
-  const icons = useStore(system.legendStore, (x) => x.icons);
+  const system = useActiveGraph()!;
+  const icons = useStore(system.editor.legendStore, (x) => x.icons);
   const variables = useStore(system.variableStore, (x) => x.variables);
 
   const handleTreeSelect = (ev: unknown) => {
@@ -62,12 +63,14 @@ export function ManageVariablesScreen({
 
   return (
     <div className={styles.root}>
-      <div className={styles.header}>
-        <div className={styles.headerTitle}>Variables</div>
-        <Icon title="New variable" onClick={onNewVariable}>
-          <Plus />
-        </Icon>
-      </div>
+      <PanelHeader
+        title="Variables"
+        actions={
+          <Icon title="New variable" onClick={onNewVariable}>
+            <Plus />
+          </Icon>
+        }
+      />
       <VscodeDivider />
 
       <div className={styles.variableList}>

package/src/components/panels/variables/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { useSystem } from '@/system/provider';
+import { useActiveGraph } from '@/system/provider';
 import { useStore } from 'zustand';
 import { CreateVariableScreen } from './CreateVariableScreen';
 import { ManageVariablesScreen } from './ManageVariablesScreen';
@@ -8,7 +8,7 @@ import { BasePanel } from '../base';
 type VariablesPanelScreen = 'manage' | 'create';
 
 export function VariablesPanel() {
-  const system = useSystem();
+  const system = useActiveGraph()!;
   const variables = useStore(system.variableStore, (x) => x.variables);
   const setVariable = useStore(system.variableStore, (x) => x.setVariable);
   const removeVariable = useStore(

package/src/components/panels/variables/styles.module.css

@@ -7,30 +7,12 @@
     overflow: hidden;
 }
 
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: var(--vscode-sideBar-background, var(--colors-bgPanel));
-    flex-shrink: 0;
-}
-
-.headerTitle {
-    font-size: 1.1em;
-    font-weight: bold;
-}
-
 .headerRow {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
-.headerRowPadded {
-    padding: 0.25em;
-}
-
 .section {
     display: flex;
     flex-direction: column;
@@ -79,23 +61,6 @@
     gap: 0.25em;
 }
 
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25em;
-}
-
-.listItem {
-    display: flex;
-    gap: 0.25em;
-    align-items: center;
-    padding: 0.25em;
-}
-
-.listItemContent {
-    flex: 1;
-}
-
 .tree {
     display: block;
 }
@@ -127,70 +92,18 @@
     flex: 1;
 }
 
-.treeItemName {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1.4;
-}
-
-.treeItemMeta {
-    font-size: 11px;
-    opacity: 0.6;
-    line-height: 1.2;
-}
-
-
-
-.treeItemRow {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    width: 100%;
-    padding: 8px 12px;
-    min-height: 44px;
-}
-
-.treeItemText {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    justify-content: center;
-}
-
-.treeItemTitle {
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 1.3;
-}
-
-.treeItemID {
-    font-size: 0.8em;
-    opacity: 0.7;
-}
-
-.treeItemSub {
-    font-size: 11px;
-    opacity: 0.6;
-    line-height: 1.2;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .selectedEditor {
     display: flex;
     flex-direction: column;
     gap: 0;
-    border-top: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.1));
-    background: var(--vscode-sideBar-background, var(--colors-bgPanel));
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.1));
+    background: var(--ds-sidebar-bg, var(--colors-bgPanel));
     flex-shrink: 0;
 }
 
 .editorHeader {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+    border-bottom: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
 }
 
 .editorTitle {
@@ -232,5 +145,5 @@
     justify-content: end;
     gap: 0.5em;
     padding: 12px 16px;
-    border-top: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
 }

package/src/components/primitives/icon.module.css

@@ -5,22 +5,22 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--vscode-icon-foreground, #cccccc);
+    color: var(--ds-icon-fg, #cccccc);
     padding: 0;
     border-radius: 5px;
     transition: background-color 0.1s ease;
 }
 
 .icon:hover:not(.disabled) {
-    background-color: var(--vscode-toolbar-hoverBackground);
+    background-color: var(--ds-toolbar-hover-bg);
 }
 
 .icon:active:not(.disabled) {
-    background-color: var(--vscode-toolbar-activeBackground);
+    background-color: var(--ds-toolbar-active-bg);
 }
 
 .icon:focus-visible {
-    outline: 1px solid var(--vscode-focusBorder);
+    outline: 1px solid var(--ds-focus-border);
     outline-offset: -1px;
 }
 

package/src/components/sockets/input/index.tsx

@@ -19,6 +19,7 @@ export type InputSocketProps = {
   hideName?: boolean;
   connected: boolean;
   value: any | undefined;
+  label?: string;
   onChange: (key: string, value: any) => void;
   specJSON: NodeSpecJSON[];
 } & InputSocketSpecJSON;
@@ -28,12 +29,15 @@ const InputSocket: React.FC<InputSocketProps> = ({
   specJSON,
   hideName,
   hide,
+  label,
   ...rest
 }) => {
   const { name, valueType } = rest;
   const instance = useReactFlow();
   const sys = useSystem();
   const { valueTypeColors, icons, defaultIcon } = useStore(sys.legendStore);
+  const autoConvert = useStore(sys.systemSettings, (s) => s.autoConvert);
+  const conversions = useStore(sys.conversionStore, (s) => s.conversions);
   const Icon = icons[valueType] ?? defaultIcon;
 
   const isFlowSocket = valueType === 'flow';
@@ -48,7 +52,7 @@ const InputSocket: React.FC<InputSocketProps> = ({
   return (
     <div className={cx(styles.row, hide ? styles.hidden : undefined)}>
       {isFlowSocket && <NavArrowRightSolid />}
-      {showName && <div className={styles.name}>{name}</div>}
+      {showName && <div className={styles.name}>{label ?? name}</div>}
 
       <Handle
         id={name}
@@ -64,7 +68,10 @@ const InputSocket: React.FC<InputSocketProps> = ({
           connected ? undefined : styles.disconnected
         )}
         isValidConnection={(connection: Connection) =>
-          isValidConnection(connection, instance, specJSON)
+          isValidConnection(connection, instance, specJSON, {
+            autoConvert,
+            conversions
+          })
         }
       >
         <Icon />

package/src/components/sockets/input/styles.module.css

@@ -3,7 +3,7 @@
     flex-grow: 1;
     align-items: center;
     justify-content: flex-start;
-    height: 1.75rem;
+    height: 1.375rem;
 }
 
 .hidden {
@@ -22,6 +22,5 @@
 }
 
 .disconnected {
-    /* Tailwind `bg-gray-800` equivalent */
-    background: #333 !important;
+    background: var(--ds-widget-bg, #333) !important;
 }

package/src/components/sockets/output/index.tsx

@@ -13,6 +13,7 @@ import styles from './styles.module.css';
 export type OutputSocketProps = {
   connected: boolean;
   hide?: boolean;
+  label?: string;
   specJSON: NodeSpecJSON[];
 } & OutputSocketSpecJSON;
 
@@ -21,11 +22,14 @@ export default function OutputSocket({
   connected,
   hide,
   valueType,
-  name
+  name,
+  label
 }: OutputSocketProps) {
   const instance = useReactFlow();
   const sys = useSystem();
   const { valueTypeColors, icons, defaultIcon } = useStore(sys.legendStore);
+  const autoConvert = useStore(sys.systemSettings, (s) => s.autoConvert);
+  const conversions = useStore(sys.conversionStore, (s) => s.conversions);
   const Icon = icons[valueType] ?? defaultIcon;
 
   const isFlowSocket = valueType === 'flow';
@@ -38,7 +42,7 @@ export default function OutputSocket({
 
   return (
     <div className={cx(styles.row, hide ? styles.hidden : undefined)}>
-      {showName && <div className={styles.name}>{name}</div>}
+      {showName && <div className={styles.name}>{label ?? name}</div>}
       {isFlowSocket && <NavArrowRightSolid />}
 
       <Handle
@@ -51,7 +55,10 @@ export default function OutputSocket({
         }}
         className={cx(styles.socket)}
         isValidConnection={(connection: Connection) =>
-          isValidConnection(connection, instance, specJSON)
+          isValidConnection(connection, instance, specJSON, {
+            autoConvert,
+            conversions
+          })
         }
       >
         <Icon />

package/src/components/sockets/output/styles.module.css

@@ -3,7 +3,7 @@
   flex-grow: 1;
   align-items: center;
   justify-content: flex-end;
-  height: 1.75rem;
+  height: 1.375rem;
 }
 
 .hidden {
@@ -19,9 +19,4 @@
 
 .socket svg {
   stroke: currentColor;
-}
-
-.disconnected {
-  /* Tailwind `bg-gray-800` equivalent */
-  background: #333 !important;
 }

package/src/css/notes.css

@@ -0,0 +1,135 @@
+/*
+ * Markdown note nodes (notes plugin). Global classes rather than a CSS module:
+ * the note component is lazy-loaded, and the bundler emits a lazy chunk's CSS
+ * module into a separate dist asset that hosts never load — only the entry CSS
+ * (dist/index.css) ships. Rich-text content styling comes from the shared
+ * .ProseMirror rules in prosemirror.css.
+ */
+
+.notes-node-root {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 160px;
+    min-height: 80px;
+}
+
+.notes-node {
+    display: flex;
+    flex-direction: column;
+    background: var(--ds-editor-bg);
+    color: var(--ds-editor-fg);
+    border: 1px solid var(--ds-blockquote-border);
+    border-radius: 2px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.notes-node__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px;
+    background: var(--colors-bgSurface);
+    border-bottom: 1px solid var(--ds-border-subtle);
+    color: var(--ds-fg);
+    cursor: grab;
+    user-select: none;
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.notes-node__grip {
+    opacity: 0.6;
+}
+
+.notes-node__editor {
+    flex: 1;
+    padding: 4px 10px;
+    cursor: text;
+    overflow: auto;
+    color: var(--ds-editor-fg);
+}
+
+.notes-node__editor .ProseMirror {
+    outline: none;
+    min-height: 100%;
+    caret-color: var(--ds-editor-fg);
+}
+
+.notes-node__editor .ProseMirror blockquote {
+    border-left: 3px solid var(--ds-blockquote-border);
+    padding-left: 1em;
+    margin: 0.5em 0;
+    font-style: italic;
+}
+
+/* Embedded videos (tiptap youtube extension) scale to the note width. */
+.notes-node__editor .ProseMirror div[data-youtube-video] {
+    margin: 0.5em 0;
+}
+
+.notes-node__editor .ProseMirror div[data-youtube-video] iframe {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    border: 0;
+    border-radius: 3px;
+}
+
+.notes-toolbar {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    background: var(--ds-widget-bg);
+    border: 1px solid var(--ds-border-subtle);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    padding: 4px;
+    z-index: 1000;
+    animation: notes-toolbar-fade-in 0.15s ease;
+    pointer-events: auto;
+}
+
+.notes-toolbar__row {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+}
+
+.notes-toolbar__embed {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.notes-toolbar__embed vscode-textfield {
+    flex: 1;
+    min-width: 220px;
+}
+
+@keyframes notes-toolbar-fade-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-5px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+.notes-toolbar__separator {
+    width: 1px;
+    height: 20px;
+    background: var(--ds-border-subtle);
+    margin: 0 4px;
+}

package/src/css/prosemirror.css

@@ -28,14 +28,14 @@
     }
 
     code {
-        background: var(--vscode-textCodeBlock-background);
+        background: var(--ds-code-bg);
         padding: 0.125em 0.25em;
         border-radius: 3px;
-        font-family: var(--vscode-editor-font-family);
+        font-family: var(--ds-font-mono);
     }
 
     pre {
-        background: var(--vscode-textCodeBlock-background);
+        background: var(--ds-code-bg);
         padding: 0.75em;
         border-radius: 4px;
         overflow-x: auto;