@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/Edges/SequenceEdge.stories.js

@@ -1,1024 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Panel, Position } from "../../xyflow/react.js";
-import { useMemo } from "react";
-import { useCanvasStory, withCanvasProviders } from "../../storybook-utils/index.js";
-import { DefaultCanvasTranslations } from "../../types.js";
-import { BaseCanvas } from "../BaseCanvas/index.js";
-import { CanvasPositionControls } from "../CanvasPositionControls.js";
-import { StickyNoteNode } from "../StickyNoteNode/index.js";
-import { SequenceEdge } from "./SequenceEdge.js";
-const meta = {
-    title: 'Canvas/Edges/SequenceEdge',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        withCanvasProviders()
-    ]
-};
-const SequenceEdge_stories = meta;
-const edgeTypes = {
-    default: SequenceEdge
-};
-const nodeTypes = {
-    stickyNote: StickyNoteNode
-};
-function createNode(config) {
-    const { id, label, x, y, sourcePositions = [], targetPositions = [] } = config;
-    const handleConfigurations = [
-        ...sourcePositions.map((position)=>({
-                position,
-                handles: [
-                    {
-                        id: `out-${position}`,
-                        type: 'source',
-                        handleType: 'output'
-                    }
-                ]
-            })),
-        ...targetPositions.map((position)=>({
-                position,
-                handles: [
-                    {
-                        id: `in-${position}`,
-                        type: 'target',
-                        handleType: 'input'
-                    }
-                ]
-            }))
-    ];
-    return {
-        id,
-        type: 'uipath.blank-node',
-        position: {
-            x,
-            y
-        },
-        data: {
-            display: {
-                label
-            },
-            handleConfigurations
-        },
-        zIndex: 0
-    };
-}
-function createLoopNode(config) {
-    const { id, label, x, y } = config;
-    return {
-        id,
-        type: 'uipath.control-flow.while',
-        position: {
-            x,
-            y
-        },
-        data: {
-            display: {
-                label
-            }
-        },
-        zIndex: 0
-    };
-}
-function createStickyNote(id, color, content, position, size) {
-    return {
-        id,
-        type: 'stickyNote',
-        position,
-        data: {
-            color,
-            content
-        },
-        width: size.width,
-        height: size.height,
-        zIndex: -10
-    };
-}
-function DefaultStory() {
-    const initialNodes = useMemo(()=>[
-            createStickyNote('sticky-directions', 'yellow', '**All Directions**\nArrows point into center node', {
-                x: 100,
-                y: 80
-            }, {
-                width: 550,
-                height: 590
-            }),
-            createNode({
-                id: 'center',
-                label: 'Center',
-                x: 300,
-                y: 300,
-                targetPositions: [
-                    Position.Top,
-                    Position.Bottom,
-                    Position.Left,
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'top',
-                label: 'Top',
-                x: 300,
-                y: 130,
-                sourcePositions: [
-                    Position.Bottom
-                ]
-            }),
-            createNode({
-                id: 'bottom',
-                label: 'Bottom',
-                x: 300,
-                y: 470,
-                sourcePositions: [
-                    Position.Top
-                ]
-            }),
-            createNode({
-                id: 'left',
-                label: 'Left',
-                x: 130,
-                y: 300,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'right',
-                label: 'Right',
-                x: 470,
-                y: 300,
-                sourcePositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-preview', 'blue', '**Preview**\nDashed primary color', {
-                x: 760,
-                y: 80
-            }, {
-                width: 420,
-                height: 200
-            }),
-            createNode({
-                id: 'preview-source',
-                label: 'Preview',
-                x: 800,
-                y: 150,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'preview-target',
-                label: 'Target',
-                x: 1020,
-                y: 150,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-diff', 'white', '**Diff States**\nFor version comparison', {
-                x: 760,
-                y: 330
-            }, {
-                width: 420,
-                height: 340
-            }),
-            createNode({
-                id: 'added-source',
-                label: 'Added',
-                x: 800,
-                y: 410,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'added-target',
-                label: 'Target',
-                x: 1020,
-                y: 410,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'removed-source',
-                label: 'Removed',
-                x: 800,
-                y: 530,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'removed-target',
-                label: 'Target',
-                x: 1020,
-                y: 530,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-info', 'pink', '## SequenceEdge\n\nSmooth step edge with directional arrows.\n\n**States:**\n- Default (gray)\n- Hover (primary hover)\n- Selected (primary + outline)\n- Preview (dashed primary)\n- Diff Added (green)\n- Diff Removed (red dashed)', {
-                x: 100,
-                y: 720
-            }, {
-                width: 350,
-                height: 280
-            })
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-top-to-center',
-                source: 'top',
-                target: 'center',
-                sourceHandle: `out-${Position.Bottom}`,
-                targetHandle: `in-${Position.Top}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-bottom-to-center',
-                source: 'bottom',
-                target: 'center',
-                sourceHandle: `out-${Position.Top}`,
-                targetHandle: `in-${Position.Bottom}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-left-to-center',
-                source: 'left',
-                target: 'center',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-right-to-center',
-                source: 'right',
-                target: 'center',
-                sourceHandle: `out-${Position.Left}`,
-                targetHandle: `in-${Position.Right}`,
-                type: 'sequence'
-            },
-            {
-                id: 'preview-edge-id',
-                source: 'preview-source',
-                target: 'preview-target',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-added',
-                source: 'added-source',
-                target: 'added-target',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffAdded: true
-                },
-                style: {
-                    stroke: 'var(--palette-positive-base)'
-                }
-            },
-            {
-                id: 'e-removed',
-                source: 'removed-source',
-                target: 'removed-target',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffRemoved: true
-                },
-                style: {
-                    stroke: 'var(--palette-negative-base)',
-                    strokeDasharray: '5,5'
-                }
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ jsx(Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                translations: DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function EdgeLabelsStory() {
-    const initialNodes = useMemo(()=>[
-            createStickyNote('sticky-labels', 'green', '**Edge Labels**\nLabels rendered at edge midpoint via data.label', {
-                x: 100,
-                y: 80
-            }, {
-                width: 550,
-                height: 590
-            }),
-            createNode({
-                id: 'label-source-1',
-                label: 'Source',
-                x: 130,
-                y: 160,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-target-1',
-                label: 'Target',
-                x: 470,
-                y: 160,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'label-source-2',
-                label: 'Start',
-                x: 300,
-                y: 300,
-                sourcePositions: [
-                    Position.Bottom
-                ]
-            }),
-            createNode({
-                id: 'label-target-2',
-                label: 'End',
-                x: 300,
-                y: 480,
-                targetPositions: [
-                    Position.Top
-                ]
-            }),
-            createStickyNote('sticky-labels-diff', 'white', '**Labels + Diff States**\nEdge labels work alongside diff styling', {
-                x: 760,
-                y: 80
-            }, {
-                width: 420,
-                height: 340
-            }),
-            createNode({
-                id: 'label-added-source',
-                label: 'Added',
-                x: 800,
-                y: 160,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-added-target',
-                label: 'Target',
-                x: 1020,
-                y: 160,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'label-removed-source',
-                label: 'Removed',
-                x: 800,
-                y: 300,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-removed-target',
-                label: 'Target',
-                x: 1020,
-                y: 300,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-info-labels', 'pink', '## Edge Labels\n\nSet `data.label` on an edge to display a label at the edge midpoint.\n\n**Features:**\n- Rendered via SVG foreignObject\n- Positioned at computed midpoint (labelX, labelY)\n- Styled consistently with StageEdge labels\n- Works with all edge states (diff, selected, etc.)', {
-                x: 100,
-                y: 720
-            }, {
-                width: 350,
-                height: 280
-            })
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-label-horizontal',
-                source: 'label-source-1',
-                target: 'label-target-1',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence',
-                data: {
-                    label: 'Success'
-                }
-            },
-            {
-                id: 'e-label-vertical',
-                source: 'label-source-2',
-                target: 'label-target-2',
-                sourceHandle: `out-${Position.Bottom}`,
-                targetHandle: `in-${Position.Top}`,
-                type: 'sequence',
-                data: {
-                    label: 'Next Step'
-                }
-            },
-            {
-                id: 'e-label-added',
-                source: 'label-added-source',
-                target: 'label-added-target',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffAdded: true,
-                    label: 'New connection'
-                },
-                style: {
-                    stroke: 'var(--palette-positive-base)'
-                }
-            },
-            {
-                id: 'e-label-removed',
-                source: 'label-removed-source',
-                target: 'label-removed-target',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffRemoved: true,
-                    label: 'Deprecated'
-                },
-                style: {
-                    stroke: 'var(--palette-negative-base)',
-                    strokeDasharray: '5,5'
-                }
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ jsx(Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                translations: DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function ReadonlyStory() {
-    const initialNodes = useMemo(()=>[
-            createStickyNote('sticky-execution', 'green', '**Execution States**\nReadonly mode edge statuses', {
-                x: 550,
-                y: 80
-            }, {
-                width: 550,
-                height: 825
-            }),
-            createNode({
-                id: 'exec-start',
-                label: 'Start',
-                x: 580,
-                y: 160,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-InProgress',
-                label: 'In Progress',
-                x: 770,
-                y: 160,
-                targetPositions: [
-                    Position.Left
-                ],
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-1',
-                label: 'Target',
-                x: 970,
-                y: 160,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-2',
-                label: 'Source',
-                x: 580,
-                y: 310,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Completed',
-                label: 'Completed',
-                x: 770,
-                y: 310,
-                targetPositions: [
-                    Position.Left
-                ],
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-2',
-                label: 'Target',
-                x: 970,
-                y: 310,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-3',
-                label: 'Source',
-                x: 580,
-                y: 460,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Failed',
-                label: 'Failed',
-                x: 770,
-                y: 460,
-                targetPositions: [
-                    Position.Left
-                ],
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-3',
-                label: 'Target',
-                x: 970,
-                y: 460,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-4',
-                label: 'Source',
-                x: 580,
-                y: 610,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Paused',
-                label: 'Paused',
-                x: 770,
-                y: 610,
-                targetPositions: [
-                    Position.Left
-                ],
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-4',
-                label: 'Target',
-                x: 970,
-                y: 610,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-5',
-                label: 'Source',
-                x: 580,
-                y: 760,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Cancelled',
-                label: 'Cancelled',
-                x: 770,
-                y: 760,
-                targetPositions: [
-                    Position.Left
-                ],
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-5',
-                label: 'Target',
-                x: 970,
-                y: 760,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-info', 'pink', '## Execution States\n\nThese states show in **readonly mode** when edges represent execution flow.\n\n**States:**\n- **InProgress**: Animated dot moving along edge\n- **Completed**: Green edge\n- **Failed**: Red edge\n- **Paused**: Orange edge\n- **Cancelled**: Red edge\n\nEdge colors are determined by target node execution status.', {
-                x: 100,
-                y: 80
-            }, {
-                width: 400,
-                height: 320
-            })
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-InProgress-1',
-                source: 'exec-start',
-                target: 'exec-InProgress',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-InProgress-2',
-                source: 'exec-InProgress',
-                target: 'exec-target-1',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Completed-1',
-                source: 'exec-source-2',
-                target: 'exec-Completed',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Completed-2',
-                source: 'exec-Completed',
-                target: 'exec-target-2',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Failed-1',
-                source: 'exec-source-3',
-                target: 'exec-Failed',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Failed-2',
-                source: 'exec-Failed',
-                target: 'exec-target-3',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Paused-1',
-                source: 'exec-source-4',
-                target: 'exec-Paused',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Paused-2',
-                source: 'exec-Paused',
-                target: 'exec-target-4',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Cancelled-1',
-                source: 'exec-source-5',
-                target: 'exec-Cancelled',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Cancelled-2',
-                source: 'exec-Cancelled',
-                target: 'exec-target-5',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "readonly",
-        children: /*#__PURE__*/ jsx(Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                translations: DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function DesignModeStory() {
-    const initialNodes = useMemo(()=>[
-            createStickyNote('sticky-validation', 'blue', '**Validation States**\nDesign mode edge validation', {
-                x: 550,
-                y: 80
-            }, {
-                width: 420,
-                height: 675
-            }),
-            createNode({
-                id: 'val-source-1-INFO',
-                label: 'Source',
-                x: 590,
-                y: 160,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-1-INFO',
-                label: 'Info',
-                x: 810,
-                y: 160,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-2-WARNING',
-                label: 'Source',
-                x: 590,
-                y: 310,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-2-WARNING',
-                label: 'Warning',
-                x: 810,
-                y: 310,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-3-ERROR',
-                label: 'Source',
-                x: 590,
-                y: 460,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-3-ERROR',
-                label: 'Error',
-                x: 810,
-                y: 460,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-4-CRITICAL',
-                label: 'Source',
-                x: 590,
-                y: 610,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-4-CRITICAL',
-                label: 'Critical',
-                x: 810,
-                y: 610,
-                targetPositions: [
-                    Position.Left
-                ]
-            }),
-            createStickyNote('sticky-info', 'pink', '## Validation States\n\nThese states show in **design mode** when edges have validation errors.\n\n**Severities:**\n- **INFO**: Blue edge\n- **WARNING**: Orange edge\n- **ERROR**: Red edge\n- **CRITICAL**: Red edge\n\nEdge colors indicate validation issues.', {
-                x: 100,
-                y: 80
-            }, {
-                width: 400,
-                height: 300
-            })
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-validation-INFO',
-                source: 'val-source-1-INFO',
-                target: 'val-target-1-INFO',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-WARNING',
-                source: 'val-source-2-WARNING',
-                target: 'val-target-2-WARNING',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-ERROR',
-                source: 'val-source-3-ERROR',
-                target: 'val-target-3-ERROR',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-CRITICAL',
-                source: 'val-source-4-CRITICAL',
-                target: 'val-target-4-CRITICAL',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: `in-${Position.Left}`,
-                type: 'sequence'
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ jsx(Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                translations: DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function LoopEdgesStory() {
-    const initialNodes = useMemo(()=>[
-            createStickyNote('sticky-chain', 'pink', '**Loop Chain**\nMultiple loop nodes in sequence with both output and success handles', {
-                x: 160,
-                y: 400
-            }, {
-                width: 640,
-                height: 320
-            }),
-            createNode({
-                id: 'chain-start',
-                label: 'Start',
-                x: 176,
-                y: 480,
-                sourcePositions: [
-                    Position.Right
-                ]
-            }),
-            createLoopNode({
-                id: 'chain-loop-1',
-                label: 'Loop 1',
-                x: 336,
-                y: 480
-            }),
-            createLoopNode({
-                id: 'chain-loop-2',
-                label: 'Loop 2',
-                x: 544,
-                y: 512
-            }),
-            createStickyNote('sticky-info', 'white', "## Loop Edges\n\nSequenceEdge automatically detects and renders loop edges with custom paths.\n\n**Detection:**\n- **Self-loops**: source === target\n- **LoopBack edges**: targetHandle === 'loopBack'\n\n**Visual Features:**\n- Path goes below the node with rounded corners\n- Grid-snapped to 16px for consistency\n- Success handle loops have larger height (96px vs 64px)\n- Edge toolbar works on loop paths", {
-                x: 160,
-                y: 48
-            }, {
-                width: 512,
-                height: 336
-            })
-        ], []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-chain-start',
-                source: 'chain-start',
-                target: 'chain-loop-1',
-                sourceHandle: `out-${Position.Right}`,
-                targetHandle: 'input',
-                type: 'sequence'
-            },
-            {
-                id: 'e-chain-loop1-success',
-                source: 'chain-loop-1',
-                target: 'chain-loop-2',
-                sourceHandle: 'body',
-                targetHandle: 'input',
-                type: 'sequence'
-            },
-            {
-                id: 'e-chain-loop2-loopBack',
-                source: 'chain-loop-2',
-                target: 'chain-loop-2',
-                sourceHandle: 'body',
-                targetHandle: 'loopBack',
-                type: 'sequence'
-            },
-            {
-                id: 'e-chain-loop2-success',
-                source: 'chain-loop-2',
-                target: 'chain-loop-1',
-                sourceHandle: 'success',
-                targetHandle: 'loopBack',
-                type: 'sequence'
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ jsx(Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                translations: DefaultCanvasTranslations
-            })
-        })
-    });
-}
-const Default = {
-    render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
-};
-const EdgeLabels = {
-    render: ()=>/*#__PURE__*/ jsx(EdgeLabelsStory, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demonstrates edge labels rendered at the midpoint via data.label. Labels work alongside all edge states including diff styling.'
-            }
-        }
-    }
-};
-const ExecutionStates = {
-    render: ()=>/*#__PURE__*/ jsx(ReadonlyStory, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demonstrates execution states visible in readonly mode. Edges show different colors based on target node execution status, with InProgress showing an animated dot.'
-            }
-        }
-    }
-};
-const ValidationStates = {
-    render: ()=>/*#__PURE__*/ jsx(DesignModeStory, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demonstrates validation states visible in design mode. Edges show different colors based on validation severity.'
-            }
-        }
-    }
-};
-const LoopEdges = {
-    render: ()=>/*#__PURE__*/ jsx(LoopEdgesStory, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Demonstrates loop edges with custom paths. SequenceEdge automatically detects self-loops and loopBack edges, rendering them with paths that go below the node. Success handle loops have larger dimensions than output handle loops.'
-            }
-        }
-    }
-};
-export { Default, EdgeLabels, ExecutionStates, LoopEdges, ValidationStates, SequenceEdge_stories as default };