@uipath/apollo-react 4.0.0 → 4.1.1

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

@@ -1,1073 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    ExecutionStates: ()=>ExecutionStates,
-    ValidationStates: ()=>ValidationStates,
-    Default: ()=>Default,
-    default: ()=>SequenceEdge_stories,
-    EdgeLabels: ()=>EdgeLabels,
-    LoopEdges: ()=>LoopEdges
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../../storybook-utils/index.cjs");
-const external_types_cjs_namespaceObject = require("../../types.cjs");
-const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/index.cjs");
-const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
-const external_StickyNoteNode_index_cjs_namespaceObject = require("../StickyNoteNode/index.cjs");
-const external_SequenceEdge_cjs_namespaceObject = require("./SequenceEdge.cjs");
-const meta = {
-    title: 'Canvas/Edges/SequenceEdge',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        (0, index_cjs_namespaceObject.withCanvasProviders)()
-    ]
-};
-const SequenceEdge_stories = meta;
-const edgeTypes = {
-    default: external_SequenceEdge_cjs_namespaceObject.SequenceEdge
-};
-const nodeTypes = {
-    stickyNote: external_StickyNoteNode_index_cjs_namespaceObject.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 = (0, external_react_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Top,
-                    react_cjs_namespaceObject.Position.Bottom,
-                    react_cjs_namespaceObject.Position.Left,
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'top',
-                label: 'Top',
-                x: 300,
-                y: 130,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Bottom
-                ]
-            }),
-            createNode({
-                id: 'bottom',
-                label: 'Bottom',
-                x: 300,
-                y: 470,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Top
-                ]
-            }),
-            createNode({
-                id: 'left',
-                label: 'Left',
-                x: 130,
-                y: 300,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'right',
-                label: 'Right',
-                x: 470,
-                y: 300,
-                sourcePositions: [
-                    react_cjs_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'preview-target',
-                label: 'Target',
-                x: 1020,
-                y: 150,
-                targetPositions: [
-                    react_cjs_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'added-target',
-                label: 'Target',
-                x: 1020,
-                y: 410,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'removed-source',
-                label: 'Removed',
-                x: 800,
-                y: 530,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'removed-target',
-                label: 'Target',
-                x: 1020,
-                y: 530,
-                targetPositions: [
-                    react_cjs_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'e-top-to-center',
-                source: 'top',
-                target: 'center',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Bottom}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Top}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-bottom-to-center',
-                source: 'bottom',
-                target: 'center',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Top}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Bottom}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-left-to-center',
-                source: 'left',
-                target: 'center',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-right-to-center',
-                source: 'right',
-                target: 'center',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Left}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Right}`,
-                type: 'sequence'
-            },
-            {
-                id: 'preview-edge-id',
-                source: 'preview-source',
-                target: 'preview-target',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-added',
-                source: 'added-source',
-                target: 'added-target',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffAdded: true
-                },
-                style: {
-                    stroke: 'var(--palette-positive-base)'
-                }
-            },
-            {
-                id: 'e-removed',
-                source: 'removed-source',
-                target: 'removed-target',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffRemoved: true
-                },
-                style: {
-                    stroke: 'var(--palette-negative-base)',
-                    strokeDasharray: '5,5'
-                }
-            }
-        ], []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function EdgeLabelsStory() {
-    const initialNodes = (0, external_react_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-target-1',
-                label: 'Target',
-                x: 470,
-                y: 160,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'label-source-2',
-                label: 'Start',
-                x: 300,
-                y: 300,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Bottom
-                ]
-            }),
-            createNode({
-                id: 'label-target-2',
-                label: 'End',
-                x: 300,
-                y: 480,
-                targetPositions: [
-                    react_cjs_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-added-target',
-                label: 'Target',
-                x: 1020,
-                y: 160,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'label-removed-source',
-                label: 'Removed',
-                x: 800,
-                y: 300,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'label-removed-target',
-                label: 'Target',
-                x: 1020,
-                y: 300,
-                targetPositions: [
-                    react_cjs_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'e-label-horizontal',
-                source: 'label-source-1',
-                target: 'label-target-1',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence',
-                data: {
-                    label: 'Success'
-                }
-            },
-            {
-                id: 'e-label-vertical',
-                source: 'label-source-2',
-                target: 'label-target-2',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Bottom}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Top}`,
-                type: 'sequence',
-                data: {
-                    label: 'Next Step'
-                }
-            },
-            {
-                id: 'e-label-added',
-                source: 'label-added-source',
-                target: 'label-added-target',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.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-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence',
-                data: {
-                    isDiffRemoved: true,
-                    label: 'Deprecated'
-                },
-                style: {
-                    stroke: 'var(--palette-negative-base)',
-                    strokeDasharray: '5,5'
-                }
-            }
-        ], []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function ReadonlyStory() {
-    const initialNodes = (0, external_react_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-InProgress',
-                label: 'In Progress',
-                x: 770,
-                y: 160,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ],
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-1',
-                label: 'Target',
-                x: 970,
-                y: 160,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-2',
-                label: 'Source',
-                x: 580,
-                y: 310,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Completed',
-                label: 'Completed',
-                x: 770,
-                y: 310,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ],
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-2',
-                label: 'Target',
-                x: 970,
-                y: 310,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-3',
-                label: 'Source',
-                x: 580,
-                y: 460,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Failed',
-                label: 'Failed',
-                x: 770,
-                y: 460,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ],
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-3',
-                label: 'Target',
-                x: 970,
-                y: 460,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-4',
-                label: 'Source',
-                x: 580,
-                y: 610,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Paused',
-                label: 'Paused',
-                x: 770,
-                y: 610,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ],
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-4',
-                label: 'Target',
-                x: 970,
-                y: 610,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'exec-source-5',
-                label: 'Source',
-                x: 580,
-                y: 760,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-Cancelled',
-                label: 'Cancelled',
-                x: 770,
-                y: 760,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ],
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'exec-target-5',
-                label: 'Target',
-                x: 970,
-                y: 760,
-                targetPositions: [
-                    react_cjs_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'e-InProgress-1',
-                source: 'exec-start',
-                target: 'exec-InProgress',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-InProgress-2',
-                source: 'exec-InProgress',
-                target: 'exec-target-1',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Completed-1',
-                source: 'exec-source-2',
-                target: 'exec-Completed',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Completed-2',
-                source: 'exec-Completed',
-                target: 'exec-target-2',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Failed-1',
-                source: 'exec-source-3',
-                target: 'exec-Failed',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Failed-2',
-                source: 'exec-Failed',
-                target: 'exec-target-3',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Paused-1',
-                source: 'exec-source-4',
-                target: 'exec-Paused',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Paused-2',
-                source: 'exec-Paused',
-                target: 'exec-target-4',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Cancelled-1',
-                source: 'exec-source-5',
-                target: 'exec-Cancelled',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-Cancelled-2',
-                source: 'exec-Cancelled',
-                target: 'exec-target-5',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            }
-        ], []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "readonly",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function DesignModeStory() {
-    const initialNodes = (0, external_react_namespaceObject.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: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-1-INFO',
-                label: 'Info',
-                x: 810,
-                y: 160,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-2-WARNING',
-                label: 'Source',
-                x: 590,
-                y: 310,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-2-WARNING',
-                label: 'Warning',
-                x: 810,
-                y: 310,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-3-ERROR',
-                label: 'Source',
-                x: 590,
-                y: 460,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-3-ERROR',
-                label: 'Error',
-                x: 810,
-                y: 460,
-                targetPositions: [
-                    react_cjs_namespaceObject.Position.Left
-                ]
-            }),
-            createNode({
-                id: 'val-source-4-CRITICAL',
-                label: 'Source',
-                x: 590,
-                y: 610,
-                sourcePositions: [
-                    react_cjs_namespaceObject.Position.Right
-                ]
-            }),
-            createNode({
-                id: 'val-target-4-CRITICAL',
-                label: 'Critical',
-                x: 810,
-                y: 610,
-                targetPositions: [
-                    react_cjs_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'e-validation-INFO',
-                source: 'val-source-1-INFO',
-                target: 'val-target-1-INFO',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-WARNING',
-                source: 'val-source-2-WARNING',
-                target: 'val-target-2-WARNING',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-ERROR',
-                source: 'val-source-3-ERROR',
-                target: 'val-target-3-ERROR',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            },
-            {
-                id: 'e-validation-CRITICAL',
-                source: 'val-source-4-CRITICAL',
-                target: 'val-target-4-CRITICAL',
-                sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
-                targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
-                type: 'sequence'
-            }
-        ], []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-            })
-        })
-    });
-}
-function LoopEdgesStory() {
-    const initialNodes = (0, external_react_namespaceObject.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: [
-                    react_cjs_namespaceObject.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 = (0, external_react_namespaceObject.useMemo)(()=>[
-            {
-                id: 'e-chain-start',
-                source: 'chain-start',
-                target: 'chain-loop-1',
-                sourceHandle: `out-${react_cjs_namespaceObject.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 } = (0, index_cjs_namespaceObject.useCanvasStory)({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: nodeTypes
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-        ...canvasProps,
-        edgeTypes: edgeTypes,
-        mode: "design",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-            position: "bottom-right",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-            })
-        })
-    });
-}
-const Default = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
-};
-const EdgeLabels = {
-    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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.'
-            }
-        }
-    }
-};
-exports.Default = __webpack_exports__.Default;
-exports.EdgeLabels = __webpack_exports__.EdgeLabels;
-exports.ExecutionStates = __webpack_exports__.ExecutionStates;
-exports.LoopEdges = __webpack_exports__.LoopEdges;
-exports.ValidationStates = __webpack_exports__.ValidationStates;
-exports["default"] = __webpack_exports__["default"];
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "Default",
-    "EdgeLabels",
-    "ExecutionStates",
-    "LoopEdges",
-    "ValidationStates",
-    "default"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});