Function BuilderLayout

ts/workflow-builder/src/BuilderLayout.tsx:58–338

({
  functions,
  onOpenFunction,
  onCreateFunction,
  canvasTabs,
  onCanvasTabChange,
  onCanvasTabClose,
  onCanvasTabReorder,
  onTestNode,
  onDebugStep,
}: BuilderLayoutProps)

export const BuilderLayout = ({
  functions,
  onOpenFunction,
  onCreateFunction,
  canvasTabs,
  onCanvasTabChange,
  onCanvasTabClose,
  onCanvasTabReorder,
  onDebugStep,
}: BuilderLayoutProps) => {
  const activeCanvasId = useEditorStore((s) => s.activeCanvasId);
  const builderMode = useEditorStore((s) => s.builderMode);
  const readOnly = isReadOnly(builderMode);
  const isDebugMode = builderMode.type === "debug";

  // NodeRegistry (static) + dynamic function nodes — derived, not embedder-provided.
  const { nodeDefinitions, getNodeDefinition, getAllCategories } = useNodeDefinitions();

  const graph = useGraph(activeCanvasId, readOnly);
  const { undo, redo, takeCheckpoint, canUndo, canRedo } = useCanvasHistory(activeCanvasId);

  // Selection (project-wide in editorStore, mirrored to canvas store for RF visual)
  const selection = useEditorStore((s) => s.selection);
  const selectGraph = useEditorStore((s) => s.selectGraph);
  const syncSelectionFromRF = useEditorStore((s) => s.syncSelectionFromRF);
  const clearSelection = useEditorStore((s) => s.clearSelection);

  // Sidebar tab state + mode auto-switch.
  const activeSidebarTab = useEditorStore((s) => s.activeSidebarTab);
  const setActiveSidebarTab = useEditorStore((s) => s.setActiveSidebarTab);
  useEffect(() => {
    const isDebugTab = activeSidebarTab === "debug-context";
    if (isDebugMode && !isDebugTab) {
      setActiveSidebarTab("debug-context");
    } else if (!isDebugMode && isDebugTab) {
      setActiveSidebarTab("nodes");
    }
  }, [isDebugMode, activeSidebarTab, setActiveSidebarTab]);

  // Selection-drag flag (used by RightConfigPanel to suppress during drag).
  const [selectionDrag, setSelectionDrag] = useState(false);

  // ViewportCenter ref (populated by ReactFlow inside CanvasEditor, consumed
  // here for sidebar's click-to-add path).
  const viewportCenterRef = useRef<(() => { x: number; y: number }) | null>(null);

  // ── Handlers ──────────────────────────────────────────────────────────────

  const selectNodeById: (id: string) => void = useCallback(
    (nodeId: string) => selectGraph([nodeId], []),
    [selectGraph],
  );

  const selectEdgeById = useCallback((edgeId: string) => selectGraph([], [edgeId]), [selectGraph]);

  const handleAddNode = useCallback(
    (nodeDef: NodeDefinition, position?: { x: number; y: number }) => {
      const pos = position ?? viewportCenterRef.current?.();
      const id = graph.addNode(nodeDef, pos);