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

package/src/components/nodes/group/index.tsx

@@ -0,0 +1,109 @@
+import {
+  type NodeProps,
+  NodeToolbar,
+  getNodesBounds,
+  useStore
+} from 'reactflow';
+import { NodeResizer } from '@reactflow/node-resizer';
+import { useCallback, type ComponentType } from 'react';
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { useSystem } from '@/system/provider';
+import type { IGroupNode } from '@/types/nodes';
+
+const lineStyle = { borderColor: 'white' };
+const padding = 25;
+
+function GroupNode(props: NodeProps<IGroupNode['data']>) {
+  const { id, data } = props;
+  const system = useSystem();
+  const { minWidth, minHeight, hasChildNodes } = useStore((store) => {
+    const childNodes = Array.from(store.nodeInternals.values()).filter(
+      (n) => n.parentId === id
+    );
+    const rect = getNodesBounds(childNodes);
+
+    return {
+      minWidth: rect.width + padding * 2,
+      minHeight: rect.height + padding * 2,
+      hasChildNodes: childNodes.length > 0
+    };
+  }, isEqual);
+
+  const onDelete = useCallback(() => {
+    system.actionStore.getState().actions.deleteNodes([id]);
+  }, [system, id]);
+
+  const onDetach = useCallback(() => {
+    system.actionStore.getState().actions.ungroupNodes(id);
+  }, [system, id]);
+
+  const onColorChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      system.actionStore
+        .getState()
+        .actions.updateGroupColor(id, e.target.value);
+    },
+    [system, id]
+  );
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        background: `${data.color || '#FF0000'}40`
+      }}
+    >
+      <NodeResizer
+        lineStyle={lineStyle}
+        minWidth={minWidth}
+        minHeight={minHeight}
+      />
+
+      <NodeToolbar className="nodrag">
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <input
+            type="color"
+            value={data.color || '#FF0000'}
+            onChange={onColorChange}
+            style={{
+              width: '32px',
+              height: '28px',
+              border: '1px solid var(--vscode-input-border)',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              backgroundColor: 'transparent'
+            }}
+            title="Change group color"
+          />
+          <VscodeButton secondary onClick={onDelete}>
+            Delete
+          </VscodeButton>
+          {hasChildNodes && (
+            <VscodeButton secondary onClick={onDetach}>
+              Ungroup
+            </VscodeButton>
+          )}
+        </div>
+      </NodeToolbar>
+    </div>
+  );
+}
+
+GroupNode as ComponentType<NodeProps<IGroupNode['data']>>;
+type IsEqualCompareObj = {
+  minWidth: number;
+  minHeight: number;
+  hasChildNodes: boolean;
+};
+
+function isEqual(prev: IsEqualCompareObj, next: IsEqualCompareObj): boolean {
+  return (
+    prev.minWidth === next.minWidth &&
+    prev.minHeight === next.minHeight &&
+    prev.hasChildNodes === next.hasChildNodes
+  );
+}
+
+export default GroupNode as ComponentType<NodeProps<IGroupNode['data']>>;

package/src/components/nodes/wrapper/index.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import styles from './styles.module.css';
+import { ErrorBoundary } from 'react-error-boundary';
+import classNames from 'classnames';
+import {
+  annotatedTitle,
+  description,
+  executing,
+  hidden,
+  pinned
+} from '@/annotations';
+import { MessageText, PinSolid } from 'iconoir-react';
+
+interface NodeProps {
+  icon?: React.ReactNode;
+  subtitle?: string;
+  error?: Error | null;
+  isAsync?: boolean;
+  children?: React.ReactNode;
+  controls?: React.ReactNode;
+  style?: React.CSSProperties;
+  metadata?: Record<string, any>;
+}
+
+export const BaseNodeWrapper = (props: NodeProps) => {
+  const { icon, metadata, subtitle, error, children, controls, ...rest } =
+    props;
+
+  const title = metadata?.[annotatedTitle];
+  const isExecuting = metadata?.[executing];
+  const isHidden = metadata?.[hidden];
+  const isPinned = metadata?.[pinned];
+  const hasDescription = metadata?.[description];
+
+  return (
+    <ErrorBoundary fallback={<div>Error occurred</div>}>
+      <div
+        className={classNames(
+          styles.nodeWrapper,
+          error && styles.error,
+          isExecuting && styles.executing,
+          isHidden && styles.hidden,
+          isPinned && styles.pinned
+        )}
+      >
+        <div
+          className={classNames(!isPinned && 'reactflow-draggable-handle')}
+          {...rest}
+        >
+          <div className={styles.header}>
+            <div className={styles.headerContent}>
+              {icon}
+              <div className={styles.titleContainer}>
+                <span className={styles.title}>{title}</span>
+                {subtitle && (
+                  <span className={styles.subtitle}>{subtitle}</span>
+                )}
+              </div>
+            </div>
+            <div className={styles.controls}>{controls}</div>
+            <div className={styles.icons}>
+              {hasDescription && <MessageText className={styles.smallIcon} />}
+              {isPinned && <PinSolid className={styles.smallIcon} />}
+            </div>
+          </div>
+
+          <div />
+          {children}
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+};

package/src/components/nodes/wrapper/styles.module.css

@@ -0,0 +1,113 @@
+.collapserContainer {
+    height: 0;
+    overflow: hidden;
+}
+
+.collapserContent {
+    position: relative;
+    padding: var(--component-spacing-xs);
+    padding-bottom: var(--component-spacing-md);
+}
+
+.nodeWrapper {
+    position: relative;
+    box-shadow: var(--shadows-contextMenu);
+    border-radius: var(--component-radii-md);
+    background: var(--color-neutral-canvas-default-bg);
+    border: 2px solid var(--color-neutral-stroke-subtle);
+    flex: 1;
+    display: flex;
+}
+
+.nodeWrapper.error {
+    --nodeBorderColor: var(--color-danger-surface-default-idle-fg-default);
+    --nodeBgColor: var(--color-danger-surface-default-idle-bg);
+    --nodeTextColor: var(--color-danger-surface-default-idle-fg-default);
+}
+
+.nodeWrapper.executing {
+    border-color: var(--vscode-focusBorder);
+    box-shadow: 0 0 8px var(--vscode-focusBorder);
+    animation: pulse-border 1s ease-in-out infinite;
+}
+
+.nodeWrapper.hidden {
+    opacity: 0.1;
+}
+
+.nodeWrapper.pinned {
+    cursor: not-allowed;
+    border-color: var(--vscode-editorWarning-foreground);
+}
+
+.smallIcon {
+    width: 1em;
+    height: 1em;
+}
+
+@keyframes pulse-border {
+
+    0%,
+    100% {
+        box-shadow: 0 0 8px var(--vscode-focusBorder);
+    }
+
+    50% {
+        box-shadow: 0 0 16px var(--vscode-focusBorder);
+    }
+}
+
+.nodeContent {
+    flex: 1;
+}
+
+.icons {
+    display: flex;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: -1.25em;
+    width: 100%;
+}
+
+.headerContent {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.titleContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.title {
+    font: var(--font-body-sm);
+    color: var(--color-neutral-canvas-minimal-fg-default);
+}
+
+.subtitle {
+    font: var(--font-body-xs);
+    color: var(--color-neutral-canvas-minimal-fg-subtle);
+}
+
+.descriptionIcon {
+    display: flex;
+    align-items: center;
+    color: var(--vscode-descriptionForeground);
+    opacity: 0.7;
+    cursor: help;
+}
+
+.descriptionIcon:hover {
+    opacity: 1;
+}

package/src/components/notifications/NotificationProvider.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import toast, { Toaster } from 'react-hot-toast';
+import { useSystem } from '@/system/provider';
+
+/**
+ * NotificationProvider listens to pubsub notification events and displays toasts
+ */
+export const NotificationProvider: React.FC = () => {
+  const system = useSystem();
+
+  useEffect(() => {
+    // Subscribe to notification events
+    const token = system.pubsub.subscribe('notification', (_, data) => {
+      const { type, message, options } = data;
+
+      switch (type) {
+        case 'success':
+          toast.success(message, options);
+          break;
+        case 'error':
+          toast.error(message, options);
+          break;
+        case 'loading':
+          toast.loading(message, options);
+          break;
+        case 'info':
+        default:
+          toast(message, options);
+          break;
+      }
+    });
+
+    // Subscribe to notification dismiss events
+    const dismissToken = system.pubsub.subscribe(
+      'notification:dismiss',
+      (_, data) => {
+        if (data.toastId) {
+          toast.dismiss(data.toastId);
+        } else {
+          toast.dismiss();
+        }
+      }
+    );
+
+    // Cleanup subscriptions on unmount
+    return () => {
+      if (token) {
+        system.pubsub.unsubscribe(token);
+      }
+      if (dismissToken) {
+        system.pubsub.unsubscribe(dismissToken);
+      }
+    };
+  }, [system.pubsub]);
+
+  return (
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        duration: 4000,
+        style: {
+          background: 'var(--colors-bgSecondary, #2a2a2a)',
+          color: 'var(--colors-text, #ffffff)',
+          border: '1px solid var(--colors-border, #404040)'
+        },
+        success: {
+          iconTheme: {
+            primary: 'var(--colors-success, #22c55e)',
+            secondary: 'var(--colors-bgSecondary, #2a2a2a)'
+          }
+        },
+        error: {
+          iconTheme: {
+            primary: 'var(--colors-error, #ef4444)',
+            secondary: 'var(--colors-bgSecondary, #2a2a2a)'
+          }
+        }
+      }}
+    />
+  );
+};

package/src/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationProvider';
+export * from './utils';

package/src/components/notifications/utils.ts

@@ -0,0 +1,71 @@
+import type { ToastOptions } from 'react-hot-toast';
+import type { PubSub } from '@/system/pubsub';
+
+export interface NotificationData {
+  type: 'success' | 'error' | 'info' | 'loading';
+  message: string;
+  options?: ToastOptions;
+}
+
+/**
+ * Emit a success notification
+ */
+export function notifySuccess(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'success',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit an error notification
+ */
+export function notifyError(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'error',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit an info notification
+ */
+export function notifyInfo(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): void {
+  pubsub.publish('notification', {
+    type: 'info',
+    message,
+    options
+  });
+}
+
+/**
+ * Emit a loading notification
+ */
+export function notifyLoading(
+  pubsub: PubSub,
+  message: string,
+  options?: ToastOptions
+): string {
+  pubsub.publish('notification', {
+    type: 'loading',
+    message,
+    options
+  });
+  // Note: In a real implementation, you'd return the toast ID
+  // For now, we return a dummy ID since the pubsub is fire-and-forget
+  return `toast_${Date.now()}`;
+}

package/src/components/panels/alignment/index.module.css

@@ -0,0 +1,20 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    padding: 0.25rem;
+    overflow: auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    display: flex;
+    flex: 1;
+    height: 100%;
+}