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

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

@@ -0,0 +1,98 @@
+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 { useSystem } 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';
+
+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 = useSystem();
+  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}>
+        <div className={styles.header}>
+          <h2 className={styles.headerTitle}>Custom Events</h2>
+          <Icon title="New event" onClick={addNewEvent}>
+            <Plus />
+          </Icon>
+        </div>
+        <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,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;
+    flex-shrink: 0;
+}
+
+.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;
+}
+
+.eventList {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+    min-height: 0;
+}
+
+.eventItem {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    min-height: 52px;
+    width: 100%;
+}
+
+.eventInfo {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.eventName {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.eventMeta {
+    font-size: 11px;
+    opacity: 0.6;
+    line-height: 1.2;
+}
+
+.eventActions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+/* 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(--vscode-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;
+}
+
+.col4 {
+    grid-column: span 4;
+}
+
+.col8 {
+    grid-column: span 8;
+}
+
+.col3 {
+    grid-column: span 3;
+}
+
+.col1 {
+    grid-column: span 1;
+}
+
+.parametersSection {
+    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: 1;
+    min-height: 0;
+}
+
+.parametersHeader {
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--vscode-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;
+}
+
+.parametersGridHeader {
+    display: none;
+}
+
+.parameterRow {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--vscode-input-background, 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(--vscode-panel-border, rgba(255, 255, 255, 0.08));
+}
+
+.actions {
+    display: flex;
+    gap: 0.25em;
+}

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { VscodeBadge, VscodeDivider } from '@vscode-elements/react-elements';
+import { useStore } from 'zustand';
+import { useSystem } from '@/system/provider';
+import styles from './styles.module.css';
+import { BasePanel } from '../base';
+
+export function HistoryPanel() {
+  const system = useSystem();
+  const history = useStore(system.undoManager.store, (s) => s.history);
+  const redoStack = useStore(system.undoManager.store, (s) => s.redoStack);
+
+  const historyNewestFirst = React.useMemo(
+    () => [...history].reverse(),
+    [history]
+  );
+
+  const Row = ({
+    kind,
+    index,
+    name
+  }: {
+    kind: 'undo' | 'redo';
+    index: number;
+    name: string;
+  }) => {
+    return (
+      <div
+        className={`${styles.row} ${kind === 'undo' ? styles.undo : styles.redo}`}
+        title={name}
+      >
+        <div className={styles.badgeCell}>
+          <VscodeBadge className={styles.kindBadge}>
+            {kind === 'undo' ? 'Undo' : 'Redo'}
+          </VscodeBadge>
+        </div>
+        <div className={styles.index}>{index}</div>
+        <div className={styles.name}>{name}</div>
+      </div>
+    );
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.sectionTitle}>
+        <div>Previous</div>
+        <VscodeBadge className={styles.countBadge}>
+          {history.length}
+        </VscodeBadge>
+      </div>
+
+      <div className={styles.list}>
+        {historyNewestFirst.map((entry, idx) => (
+          <Row
+            key={`${entry.name}-${idx}`}
+            kind="undo"
+            index={historyNewestFirst.length - idx}
+            name={entry.name}
+          />
+        ))}
+        {historyNewestFirst.length === 0 && (
+          <div className={styles.empty}>No previous actions</div>
+        )}
+      </div>
+
+      <div className={styles.now}>
+        <VscodeDivider />
+        <div className={styles.nowLabel}>Now</div>
+      </div>
+
+      <div className={styles.sectionTitle}>
+        <div>Future</div>
+        <VscodeBadge className={styles.countBadge}>
+          {redoStack.length}
+        </VscodeBadge>
+      </div>
+
+      {redoStack.length !== 0 && (
+        <div className={styles.list}>
+          {redoStack.map((entry, idx) => (
+            <Row
+              key={`${entry.name}-${idx}`}
+              kind="redo"
+              index={idx + 1}
+              name={entry.name}
+            />
+          ))}
+        </div>
+      )}
+    </BasePanel>
+  );
+}

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

@@ -0,0 +1,106 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+    padding: 20px;
+    color: inherit;
+}
+
+.sectionTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 0.85em;
+    color: rgba(255, 255, 255, 0.72);
+    user-select: none;
+}
+
+.countBadge {
+    font-variant-numeric: tabular-nums;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: auto;
+    background: transparent;
+    padding: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    border-radius: 6px;
+}
+
+.row {
+    display: grid;
+    grid-template-columns: 76px 52px 1fr;
+    align-items: center;
+    column-gap: 12px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    cursor: default;
+}
+
+.row:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.undo {
+    border-left: 3px solid #f14c4c;
+}
+
+.redo {
+    border-left: 3px solid #73c991;
+}
+
+.badgeCell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+}
+
+.kindBadge {
+    flex: 0 0 auto;
+}
+
+.index {
+    font-size: 0.85em;
+    color: rgba(255, 255, 255, 0.72);
+    opacity: 0.9;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.empty {
+    padding: 10px;
+    font-size: 0.9em;
+    color: rgba(255, 255, 255, 0.72);
+    opacity: 0.9;
+}
+
+.now {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 6px 0;
+    user-select: none;
+}
+
+.nowLabel {
+    font-size: 0.8em;
+    color: rgba(255, 255, 255, 0.72);
+    text-align: center;
+}

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

@@ -0,0 +1,78 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    padding: 0.5rem;
+    overflow: auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.header {
+    padding-bottom: 0.5rem;
+}
+
+.helpText {
+    font-size: 0.75rem;
+    opacity: 0.7;
+}
+
+.table {
+    width: 100%;
+}
+
+.actionCell {
+    width: 40%;
+}
+
+.actionInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.actionLabel {
+    font-weight: 500;
+}
+
+.actionId {
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+.keybindingCell {
+    width: 40%;
+}
+
+.keyBadge {
+    font-size: 0.875rem;
+    font-family: var(--vscode-editor-font-family);
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-editorWidget-border);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--component-radii-sm);
+    word-break: break-all;
+    display: inline-block;
+}
+
+.actionsCell {
+    width: 20%;
+    text-align: right;
+}
+
+.buttonGroup {
+    display: flex;
+    gap: 0.25rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.textfield {
+    width: 100%;
+}