@solidxai/core-ui 0.1.13-beta.1 → 0.1.13-beta.2

package/dist/components/workflow/WorkflowFlowCanvas.tsx

@@ -0,0 +1,1274 @@
+import React from "react";
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  Handle,
+  MarkerType,
+  MiniMap,
+  type Node,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
+} from "@xyflow/react";
+import { BookOpen, CircleHelp, Pencil, Plus, Trash2 } from "lucide-react";
+import type {
+  WorkflowNodeChildSlotDefinition,
+  WorkflowNodeMetadataResponse,
+} from "../../types/workflow-node";
+import { normalizeSolidIconName, SolidButton, SolidIcon, SolidTag } from "../shad-cn-ui";
+import "@xyflow/react/dist/style.css";
+import "./WorkflowFlowCanvas.css";
+
+type WorkflowNodeRecord = Record<string, any>;
+type WorkflowTriggerRecord = Record<string, any>;
+
+type WorkflowInsertScope =
+  | { scope: "root" }
+  | {
+      scope: "slot";
+      parentNodeId: string;
+      slotKey: "children" | "nodes" | "then" | "else";
+    }
+  | {
+      scope: "branch";
+      parentNodeId: string;
+      branchId: string;
+    };
+
+export type WorkflowInsertTarget =
+  | {
+      scope: "root";
+      index: number;
+    }
+  | {
+      scope: "slot";
+      parentNodeId: string;
+      slotKey: "children" | "nodes" | "then" | "else";
+      index: number;
+    }
+  | {
+      scope: "branch";
+      parentNodeId: string;
+      branchId: string;
+      index: number;
+    };
+
+type WorkflowCanvasNodeData =
+  | {
+      kind: "group";
+      label: string;
+      tone?: "control" | "loop" | "trigger";
+      workflowNode?: WorkflowNodeRecord;
+      nodeType?: WorkflowNodeMetadataResponse;
+      onViewDocs?: (nodeId: string) => void;
+    }
+  | {
+      kind: "workflow-node";
+      workflowNode: WorkflowNodeRecord;
+      nodeType?: WorkflowNodeMetadataResponse;
+      selected?: boolean;
+      readOnly?: boolean;
+      onSelectNode: (nodeId: string) => void;
+      onEditNode: (nodeId: string) => void;
+      onDeleteNode: (nodeId: string) => void;
+      onViewDocs: (nodeId: string) => void;
+    }
+  | {
+      kind: "workflow-trigger";
+      trigger: WorkflowTriggerRecord;
+      selected?: boolean;
+      readOnly?: boolean;
+      onSelectTrigger: (triggerId: string) => void;
+      onViewDocs: (triggerId: string) => void;
+    }
+  | {
+      kind: "insert";
+      enabled?: boolean;
+      selectedTypeLabel?: string;
+      onInsert: () => void;
+    }
+  | {
+      kind: "section-label";
+      label: string;
+    };
+
+type WorkflowFlowCanvasProps = {
+  definition: { nodes: WorkflowNodeRecord[]; triggers?: WorkflowTriggerRecord[] };
+  nodeTypes: WorkflowNodeMetadataResponse[];
+  selectedNodeId?: string;
+  selectedTriggerId?: string;
+  activePaletteNodeType?: WorkflowNodeMetadataResponse;
+  onSelectNode: (nodeId: string) => void;
+  onSelectTrigger: (triggerId: string) => void;
+  onEditNode: (nodeId: string) => void;
+  onDeleteNode: (nodeId: string) => void;
+  onViewDocs: (nodeId: string) => void;
+  onViewTriggerDocs: (triggerId: string) => void;
+  onInsertNode: (target: WorkflowInsertTarget) => void;
+  onAddBranch: (parentNodeId: string) => void;
+  readOnly?: boolean;
+};
+
+const DIMENSIONS = {
+  workflowWidth: 248,
+  workflowHeight: 118,
+  triggerWidth: 248,
+  triggerHeight: 108,
+  insertWidth: 160,
+  insertHeight: 40,
+  sectionLabelWidth: 104,
+  sectionLabelHeight: 28,
+  groupPaddingX: 28,
+  groupPaddingTop: 42,
+  groupPaddingBottom: 22,
+  loopGroupPaddingX: 70,
+  loopGroupPaddingTop: 46,
+  loopGroupPaddingBottom: 34,
+  controlChildLabelOffsetY: 138,
+  controlChildStartOffsetY: 150,
+};
+
+type WorkflowLayoutResult = {
+  entryId: string;
+  exitId: string;
+  endY: number;
+  width: number;
+};
+
+type GraphBuildContext = {
+  backgroundNodes: Node<WorkflowCanvasNodeData>[];
+  nodes: Node<WorkflowCanvasNodeData>[];
+  edges: Edge[];
+  nodeTypeMap: Map<string, WorkflowNodeMetadataResponse>;
+  readOnly?: boolean;
+  activePaletteNodeType?: WorkflowNodeMetadataResponse;
+  selectedNodeId?: string;
+  selectedTriggerId?: string;
+  onSelectNode: (nodeId: string) => void;
+  onSelectTrigger: (triggerId: string) => void;
+  onEditNode: (nodeId: string) => void;
+  onDeleteNode: (nodeId: string) => void;
+  onViewDocs: (nodeId: string) => void;
+  onViewTriggerDocs: (triggerId: string) => void;
+  onInsertNode: (target: WorkflowInsertTarget) => void;
+  onAddBranch: (parentNodeId: string) => void;
+};
+
+function normalizeChildSlots(
+  node: WorkflowNodeRecord,
+  nodeType?: WorkflowNodeMetadataResponse,
+): WorkflowNodeChildSlotDefinition[] {
+  if (nodeType?.authoring?.childSlots?.length) {
+    return nodeType.authoring.childSlots;
+  }
+
+  const slots: WorkflowNodeChildSlotDefinition[] = [];
+  if (Array.isArray(node.then) || Array.isArray(node.else)) {
+    slots.push({ key: "then", label: "Then", kind: "sequence" });
+    slots.push({ key: "else", label: "Else", kind: "sequence" });
+  } else if (Array.isArray(node.branches)) {
+    slots.push({ key: "branches", label: "Branches", kind: "branch-collection" });
+  } else if (Array.isArray(node.children) || Array.isArray(node.nodes)) {
+    slots.push({ key: "children", label: "Children", kind: "sequence" });
+  }
+
+  return slots;
+}
+
+function isLoopNode(
+  workflowNode: WorkflowNodeRecord,
+  nodeType?: WorkflowNodeMetadataResponse,
+) {
+  const nodeTypeId = String(workflowNode.type ?? nodeType?.type ?? "").toLowerCase();
+  const category = String(nodeType?.category ?? "").toLowerCase();
+  const nodeTypeTags = nodeType?.tags;
+  const tags = Array.isArray(nodeTypeTags)
+    ? nodeTypeTags.map((tag) => String(tag).toLowerCase())
+    : [];
+
+  return (
+    nodeTypeId === "foreach" ||
+    nodeTypeId === "for.each" ||
+    nodeTypeId === "loopuntil" ||
+    nodeTypeId === "loop.until" ||
+    category.includes("loop") ||
+    tags.includes("loop") ||
+    tags.includes("iteration")
+  );
+}
+
+function getNodeRect(node: Node<WorkflowCanvasNodeData>) {
+  const width =
+    node.type === "workflow"
+      ? DIMENSIONS.workflowWidth
+      : node.type === "trigger"
+        ? DIMENSIONS.triggerWidth
+        : node.type === "insert"
+          ? DIMENSIONS.insertWidth
+          : node.type === "sectionLabel"
+            ? DIMENSIONS.sectionLabelWidth
+            : Number(node.style?.width ?? 0);
+
+  const height =
+    node.type === "workflow"
+      ? DIMENSIONS.workflowHeight
+      : node.type === "trigger"
+        ? DIMENSIONS.triggerHeight
+        : node.type === "insert"
+          ? DIMENSIONS.insertHeight
+          : node.type === "sectionLabel"
+            ? DIMENSIONS.sectionLabelHeight
+            : Number(node.style?.height ?? 0);
+
+  return {
+    left: node.position.x,
+    top: node.position.y,
+    right: node.position.x + width,
+    bottom: node.position.y + height,
+  };
+}
+
+function createEdge(source: string, target: string): Edge {
+  return {
+    id: `${source}->${target}`,
+    source,
+    target,
+    type: "smoothstep",
+    markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14 },
+    style: {
+      stroke: "rgba(191, 219, 254, 0.88)",
+      strokeWidth: 2,
+      strokeDasharray: "5 5",
+    },
+    zIndex: 2,
+  };
+}
+
+function resolveWorkflowNodeIcon(nodeType?: WorkflowNodeMetadataResponse) {
+  return normalizeSolidIconName(nodeType?.ui?.icon ?? nodeType?.icon) ?? "si-th-large";
+}
+
+function estimateSequenceWidth(
+  sequence: WorkflowNodeRecord[],
+  nodeTypeMap: Map<string, WorkflowNodeMetadataResponse>,
+): number {
+  if (!sequence.length) {
+    return DIMENSIONS.insertWidth;
+  }
+
+  return sequence.reduce((maxWidth, workflowNode) => {
+    const nodeType = nodeTypeMap.get(String(workflowNode.type));
+    const nodeWidth = estimateWorkflowNodeWidth(workflowNode, nodeTypeMap, nodeType);
+    return Math.max(maxWidth, nodeWidth);
+  }, DIMENSIONS.workflowWidth);
+}
+
+function estimateWorkflowNodeWidth(
+  workflowNode: WorkflowNodeRecord,
+  nodeTypeMap: Map<string, WorkflowNodeMetadataResponse>,
+  nodeType?: WorkflowNodeMetadataResponse,
+): number {
+  const slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+
+  const branchSlots = slotDefinitions.filter(
+    (slot) => slot.key === "then" || slot.key === "else",
+  );
+  if (branchSlots.length >= 2) {
+    const branchGap = 60;
+    const branchWidths = branchSlots.map((slot) =>
+      estimateSequenceWidth(
+        Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [],
+        nodeTypeMap,
+      ),
+    );
+    const totalBranchWidth =
+      branchWidths.reduce((sum, width) => sum + width, 0) +
+      branchGap * Math.max(branchWidths.length - 1, 0);
+    return Math.max(DIMENSIONS.workflowWidth, totalBranchWidth);
+  }
+
+  if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+    const slotKey = slotDefinitions[0].key as "children" | "nodes" | "then" | "else";
+    return Math.max(
+      DIMENSIONS.workflowWidth,
+      estimateSequenceWidth(
+        Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [],
+        nodeTypeMap,
+      ),
+    );
+  }
+
+  if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+    const branchGap = 56;
+    const branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+    const branchWidths = branches.map((branch: any) =>
+      estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], nodeTypeMap),
+    );
+    const totalBranchWidth =
+      branchWidths.reduce((sum, width) => sum + width, 0) +
+      branchGap * Math.max(branchWidths.length - 1, 0);
+    return Math.max(DIMENSIONS.workflowWidth, totalBranchWidth);
+  }
+
+  return DIMENSIONS.workflowWidth;
+}
+
+function WorkflowCanvasNodeRenderer({ data }: { data: WorkflowCanvasNodeData }) {
+  if (data.kind === "group") {
+    return (
+      <div
+        className={`workflow-flow-group-node workflow-flow-group-node--${data.tone ?? "control"}`}
+      >
+        <div className="workflow-flow-group-node__header">
+          <span>{data.label}</span>
+          {data.workflowNode ? (
+            <button
+              type="button"
+              className="workflow-flow-help-button nodrag nopan nowheel"
+              aria-label={`Open ${data.nodeType?.label ?? data.label} documentation`}
+              title="Documentation"
+              onPointerDown={(event) => {
+                event.stopPropagation();
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                data.onViewDocs?.(String(data.workflowNode?.id));
+              }}
+            >
+              <CircleHelp size={12} />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  if (data.kind === "insert") {
+    return (
+      <div className="workflow-flow-insert-node">
+        <button
+          type="button"
+          onClick={data.onInsert}
+          className="workflow-flow-insert-node__button"
+        >
+          <Plus size={16} />
+        </button>
+        <div className="workflow-flow-insert-node__label">
+          {data.enabled
+            ? `Add ${data.selectedTypeLabel ?? "node"}`
+            : "Pick a node type to insert"}
+        </div>
+      </div>
+    );
+  }
+
+  if (data.kind === "section-label") {
+    return <div className="workflow-flow-section-label">{data.label}</div>;
+  }
+
+  if (data.kind === "workflow-trigger") {
+    const triggerTitle = data.readOnly
+      ? String(data.trigger.id)
+      : data.trigger.name ?? data.trigger.label ?? data.trigger.id;
+
+    return (
+      <div
+        className={`workflow-flow-node-card workflow-flow-node-card--trigger ${data.selected ? "is-selected" : ""} ${data.readOnly ? "is-readonly workflow-flow-node-card--readonly-compact" : ""}`}
+        onClick={() => data.onSelectTrigger(String(data.trigger.id))}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            data.onSelectTrigger(String(data.trigger.id));
+          }
+        }}
+      >
+        <div className="workflow-flow-node-card__header">
+          <div className="workflow-flow-node-card__header-main">
+            <div className="workflow-flow-node-card__icon-shell">
+              <SolidIcon name="si-calendar" size={16} aria-hidden />
+            </div>
+            <div>
+              <div className="workflow-flow-node-card__title">
+                {triggerTitle}
+              </div>
+              {!data.readOnly ? (
+                <div className="workflow-flow-node-card__subtitle">
+                  {data.trigger.type ?? "Trigger"}
+                </div>
+              ) : null}
+            </div>
+          </div>
+          {!data.readOnly ? (
+            <div className="workflow-flow-node-card__tags">
+              {data.trigger.disabled ? <SolidTag tone="warn">disabled</SolidTag> : <SolidTag>trigger</SolidTag>}
+            </div>
+          ) : null}
+        </div>
+        {!data.readOnly && data.trigger.description ? (
+          <div className="workflow-flow-node-card__description">
+            {data.trigger.description}
+          </div>
+        ) : null}
+        {!data.readOnly ? (
+          <div className="workflow-flow-node-card__actions">
+            <SolidButton
+              size="small"
+              variant="ghost"
+              onClick={(event) => {
+                event.stopPropagation();
+                data.onViewDocs(String(data.trigger.id));
+              }}
+            >
+              <BookOpen size={14} />
+            </SolidButton>
+          </div>
+        ) : null}
+        <Handle
+          type="target"
+          position={Position.Top}
+          className="workflow-flow-node-card__handle workflow-flow-node-card__handle--top"
+          isConnectable={false}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          className="workflow-flow-node-card__handle workflow-flow-node-card__handle--bottom"
+          isConnectable={false}
+        />
+      </div>
+    );
+  }
+
+  const { workflowNode, nodeType, selected } = data;
+  const iconName = resolveWorkflowNodeIcon(nodeType);
+  const nodeTitle = data.readOnly ? String(workflowNode.id) : workflowNode.name ?? workflowNode.id;
+  const nodeTypeLabel = nodeType?.label ?? workflowNode.type ?? workflowNode.kind ?? "node";
+
+  return (
+    <div
+      className={`workflow-flow-node-card ${selected ? "is-selected" : ""} ${data.readOnly ? "is-readonly workflow-flow-node-card--readonly-compact" : ""}`}
+      onClick={() => data.onSelectNode(String(workflowNode.id))}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          data.onSelectNode(String(workflowNode.id));
+        }
+      }}
+    >
+      <div className="workflow-flow-node-card__typebar">
+        <span>{nodeTypeLabel}</span>
+        <span className="workflow-flow-node-card__quick-actions">
+          {!data.readOnly ? (
+            <>
+              <button
+                type="button"
+                className="workflow-flow-icon-button nodrag nopan nowheel"
+                aria-label={`Edit ${nodeTitle}`}
+                title="Edit"
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  data.onEditNode(String(workflowNode.id));
+                }}
+              >
+                <Pencil size={12} />
+              </button>
+              <button
+                type="button"
+                className="workflow-flow-icon-button workflow-flow-icon-button--danger nodrag nopan nowheel"
+                aria-label={`Delete ${nodeTitle}`}
+                title="Delete"
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  data.onDeleteNode(String(workflowNode.id));
+                }}
+              >
+                <Trash2 size={12} />
+              </button>
+            </>
+          ) : null}
+          <button
+            type="button"
+            className="workflow-flow-icon-button nodrag nopan nowheel"
+            aria-label={`Open ${nodeTypeLabel} documentation`}
+            title="Documentation"
+            onPointerDown={(event) => {
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              data.onViewDocs(String(workflowNode.id));
+            }}
+          >
+            <CircleHelp size={12} />
+          </button>
+        </span>
+      </div>
+      <div className="workflow-flow-node-card__body">
+        <div className="workflow-flow-node-card__header-main">
+          <div className="workflow-flow-node-card__icon-shell">
+            <SolidIcon name={iconName} size={16} aria-hidden />
+          </div>
+          <div>
+            <div className="workflow-flow-node-card__title">
+              {nodeTitle}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {!data.readOnly && workflowNode.description ? (
+        <div className="workflow-flow-node-card__description">
+          {workflowNode.description}
+        </div>
+      ) : null}
+
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="workflow-flow-node-card__handle workflow-flow-node-card__handle--top"
+        isConnectable={false}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="workflow-flow-node-card__handle workflow-flow-node-card__handle--bottom"
+        isConnectable={false}
+      />
+    </div>
+  );
+}
+
+const canvasNodeTypes: any = {
+  group: WorkflowCanvasNodeRenderer,
+  workflow: WorkflowCanvasNodeRenderer,
+  trigger: WorkflowCanvasNodeRenderer,
+  insert: WorkflowCanvasNodeRenderer,
+  sectionLabel: WorkflowCanvasNodeRenderer,
+};
+
+function pushGroupNode(
+  ctx: GraphBuildContext,
+  id: string,
+  label: string,
+  tone: "control" | "loop" | "trigger",
+  subset: Node<WorkflowCanvasNodeData>[],
+  workflowNode?: WorkflowNodeRecord,
+  nodeType?: WorkflowNodeMetadataResponse,
+) {
+  if (!subset.length) {
+    return;
+  }
+
+  const bounds = subset.reduce(
+    (acc, node) => {
+      const rect = getNodeRect(node);
+      return {
+        left: Math.min(acc.left, rect.left),
+        top: Math.min(acc.top, rect.top),
+        right: Math.max(acc.right, rect.right),
+        bottom: Math.max(acc.bottom, rect.bottom),
+      };
+    },
+    {
+      left: Number.POSITIVE_INFINITY,
+      top: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY,
+    },
+  );
+
+  const paddingX =
+    tone === "loop" ? DIMENSIONS.loopGroupPaddingX : DIMENSIONS.groupPaddingX;
+  const paddingTop =
+    tone === "loop" ? DIMENSIONS.loopGroupPaddingTop : DIMENSIONS.groupPaddingTop;
+  const paddingBottom =
+    tone === "loop" ? DIMENSIONS.loopGroupPaddingBottom : DIMENSIONS.groupPaddingBottom;
+
+  ctx.backgroundNodes.push({
+    id,
+    type: "group",
+    position: {
+      x: bounds.left - paddingX,
+      y: bounds.top - paddingTop,
+    },
+    draggable: false,
+    selectable: false,
+    style: {
+      width: bounds.right - bounds.left + paddingX * 2,
+      height: bounds.bottom - bounds.top + paddingTop + paddingBottom,
+      zIndex: 0,
+    },
+    data: {
+      kind: "group",
+      label,
+      tone,
+      workflowNode,
+      nodeType,
+      onViewDocs: ctx.onViewDocs,
+    },
+  });
+}
+
+function pushInsertNode(
+  ctx: GraphBuildContext,
+  id: string,
+  x: number,
+  y: number,
+  target: WorkflowInsertTarget,
+) {
+  ctx.nodes.push({
+    id,
+    type: "insert",
+    position: { x, y },
+    draggable: false,
+    selectable: false,
+    data: {
+      kind: "insert",
+      enabled: !!ctx.activePaletteNodeType,
+      selectedTypeLabel: ctx.activePaletteNodeType?.label,
+      onInsert: () => ctx.onInsertNode(target),
+    },
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Top,
+  });
+}
+
+function pushWorkflowNode(
+  ctx: GraphBuildContext,
+  workflowNode: WorkflowNodeRecord,
+  x: number,
+  y: number,
+) {
+  const nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+  ctx.nodes.push({
+    id: String(workflowNode.id),
+    type: "workflow",
+    position: { x, y },
+    draggable: false,
+    data: {
+      kind: "workflow-node",
+      workflowNode,
+      nodeType,
+      selected: ctx.selectedNodeId === String(workflowNode.id),
+      readOnly: ctx.readOnly,
+      onSelectNode: ctx.onSelectNode,
+      onEditNode: ctx.onEditNode,
+      onDeleteNode: ctx.onDeleteNode,
+      onViewDocs: ctx.onViewDocs,
+    },
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Top,
+  });
+}
+
+function pushTriggerNode(
+  ctx: GraphBuildContext,
+  trigger: WorkflowTriggerRecord,
+  x: number,
+  y: number,
+) {
+  ctx.nodes.push({
+    id: `trigger-${String(trigger.id)}`,
+    type: "trigger",
+    position: { x, y },
+    draggable: false,
+    selectable: false,
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Top,
+    data: {
+      kind: "workflow-trigger",
+      trigger,
+      selected: ctx.selectedTriggerId === String(trigger.id),
+      readOnly: ctx.readOnly,
+      onSelectTrigger: ctx.onSelectTrigger,
+      onViewDocs: ctx.onViewTriggerDocs,
+    },
+  });
+}
+
+type ReadOnlySequenceLayoutResult = {
+  entryIds: string[];
+  exitIds: string[];
+  endY: number;
+  width: number;
+};
+
+function pushSectionLabelNode(
+  ctx: GraphBuildContext,
+  id: string,
+  x: number,
+  y: number,
+  label: string,
+) {
+  ctx.nodes.push({
+    id,
+    type: "sectionLabel",
+    position: { x, y },
+    draggable: false,
+    selectable: false,
+    data: {
+      kind: "section-label",
+      label,
+    },
+  });
+}
+
+function buildSequenceGraph(
+  sequence: WorkflowNodeRecord[],
+  ctx: GraphBuildContext,
+  laneX: number,
+  startY: number,
+  scope: WorkflowInsertScope,
+): WorkflowLayoutResult {
+  let cursorY = startY;
+  let previousGraphNodeId: string | null = null;
+  let maxWidth = DIMENSIONS.workflowWidth;
+
+  const initialInsertId = `insert-${JSON.stringify(scope)}-0`;
+  pushInsertNode(ctx, initialInsertId, laneX, cursorY, {
+    ...scope,
+    index: 0,
+  } as WorkflowInsertTarget);
+  previousGraphNodeId = initialInsertId;
+  let exitId = initialInsertId;
+
+  for (let index = 0; index < sequence.length; index += 1) {
+    const workflowNode = sequence[index];
+    const nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+    const slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+    const isControlNode = nodeType?.kind === "control" || slotDefinitions.length > 0;
+    const estimatedNodeWidth = estimateWorkflowNodeWidth(
+      workflowNode,
+      ctx.nodeTypeMap,
+      nodeType,
+    );
+    maxWidth = Math.max(maxWidth, estimatedNodeWidth);
+    const subtreeStartIndex = ctx.nodes.length;
+
+    cursorY += 82;
+    pushWorkflowNode(ctx, workflowNode, laneX - 56, cursorY);
+    if (previousGraphNodeId) {
+      ctx.edges.push(createEdge(previousGraphNodeId, String(workflowNode.id)));
+    }
+
+    let deepestY = cursorY;
+    let connectionSources: string[] = [String(workflowNode.id)];
+
+    const branchSlots = slotDefinitions.filter(
+      (slot) => slot.key === "then" || slot.key === "else",
+    );
+
+    if (branchSlots.length >= 2) {
+      const branchGap = 60;
+      const branchWidths = branchSlots.map((slot) =>
+        estimateSequenceWidth(
+          Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [],
+          ctx.nodeTypeMap,
+        ),
+      );
+      const totalBranchWidth =
+        branchWidths.reduce((sum, width) => sum + width, 0) +
+        branchGap * Math.max(branchWidths.length - 1, 0);
+      const branchStartX = laneX - totalBranchWidth / 2;
+      const branchLayouts = branchSlots.map((slot, branchIndex) => {
+        const slotKey = slot.key as "then" | "else";
+        const childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+        const beforeWidth = branchWidths
+          .slice(0, branchIndex)
+          .reduce((sum, width) => sum + width, 0);
+        const branchLaneX =
+          branchStartX +
+          beforeWidth +
+          branchGap * branchIndex +
+          branchWidths[branchIndex] / 2;
+        const labelX = branchLaneX + 24;
+        const labelY = cursorY + 60;
+        pushSectionLabelNode(
+          ctx,
+          `${workflowNode.id}-${slotKey}-label`,
+          labelX,
+          labelY,
+          slot.label ?? slotKey,
+        );
+        const childLayout = buildSequenceGraph(
+          childNodes,
+          ctx,
+          branchLaneX,
+          cursorY + 82,
+          {
+            scope: "slot",
+            parentNodeId: String(workflowNode.id),
+            slotKey,
+          },
+        );
+        ctx.edges.push(createEdge(String(workflowNode.id), childLayout.entryId));
+        deepestY = Math.max(deepestY, childLayout.endY);
+        maxWidth = Math.max(maxWidth, childLayout.width);
+        return childLayout;
+      });
+
+      connectionSources = branchLayouts.map((layout) => layout.exitId);
+    } else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+      const slot = slotDefinitions[0];
+      const slotKey = slot.key as "children" | "nodes" | "then" | "else";
+      const childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+      if (slot.label) {
+        const isLoop = isLoopNode(workflowNode, nodeType);
+        pushSectionLabelNode(
+          ctx,
+          `${workflowNode.id}-${slotKey}-label`,
+          laneX + 24,
+          cursorY + (isLoop ? DIMENSIONS.controlChildLabelOffsetY : 132),
+          isLoop ? slot.label ?? "Loop Body" : slot.label,
+        );
+      }
+      const childLayout = buildSequenceGraph(
+        childNodes,
+        ctx,
+        laneX,
+        cursorY + DIMENSIONS.controlChildStartOffsetY,
+        {
+          scope: "slot",
+          parentNodeId: String(workflowNode.id),
+          slotKey,
+        },
+      );
+      ctx.edges.push(createEdge(String(workflowNode.id), childLayout.entryId));
+      deepestY = Math.max(deepestY, childLayout.endY);
+      maxWidth = Math.max(maxWidth, childLayout.width);
+      connectionSources = [childLayout.exitId];
+    } else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+      const branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+      const branchGap = 56;
+      const branchWidths = branches.map((branch: any) =>
+        estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], ctx.nodeTypeMap),
+      );
+      const totalBranchWidth =
+        branchWidths.reduce((sum, width) => sum + width, 0) +
+        branchGap * Math.max(branchWidths.length - 1, 0);
+      const branchStartX = laneX - totalBranchWidth / 2;
+
+      const branchLayouts = branches.map((branch: any, branchIndex) => {
+        const beforeWidth = branchWidths
+          .slice(0, branchIndex)
+          .reduce((sum, width) => sum + width, 0);
+        const branchLaneX =
+          branchStartX +
+          beforeWidth +
+          branchGap * branchIndex +
+          branchWidths[branchIndex] / 2;
+        pushSectionLabelNode(
+          ctx,
+          `${workflowNode.id}-${branch.id}-label`,
+          branchLaneX + 24,
+          cursorY + 60,
+          branch.name ?? branch.id,
+        );
+        const branchLayout = buildSequenceGraph(
+          Array.isArray(branch.nodes) ? branch.nodes : [],
+          ctx,
+          branchLaneX,
+          cursorY + 82,
+          {
+            scope: "branch",
+            parentNodeId: String(workflowNode.id),
+            branchId: String(branch.id),
+          },
+        );
+        ctx.edges.push(createEdge(String(workflowNode.id), branchLayout.entryId));
+        deepestY = Math.max(deepestY, branchLayout.endY);
+        maxWidth = Math.max(maxWidth, branchLayout.width);
+        return branchLayout;
+      });
+
+      connectionSources = branchLayouts.length
+        ? branchLayouts.map((layout) => layout.exitId)
+        : [String(workflowNode.id)];
+    }
+
+    if (isControlNode) {
+      pushGroupNode(
+        ctx,
+        `group-${String(workflowNode.id)}`,
+        workflowNode.name ?? workflowNode.id,
+        isLoopNode(workflowNode, nodeType) ? "loop" : "control",
+        ctx.nodes.slice(subtreeStartIndex),
+        workflowNode,
+        nodeType,
+      );
+    }
+
+    cursorY = Math.max(cursorY + 82, deepestY + (isControlNode ? 40 : 0));
+    const afterInsertId = `insert-${JSON.stringify(scope)}-${index + 1}-${workflowNode.id}`;
+    pushInsertNode(ctx, afterInsertId, laneX, cursorY, {
+      ...scope,
+      index: index + 1,
+    } as WorkflowInsertTarget);
+    connectionSources.forEach((sourceId) => {
+      ctx.edges.push(createEdge(sourceId, afterInsertId));
+    });
+    previousGraphNodeId = afterInsertId;
+    exitId = afterInsertId;
+  }
+
+  return {
+    entryId: initialInsertId,
+    exitId,
+    endY: cursorY,
+    width: maxWidth,
+  };
+}
+
+function buildReadOnlySequenceGraph(
+  sequence: WorkflowNodeRecord[],
+  ctx: GraphBuildContext,
+  laneX: number,
+  startY: number,
+): ReadOnlySequenceLayoutResult {
+  let cursorY = startY;
+  let previousExitIds: string[] = [];
+  let entryIds: string[] = [];
+  let maxWidth = sequence.length ? DIMENSIONS.workflowWidth : 0;
+
+  for (const workflowNode of sequence) {
+    const nodeType = ctx.nodeTypeMap.get(String(workflowNode.type));
+    const slotDefinitions = normalizeChildSlots(workflowNode, nodeType);
+    const isControlNode = nodeType?.kind === "control" || slotDefinitions.length > 0;
+    const estimatedNodeWidth = estimateWorkflowNodeWidth(
+      workflowNode,
+      ctx.nodeTypeMap,
+      nodeType,
+    );
+    maxWidth = Math.max(maxWidth, estimatedNodeWidth);
+    const subtreeStartIndex = ctx.nodes.length;
+
+    cursorY += 82;
+    pushWorkflowNode(ctx, workflowNode, laneX - 56, cursorY);
+
+    if (!entryIds.length) {
+      entryIds = [String(workflowNode.id)];
+    }
+    previousExitIds.forEach((sourceId) => {
+      ctx.edges.push(createEdge(sourceId, String(workflowNode.id)));
+    });
+
+    let deepestY = cursorY;
+    let exitIds: string[] = [String(workflowNode.id)];
+
+    const branchSlots = slotDefinitions.filter(
+      (slot) => slot.key === "then" || slot.key === "else",
+    );
+
+    if (branchSlots.length >= 2) {
+      const branchGap = 60;
+      const branchWidths = branchSlots.map((slot) =>
+        estimateSequenceWidth(
+          Array.isArray(workflowNode[slot.key]) ? workflowNode[slot.key] : [],
+          ctx.nodeTypeMap,
+        ),
+      );
+      const totalBranchWidth =
+        branchWidths.reduce((sum, width) => sum + width, 0) +
+        branchGap * Math.max(branchWidths.length - 1, 0);
+      const branchStartX = laneX - totalBranchWidth / 2;
+
+      const branchLayouts = branchSlots
+        .map((slot, branchIndex) => {
+          const slotKey = slot.key as "then" | "else";
+          const childNodes = Array.isArray(workflowNode[slotKey])
+            ? workflowNode[slotKey]
+            : [];
+          const beforeWidth = branchWidths
+            .slice(0, branchIndex)
+            .reduce((sum, width) => sum + width, 0);
+          const branchLaneX =
+            branchStartX +
+            beforeWidth +
+            branchGap * branchIndex +
+            branchWidths[branchIndex] / 2;
+          pushSectionLabelNode(
+            ctx,
+            `${workflowNode.id}-${slotKey}-label`,
+            branchLaneX + 24,
+            cursorY + 60,
+            slot.label ?? slotKey,
+          );
+          const childLayout = buildReadOnlySequenceGraph(
+            childNodes,
+            ctx,
+            branchLaneX,
+            cursorY + 82,
+          );
+          childLayout.entryIds.forEach((entryId) => {
+            ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+          });
+          deepestY = Math.max(deepestY, childLayout.endY);
+          maxWidth = Math.max(maxWidth, childLayout.width);
+          return childLayout;
+        })
+        .filter((layout) => layout.entryIds.length);
+
+      exitIds = branchLayouts.length
+        ? branchLayouts.flatMap((layout) => layout.exitIds)
+        : [String(workflowNode.id)];
+    } else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "sequence") {
+      const slot = slotDefinitions[0];
+      const slotKey = slot.key as "children" | "nodes" | "then" | "else";
+      const childNodes = Array.isArray(workflowNode[slotKey]) ? workflowNode[slotKey] : [];
+      if (slot.label) {
+        const isLoop = isLoopNode(workflowNode, nodeType);
+        pushSectionLabelNode(
+          ctx,
+          `${workflowNode.id}-${slotKey}-label`,
+          laneX + 24,
+          cursorY + (isLoop ? DIMENSIONS.controlChildLabelOffsetY : 132),
+          isLoop ? slot.label ?? "Loop Body" : slot.label,
+        );
+      }
+      const childLayout = buildReadOnlySequenceGraph(
+        childNodes,
+        ctx,
+        laneX,
+        cursorY + DIMENSIONS.controlChildStartOffsetY,
+      );
+      childLayout.entryIds.forEach((entryId) => {
+        ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+      });
+      deepestY = Math.max(deepestY, childLayout.endY);
+      maxWidth = Math.max(maxWidth, childLayout.width);
+      exitIds = childLayout.exitIds.length ? childLayout.exitIds : [String(workflowNode.id)];
+    } else if (slotDefinitions.length === 1 && slotDefinitions[0].kind === "branch-collection") {
+      const branches = Array.isArray(workflowNode.branches) ? workflowNode.branches : [];
+      const branchGap = 56;
+      const branchWidths = branches.map((branch: any) =>
+        estimateSequenceWidth(Array.isArray(branch.nodes) ? branch.nodes : [], ctx.nodeTypeMap),
+      );
+      const totalBranchWidth =
+        branchWidths.reduce((sum, width) => sum + width, 0) +
+        branchGap * Math.max(branchWidths.length - 1, 0);
+      const branchStartX = laneX - totalBranchWidth / 2;
+
+      const branchLayouts = branches
+        .map((branch: any, branchIndex) => {
+          const beforeWidth = branchWidths
+            .slice(0, branchIndex)
+            .reduce((sum, width) => sum + width, 0);
+          const branchLaneX =
+            branchStartX +
+            beforeWidth +
+            branchGap * branchIndex +
+            branchWidths[branchIndex] / 2;
+          pushSectionLabelNode(
+            ctx,
+            `${workflowNode.id}-${branch.id}-label`,
+            branchLaneX + 24,
+            cursorY + 60,
+            branch.name ?? branch.id,
+          );
+          const branchLayout = buildReadOnlySequenceGraph(
+            Array.isArray(branch.nodes) ? branch.nodes : [],
+            ctx,
+            branchLaneX,
+            cursorY + 82,
+          );
+          branchLayout.entryIds.forEach((entryId) => {
+            ctx.edges.push(createEdge(String(workflowNode.id), entryId));
+          });
+          deepestY = Math.max(deepestY, branchLayout.endY);
+          maxWidth = Math.max(maxWidth, branchLayout.width);
+          return branchLayout;
+        })
+        .filter((layout) => layout.entryIds.length);
+
+      exitIds = branchLayouts.length
+        ? branchLayouts.flatMap((layout) => layout.exitIds)
+        : [String(workflowNode.id)];
+    }
+
+    if (isControlNode) {
+      pushGroupNode(
+        ctx,
+        `group-${String(workflowNode.id)}`,
+        workflowNode.name ?? workflowNode.id,
+        isLoopNode(workflowNode, nodeType) ? "loop" : "control",
+        ctx.nodes.slice(subtreeStartIndex),
+        workflowNode,
+        nodeType,
+      );
+    }
+
+    cursorY = Math.max(cursorY + 82, deepestY + (isControlNode ? 40 : 0));
+    previousExitIds = exitIds;
+  }
+
+  return {
+    entryIds,
+    exitIds: previousExitIds,
+    endY: cursorY,
+    width: maxWidth,
+  };
+}
+
+function buildGraph(
+  definition: { nodes: WorkflowNodeRecord[]; triggers?: WorkflowTriggerRecord[] },
+  nodeTypes: WorkflowNodeMetadataResponse[],
+  props: Omit<WorkflowFlowCanvasProps, "definition" | "nodeTypes">,
+) {
+  const ctx: GraphBuildContext = {
+    backgroundNodes: [],
+    nodes: [],
+    edges: [],
+    nodeTypeMap: new Map(nodeTypes.map((item) => [item.type, item])),
+    readOnly: props.readOnly,
+    activePaletteNodeType: props.activePaletteNodeType,
+    selectedNodeId: props.selectedNodeId,
+    selectedTriggerId: props.selectedTriggerId,
+    onSelectNode: props.onSelectNode,
+    onSelectTrigger: props.onSelectTrigger,
+    onEditNode: props.onEditNode,
+    onDeleteNode: props.onDeleteNode,
+    onViewDocs: props.onViewDocs,
+    onViewTriggerDocs: props.onViewTriggerDocs,
+    onInsertNode: props.onInsertNode,
+    onAddBranch: props.onAddBranch,
+  };
+
+  const triggers = Array.isArray(definition.triggers) ? definition.triggers : [];
+  let startY = 0;
+  let previousTriggerId: string | null = null;
+
+  if (triggers.length) {
+    const triggerStartIndex = ctx.nodes.length;
+    let triggerY = 60;
+    triggers.forEach((trigger) => {
+      const triggerNodeId = `trigger-${String(trigger.id)}`;
+      pushTriggerNode(ctx, trigger, 32, triggerY);
+      if (previousTriggerId) {
+        ctx.edges.push(createEdge(previousTriggerId, triggerNodeId));
+      }
+      previousTriggerId = triggerNodeId;
+      triggerY += 96;
+    });
+    pushGroupNode(ctx, "group-triggers", "Triggers", "trigger", ctx.nodes.slice(triggerStartIndex));
+    startY = triggerY + 2;
+  }
+
+  if (props.readOnly) {
+    const readOnlyLayout = buildReadOnlySequenceGraph(
+      definition.nodes ?? [],
+      ctx,
+      80,
+      startY,
+    );
+    if (previousTriggerId) {
+      const triggerSourceId = previousTriggerId;
+      readOnlyLayout.entryIds.forEach((entryId) => {
+        ctx.edges.push(createEdge(triggerSourceId, entryId));
+      });
+    }
+  } else {
+    buildSequenceGraph(definition.nodes ?? [], ctx, 80, startY, { scope: "root" });
+    if (previousTriggerId) {
+      const firstRootInsertId = `insert-${JSON.stringify({ scope: "root" })}-0`;
+      ctx.edges.push(createEdge(previousTriggerId, firstRootInsertId));
+    }
+  }
+
+  return {
+    nodes: [...ctx.backgroundNodes, ...ctx.nodes],
+    edges: ctx.edges,
+  };
+}
+
+function WorkflowFlowCanvasInner(props: WorkflowFlowCanvasProps) {
+  const graph = React.useMemo(
+    () =>
+      buildGraph(props.definition, props.nodeTypes, {
+        selectedNodeId: props.selectedNodeId,
+        selectedTriggerId: props.selectedTriggerId,
+        activePaletteNodeType: props.activePaletteNodeType,
+        onSelectNode: props.onSelectNode,
+        onSelectTrigger: props.onSelectTrigger,
+        onEditNode: props.onEditNode,
+        onDeleteNode: props.onDeleteNode,
+        onViewDocs: props.onViewDocs,
+        onViewTriggerDocs: props.onViewTriggerDocs,
+        onInsertNode: props.onInsertNode,
+        onAddBranch: props.onAddBranch,
+        readOnly: props.readOnly,
+      }),
+    [
+      props.activePaletteNodeType,
+      props.definition,
+      props.nodeTypes,
+      props.onAddBranch,
+      props.onDeleteNode,
+      props.onEditNode,
+      props.onInsertNode,
+      props.onSelectNode,
+      props.onSelectTrigger,
+      props.onViewDocs,
+      props.onViewTriggerDocs,
+      props.readOnly,
+      props.selectedNodeId,
+      props.selectedTriggerId,
+    ],
+  );
+
+  return (
+    <div
+      className={`workflow-flow-canvas ${props.readOnly ? "workflow-flow-canvas--readonly" : ""}`}
+    >
+      <ReactFlow
+        nodes={graph.nodes}
+        edges={graph.edges}
+        nodeTypes={canvasNodeTypes}
+        fitView
+        fitViewOptions={{
+          padding: props.readOnly ? 0.28 : 0.24,
+          maxZoom: props.readOnly ? 0.92 : 1,
+        }}
+        minZoom={0.25}
+        maxZoom={1.6}
+        proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={{ zIndex: 2 }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={!props.readOnly}
+        panOnDrag
+        zoomOnDoubleClick={false}
+      >
+        {!props.readOnly ? (
+          <MiniMap pannable zoomable className="workflow-flow-canvas__minimap" />
+        ) : null}
+        <Controls showInteractive={false} />
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={18}
+          size={1.45}
+          color="rgba(148, 163, 184, 0.34)"
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function WorkflowFlowCanvas(props: WorkflowFlowCanvasProps) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowFlowCanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}