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

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

@@ -0,0 +1,125 @@
+import React, { useState, useCallback } from 'react';
+import { useActiveGraph } from '@/system/provider';
+import { useStore } from 'zustand';
+import { CreateVariableScreen } from './CreateVariableScreen';
+import { ManageVariablesScreen } from './ManageVariablesScreen';
+import { BasePanel } from '../base';
+
+type VariablesPanelScreen = 'manage' | 'create';
+
+export function VariablesPanel() {
+  const system = useActiveGraph()!;
+  const variables = useStore(system.variableStore, (x) => x.variables);
+  const setVariable = useStore(system.variableStore, (x) => x.setVariable);
+  const removeVariable = useStore(
+    system.variableStore,
+    (x) => x.removeVariable
+  );
+  const controls = useStore(system.controlStore, (x) => x.controls);
+  const defaultControl = useStore(system.controlStore, (x) => x.defaultControl);
+
+  // Get the appropriate control component for a value type
+  const getControlComponent = useCallback(
+    (valueType: string) => {
+      return controls[valueType] || defaultControl;
+    },
+    [controls, defaultControl]
+  );
+
+  const [screen, setScreen] = useState<VariablesPanelScreen>('manage');
+
+  // Section 2 & 3: Select and edit existing variable
+  const [selectedVarId, setSelectedVarId] = useState<string>('');
+  const [editValue, setEditValue] = useState<any>('');
+
+  // Handle selecting a variable
+  const handleSelectVariable = useCallback(
+    (varKey: string) => {
+      setSelectedVarId(varKey);
+      const variable = variables[varKey];
+
+      if (variable) {
+        setEditValue(variable.initialValue);
+      }
+    },
+    [variables]
+  );
+
+  // Handle updating selected variable
+  const handleUpdateVariable = useCallback(() => {
+    if (!selectedVarId || !variables[selectedVarId]) {
+      return;
+    }
+
+    const variable = variables[selectedVarId];
+    // Force re-render by updating the store
+    setVariable(selectedVarId, {
+      ...variable,
+      initialValue: editValue
+    });
+  }, [selectedVarId, editValue, variables, setVariable]);
+
+  // Handle deleting a variable
+  const handleDeleteVariable = useCallback(
+    (varName: string) => {
+      removeVariable(varName);
+      if (varName === selectedVarId) {
+        setSelectedVarId('');
+        setEditValue('');
+      }
+    },
+    [removeVariable, selectedVarId, variables]
+  );
+
+  const selectedVariable = selectedVarId
+    ? (variables[selectedVarId] ?? null)
+    : null;
+  const SelectedVarControlComponent = selectedVariable
+    ? getControlComponent(selectedVariable.valueTypeName)
+    : defaultControl;
+
+  const goToCreate = useCallback(() => {
+    setScreen('create');
+  }, []);
+
+  const goToManage = useCallback(() => {
+    setScreen('manage');
+  }, []);
+
+  const handleCreatedVariable = useCallback(
+    (variableKey: string) => {
+      setSelectedVarId(variableKey);
+      const created = system.variableStore.getState().variables[variableKey];
+      if (created) {
+        setEditValue(created.initialValue);
+      }
+    },
+    [system.variableStore]
+  );
+
+  return (
+    <BasePanel>
+      {screen === 'create' && (
+        <CreateVariableScreen
+          onBack={goToManage}
+          onCancel={goToManage}
+          onCreated={handleCreatedVariable}
+        />
+      )}
+      {screen === 'manage' && (
+        <ManageVariablesScreen
+          variables={variables}
+          selectedVarKey={selectedVarId}
+          onSelectVariable={handleSelectVariable}
+          onDeleteVariable={handleDeleteVariable}
+          onNewVariable={goToCreate}
+          selectedVariable={selectedVariable}
+          editValue={editValue}
+          onChangeEditValue={setEditValue}
+          SelectedVarControlComponent={SelectedVarControlComponent}
+          onUpdateVariable={handleUpdateVariable}
+        />
+      )}
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,149 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    gap: 0;
+    overflow: hidden;
+}
+
+.headerRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+}
+
+.sectionPadded {
+    padding: 0.25em;
+}
+
+.variableList {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+    min-height: 0;
+}
+
+.emptyState {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 16px;
+    text-align: center;
+    gap: 8px;
+}
+
+.emptyStateText {
+    font-size: 13px;
+    opacity: 0.7;
+}
+
+.emptyStateHint {
+    font-size: 12px;
+    opacity: 0.5;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+}
+
+.actionsRow {
+    display: flex;
+    gap: 0.25em;
+}
+
+.tree {
+    display: block;
+}
+
+.tree vscode-tree-item {
+    --vscode-tree-item-padding: 0;
+}
+
+.treeItemContent {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0.25em 0.5em;
+    width: 100%;
+}
+
+.treeItemIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    font-size: 18px;
+    opacity: 0.85;
+}
+
+.treeItemInfo {
+    flex: 1;
+}
+
+.selectedEditor {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    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(--ds-panel-border, rgba(255, 255, 255, 0.08));
+}
+
+.editorTitle {
+    font-size: 11px;
+    font-weight: 600;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.editorVariableName {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.editorFields {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+}
+
+.fieldLabel {
+    font-size: 12px;
+    font-weight: 500;
+    opacity: 0.8;
+    margin-bottom: 4px;
+}
+
+.fieldControl {
+    display: flex;
+    flex-direction: column;
+}
+
+.editorActions {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    gap: 0.5em;
+    padding: 12px 16px;
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
+}

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

@@ -0,0 +1,45 @@
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--ds-icon-fg, #cccccc);
+    padding: 0;
+    border-radius: 5px;
+    transition: background-color 0.1s ease;
+}
+
+.icon:hover:not(.disabled) {
+    background-color: var(--ds-toolbar-hover-bg);
+}
+
+.icon:active:not(.disabled) {
+    background-color: var(--ds-toolbar-active-bg);
+}
+
+.icon:focus-visible {
+    outline: 1px solid var(--ds-focus-border);
+    outline-offset: -1px;
+}
+
+.icon.disabled {
+    cursor: default;
+    opacity: 0.4;
+}
+
+.icon.small {
+    width: 20px;
+    height: 20px;
+}
+
+.icon.medium {
+    width: 24px;
+    height: 24px;
+}
+
+.icon.large {
+    width: 28px;
+    height: 28px;
+}

package/src/components/primitives/icon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './icon.module.css';
+import classNames from 'classnames';
+
+interface IconProps extends React.HTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  title?: string;
+  disabled?: boolean;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Icon: React.FC<IconProps> = ({
+  children,
+  onClick,
+  title,
+  disabled = false,
+  className,
+  size = 'small'
+}) => {
+  return (
+    <button
+      className={classNames(
+        styles.icon,
+        styles[size],
+        disabled && styles.disabled,
+        className
+      )}
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,83 @@
+import type {
+  InputSocketSpecJSON,
+  NodeSpecJSON
+} from '@kiberon-labs/behave-graph';
+
+import cx from 'classnames';
+import React from 'react';
+import { type Connection, Handle, Position, useReactFlow } from 'reactflow';
+
+import { isValidConnection } from '../../../util/isValidConnection.js';
+import { NavArrowRightSolid } from 'iconoir-react';
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
+
+import styles from './styles.module.css';
+
+export type InputSocketProps = {
+  hide: boolean;
+  hideName?: boolean;
+  connected: boolean;
+  value: any | undefined;
+  label?: string;
+  onChange: (key: string, value: any) => void;
+  specJSON: NodeSpecJSON[];
+} & InputSocketSpecJSON;
+
+const InputSocket: React.FC<InputSocketProps> = ({
+  connected,
+  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';
+
+  let colorName = valueTypeColors[valueType];
+  if (colorName === undefined) {
+    colorName = '#c2410c';
+  }
+  const showName =
+    hideName !== true && (isFlowSocket === false || name !== 'flow');
+
+  return (
+    <div className={cx(styles.row, hide ? styles.hidden : undefined)}>
+      {isFlowSocket && <NavArrowRightSolid />}
+      {showName && <div className={styles.name}>{label ?? name}</div>}
+
+      <Handle
+        id={name}
+        type="target"
+        title={valueType}
+        position={Position.Left}
+        style={{
+          borderColor: colorName,
+          background: colorName
+        }}
+        className={cx(
+          styles.socket,
+          connected ? undefined : styles.disconnected
+        )}
+        isValidConnection={(connection: Connection) =>
+          isValidConnection(connection, instance, specJSON, {
+            autoConvert,
+            conversions
+          })
+        }
+      >
+        <Icon />
+      </Handle>
+    </div>
+  );
+};
+
+export default InputSocket;

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

@@ -0,0 +1,26 @@
+.row {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-start;
+    height: 1.375rem;
+}
+
+.hidden {
+    display: none;
+}
+
+.name {
+    text-transform: capitalize;
+    margin-right: 0.5rem;
+}
+
+.socket {}
+
+.socket svg {
+    stroke: currentColor;
+}
+
+.disconnected {
+    background: var(--ds-widget-bg, #333) !important;
+}

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

@@ -0,0 +1,68 @@
+import type {
+  NodeSpecJSON,
+  OutputSocketSpecJSON
+} from '@kiberon-labs/behave-graph';
+import cx from 'classnames';
+import { type Connection, Handle, Position, useReactFlow } from 'reactflow';
+import { isValidConnection } from '../../../util/isValidConnection.js';
+import { NavArrowRightSolid } from 'iconoir-react';
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
+import styles from './styles.module.css';
+
+export type OutputSocketProps = {
+  connected: boolean;
+  hide?: boolean;
+  label?: string;
+  specJSON: NodeSpecJSON[];
+} & OutputSocketSpecJSON;
+
+export default function OutputSocket({
+  specJSON,
+  connected,
+  hide,
+  valueType,
+  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';
+  let colorName = valueTypeColors[valueType];
+  if (colorName === undefined) {
+    colorName = 'red';
+  }
+  const [backgroundColor, borderColor] = [colorName, colorName];
+  const showName = isFlowSocket === false || name !== 'flow';
+
+  return (
+    <div className={cx(styles.row, hide ? styles.hidden : undefined)}>
+      {showName && <div className={styles.name}>{label ?? name}</div>}
+      {isFlowSocket && <NavArrowRightSolid />}
+
+      <Handle
+        id={name}
+        type="source"
+        position={Position.Right}
+        style={{
+          borderColor: borderColor,
+          background: connected ? backgroundColor : undefined
+        }}
+        className={cx(styles.socket)}
+        isValidConnection={(connection: Connection) =>
+          isValidConnection(connection, instance, specJSON, {
+            autoConvert,
+            conversions
+          })
+        }
+      >
+        <Icon />
+      </Handle>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+.row {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-end;
+  height: 1.375rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.name {
+  text-transform: capitalize;
+  margin-right: 0.5rem;
+}
+
+.socket {}
+
+.socket svg {
+  stroke: currentColor;
+}

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;
+}