@startsimpli/ui 0.4.27 → 0.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/workflows/WorkflowCanvas.tsx

@@ -8,13 +8,15 @@ import {
   Controls,
   type NodeTypes,
   type EdgeTypes,
+  type Connection,
 } from '@xyflow/react';
 import { cn } from '../../lib/utils';
 import { WorkflowNode } from './WorkflowNode';
 import { WorkflowEdge } from './WorkflowEdge';
 import { useCanvasGraph } from './hooks/useCanvasGraph';
 import { useNodeStatusOverlay } from './hooks/useNodeStatusOverlay';
-import type { WorkflowGraph, WfExecutionView, NodeTypeDef } from './types';
+import { connectionToEdge } from './graph-ops';
+import type { WorkflowGraph, WfEdge, WfExecutionView, NodeTypeDef } from './types';
 import type { LayoutDirection } from './layout/auto-layout';
 
 const nodeTypes: NodeTypes = { workflowNode: WorkflowNode };
@@ -36,8 +38,23 @@ export interface WorkflowCanvasProps {
   onRename?: (nodeId: string, name: string) => void;
   /** Fired when a node is selected on the canvas. */
   onSelectNode?: (nodeId: string | null) => void;
+  /** Fired when an edge is selected on the canvas. */
+  onSelectEdge?: (edgeId: string | null) => void;
+  /**
+   * Currently-selected node id. Threaded onto xyflow's `selected` flag so the
+   * controlled canvas knows what's selected — required for keyboard delete.
+   */
+  selectedNodeId?: string | null;
+  /** Currently-selected edge id (same reason as {@link selectedNodeId}). */
+  selectedEdgeId?: string | null;
   /** Drop handler for palette drag-and-drop (slug + client coords). */
   onDropNodeType?: (slug: string, clientX: number, clientY: number) => void;
+  /** Fired when the user draws a connection between two node handles. */
+  onConnectEdge?: (edge: WfEdge) => void;
+  /** Fired with the ids of nodes removed via select+Delete/Backspace. */
+  onDeleteNodes?: (nodeIds: string[]) => void;
+  /** Fired with the edges removed via select+Delete/Backspace. */
+  onDeleteEdges?: (edges: WfEdge[]) => void;
   className?: string;
 }
 
@@ -48,7 +65,13 @@ function CanvasInner({
   direction = 'LR',
   onRename,
   onSelectNode,
+  onSelectEdge,
+  selectedNodeId,
+  selectedEdgeId,
   onDropNodeType,
+  onConnectEdge,
+  onDeleteNodes,
+  onDeleteEdges,
   className,
 }: WorkflowCanvasProps) {
   const { nodes: baseNodes, edges: baseEdges } = useCanvasGraph(graph, {
@@ -56,7 +79,32 @@ function CanvasInner({
     direction,
     onRename,
   });
-  const { nodes, edges } = useNodeStatusOverlay(baseNodes, baseEdges, execution);
+  const { nodes: overlaidNodes, edges: overlaidEdges } = useNodeStatusOverlay(
+    baseNodes,
+    baseEdges,
+    execution
+  );
+  // Thread our selection into xyflow's `selected` flag. The canvas is fully
+  // controlled (no onNodesChange), so without this xyflow never marks a
+  // clicked node selected and keyboard delete has nothing to remove.
+  const nodes = React.useMemo(
+    () =>
+      selectedNodeId == null
+        ? overlaidNodes
+        : overlaidNodes.map((n) =>
+            n.id === selectedNodeId ? { ...n, selected: true } : n
+          ),
+    [overlaidNodes, selectedNodeId]
+  );
+  const edges = React.useMemo(
+    () =>
+      selectedEdgeId == null
+        ? overlaidEdges
+        : overlaidEdges.map((e) =>
+            e.id === selectedEdgeId ? { ...e, selected: true } : e
+          ),
+    [overlaidEdges, selectedEdgeId]
+  );
 
   const handleDragOver = React.useCallback((e: React.DragEvent) => {
     if (!onDropNodeType) return;
@@ -74,6 +122,17 @@ function CanvasInner({
     [onDropNodeType]
   );
 
+  const handleConnect = React.useCallback(
+    (conn: Connection) => {
+      if (!onConnectEdge || !conn.source || !conn.target) return;
+      onConnectEdge(connectionToEdge(conn));
+    },
+    [onConnectEdge]
+  );
+
+  // Only enable keyboard delete when a delete handler is wired.
+  const deletable = !!onDeleteNodes || !!onDeleteEdges;
+
   return (
     <div
       className={cn('workflow-canvas h-full w-full', className)}
@@ -87,8 +146,40 @@ function CanvasInner({
         edgeTypes={edgeTypes}
         fitView
         proOptions={{ hideAttribution: true }}
-        onNodeClick={(_, n) => onSelectNode?.(n.id)}
-        onPaneClick={() => onSelectNode?.(null)}
+        deleteKeyCode={deletable ? ['Backspace', 'Delete'] : null}
+        onConnect={onConnectEdge ? handleConnect : undefined}
+        onNodesDelete={
+          onDeleteNodes
+            ? (removed) => onDeleteNodes(removed.map((n) => n.id))
+            : undefined
+        }
+        onEdgesDelete={
+          onDeleteEdges
+            ? (removed) =>
+                onDeleteEdges(
+                  removed.map((e) =>
+                    connectionToEdge({
+                      source: e.source,
+                      target: e.target,
+                      sourceHandle: e.sourceHandle,
+                      targetHandle: e.targetHandle,
+                    })
+                  )
+                )
+            : undefined
+        }
+        onNodeClick={(_, n) => {
+          onSelectNode?.(n.id);
+          onSelectEdge?.(null);
+        }}
+        onEdgeClick={(_, e) => {
+          onSelectEdge?.(e.id);
+          onSelectNode?.(null);
+        }}
+        onPaneClick={() => {
+          onSelectNode?.(null);
+          onSelectEdge?.(null);
+        }}
       >
         <Background gap={16} />
         <Controls showInteractive={false} />

package/src/components/workflows/WorkflowEditor.tsx

@@ -6,7 +6,12 @@ import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace';
 import { WorkflowCanvas } from './WorkflowCanvas';
 import { NodePalette } from './NodePalette';
 import { NodeInspector } from './NodeInspector';
-import type { NodeTypeDef, WfNode, WorkflowGraph } from './types';
+import {
+  addEdgeToGraph,
+  removeEdgesFromGraph,
+  removeNodesFromGraph,
+} from './graph-ops';
+import type { NodeTypeDef, WfEdge, WfNode, WorkflowGraph } from './types';
 
 export interface WorkflowEditorProps {
   /** The graph being edited (controlled when `onGraphChange` is provided). */
@@ -39,6 +44,9 @@ export function WorkflowEditor({
   className,
 }: WorkflowEditorProps) {
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
+  const [selectedEdgeId, setSelectedEdgeId] = React.useState<string | null>(
+    null
+  );
 
   const typeIndex = React.useMemo(() => {
     const idx: Record<string, NodeTypeDef> = {};
@@ -89,6 +97,28 @@ export function WorkflowEditor({
     [graph, onGraphChange, typeIndex]
   );
 
+  const handleConnectEdge = React.useCallback(
+    (edge: WfEdge) => {
+      onGraphChange?.(addEdgeToGraph(graph, edge));
+    },
+    [graph, onGraphChange]
+  );
+
+  const handleDeleteNodes = React.useCallback(
+    (nodeIds: string[]) => {
+      onGraphChange?.(removeNodesFromGraph(graph, nodeIds));
+      if (selectedId && nodeIds.includes(selectedId)) setSelectedId(null);
+    },
+    [graph, onGraphChange, selectedId]
+  );
+
+  const handleDeleteEdges = React.useCallback(
+    (edges: WfEdge[]) => {
+      onGraphChange?.(removeEdgesFromGraph(graph, edges));
+    },
+    [graph, onGraphChange]
+  );
+
   const left = (
     <DualPaneWorkspace
       leftLabel="Nodes"
@@ -102,7 +132,13 @@ export function WorkflowEditor({
           nodeTypes={nodeTypes}
           onRename={handleRename}
           onSelectNode={setSelectedId}
+          onSelectEdge={setSelectedEdgeId}
+          selectedNodeId={selectedId}
+          selectedEdgeId={selectedEdgeId}
           onDropNodeType={(slug) => handleAddNode(slug)}
+          onConnectEdge={onGraphChange ? handleConnectEdge : undefined}
+          onDeleteNodes={onGraphChange ? handleDeleteNodes : undefined}
+          onDeleteEdges={onGraphChange ? handleDeleteEdges : undefined}
         />
       }
     />

package/src/components/workflows/__tests__/graph-ops.test.ts

@@ -0,0 +1,101 @@
+import {
+  connectionToEdge,
+  addEdgeToGraph,
+  removeNodesFromGraph,
+  removeEdgesFromGraph,
+} from '../graph-ops';
+import type { WorkflowGraph } from '../types';
+
+const graph: WorkflowGraph = {
+  nodes: [
+    { id: 'a', name: 'A', type: 'trigger.event' },
+    { id: 'b', name: 'B', type: 'transform.set' },
+    { id: 'c', name: 'C', type: 'action.email' },
+  ],
+  edges: [
+    { source: 'a', target: 'b' },
+    { source: 'b', target: 'c', sourceOutput: 1 },
+  ],
+};
+
+describe('connectionToEdge', () => {
+  it('maps handle id strings to numeric output/input indexes', () => {
+    expect(
+      connectionToEdge({
+        source: 'b',
+        target: 'c',
+        sourceHandle: '1',
+        targetHandle: '0',
+      })
+    ).toEqual({
+      source: 'b',
+      target: 'c',
+      sourceOutput: 1,
+      targetInput: 0,
+      type: 'main',
+    });
+  });
+
+  it('defaults missing/null handles to index 0', () => {
+    expect(
+      connectionToEdge({ source: 'a', target: 'b', sourceHandle: null })
+    ).toEqual({
+      source: 'a',
+      target: 'b',
+      sourceOutput: 0,
+      targetInput: 0,
+      type: 'main',
+    });
+  });
+});
+
+describe('addEdgeToGraph', () => {
+  it('appends a new edge', () => {
+    const next = addEdgeToGraph(graph, {
+      source: 'a',
+      target: 'c',
+      sourceOutput: 0,
+      targetInput: 0,
+    });
+    expect(next.edges).toHaveLength(3);
+    expect(next.edges).toContainEqual(
+      expect.objectContaining({ source: 'a', target: 'c' })
+    );
+    // does not mutate the input
+    expect(graph.edges).toHaveLength(2);
+  });
+
+  it('is a no-op for a duplicate edge (same source/output/target/input)', () => {
+    const next = addEdgeToGraph(graph, {
+      source: 'a',
+      target: 'b',
+      sourceOutput: 0,
+      targetInput: 0,
+    });
+    expect(next.edges).toHaveLength(2);
+  });
+});
+
+describe('removeNodesFromGraph', () => {
+  it('removes the node AND every incident edge (as source or target)', () => {
+    const next = removeNodesFromGraph(graph, ['b']);
+    expect(next.nodes.map((n) => n.id)).toEqual(['a', 'c']);
+    // a->b and b->c both reference b, so both go
+    expect(next.edges).toHaveLength(0);
+  });
+
+  it('keeps edges between surviving nodes', () => {
+    const next = removeNodesFromGraph(graph, ['c']);
+    expect(next.nodes.map((n) => n.id)).toEqual(['a', 'b']);
+    expect(next.edges).toEqual([{ source: 'a', target: 'b' }]);
+  });
+});
+
+describe('removeEdgesFromGraph', () => {
+  it('removes only the matching edge (by source/target/output/input)', () => {
+    const next = removeEdgesFromGraph(graph, [
+      { source: 'b', target: 'c', sourceOutput: 1, targetInput: 0 },
+    ]);
+    expect(next.edges).toEqual([{ source: 'a', target: 'b' }]);
+  });
+});

package/src/components/workflows/graph-ops.ts

@@ -0,0 +1,89 @@
+/**
+ * Pure graph-mutation helpers for the workflow editor.
+ *
+ * The editor canvas is controlled — every mutation produces a NEW
+ * {@link WorkflowGraph} (never mutates the input) which the consumer feeds
+ * back through `onGraphChange`. Kept framework-free and side-effect-free so
+ * they're trivially unit-testable and reusable outside React.
+ */
+
+import type { WfEdge, WorkflowGraph } from './types';
+
+const DEFAULT_CONNECTION_TYPE = 'main';
+
+/** A minimal xyflow `Connection`-like shape (avoids an @xyflow/react import). */
+export interface GraphConnection {
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+}
+
+/** Parse a handle id ("0", "1", null, "") into its numeric index (default 0). */
+function handleIndex(handle: string | null | undefined): number {
+  if (handle === null || handle === undefined || handle === '') return 0;
+  const n = Number.parseInt(handle, 10);
+  return Number.isNaN(n) ? 0 : n;
+}
+
+/** True when two edges connect the same source-output → target-input. */
+function sameEdge(a: WfEdge, b: WfEdge): boolean {
+  return (
+    a.source === b.source &&
+    a.target === b.target &&
+    (a.sourceOutput ?? 0) === (b.sourceOutput ?? 0) &&
+    (a.targetInput ?? 0) === (b.targetInput ?? 0)
+  );
+}
+
+/**
+ * Map an xyflow {@link GraphConnection} (handle ids are output/input index
+ * strings) to a logical {@link WfEdge}.
+ */
+export function connectionToEdge(conn: GraphConnection): WfEdge {
+  return {
+    source: conn.source,
+    target: conn.target,
+    sourceOutput: handleIndex(conn.sourceHandle),
+    targetInput: handleIndex(conn.targetHandle),
+    type: DEFAULT_CONNECTION_TYPE,
+  };
+}
+
+/** Append an edge, ignoring exact duplicates. Returns a new graph. */
+export function addEdgeToGraph(
+  graph: WorkflowGraph,
+  edge: WfEdge
+): WorkflowGraph {
+  if (graph.edges.some((e) => sameEdge(e, edge))) return graph;
+  return { ...graph, edges: [...graph.edges, edge] };
+}
+
+/**
+ * Remove the given nodes AND every edge incident to them (as source or
+ * target). Returns a new graph.
+ */
+export function removeNodesFromGraph(
+  graph: WorkflowGraph,
+  nodeIds: string[]
+): WorkflowGraph {
+  const dropped = new Set(nodeIds);
+  return {
+    ...graph,
+    nodes: graph.nodes.filter((n) => !dropped.has(n.id)),
+    edges: graph.edges.filter(
+      (e) => !dropped.has(e.source) && !dropped.has(e.target)
+    ),
+  };
+}
+
+/** Remove the given edges (matched by source/target/output/input). New graph. */
+export function removeEdgesFromGraph(
+  graph: WorkflowGraph,
+  edges: WfEdge[]
+): WorkflowGraph {
+  return {
+    ...graph,
+    edges: graph.edges.filter((e) => !edges.some((d) => sameEdge(e, d))),
+  };
+}

package/src/components/workflows/index.ts

@@ -39,6 +39,15 @@ export type { FlowNode, FlowEdge } from './serialization';
 export { autoLayout, layoutLR, layoutTB } from './layout/auto-layout';
 export type { LayoutDirection, AutoLayoutOptions } from './layout/auto-layout';
 
+// Graph mutation (pure helpers used by the editor; also reusable standalone)
+export {
+  connectionToEdge,
+  addEdgeToGraph,
+  removeNodesFromGraph,
+  removeEdgesFromGraph,
+} from './graph-ops';
+export type { GraphConnection } from './graph-ops';
+
 // Theme
 export {
   CATEGORY_TOKENS,