@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

package/dist/canvas/components/StageNode/CrossStageTaskDrag.stories.js

@@ -0,0 +1,544 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConnectionMode, Panel, ReactFlowProvider, useEdgesState, useNodesState } from "../../xyflow/react.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CrossStageDragProvider } from "../../hooks/CrossStageDragContext.js";
+import { useCrossStageTaskDrag } from "../../hooks/useCrossStageTaskDrag.js";
+import { useTaskCopyPaste } from "../../hooks/useTaskCopyPaste.js";
+import { DefaultCanvasTranslations } from "../../types.js";
+import { BaseCanvas } from "../BaseCanvas/index.js";
+import { CanvasPositionControls } from "../CanvasPositionControls.js";
+import { TaskIcon, TaskItemTypeValues } from "../TaskIcon/index.js";
+import { PlaceholderTaskNode, TaskNode } from "../TaskNode/index.js";
+import { insertTaskAtPosition, moveTaskBetweenStages, moveTaskWithinStage } from "../TaskNode/taskReorderUtils.js";
+import { calculateTaskPositions } from "../TaskNode/useTaskPositions.js";
+import { StageConnectionEdge } from "./StageConnectionEdge.js";
+import { StageEdge } from "./StageEdge.js";
+import { StageNode } from "./StageNode.js";
+const meta = {
+    title: 'Canvas/StageNode',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const CrossStageTaskDrag_stories = meta;
+const StageNodeWrapper = (props)=>/*#__PURE__*/ jsx(StageNode, {
+        ...props,
+        ...props.data
+    });
+const TaskNodeWrapper = (props)=>/*#__PURE__*/ jsx(TaskNode, {
+        ...props,
+        ...props.data
+    });
+const initialStageData = {
+    'stage-1': {
+        taskIds: [
+            [
+                'task-1'
+            ],
+            [
+                'task-2',
+                'task-6'
+            ],
+            [
+                'task-3',
+                'task-4'
+            ],
+            [
+                'task-5'
+            ]
+        ],
+        tasks: {
+            'task-1': {
+                label: 'KYC Verification',
+                taskType: 'uipath.case-management.run-human-action'
+            },
+            'task-2': {
+                label: 'Document Review',
+                taskType: 'uipath.case-management.process'
+            },
+            'task-6': {
+                label: 'Credit Check',
+                taskType: 'uipath.case-management.rpa'
+            },
+            'task-3': {
+                label: 'Address Check',
+                taskType: 'uipath.case-management.rpa'
+            },
+            'task-4': {
+                label: 'Property Check',
+                taskType: 'uipath.case-management.rpa'
+            },
+            'task-5': {
+                label: 'Final Approval',
+                taskType: 'uipath.case-management.agent'
+            }
+        }
+    },
+    'stage-2': {
+        taskIds: [
+            [
+                'task-7'
+            ],
+            [
+                'task-8'
+            ]
+        ],
+        tasks: {
+            'task-7': {
+                label: 'Report Generation',
+                taskType: 'uipath.case-management.api-workflow'
+            },
+            'task-8': {
+                label: 'Send Notification',
+                taskType: 'uipath.case-management.action'
+            }
+        }
+    },
+    'stage-3': {
+        taskIds: [],
+        tasks: {}
+    }
+};
+function getTaskIcon(taskType) {
+    if (taskType.includes('human-action')) return /*#__PURE__*/ jsx(TaskIcon, {
+        type: TaskItemTypeValues.User,
+        size: "sm"
+    });
+    if (taskType.includes('rpa')) return /*#__PURE__*/ jsx(TaskIcon, {
+        type: TaskItemTypeValues.Automation,
+        size: "sm"
+    });
+    if (taskType.includes('agent')) return /*#__PURE__*/ jsx(TaskIcon, {
+        type: TaskItemTypeValues.Agent,
+        size: "sm"
+    });
+    if (taskType.includes('api-workflow')) return /*#__PURE__*/ jsx(TaskIcon, {
+        type: TaskItemTypeValues.ApiAutomation,
+        size: "sm"
+    });
+    return /*#__PURE__*/ jsx(TaskIcon, {
+        type: TaskItemTypeValues.AgenticProcess,
+        size: "sm"
+    });
+}
+function createTaskNodes(stageId, stageData, stageWidth) {
+    const positions = calculateTaskPositions(stageData.taskIds, stageWidth);
+    const nodes = [];
+    stageData.taskIds.forEach((group, groupIndex)=>{
+        group.forEach((taskId, taskIndex)=>{
+            const taskInfo = stageData.tasks[taskId];
+            if (!taskInfo) return;
+            const position = positions.get(taskId);
+            if (!position) return;
+            nodes.push({
+                id: taskId,
+                type: 'task',
+                parentId: stageId,
+                position: {
+                    x: position.x,
+                    y: position.y
+                },
+                width: position.width,
+                data: {
+                    taskType: taskInfo.taskType,
+                    label: taskInfo.label,
+                    iconElement: getTaskIcon(taskInfo.taskType),
+                    groupIndex,
+                    taskIndex,
+                    width: position.width
+                }
+            });
+        });
+    });
+    return nodes;
+}
+const CrossStageTaskDragDemo = ()=>{
+    const [stageData, setStageData] = useState(initialStageData);
+    const [dragInfo, setDragInfo] = useState('');
+    const [selectedTaskId, setSelectedTaskId] = useState(null);
+    const [selectedStageId, setSelectedStageId] = useState(null);
+    const stageNodes = useMemo(()=>[
+            {
+                id: 'stage-1',
+                type: 'stageV2',
+                position: {
+                    x: 48,
+                    y: 96
+                },
+                style: {
+                    width: 304
+                },
+                data: {
+                    nodeType: 'case-management:Stage',
+                    stageDetails: {
+                        label: 'Processing',
+                        taskIds: stageData['stage-1']?.taskIds ?? []
+                    },
+                    onTaskClick: (taskId)=>{
+                        setSelectedTaskId(taskId);
+                        setSelectedStageId('stage-1');
+                    }
+                }
+            },
+            {
+                id: 'stage-2',
+                type: 'stageV2',
+                position: {
+                    x: 400,
+                    y: 96
+                },
+                style: {
+                    width: 304
+                },
+                data: {
+                    nodeType: 'case-management:Stage',
+                    stageDetails: {
+                        label: 'Review',
+                        taskIds: stageData['stage-2']?.taskIds ?? []
+                    },
+                    onTaskClick: (taskId)=>{
+                        setSelectedTaskId(taskId);
+                        setSelectedStageId('stage-2');
+                    }
+                }
+            },
+            {
+                id: 'stage-3',
+                type: 'stageV2',
+                position: {
+                    x: 752,
+                    y: 96
+                },
+                style: {
+                    width: 304
+                },
+                data: {
+                    nodeType: 'case-management:Stage',
+                    stageDetails: {
+                        label: 'Closing (Drop Here)',
+                        taskIds: stageData['stage-3']?.taskIds ?? [],
+                        defaultContent: 'Drag a task here'
+                    },
+                    onTaskClick: (taskId)=>{
+                        setSelectedTaskId(taskId);
+                        setSelectedStageId('stage-3');
+                    },
+                    onStageClick: ()=>setSelectedStageId('stage-3')
+                }
+            }
+        ], [
+        stageData
+    ]);
+    const taskNodes = useMemo(()=>{
+        const nodes = [];
+        for (const stageId of Object.keys(stageData)){
+            const data = stageData[stageId];
+            if (data) nodes.push(...createTaskNodes(stageId, data, 304));
+        }
+        return nodes;
+    }, [
+        stageData
+    ]);
+    const allNodes = useMemo(()=>[
+            ...stageNodes,
+            ...taskNodes
+        ], [
+        stageNodes,
+        taskNodes
+    ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(allNodes);
+    const [edges, _setEdges, onEdgesChange] = useEdgesState([
+        {
+            id: 'e1',
+            type: 'stage',
+            source: 'stage-1',
+            sourceHandle: 'stage-1____source____right',
+            target: 'stage-2',
+            targetHandle: 'stage-2____target____left'
+        },
+        {
+            id: 'e2',
+            type: 'stage',
+            source: 'stage-2',
+            sourceHandle: 'stage-2____source____right',
+            target: 'stage-3',
+            targetHandle: 'stage-3____target____left'
+        }
+    ]);
+    useEffect(()=>{
+        setNodes(allNodes);
+    }, [
+        allNodes,
+        setNodes
+    ]);
+    const handleTaskMove = useCallback((params)=>{
+        const { taskId, sourceStageId, targetStageId, position } = params;
+        setDragInfo(`Moved ${taskId} from ${sourceStageId} to ${targetStageId} at group ${position.groupIndex}${position.isParallel ? ' (parallel)' : ''}`);
+        setStageData((prev)=>{
+            const sourceStage = prev[sourceStageId];
+            const targetStage = prev[targetStageId];
+            if (!sourceStage?.tasks || !sourceStage?.taskIds || !targetStage) return prev;
+            const taskInfo = sourceStage.tasks[taskId];
+            if (!taskInfo) return prev;
+            const { sourceTaskIds: newSourceTaskIds, targetTaskIds: newTargetTaskIds } = moveTaskBetweenStages(sourceStage.taskIds, targetStage.taskIds || [], taskId, position);
+            const newSourceTasks = {
+                ...sourceStage.tasks
+            };
+            delete newSourceTasks[taskId];
+            return {
+                ...prev,
+                [sourceStageId]: {
+                    ...sourceStage,
+                    taskIds: newSourceTaskIds,
+                    tasks: newSourceTasks
+                },
+                [targetStageId]: {
+                    ...targetStage,
+                    taskIds: newTargetTaskIds,
+                    tasks: {
+                        ...targetStage.tasks || {},
+                        [taskId]: taskInfo
+                    }
+                }
+            };
+        });
+    }, []);
+    const handleTaskCopy = useCallback((params)=>{
+        const { taskId, newTaskId, sourceStageId, targetStageId, position } = params;
+        setDragInfo(`Copied ${taskId} to ${newTaskId} in ${targetStageId} at group ${position.groupIndex}${position.isParallel ? ' (parallel)' : ''}`);
+        setStageData((prev)=>{
+            const sourceStage = prev[sourceStageId];
+            const targetStage = prev[targetStageId];
+            if (!sourceStage?.tasks || !targetStage) return prev;
+            const taskInfo = sourceStage.tasks[taskId];
+            if (!taskInfo) return prev;
+            const newTargetTaskIds = insertTaskAtPosition(targetStage.taskIds || [], newTaskId, position);
+            return {
+                ...prev,
+                [targetStageId]: {
+                    ...targetStage,
+                    taskIds: newTargetTaskIds,
+                    tasks: {
+                        ...targetStage.tasks || {},
+                        [newTaskId]: {
+                            ...taskInfo,
+                            label: `${taskInfo.label} (Copy)`
+                        }
+                    }
+                }
+            };
+        });
+    }, []);
+    const handleTaskReorder = useCallback((params)=>{
+        const { taskId, stageId, position } = params;
+        setDragInfo(`Reordered ${taskId} in ${stageId} to group ${position.groupIndex}${position.isParallel ? ' (parallel)' : ''}`);
+        setStageData((prev)=>{
+            const stage = prev[stageId];
+            if (!stage) return prev;
+            const newTaskIds = moveTaskWithinStage(stage.taskIds, taskId, position);
+            return {
+                ...prev,
+                [stageId]: {
+                    ...stage,
+                    taskIds: newTaskIds
+                }
+            };
+        });
+    }, []);
+    const handleTaskPaste = useCallback((params)=>{
+        const { newTaskId, originalData, targetStageId, position } = params;
+        setDragInfo(`Pasted task ${newTaskId} to ${targetStageId} at group ${position.groupIndex}`);
+        setStageData((prev)=>{
+            const newData = {
+                ...prev
+            };
+            const targetStage = newData[targetStageId];
+            if (!targetStage) return prev;
+            const newTargetTaskIds = [
+                ...targetStage.taskIds || []
+            ];
+            if (position.groupIndex >= newTargetTaskIds.length) newTargetTaskIds.push([
+                newTaskId
+            ]);
+            else newTargetTaskIds.splice(position.groupIndex, 0, [
+                newTaskId
+            ]);
+            newData[targetStageId] = {
+                ...targetStage,
+                taskIds: newTargetTaskIds,
+                tasks: {
+                    ...targetStage.tasks || {},
+                    [newTaskId]: {
+                        label: `${originalData.label} (Pasted)`,
+                        taskType: originalData.taskType
+                    }
+                }
+            };
+            return newData;
+        });
+    }, []);
+    const targetTaskIds = useMemo(()=>{
+        if (!selectedStageId) return [];
+        return stageData[selectedStageId]?.taskIds || [];
+    }, [
+        selectedStageId,
+        stageData
+    ]);
+    const nodeTypes = useMemo(()=>({
+            stageV2: StageNodeWrapper,
+            task: TaskNodeWrapper,
+            placeholder: (props)=>/*#__PURE__*/ jsx(PlaceholderTaskNode, {
+                    ...props
+                })
+        }), []);
+    const edgeTypes = useMemo(()=>({
+            stage: StageEdge
+        }), []);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ jsxs(ReactFlowProvider, {
+            children: [
+                /*#__PURE__*/ jsx(CrossStageTaskDragCanvas, {
+                    nodes: nodes,
+                    edges: edges,
+                    onNodesChange: onNodesChange,
+                    onEdgesChange: onEdgesChange,
+                    nodeTypes: nodeTypes,
+                    edgeTypes: edgeTypes,
+                    onTaskMove: handleTaskMove,
+                    onTaskCopy: handleTaskCopy,
+                    onTaskPaste: handleTaskPaste,
+                    onTaskReorder: handleTaskReorder,
+                    selectedTaskId: selectedTaskId,
+                    selectedStageId: selectedStageId,
+                    targetTaskIds: targetTaskIds
+                }),
+                dragInfo && /*#__PURE__*/ jsx(Panel, {
+                    position: "top-left",
+                    children: /*#__PURE__*/ jsx("div", {
+                        style: {
+                            background: 'var(--uix-palette-surface-paper)',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                        },
+                        children: dragInfo
+                    })
+                }),
+                /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-left",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            background: 'var(--uix-palette-surface-paper)',
+                            padding: '8px 16px',
+                            borderRadius: '4px',
+                            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                            maxWidth: '300px'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("strong", {
+                                children: "Instructions:"
+                            }),
+                            /*#__PURE__*/ jsxs("ul", {
+                                style: {
+                                    margin: '8px 0',
+                                    paddingLeft: '16px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Click a task to select it"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Drag tasks between stages"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Hold Alt/Cmd while dragging to copy"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Ctrl/Cmd+C to copy selected task"
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: "Ctrl/Cmd+V to paste (click stage first)"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const CrossStageTaskDragCanvas = ({ nodes, edges, onNodesChange, onEdgesChange, nodeTypes, edgeTypes, onTaskMove, onTaskCopy, onTaskPaste, onTaskReorder, selectedTaskId, selectedStageId, targetTaskIds })=>{
+    const { dragState, handlers } = useCrossStageTaskDrag({
+        onTaskMove,
+        onTaskCopy,
+        onTaskReorder
+    });
+    useTaskCopyPaste({
+        onTaskPaste
+    }, {
+        selectedTaskId,
+        targetStageId: selectedStageId,
+        targetTaskIds,
+        enabled: true
+    });
+    return /*#__PURE__*/ jsx(CrossStageDragProvider, {
+        value: {
+            dragState
+        },
+        children: /*#__PURE__*/ jsxs(BaseCanvas, {
+            nodes: nodes,
+            edges: edges,
+            onNodesChange: onNodesChange,
+            onEdgesChange: onEdgesChange,
+            nodeTypes: nodeTypes,
+            edgeTypes: edgeTypes,
+            mode: "design",
+            connectionMode: ConnectionMode.Strict,
+            defaultEdgeOptions: {
+                type: 'stage'
+            },
+            connectionLineComponent: StageConnectionEdge,
+            elevateEdgesOnSelect: true,
+            onNodeDragStart: handlers.onNodeDragStart,
+            onNodeDrag: handlers.onNodeDrag,
+            onNodeDragStop: handlers.onNodeDragStop,
+            children: [
+                /*#__PURE__*/ jsx(Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ jsx(CanvasPositionControls, {
+                        translations: DefaultCanvasTranslations
+                    })
+                }),
+                dragState.isDragging && /*#__PURE__*/ jsx(Panel, {
+                    position: "top-right",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            background: dragState.isCopyMode ? 'var(--uix-palette-info-light)' : 'var(--uix-palette-warning-light)',
+                            padding: '8px 16px',
+                            borderRadius: '4px'
+                        },
+                        children: [
+                            dragState.isCopyMode ? 'Copy Mode (Alt/Cmd)' : 'Move Mode',
+                            dragState.targetStageId !== dragState.sourceStageId && /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    "Target: ",
+                                    dragState.targetStageId
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const DragAndDrop = {
+    name: 'Drag and Drop',
+    render: ()=>/*#__PURE__*/ jsx(CrossStageTaskDragDemo, {})
+};
+export { DragAndDrop, CrossStageTaskDrag_stories as default };

package/dist/canvas/components/StageNode/DropPlaceholder.cjs

@@ -0,0 +1,106 @@
+"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 ('undefined' != 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__, {
+    DropPlaceholder: ()=>DropPlaceholder
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_core_namespaceObject = require("@uipath/apollo-core");
+const useTaskPositions_cjs_namespaceObject = require("../TaskNode/useTaskPositions.cjs");
+function calculatePlaceholderY(groupIndex, taskIndex, taskIds) {
+    const config = useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG;
+    let y = config.headerHeight + config.contentPaddingTop;
+    for(let gi = 0; gi < taskIds.length; gi++){
+        const group = taskIds[gi];
+        if (group) {
+            if (gi === groupIndex) {
+                for(let ti = 0; ti < taskIndex && ti < group.length; ti++){
+                    y += config.taskHeight;
+                    if (ti < group.length - 1) y += config.taskGap;
+                }
+                return y;
+            }
+            y += group.length * config.taskHeight;
+            y += (group.length - 1) * config.taskGap;
+            y += config.taskGap;
+        }
+    }
+    return y;
+}
+const DropPlaceholder = ({ groupIndex, taskIndex, taskIds, isParallel, draggedTaskId })=>{
+    let adjustedTaskIds = taskIds;
+    let adjustedGroupIndex = groupIndex;
+    if (draggedTaskId) {
+        const tempTaskIds = taskIds.map((group)=>[
+                ...group
+            ]);
+        for(let gi = 0; gi < tempTaskIds.length; gi++){
+            const group = tempTaskIds[gi];
+            if (!group) continue;
+            const index = group.indexOf(draggedTaskId);
+            if (-1 !== index) {
+                group.splice(index, 1);
+                if (gi < groupIndex) adjustedGroupIndex--;
+                break;
+            }
+        }
+        adjustedTaskIds = tempTaskIds.filter((g)=>g && g.length > 0);
+    }
+    const y = calculatePlaceholderY(adjustedGroupIndex, taskIndex, adjustedTaskIds);
+    const x = isParallel ? useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.contentPaddingX + useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.parallelIndent : useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.contentPaddingX;
+    const width = isParallel ? "var(--stage-task-width-parallel, 216px)" : "var(--stage-task-width, 246px)";
+    console.log('[DropPlaceholder] Rendering at', {
+        x,
+        y,
+        groupIndex: adjustedGroupIndex,
+        taskIndex,
+        isParallel,
+        draggedTaskId
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: {
+            position: 'absolute',
+            top: y,
+            left: x,
+            width,
+            height: 36,
+            border: '2px dashed rgba(100, 150, 255, 0.8)',
+            borderRadius: apollo_core_namespaceObject.Spacing.SpacingXs,
+            backgroundColor: 'rgba(100, 150, 255, 0.1)',
+            opacity: 1,
+            pointerEvents: 'none',
+            zIndex: 100,
+            boxSizing: 'border-box'
+        },
+        "data-testid": "drop-placeholder"
+    });
+};
+exports.DropPlaceholder = __webpack_exports__.DropPlaceholder;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DropPlaceholder"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/StageNode/DropPlaceholder.d.ts

@@ -0,0 +1,10 @@
+interface DropPlaceholderProps {
+    groupIndex: number;
+    taskIndex: number;
+    taskIds: string[][];
+    isParallel: boolean;
+    draggedTaskId?: string | null;
+}
+export declare const DropPlaceholder: ({ groupIndex, taskIndex, taskIds, isParallel, draggedTaskId, }: DropPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DropPlaceholder.d.ts.map

package/dist/canvas/components/StageNode/DropPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropPlaceholder.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DropPlaceholder.tsx"],"names":[],"mappings":"AAOA,UAAU,oBAAoB;IAE5B,UAAU,EAAE,MAAM,CAAC;IAEnB,SAAS,EAAE,MAAM,CAAC;IAElB,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;IAEpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAmCD,eAAO,MAAM,eAAe,GAAI,gEAM7B,oBAAoB,4CAgEtB,CAAC"}