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

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

@@ -0,0 +1,236 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    gap: 0;
+    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;
+    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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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));
+    flex-shrink: 0;
+}
+
+.editorHeader {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--vscode-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(--vscode-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(--vscode-icon-foreground, #cccccc);
+    padding: 0;
+    border-radius: 5px;
+    transition: background-color 0.1s ease;
+}
+
+.icon:hover:not(.disabled) {
+    background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.icon:active:not(.disabled) {
+    background-color: var(--vscode-toolbar-activeBackground);
+}
+
+.icon:focus-visible {
+    outline: 1px solid var(--vscode-focusBorder);
+    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,76 @@
+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;
+  onChange: (key: string, value: any) => void;
+  specJSON: NodeSpecJSON[];
+} & InputSocketSpecJSON;
+
+const InputSocket: React.FC<InputSocketProps> = ({
+  connected,
+  specJSON,
+  hideName,
+  hide,
+  ...rest
+}) => {
+  const { name, valueType } = rest;
+  const instance = useReactFlow();
+  const sys = useSystem();
+  const { valueTypeColors, icons, defaultIcon } = useStore(sys.legendStore);
+  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}>{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)
+        }
+      >
+        <Icon />
+      </Handle>
+    </div>
+  );
+};
+
+export default InputSocket;

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

@@ -0,0 +1,27 @@
+.row {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: flex-start;
+    height: 1.75rem;
+}
+
+.hidden {
+    display: none;
+}
+
+.name {
+    text-transform: capitalize;
+    margin-right: 0.5rem;
+}
+
+.socket {}
+
+.socket svg {
+    stroke: currentColor;
+}
+
+.disconnected {
+    /* Tailwind `bg-gray-800` equivalent */
+    background: #333 !important;
+}

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

@@ -0,0 +1,61 @@
+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;
+  specJSON: NodeSpecJSON[];
+} & OutputSocketSpecJSON;
+
+export default function OutputSocket({
+  specJSON,
+  connected,
+  hide,
+  valueType,
+  name
+}: OutputSocketProps) {
+  const instance = useReactFlow();
+  const sys = useSystem();
+  const { valueTypeColors, icons, defaultIcon } = useStore(sys.legendStore);
+  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}>{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)
+        }
+      >
+        <Icon />
+      </Handle>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+.row {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-end;
+  height: 1.75rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.name {
+  text-transform: capitalize;
+  margin-right: 0.5rem;
+}
+
+.socket {}
+
+.socket svg {
+  stroke: currentColor;
+}
+
+.disconnected {
+  /* Tailwind `bg-gray-800` equivalent */
+  background: #333 !important;
+}

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(--vscode-textCodeBlock-background);
+        padding: 0.125em 0.25em;
+        border-radius: 3px;
+        font-family: var(--vscode-editor-font-family);
+    }
+
+    pre {
+        background: var(--vscode-textCodeBlock-background);
+        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,112 @@
+.dock {
+    border: 1px solid var(--vscode-settings-sashBorder);
+}
+
+.dock-panel {
+    color: inherit;
+    border-color: transparent;
+    border: none;
+    background: var(--colors-bgCanvas);
+}
+
+.dock-top .dock-bar {
+    border-bottom-color: var(--color-neutral-stroke-subtle);
+    padding-left: 0px;
+}
+
+.dock-tab {
+    color: var(--colors-fg);
+    background: green;
+    border-bottom: none;
+    z-index: 10;
+}
+
+.dock-tab-btn[aria-selected="true"] {
+    background: var(--colors-bgSurface);
+}
+
+.dock-tab-close-btn {
+    position: static;
+
+    &:hover {
+        background: var(--colors-bgEmphasis);
+        border-radius: 4px;
+    }
+}
+
+
+.dock-tab {
+    margin-right: 0;
+    border-right: 1px solid var(--colors-borderSubtle);
+    border-bottom: 1px solid var(--colors-borderSubtle);
+}
+
+.dock-nav-operations-hidden {
+    display: none;
+}
+
+.dock-fbox {
+    overflow: hidden;
+}
+
+.dock-nav {
+    flex-grow: 1;
+}
+
+.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);
+}
+
+.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.5em;
+}
+
+.dock-panel,
+.dock-top .dock-bar,
+.dock-tab {
+    background: var(--vscode-editorGroupHeader-tabsBackground);
+}
+
+.dock-panel.dock-style-main .dock-bar {
+    border-bottom-color: var(--color-neutral-stroke-subtle);
+}
+
+.drag-initiator {
+    transition: width 0.2s;
+}
+
+.dock-hbox>.dock-divider {
+    width: 0.5px;
+    opacity: 0.1;
+    margin-left: -1px;
+}
+
+.dock-vbox>.dock-divider {
+    height: 0.5px;
+    opacity: 0.1;
+    margin-top: -1px;
+}
+
+.dock-divider {
+    background: var(--colors-borderMuted);
+    flex: 0 0 1px;
+}
+
+
+.dock-divider:hover {
+    background: var(--vscode-button-background, #0078d4);
+    transform: scaleX(5);
+    opacity: 1;
+}