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

package/src/components/panels/events/EditEventPanel.tsx

@@ -0,0 +1,324 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeBadge,
+  VscodeButton,
+  VscodeOption,
+  VscodeSingleSelect,
+  VscodeTextfield
+} from '@vscode-elements/react-elements';
+
+import { useActiveGraph } from '@/system';
+import { BasePanel } from '../base';
+import styles from './styles.module.css';
+import type { ExtendedCustomEventJSON } from '@/store/events';
+import { Plus, Trash, ArrowLeft, FloppyDisk, TrashSolid } from 'iconoir-react';
+import { Icon } from '@/components/primitives/icon';
+
+type CustomEventParameterJSON = NonNullable<
+  ExtendedCustomEventJSON['parameters']
+>[number];
+
+interface EditEventPanelProps {
+  eventUiId: string | null;
+  onBack: () => void;
+}
+
+export const EditEventPanel: React.FC<EditEventPanelProps> = ({
+  eventUiId,
+  onBack
+}) => {
+  const system = useActiveGraph()!;
+
+  const rawEvents = useStore(system.eventsStore, (s) => s.customEvents);
+
+  const controls = useStore(system.controlStore, (s) => s.controls);
+  const defaultControl = useStore(system.controlStore, (s) => s.defaultControl);
+  const registry = useStore(system.editor.registry);
+
+  const valueTypeOptions = useMemo(
+    () => Object.keys(controls).sort((a, b) => a.localeCompare(b)),
+    [controls]
+  );
+
+  const [draftEvent, setDraftEvent] = useState<ExtendedCustomEventJSON | null>(
+    null
+  );
+  const [isDirty, setIsDirty] = useState(true);
+  const isReadonly = draftEvent?.readonly === true;
+  // Load event when eventUiId changes
+  useEffect(() => {
+    if (!eventUiId) {
+      setDraftEvent(null);
+      setIsDirty(true);
+      return;
+    }
+
+    const event = rawEvents[eventUiId];
+    if (event) {
+      setDraftEvent({ ...event });
+      setIsDirty(true);
+    }
+  }, [eventUiId, rawEvents]);
+
+  const updateDraft = (patch: Partial<ExtendedCustomEventJSON>) => {
+    if (!draftEvent || isReadonly) return;
+    setDraftEvent({ ...draftEvent, ...patch });
+    setIsDirty(true);
+  };
+
+  const addParameter = () => {
+    if (!draftEvent || isReadonly) return;
+
+    const vt = valueTypeOptions[0] ?? 'string';
+    const valueType = registry.values[vt];
+    const defaultValue = valueType ? valueType.creator() : '';
+
+    const parameters = [
+      ...(draftEvent.parameters ?? []),
+      {
+        name: 'param',
+        valueTypeName: vt,
+        defaultValue
+      }
+    ];
+
+    updateDraft({ parameters });
+  };
+
+  const updateParameter = (
+    index: number,
+    patch: Partial<CustomEventParameterJSON>
+  ) => {
+    if (!draftEvent || isReadonly) return;
+
+    const parameters = [...(draftEvent.parameters ?? [])];
+    if (!parameters[index]) return;
+
+    // If valueTypeName is being changed, reset defaultValue to the new type's default
+    if (
+      patch.valueTypeName !== undefined &&
+      patch.valueTypeName !== parameters[index]?.valueTypeName
+    ) {
+      const valueType = registry.values[patch.valueTypeName];
+      if (valueType) {
+        patch.defaultValue = valueType.creator();
+      }
+    }
+
+    parameters[index] = {
+      ...parameters[index],
+      ...patch
+    } as CustomEventParameterJSON;
+    updateDraft({ parameters });
+  };
+
+  const removeParameter = (index: number) => {
+    if (!draftEvent || isReadonly) return;
+
+    const parameters = [...(draftEvent.parameters ?? [])];
+    parameters.splice(index, 1);
+    updateDraft({ parameters });
+  };
+
+  const saveEvent = () => {
+    if (!draftEvent || !eventUiId || isReadonly) return;
+    system.eventsStore.getState().addCustomEvent(draftEvent);
+    setIsDirty(false);
+    onBack();
+  };
+
+  const deleteEvent = () => {
+    if (!draftEvent || isReadonly) return;
+
+    system.eventsStore.getState().removeCustomEvent(String(draftEvent.id));
+    onBack();
+  };
+
+  if (!draftEvent) {
+    return (
+      <BasePanel>
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px'
+          }}
+        >
+          <div style={{ color: 'var(--ds-fg-muted)', textAlign: 'center' }}>
+            Select an event to edit
+          </div>
+        </div>
+      </BasePanel>
+    );
+  }
+
+  const parameters = draftEvent.parameters ?? [];
+
+  return (
+    <BasePanel>
+      <div className={styles.editRoot}>
+        <div className={styles.editorHeader}>
+          <VscodeButton
+            iconOnly
+            secondary
+            onClick={onBack}
+            title="Back to list"
+          >
+            <ArrowLeft width={16} height={16} />
+          </VscodeButton>
+          <h2 className={styles.headerTitle}>
+            Edit Event
+            {isReadonly && <VscodeBadge>Read-only</VscodeBadge>}
+          </h2>
+        </div>
+
+        <div className={styles.editorFields}>
+          <div className={styles.formGrid}>
+            <div className={`${styles.formField}`}>
+              <div className={styles.formLabel}>id</div>
+              <VscodeTextfield
+                value={String(draftEvent.id)}
+                onInput={(e: Event) => {
+                  const target = e.target as HTMLInputElement;
+                  updateDraft({ id: String(target.value) });
+                }}
+                disabled={isReadonly}
+              />
+            </div>
+
+            <div className={`${styles.formField}`}>
+              <div className={styles.formLabel}>name</div>
+              <VscodeTextfield
+                value={String(draftEvent.name)}
+                onInput={(e: Event) => {
+                  const target = e.target as HTMLInputElement;
+                  updateDraft({ name: String(target.value) });
+                }}
+                disabled={isReadonly}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.parametersSection}>
+          <div className={styles.parametersHeader}>
+            <div className={styles.parametersTitle}>Parameters</div>
+            {!isReadonly && (
+              <Icon title="Add parameter" onClick={addParameter}>
+                <Plus />
+              </Icon>
+            )}
+          </div>
+          <div className={styles.parametersContent}>
+            {parameters.length === 0 ? (
+              <div className={styles.parametersEmpty}>No parameters.</div>
+            ) : (
+              <div className={styles.parametersGrid}>
+                {parameters.map((param, index) => {
+                  const Control =
+                    controls[String(param.valueTypeName)] ?? defaultControl;
+
+                  return (
+                    <div key={index} className={styles.parameterRow}>
+                      <div className={styles.parameterField}>
+                        <div>
+                          <div className={styles.parameterFieldLabel}>name</div>
+                          {!isReadonly && (
+                            <Icon
+                              className={styles.parameterDelete}
+                              title="Delete parameter"
+                              onClick={() => removeParameter(index)}
+                            >
+                              <TrashSolid />
+                            </Icon>
+                          )}
+                        </div>
+                        <VscodeTextfield
+                          style={{ width: '100%' }}
+                          value={String(param.name)}
+                          onInput={(e: Event) => {
+                            const target = e.target as HTMLInputElement;
+                            updateParameter(index, {
+                              name: String(target.value)
+                            });
+                          }}
+                          disabled={isReadonly}
+                        />
+                      </div>
+
+                      <div className={styles.parameterField}>
+                        <div className={styles.parameterFieldLabel}>type</div>
+                        <VscodeSingleSelect
+                          value={String(param.valueTypeName)}
+                          onChange={(e: Event) => {
+                            const target = e.target as HTMLSelectElement;
+                            updateParameter(index, {
+                              valueTypeName: String(target.value)
+                            });
+                          }}
+                          disabled={isReadonly}
+                        >
+                          {valueTypeOptions.map((vt) => (
+                            <VscodeOption key={vt} value={vt}>
+                              {vt}
+                            </VscodeOption>
+                          ))}
+                        </VscodeSingleSelect>
+                      </div>
+
+                      <div className={styles.parameterField}>
+                        <div className={styles.parameterFieldLabel}>
+                          default
+                        </div>
+                        <div
+                          className={styles.controlWrapper}
+                          style={{
+                            opacity: isReadonly ? 0.5 : 1,
+                            pointerEvents: isReadonly ? 'none' : 'auto'
+                          }}
+                        >
+                          <Control
+                            value={param.defaultValue}
+                            onChange={(v) =>
+                              updateParameter(index, { defaultValue: v })
+                            }
+                            valueType={String(param.valueTypeName)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className={styles.editorActions}>
+          <div className={styles.actions}>
+            <VscodeButton
+              iconOnly
+              onClick={saveEvent}
+              disabled={!isDirty || isReadonly}
+            >
+              <FloppyDisk width={16} height={16} />
+              Save
+            </VscodeButton>
+            <VscodeButton
+              iconOnly
+              secondary
+              onClick={deleteEvent}
+              disabled={isReadonly}
+            >
+              <Trash width={16} height={16} />
+            </VscodeButton>
+          </div>
+        </div>
+      </div>
+    </BasePanel>
+  );
+};

package/src/components/panels/events/ManageEventsPanel.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeDivider,
+  VscodeTree,
+  VscodeTreeItem
+} from '@vscode-elements/react-elements';
+import { Plus, Edit } from 'iconoir-react';
+
+import { useActiveGraph } from '@/system';
+import styles from './styles.module.css';
+import { BasePanel } from '../base';
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+import { Icon } from '@/components/primitives/icon';
+import { PanelHeader } from '../common/PanelHeader';
+
+type CustomEventJSON = NonNullable<GraphJSON['customEvents']>[number];
+
+const nextNumericId = (events: Array<{ id: string }>) => {
+  const used = new Set(events.map((e) => String(e.id)));
+  let i = 0;
+  while (used.has(String(i))) i += 1;
+  return String(i);
+};
+
+interface ManageEventsPanelProps {
+  onSelectEvent: (eventUiId: string) => void;
+}
+
+export const ManageEventsPanel: React.FC<ManageEventsPanelProps> = ({
+  onSelectEvent
+}) => {
+  const system = useActiveGraph()!;
+  const rawEvents = useStore(system.eventsStore, (s) => s.customEvents);
+
+  const persistedEvents = useMemo(() => Object.values(rawEvents), [rawEvents]);
+
+  const addNewEvent = () => {
+    const nextId = nextNumericId(persistedEvents);
+    const created: CustomEventJSON = {
+      id: nextId,
+      name: 'NewCustomEvent',
+      parameters: []
+    };
+
+    system.eventsStore.getState().addCustomEvent(created);
+    onSelectEvent(created.id);
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.root}>
+        <PanelHeader
+          title="Custom Events"
+          actions={
+            <Icon title="New event" onClick={addNewEvent}>
+              <Plus />
+            </Icon>
+          }
+        />
+        <VscodeDivider />
+        <div className={styles.content}>
+          {persistedEvents.length === 0 ? (
+            <div className={styles.emptyState}>
+              <div className={styles.emptyStateText}>No custom events yet.</div>
+            </div>
+          ) : (
+            <VscodeTree>
+              {persistedEvents.map((evt) => {
+                const eventId = String(evt.id ?? '');
+                const paramCount = (evt.parameters ?? []).length;
+
+                return (
+                  <VscodeTreeItem key={evt.id}>
+                    <div className={styles.eventName}>
+                      {evt.name ?? 'CustomEvent'}
+                    </div>
+                    <div slot="description">
+                      <div className={styles.eventMeta}>
+                        ID: {eventId} • {paramCount} parameter
+                        {paramCount !== 1 ? 's' : ''}
+                      </div>
+                    </div>
+                    <div slot="actions">
+                      <Icon
+                        title="Edit event"
+                        onClick={() => onSelectEvent(eventId)}
+                      >
+                        <Edit width={16} height={16} />
+                      </Icon>
+                    </div>
+                  </VscodeTreeItem>
+                );
+              })}
+            </VscodeTree>
+          )}
+        </div>
+      </div>
+    </BasePanel>
+  );
+};

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+import { ManageEventsPanel } from './ManageEventsPanel';
+import { EditEventPanel } from './EditEventPanel';
+
+/**
+ * Events Panel
+ * Focus: define Custom Events (with arbitrary parameters) for the current graph.
+ */
+export const EventsPanel = () => {
+  const [selectedEventUiId, setSelectedEventUiId] = useState<string | null>(
+    null
+  );
+
+  return selectedEventUiId ? (
+    <EditEventPanel
+      eventUiId={selectedEventUiId}
+      onBack={() => setSelectedEventUiId(null)}
+    />
+  ) : (
+    <ManageEventsPanel onSelectEvent={setSelectedEventUiId} />
+  );
+};

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

@@ -0,0 +1,178 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    gap: 0;
+    overflow: hidden;
+}
+
+.content {
+    padding: 8px;
+}
+
+.headerTitle {
+    display: flex;
+    gap: 1em;
+    font-size: 1.1em;
+    font-weight: bold;
+    align-items: center;
+}
+
+.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;
+}
+
+.eventName {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.eventMeta {
+    font-size: 11px;
+    opacity: 0.6;
+    line-height: 1.2;
+}
+
+/* Edit Panel Specific Styles */
+
+.editRoot {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 0;
+    overflow: hidden;
+}
+
+.editorHeader {
+    padding: 12px 16px;
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    border-bottom: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
+}
+
+.editorFields {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+}
+
+.formGrid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.formField {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+}
+
+.formLabel {
+    font-size: 12px;
+    font-weight: 500;
+    opacity: 0.8;
+    margin-bottom: 4px;
+}
+
+.parametersSection {
+    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: 1;
+    min-height: 0;
+}
+
+.parametersHeader {
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
+}
+
+.parametersTitle {
+    font-size: 11px;
+    font-weight: 600;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.parametersContent {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    padding: 16px;
+}
+
+.parametersEmpty {
+    font-size: 13px;
+    opacity: 0.7;
+}
+
+.parametersGrid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.parameterRow {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--ds-input-bg, rgba(255, 255, 255, 0.05));
+    border-radius: 4px;
+    position: relative;
+}
+
+.controlWrapper {
+    min-width: 0;
+    display: flex;
+}
+
+.parameterField {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.parameterFieldLabel {
+    font-size: 11px;
+    font-weight: 500;
+    opacity: 0.7;
+}
+
+.parameterDelete {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+
+.editorActions {
+    padding: 12px 16px;
+    border-top: 1px solid var(--ds-panel-border, rgba(255, 255, 255, 0.08));
+}
+
+.actions {
+    display: flex;
+    gap: 0.25em;
+}