@principal-ai/principal-view-react 0.16.64 → 0.16.66

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -739,6 +739,50 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
     [fitFocusBounds, renderThroughlineViewer],
   );
 
+  // Arrow keys step through the focused throughline once a step is active
+  // (sidebar click or drawer open). Ignores typing targets and chords.
+  useEffect(() => {
+    if (focusedThroughlineId == null || focusedStepIndex == null || !throughlines) {
+      return;
+    }
+    const tl = throughlines.find((t) => t.id === focusedThroughlineId);
+    if (!tl || tl.steps.length === 0) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const el = e.target as HTMLElement | null;
+      if (
+        el &&
+        (el.tagName === 'INPUT' ||
+          el.tagName === 'TEXTAREA' ||
+          el.tagName === 'SELECT' ||
+          el.isContentEditable)
+      ) {
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+
+      let next: number | null = null;
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        next = Math.min(tl.steps.length - 1, focusedStepIndex + 1);
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        next = Math.max(0, focusedStepIndex - 1);
+      } else {
+        return;
+      }
+      if (next === focusedStepIndex) return;
+      e.preventDefault();
+      focusThroughlineStep(tl, next);
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [
+    focusedThroughlineId,
+    focusedStepIndex,
+    throughlines,
+    focusThroughlineStep,
+  ]);
+
   const toggleThroughlineCollapsed = useCallback((tlId: string) => {
     setExpandedThroughlines((prev) => {
       const next = new Set(prev);
@@ -1363,6 +1407,15 @@ function ThroughlineFlow({
   const [headerHover, setHeaderHover] = useState(false);
   const [closeHover, setCloseHover] = useState(false);
   const [hoveredStep, setHoveredStep] = useState<number | null>(null);
+  const stepButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Keep DOM focus on the active step so the browser focus ring (and
+  // subsequent arrow keys) follow arrow navigation, not the originally
+  // clicked button.
+  useEffect(() => {
+    if (active?.stepIndex == null) return;
+    stepButtonRefs.current[active.stepIndex]?.focus({ preventScroll: true });
+  }, [active?.stepIndex]);
 
   return (
     <div style={{ margin: '4px 0', borderRadius: 8 }}>
@@ -1460,6 +1513,9 @@ function ThroughlineFlow({
             return (
               <button
                 key={`${step.edgeId}-${i}`}
+                ref={(el) => {
+                  stepButtonRefs.current[i] = el;
+                }}
                 type="button"
                 onMouseEnter={() => setHoveredStep(i)}
                 onMouseLeave={() => setHoveredStep(null)}
@@ -1473,6 +1529,7 @@ function ThroughlineFlow({
                   textAlign: 'left',
                   borderRadius: 6,
                   border: 'none',
+                  outline: 'none',
                   background: stepActive || hoveredStep === i ? hoverBg : 'transparent',
                   cursor: 'pointer',
                   transition: 'background 120ms ease',

package/src/components/GraphRenderer.test.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { GraphRenderer } from './GraphRenderer';
-import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core';
-
-describe('GraphRenderer', () => {
-  const testConfig: GraphConfiguration = {
-    metadata: {
-      name: 'Test Graph',
-      version: '1.0.0',
-    },
-    nodeTypes: {
-      user: {
-        shape: 'circle',
-        color: '#4CAF50',
-        dataSchema: {
-          userId: { type: 'string', required: true },
-        },
-      },
-    },
-    edgeTypes: {
-      connection: {
-        style: 'solid',
-        directed: true,
-      },
-    },
-    allowedConnections: [{ from: 'user', to: 'user', via: 'connection' }],
-  };
-
-  const testNodes: NodeState[] = [
-    {
-      id: 'user-1',
-      type: 'user',
-      data: { userId: 'alice' },
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-    {
-      id: 'user-2',
-      type: 'user',
-      data: { userId: 'bob' },
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-  ];
-
-  const testEdges: EdgeState[] = [
-    {
-      id: 'conn-1',
-      type: 'connection',
-      from: 'user-1',
-      to: 'user-2',
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    },
-  ];
-
-  it('should render without crashing', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Graph Renderer/i)).toBeDefined();
-  });
-
-  it('should display configuration name', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Test Graph/i)).toBeDefined();
-  });
-
-  it('should display node count', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Nodes: 2/i)).toBeDefined();
-  });
-
-  it('should display edge count', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
-
-    expect(screen.getByText(/Edges: 1/i)).toBeDefined();
-  });
-
-  it('should render with empty nodes and edges', () => {
-    render(<GraphRenderer configuration={testConfig} nodes={[]} edges={[]} />);
-
-    expect(screen.getByText(/Nodes: 0/i)).toBeDefined();
-    expect(screen.getByText(/Edges: 0/i)).toBeDefined();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(
-      <GraphRenderer
-        configuration={testConfig}
-        nodes={testNodes}
-        edges={testEdges}
-        className="custom-class"
-      />
-    );
-
-    const element = container.querySelector('.custom-class');
-    expect(element).toBeDefined();
-  });
-
-  it('should apply custom width and height', () => {
-    const { container } = render(
-      <GraphRenderer
-        configuration={testConfig}
-        nodes={testNodes}
-        edges={testEdges}
-        width="500px"
-        height="400px"
-      />
-    );
-
-    const element = container.querySelector('div');
-    expect(element?.style.width).toBe('500px');
-    expect(element?.style.height).toBe('400px');
-  });
-});