@uipath/apollo-react 4.13.0 → 4.13.1-pr581.30f7035

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs +26 -7
  2. package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map +1 -1
  3. package/dist/canvas/components/AddNodePanel/AddNodeManager.js +26 -7
  4. package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts +1 -1
  5. package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts.map +1 -1
  6. package/dist/canvas/components/AddNodePanel/index.cjs +2 -6
  7. package/dist/canvas/components/AddNodePanel/index.d.ts +0 -1
  8. package/dist/canvas/components/AddNodePanel/index.d.ts.map +1 -1
  9. package/dist/canvas/components/AddNodePanel/index.js +1 -2
  10. package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +1 -0
  11. package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map +1 -1
  12. package/dist/canvas/components/BaseNode/BaseNode.cjs +25 -10
  13. package/dist/canvas/components/BaseNode/BaseNode.d.ts +2 -1
  14. package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
  15. package/dist/canvas/components/BaseNode/BaseNode.js +22 -10
  16. package/dist/canvas/components/BaseNode/BaseNode.types.d.ts +2 -0
  17. package/dist/canvas/components/BaseNode/BaseNode.types.d.ts.map +1 -1
  18. package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +115 -34
  19. package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +4 -2
  20. package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
  21. package/dist/canvas/components/ButtonHandle/ButtonHandle.js +117 -36
  22. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +65 -5
  23. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts +4 -0
  24. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
  25. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +53 -5
  26. package/dist/canvas/components/ButtonHandle/HandleButton.cjs +9 -3
  27. package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map +1 -1
  28. package/dist/canvas/components/ButtonHandle/HandleButton.js +9 -3
  29. package/dist/canvas/components/ButtonHandle/HandleLabel.cjs +11 -4
  30. package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts +4 -1
  31. package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts.map +1 -1
  32. package/dist/canvas/components/ButtonHandle/HandleLabel.js +7 -3
  33. package/dist/canvas/components/ButtonHandle/SmartHandle.cjs +2 -2
  34. package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map +1 -1
  35. package/dist/canvas/components/ButtonHandle/SmartHandle.js +2 -2
  36. package/dist/canvas/components/Edges/SequenceEdge.cjs +3 -2
  37. package/dist/canvas/components/Edges/SequenceEdge.d.ts +11 -2
  38. package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
  39. package/dist/canvas/components/Edges/SequenceEdge.js +4 -3
  40. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +23 -15
  41. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts +2 -0
  42. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
  43. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +24 -16
  44. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs +11 -8
  45. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map +1 -1
  46. package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js +11 -8
  47. package/dist/canvas/components/LoopNode/LoopCanvasNode.cjs +112 -0
  48. package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts +6 -0
  49. package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts.map +1 -0
  50. package/dist/canvas/components/LoopNode/LoopCanvasNode.js +78 -0
  51. package/dist/canvas/components/LoopNode/LoopNode.cjs +435 -0
  52. package/dist/canvas/components/LoopNode/LoopNode.constants.cjs +77 -0
  53. package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts +12 -0
  54. package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map +1 -0
  55. package/dist/canvas/components/LoopNode/LoopNode.constants.js +13 -0
  56. package/dist/canvas/components/LoopNode/LoopNode.d.ts +5 -0
  57. package/dist/canvas/components/LoopNode/LoopNode.d.ts.map +1 -0
  58. package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs +137 -0
  59. package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +26 -0
  60. package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +1 -0
  61. package/dist/canvas/components/LoopNode/LoopNode.helpers.js +94 -0
  62. package/dist/canvas/components/LoopNode/LoopNode.js +401 -0
  63. package/dist/canvas/components/LoopNode/LoopNode.types.cjs +18 -0
  64. package/dist/canvas/components/LoopNode/LoopNode.types.d.ts +11 -0
  65. package/dist/canvas/components/LoopNode/LoopNode.types.d.ts.map +1 -0
  66. package/dist/canvas/components/LoopNode/LoopNode.types.js +0 -0
  67. package/dist/canvas/components/LoopNode/LoopNodePreview.cjs +61 -0
  68. package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts +9 -0
  69. package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map +1 -0
  70. package/dist/canvas/components/LoopNode/LoopNodePreview.js +27 -0
  71. package/dist/canvas/components/LoopNode/index.cjs +72 -0
  72. package/dist/canvas/components/LoopNode/index.d.ts +4 -0
  73. package/dist/canvas/components/LoopNode/index.d.ts.map +1 -0
  74. package/dist/canvas/components/LoopNode/index.js +3 -0
  75. package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +34 -25
  76. package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts +2 -1
  77. package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
  78. package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +35 -26
  79. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +15 -5
  80. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts +1 -1
  81. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map +1 -1
  82. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js +15 -5
  83. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts +1 -0
  84. package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map +1 -1
  85. package/dist/canvas/components/index.cjs +27 -20
  86. package/dist/canvas/components/index.d.ts +1 -0
  87. package/dist/canvas/components/index.d.ts.map +1 -1
  88. package/dist/canvas/components/index.js +1 -0
  89. package/dist/canvas/constants.cjs +8 -0
  90. package/dist/canvas/constants.d.ts +2 -0
  91. package/dist/canvas/constants.d.ts.map +1 -1
  92. package/dist/canvas/constants.js +3 -1
  93. package/dist/canvas/core/CategoryTreeAdapter.cjs +1 -1
  94. package/dist/canvas/core/CategoryTreeAdapter.js +1 -1
  95. package/dist/canvas/core/NodeTypeRegistry.cjs +40 -24
  96. package/dist/canvas/core/NodeTypeRegistry.d.ts +8 -4
  97. package/dist/canvas/core/NodeTypeRegistry.d.ts.map +1 -1
  98. package/dist/canvas/core/NodeTypeRegistry.js +40 -24
  99. package/dist/canvas/core/useNodeTypeRegistry.cjs +4 -3
  100. package/dist/canvas/core/useNodeTypeRegistry.d.ts +1 -1
  101. package/dist/canvas/core/useNodeTypeRegistry.d.ts.map +1 -1
  102. package/dist/canvas/core/useNodeTypeRegistry.js +4 -3
  103. package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +10 -3
  104. package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
  105. package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +10 -3
  106. package/dist/canvas/hooks/usePreviewNode.cjs +4 -2
  107. package/dist/canvas/hooks/usePreviewNode.d.ts.map +1 -1
  108. package/dist/canvas/hooks/usePreviewNode.js +4 -2
  109. package/dist/canvas/schema/node-definition/handle.cjs +10 -2
  110. package/dist/canvas/schema/node-definition/handle.d.ts +9 -0
  111. package/dist/canvas/schema/node-definition/handle.d.ts.map +1 -1
  112. package/dist/canvas/schema/node-definition/handle.js +6 -1
  113. package/dist/canvas/schema/node-definition/index.cjs +4 -1
  114. package/dist/canvas/schema/node-definition/index.d.ts +3 -3
  115. package/dist/canvas/schema/node-definition/index.d.ts.map +1 -1
  116. package/dist/canvas/schema/node-definition/index.js +2 -2
  117. package/dist/canvas/schema/node-definition/node-manifest.d.ts +4 -0
  118. package/dist/canvas/schema/node-definition/node-manifest.d.ts.map +1 -1
  119. package/dist/canvas/storybook-utils/manifests/index.d.ts +1 -0
  120. package/dist/canvas/storybook-utils/manifests/index.d.ts.map +1 -1
  121. package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
  122. package/dist/canvas/styles/reactflow-reset.css +8 -0
  123. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  124. package/dist/canvas/utils/{createPreviewNode.cjs → createPreviewGraph.cjs} +115 -41
  125. package/dist/canvas/utils/createPreviewGraph.d.ts +43 -0
  126. package/dist/canvas/utils/createPreviewGraph.d.ts.map +1 -0
  127. package/dist/canvas/utils/{createPreviewNode.js → createPreviewGraph.js} +95 -36
  128. package/dist/canvas/utils/index.cjs +10 -10
  129. package/dist/canvas/utils/index.d.ts +2 -2
  130. package/dist/canvas/utils/index.d.ts.map +1 -1
  131. package/dist/canvas/utils/index.js +2 -2
  132. package/package.json +3 -3
  133. package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs +0 -41
  134. package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts +0 -3
  135. package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map +0 -1
  136. package/dist/canvas/components/AddNodePanel/createAddNodePreview.js +0 -7
  137. package/dist/canvas/utils/createPreviewNode.d.ts +0 -17
  138. package/dist/canvas/utils/createPreviewNode.d.ts.map +0 -1
@@ -0,0 +1,401 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { NodeResizeControl, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
3
+ import { cn } from "@uipath/apollo-wind";
4
+ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
5
+ import { useOptionalNodeTypeRegistry } from "../../core/index.js";
6
+ import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
7
+ import { resolveAdornments } from "../../utils/adornment-resolver.js";
8
+ import { getOppositePosition } from "../../utils/createPreviewGraph.js";
9
+ import { CanvasIcon } from "../../utils/icon-registry.js";
10
+ import { resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
11
+ import { resolveToolbar } from "../../utils/toolbar-resolver.js";
12
+ import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
13
+ import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
14
+ import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
15
+ import { selectIsConnecting } from "../BaseNode/BaseNode.js";
16
+ import { BaseBadgeSlot } from "../BaseNode/BaseNodeBadgeSlot.js";
17
+ import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
18
+ import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
19
+ import { ButtonHandles } from "../ButtonHandle/index.js";
20
+ import { NodeToolbar } from "../Toolbar/index.js";
21
+ import { DEFAULT_LOOP_FRAME_BACKGROUND, DEFAULT_LOOP_FRAME_BORDER, DEFAULT_LOOP_ICON, DEFAULT_LOOP_MIN_HEIGHT, DEFAULT_LOOP_MIN_WIDTH, DEFAULT_LOOP_NODE_TYPE, DEFAULT_LOOP_SHELL_BACKGROUND, DEFAULT_LOOP_TITLE, LOOP_FRAME_INSET_PX, LOOP_SHELL_RADIUS_PX } from "./LoopNode.constants.js";
22
+ import { partitionLoopHandleGroups } from "./LoopNode.helpers.js";
23
+ const EMPTY_DATA = {};
24
+ const RESIZE_CONTROLS = [
25
+ {
26
+ position: 'top-left',
27
+ cursor: 'nwse-resize',
28
+ indicatorClassName: 'top-[-5px] left-[-5px]'
29
+ },
30
+ {
31
+ position: 'top-right',
32
+ cursor: 'nesw-resize',
33
+ indicatorClassName: 'top-[-5px] right-[-5px]'
34
+ },
35
+ {
36
+ position: 'bottom-left',
37
+ cursor: 'nesw-resize',
38
+ indicatorClassName: 'bottom-[-5px] left-[-5px]'
39
+ },
40
+ {
41
+ position: 'bottom-right',
42
+ cursor: 'nwse-resize',
43
+ indicatorClassName: 'bottom-[-5px] right-[-5px]'
44
+ }
45
+ ];
46
+ const RESIZE_CONTROL_STYLE = {
47
+ background: 'transparent',
48
+ border: 'none',
49
+ zIndex: 100
50
+ };
51
+ const ADORNMENT_SLOT_POSITIONS = [
52
+ 'topLeft',
53
+ 'topRight',
54
+ 'bottomLeft',
55
+ 'bottomRight'
56
+ ];
57
+ const ADORNMENT_SLOT_SHAPES = {
58
+ topLeft: 'top-left',
59
+ topRight: 'top-right',
60
+ bottomLeft: 'bottom-left',
61
+ bottomRight: 'bottom-right'
62
+ };
63
+ function resolveInteractionState(dragging, selected, isHovered) {
64
+ if (dragging) return 'drag';
65
+ if (selected) return 'selected';
66
+ if (isHovered) return 'hover';
67
+ return 'default';
68
+ }
69
+ function LoopNodeComponent(props) {
70
+ const { id, type = DEFAULT_LOOP_NODE_TYPE, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize: onResizeCallback } = props;
71
+ const updateNodeInternals = useUpdateNodeInternals();
72
+ const nodeTypeRegistry = useOptionalNodeTypeRegistry();
73
+ const headerRef = useRef(null);
74
+ const [isHovered, setIsHovered] = useState(false);
75
+ const resolvedData = data ?? EMPTY_DATA;
76
+ const nodeVersion = 'string' == typeof resolvedData.version ? resolvedData.version : void 0;
77
+ const suggestionType = resolvedData.suggestionType;
78
+ const manifest = useMemo(()=>nodeTypeRegistry?.getManifest(type, nodeVersion), [
79
+ nodeTypeRegistry,
80
+ type,
81
+ nodeVersion
82
+ ]);
83
+ const { mode } = useBaseCanvasMode();
84
+ const connectedHandleIds = useConnectedHandles(id);
85
+ const { multipleNodesSelected } = useSelectionState();
86
+ const isConnecting = useStore(selectIsConnecting);
87
+ const needsChildCheck = 'design' === mode && !!onAddFirstChild;
88
+ const hasChildNodes = useStore(useCallback((state)=>!needsChildCheck || state.nodes.some((node)=>node.parentId === id), [
89
+ id,
90
+ needsChildCheck
91
+ ]));
92
+ const executionState = useNodeExecutionState(id);
93
+ const validationState = useElementValidationStatus(id);
94
+ const statusContext = useMemo(()=>({
95
+ nodeId: id,
96
+ executionState,
97
+ validationState,
98
+ isConnecting,
99
+ isSelected: selected,
100
+ isDragging: dragging,
101
+ mode
102
+ }), [
103
+ dragging,
104
+ executionState,
105
+ id,
106
+ isConnecting,
107
+ mode,
108
+ selected,
109
+ validationState
110
+ ]);
111
+ const executionStatus = 'string' == typeof executionState ? executionState : executionState?.status;
112
+ const display = useMemo(()=>resolveDisplay(manifest?.display, {
113
+ ...resolvedData,
114
+ nodeId: id
115
+ }), [
116
+ manifest?.display,
117
+ id,
118
+ resolvedData
119
+ ]);
120
+ const displayTitle = display.label ?? DEFAULT_LOOP_TITLE;
121
+ const minWidth = DEFAULT_LOOP_MIN_WIDTH;
122
+ const minHeight = DEFAULT_LOOP_MIN_HEIGHT;
123
+ const headerIcon = useMemo(()=>/*#__PURE__*/ jsx(CanvasIcon, {
124
+ icon: display.icon ?? DEFAULT_LOOP_ICON,
125
+ size: 16
126
+ }), [
127
+ display.icon
128
+ ]);
129
+ const toolbarConfig = useMemo(()=>manifest ? resolveToolbar(manifest, statusContext, data) : void 0, [
130
+ data,
131
+ manifest,
132
+ statusContext
133
+ ]);
134
+ const adornments = useMemo(()=>resolveAdornments(statusContext), [
135
+ statusContext
136
+ ]);
137
+ const resolvedHandleGroups = useMemo(()=>manifest ? resolveHandles(manifest.handleConfiguration, resolvedData) : [], [
138
+ manifest,
139
+ resolvedData
140
+ ]);
141
+ const { outer: outerHandleGroups, inner: innerHandleGroups } = useMemo(()=>partitionLoopHandleGroups(resolvedHandleGroups), [
142
+ resolvedHandleGroups
143
+ ]);
144
+ const handleGroupVariants = [
145
+ [
146
+ 'outer',
147
+ outerHandleGroups
148
+ ],
149
+ [
150
+ 'inner',
151
+ innerHandleGroups
152
+ ]
153
+ ];
154
+ useEffect(()=>{
155
+ const frameId = requestAnimationFrame(()=>{
156
+ updateNodeInternals(id);
157
+ });
158
+ return ()=>{
159
+ cancelAnimationFrame(frameId);
160
+ };
161
+ }, [
162
+ id,
163
+ innerHandleGroups,
164
+ outerHandleGroups,
165
+ updateNodeInternals,
166
+ width,
167
+ height
168
+ ]);
169
+ const handleResize = useCallback((_event, params)=>{
170
+ onResizeCallback?.({
171
+ width: params.width,
172
+ height: params.height
173
+ });
174
+ }, [
175
+ onResizeCallback
176
+ ]);
177
+ const handleEmptyClick = useCallback(()=>{
178
+ onAddFirstChild?.();
179
+ }, [
180
+ onAddFirstChild
181
+ ]);
182
+ const handleMouseEnter = useCallback(()=>setIsHovered(true), []);
183
+ const handleMouseLeave = useCallback(()=>setIsHovered(false), []);
184
+ const handleOuterHandleAction = useCallback((_event)=>{
185
+ setIsHovered(false);
186
+ }, []);
187
+ const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
188
+ const showHandleAddButtons = 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging;
189
+ const showResizeControls = selected && !dragging && 'design' === mode;
190
+ const showEmptyStateButton = 'design' === mode && !hasChildNodes && !!onAddFirstChild;
191
+ const interactionState = resolveInteractionState(dragging, selected, isHovered);
192
+ if (!manifest) return /*#__PURE__*/ jsx("div", {
193
+ className: "relative",
194
+ style: {
195
+ width,
196
+ height,
197
+ minWidth,
198
+ minHeight
199
+ },
200
+ onMouseEnter: handleMouseEnter,
201
+ onMouseLeave: handleMouseLeave,
202
+ children: /*#__PURE__*/ jsx(MissingManifestNode, {
203
+ type: type,
204
+ isSelected: selected,
205
+ isHovered: isHovered,
206
+ interactionState: interactionState
207
+ })
208
+ });
209
+ return /*#__PURE__*/ jsxs("div", {
210
+ "data-loop-container": true,
211
+ "data-selected": selected ? 'true' : 'false',
212
+ "data-execution-status": executionStatus,
213
+ "data-interaction-state": interactionState,
214
+ "data-suggestion-type": suggestionType,
215
+ "data-validation-status": validationState?.validationStatus,
216
+ "aria-busy": resolvedData.loading || void 0,
217
+ className: cn('group/loop-shell relative flex h-full w-full flex-col overflow-visible border bg-surface-overlay', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', getStatusBorder(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-foreground-accent-muted', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
218
+ style: {
219
+ width,
220
+ height,
221
+ minWidth,
222
+ minHeight,
223
+ borderRadius: LOOP_SHELL_RADIUS_PX,
224
+ background: display.background ?? DEFAULT_LOOP_SHELL_BACKGROUND
225
+ },
226
+ onMouseEnter: handleMouseEnter,
227
+ onMouseLeave: handleMouseLeave,
228
+ children: [
229
+ ADORNMENT_SLOT_POSITIONS.map((slot)=>adornments?.[slot] ? /*#__PURE__*/ jsx(BaseBadgeSlot, {
230
+ position: ADORNMENT_SLOT_SHAPES[slot],
231
+ shape: "rectangle",
232
+ children: adornments[slot]
233
+ }, slot) : null),
234
+ /*#__PURE__*/ jsx(ResizeCornerIndicators, {
235
+ selected: showResizeControls
236
+ }),
237
+ showResizeControls ? RESIZE_CONTROLS.map(({ position, cursor })=>/*#__PURE__*/ jsx(NodeResizeControl, {
238
+ style: RESIZE_CONTROL_STYLE,
239
+ position: position,
240
+ minWidth: minWidth,
241
+ minHeight: minHeight,
242
+ onResize: handleResize,
243
+ children: /*#__PURE__*/ jsx("div", {
244
+ className: "absolute bottom-0 right-0 h-5 w-5 pointer-events-auto",
245
+ style: {
246
+ cursor
247
+ }
248
+ })
249
+ }, position)) : null,
250
+ /*#__PURE__*/ jsx(Header, {
251
+ headerRef: headerRef,
252
+ title: displayTitle,
253
+ icon: headerIcon,
254
+ loading: !!resolvedData.loading
255
+ }),
256
+ /*#__PURE__*/ jsx(BodyFrame, {
257
+ isEmpty: showEmptyStateButton,
258
+ isLoading: !!resolvedData.loading,
259
+ onAddFirstChild: handleEmptyClick
260
+ }),
261
+ toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
262
+ nodeId: id,
263
+ config: toolbarConfig,
264
+ expanded: selected || isHovered,
265
+ hidden: dragging || multipleNodesSelected
266
+ }),
267
+ handleGroupVariants.map(([variant, groups])=>/*#__PURE__*/ jsx(HandleGroups, {
268
+ nodeId: id,
269
+ groups: groups,
270
+ variant: variant,
271
+ selected: selected,
272
+ hovered: isHovered,
273
+ shouldShowHandles: shouldShowHandles,
274
+ showAddButton: showHandleAddButtons,
275
+ showNotches: shouldShowHandles,
276
+ nodeWidth: width,
277
+ nodeHeight: height,
278
+ connectedHandleIds: connectedHandleIds,
279
+ onOuterHandleAction: handleOuterHandleAction
280
+ }, variant))
281
+ ]
282
+ });
283
+ }
284
+ const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
285
+ function Header({ headerRef, title, icon, loading }) {
286
+ const titleContent = loading ? /*#__PURE__*/ jsx("div", {
287
+ className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
288
+ }) : /*#__PURE__*/ jsx("span", {
289
+ className: "truncate text-[14px] font-semibold tracking-[-0.15px]",
290
+ children: title
291
+ });
292
+ let iconContent = null;
293
+ if (loading) iconContent = /*#__PURE__*/ jsx("div", {
294
+ className: "h-4 w-4 shrink-0 animate-pulse rounded bg-(--canvas-background-overlay)"
295
+ });
296
+ else if (icon) iconContent = /*#__PURE__*/ jsx("span", {
297
+ className: "shrink-0 text-foreground",
298
+ "aria-hidden": true,
299
+ children: icon
300
+ });
301
+ return /*#__PURE__*/ jsx("div", {
302
+ ref: headerRef,
303
+ className: "flex shrink-0 items-center justify-between gap-2.5 pl-4.5 pr-5 pt-3.5 text-foreground cursor-grab active:cursor-grabbing",
304
+ "data-testid": "loop-node-header",
305
+ children: /*#__PURE__*/ jsxs("div", {
306
+ className: "flex min-w-0 items-center gap-2",
307
+ children: [
308
+ iconContent,
309
+ titleContent
310
+ ]
311
+ })
312
+ });
313
+ }
314
+ function EmptyState({ onAddFirstChild }) {
315
+ return /*#__PURE__*/ jsx("button", {
316
+ type: "button",
317
+ onClick: onAddFirstChild,
318
+ "aria-label": "Add node to loop",
319
+ className: cn('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
320
+ children: /*#__PURE__*/ jsx(CanvasIcon, {
321
+ icon: "plus",
322
+ size: 14
323
+ })
324
+ });
325
+ }
326
+ function BodyFrame({ isEmpty, isLoading, onAddFirstChild }) {
327
+ return /*#__PURE__*/ jsxs("div", {
328
+ "data-testid": "loop-body-frame",
329
+ "data-empty": isEmpty ? 'true' : 'false',
330
+ className: cn('relative flex flex-1 rounded-[26px] border border-dashed', 'pointer-events-none', isEmpty && 'items-center justify-center'),
331
+ style: {
332
+ margin: LOOP_FRAME_INSET_PX,
333
+ background: DEFAULT_LOOP_FRAME_BACKGROUND,
334
+ borderColor: DEFAULT_LOOP_FRAME_BORDER
335
+ },
336
+ children: [
337
+ isLoading ? /*#__PURE__*/ jsx("div", {
338
+ className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
339
+ }) : null,
340
+ isEmpty ? /*#__PURE__*/ jsx(EmptyState, {
341
+ onAddFirstChild: onAddFirstChild
342
+ }) : null
343
+ ]
344
+ });
345
+ }
346
+ function ResizeCornerIndicators({ selected }) {
347
+ return /*#__PURE__*/ jsx(Fragment, {
348
+ children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ jsx("div", {
349
+ "aria-hidden": true,
350
+ className: cn('pointer-events-none absolute h-1.5 w-1.5 rounded-[1px] border border-brand bg-background transition-opacity', indicatorClassName, selected ? 'opacity-100' : 'opacity-0')
351
+ }, position))
352
+ });
353
+ }
354
+ function HandleGroups({ nodeId, variant, groups, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onOuterHandleAction }) {
355
+ if (0 === groups.length) return null;
356
+ return /*#__PURE__*/ jsx(Fragment, {
357
+ children: groups.map((group, groupIndex)=>/*#__PURE__*/ jsx(HandleGroup, {
358
+ nodeId: nodeId,
359
+ variant: variant,
360
+ group: group,
361
+ selected: selected,
362
+ hovered: hovered,
363
+ shouldShowHandles: shouldShowHandles,
364
+ showAddButton: showAddButton,
365
+ showNotches: showNotches,
366
+ nodeWidth: nodeWidth,
367
+ nodeHeight: nodeHeight,
368
+ connectedHandleIds: connectedHandleIds,
369
+ onOuterHandleAction: onOuterHandleAction
370
+ }, `${variant}:${group.position}:${groupIndex}`))
371
+ });
372
+ }
373
+ function HandleGroup({ nodeId, variant, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onOuterHandleAction }) {
374
+ const groupVisible = shouldShowHandles && (group.visible ?? true);
375
+ const enhancedHandles = useMemo(()=>group.handles.map((handle)=>({
376
+ ...handle,
377
+ showHandle: connectedHandleIds.has(handle.id) || groupVisible,
378
+ showButton: 'inner' === variant && 'source' === handle.type ? false : handle.showButton,
379
+ onAction: handle.onAction ?? ('inner' !== variant && 'source' === handle.type && handle.showButton ? onOuterHandleAction : void 0)
380
+ })), [
381
+ group.handles,
382
+ connectedHandleIds,
383
+ groupVisible,
384
+ onOuterHandleAction,
385
+ variant
386
+ ]);
387
+ return /*#__PURE__*/ jsx(ButtonHandles, {
388
+ nodeId: nodeId,
389
+ handles: enhancedHandles,
390
+ position: group.position,
391
+ connectionPosition: 'inner' === variant ? getOppositePosition(group.position) : group.position,
392
+ selected: selected,
393
+ hovered: hovered,
394
+ showAddButton: showAddButton,
395
+ showNotches: showNotches,
396
+ customPositionAndOffsets: group.customPositionAndOffsets,
397
+ nodeWidth: nodeWidth,
398
+ nodeHeight: nodeHeight
399
+ });
400
+ }
401
+ export { LoopNode };
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __webpack_require__ = {};
3
+ (()=>{
4
+ __webpack_require__.r = (exports1)=>{
5
+ if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
6
+ value: 'Module'
7
+ });
8
+ Object.defineProperty(exports1, '__esModule', {
9
+ value: true
10
+ });
11
+ };
12
+ })();
13
+ var __webpack_exports__ = {};
14
+ __webpack_require__.r(__webpack_exports__);
15
+ for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
16
+ Object.defineProperty(exports, '__esModule', {
17
+ value: true
18
+ });
@@ -0,0 +1,11 @@
1
+ import type { Node, NodeProps } from '../../xyflow/react.ts';
2
+ import type { BaseNodeData } from '../BaseNode';
3
+ export type LoopNodeData = BaseNodeData;
4
+ export interface LoopNodeProps extends NodeProps<Node<LoopNodeData>> {
5
+ onAddFirstChild?: () => void;
6
+ onResize?: (size: {
7
+ width: number;
8
+ height: number;
9
+ }) => void;
10
+ }
11
+ //# sourceMappingURL=LoopNode.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LoopNode.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9D"}
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ var __webpack_require__ = {};
3
+ (()=>{
4
+ __webpack_require__.d = (exports1, definition)=>{
5
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
+ enumerable: true,
7
+ get: definition[key]
8
+ });
9
+ };
10
+ })();
11
+ (()=>{
12
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
+ })();
14
+ (()=>{
15
+ __webpack_require__.r = (exports1)=>{
16
+ if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
+ value: 'Module'
18
+ });
19
+ Object.defineProperty(exports1, '__esModule', {
20
+ value: true
21
+ });
22
+ };
23
+ })();
24
+ var __webpack_exports__ = {};
25
+ __webpack_require__.r(__webpack_exports__);
26
+ __webpack_require__.d(__webpack_exports__, {
27
+ showCenteredContainerPreview: ()=>showCenteredContainerPreview
28
+ });
29
+ const createPreviewGraph_cjs_namespaceObject = require("../../utils/createPreviewGraph.cjs");
30
+ const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
31
+ const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
32
+ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId }) {
33
+ const containerNode = reactFlowInstance.getNode(containerId);
34
+ if (!containerNode) return;
35
+ const allNodes = reactFlowInstance.getNodes();
36
+ const containerAbsolutePosition = (0, NodeUtils_cjs_namespaceObject.getAbsolutePosition)(containerNode, allNodes);
37
+ const relativeCenter = (0, external_LoopNode_helpers_cjs_namespaceObject.getLoopRelativeBodyCenter)(containerNode);
38
+ const previewCenter = {
39
+ x: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.x + relativeCenter.x),
40
+ y: (0, NodeUtils_cjs_namespaceObject.snapToGrid)(containerAbsolutePosition.y + relativeCenter.y)
41
+ };
42
+ (0, createPreviewGraph_cjs_namespaceObject.showPreviewGraph)({
43
+ sourceNodeId: containerId,
44
+ sourceHandleId: previewHandles.sourceHandleId,
45
+ reactFlowInstance,
46
+ position: previewCenter,
47
+ positionMode: 'center',
48
+ handlePosition: previewHandles.sourceHandlePosition,
49
+ targetNodeId: containerId,
50
+ targetHandleId: previewHandles.targetHandleId,
51
+ containerId,
52
+ trailingEdgeId
53
+ });
54
+ }
55
+ exports.showCenteredContainerPreview = __webpack_exports__.showCenteredContainerPreview;
56
+ for(var __rspack_i in __webpack_exports__)if (-1 === [
57
+ "showCenteredContainerPreview"
58
+ ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
59
+ Object.defineProperty(exports, '__esModule', {
60
+ value: true
61
+ });
@@ -0,0 +1,9 @@
1
+ import type { ReactFlowInstance } from '../../xyflow/react.ts';
2
+ import { type LoopPreviewConnectionHandles } from './LoopNode.helpers';
3
+ export declare function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId, }: {
4
+ containerId: string;
5
+ reactFlowInstance: ReactFlowInstance;
6
+ previewHandles: LoopPreviewConnectionHandles;
7
+ trailingEdgeId?: string;
8
+ }): void;
9
+ //# sourceMappingURL=LoopNodePreview.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LoopNodePreview.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNodePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAGlF,OAAO,EAA6B,KAAK,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAElG,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,cAAc,EAAE,4BAA4B,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,QAwBA"}
@@ -0,0 +1,27 @@
1
+ import { showPreviewGraph } from "../../utils/createPreviewGraph.js";
2
+ import { getAbsolutePosition, snapToGrid } from "../../utils/NodeUtils.js";
3
+ import { getLoopRelativeBodyCenter } from "./LoopNode.helpers.js";
4
+ function showCenteredContainerPreview({ containerId, reactFlowInstance, previewHandles, trailingEdgeId }) {
5
+ const containerNode = reactFlowInstance.getNode(containerId);
6
+ if (!containerNode) return;
7
+ const allNodes = reactFlowInstance.getNodes();
8
+ const containerAbsolutePosition = getAbsolutePosition(containerNode, allNodes);
9
+ const relativeCenter = getLoopRelativeBodyCenter(containerNode);
10
+ const previewCenter = {
11
+ x: snapToGrid(containerAbsolutePosition.x + relativeCenter.x),
12
+ y: snapToGrid(containerAbsolutePosition.y + relativeCenter.y)
13
+ };
14
+ showPreviewGraph({
15
+ sourceNodeId: containerId,
16
+ sourceHandleId: previewHandles.sourceHandleId,
17
+ reactFlowInstance,
18
+ position: previewCenter,
19
+ positionMode: 'center',
20
+ handlePosition: previewHandles.sourceHandlePosition,
21
+ targetNodeId: containerId,
22
+ targetHandleId: previewHandles.targetHandleId,
23
+ containerId,
24
+ trailingEdgeId
25
+ });
26
+ }
27
+ export { showCenteredContainerPreview };
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+ var __webpack_modules__ = {
3
+ "./LoopCanvasNode" (module) {
4
+ module.exports = require("./LoopCanvasNode.cjs");
5
+ },
6
+ "./LoopNode?d3ac" (module) {
7
+ module.exports = require("./LoopNode.cjs");
8
+ },
9
+ "./LoopNode.types" (module) {
10
+ module.exports = require("./LoopNode.types.cjs");
11
+ }
12
+ };
13
+ var __webpack_module_cache__ = {};
14
+ function __webpack_require__(moduleId) {
15
+ var cachedModule = __webpack_module_cache__[moduleId];
16
+ if (void 0 !== cachedModule) return cachedModule.exports;
17
+ var module = __webpack_module_cache__[moduleId] = {
18
+ exports: {}
19
+ };
20
+ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
21
+ return module.exports;
22
+ }
23
+ (()=>{
24
+ __webpack_require__.n = (module)=>{
25
+ var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
26
+ __webpack_require__.d(getter, {
27
+ a: getter
28
+ });
29
+ return getter;
30
+ };
31
+ })();
32
+ (()=>{
33
+ __webpack_require__.d = (exports1, definition)=>{
34
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
35
+ enumerable: true,
36
+ get: definition[key]
37
+ });
38
+ };
39
+ })();
40
+ (()=>{
41
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
42
+ })();
43
+ (()=>{
44
+ __webpack_require__.r = (exports1)=>{
45
+ if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
46
+ value: 'Module'
47
+ });
48
+ Object.defineProperty(exports1, '__esModule', {
49
+ value: true
50
+ });
51
+ };
52
+ })();
53
+ var __webpack_exports__ = {};
54
+ (()=>{
55
+ __webpack_require__.r(__webpack_exports__);
56
+ var _LoopCanvasNode__rspack_import_0 = __webpack_require__("./LoopCanvasNode");
57
+ var __rspack_reexport = {};
58
+ for(const __rspack_import_key in _LoopCanvasNode__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopCanvasNode__rspack_import_0[__rspack_import_key];
59
+ __webpack_require__.d(__webpack_exports__, __rspack_reexport);
60
+ var _LoopNode__rspack_import_1 = __webpack_require__("./LoopNode?d3ac");
61
+ var __rspack_reexport = {};
62
+ for(const __rspack_import_key in _LoopNode__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode__rspack_import_1[__rspack_import_key];
63
+ __webpack_require__.d(__webpack_exports__, __rspack_reexport);
64
+ var _LoopNode_types__rspack_import_2 = __webpack_require__("./LoopNode.types");
65
+ var __rspack_reexport = {};
66
+ for(const __rspack_import_key in _LoopNode_types__rspack_import_2)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode_types__rspack_import_2[__rspack_import_key];
67
+ __webpack_require__.d(__webpack_exports__, __rspack_reexport);
68
+ })();
69
+ for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
70
+ Object.defineProperty(exports, '__esModule', {
71
+ value: true
72
+ });
@@ -0,0 +1,4 @@
1
+ export * from './LoopCanvasNode';
2
+ export * from './LoopNode';
3
+ export * from './LoopNode.types';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./LoopCanvasNode.js";
2
+ export * from "./LoopNode.js";
3
+ export * from "./LoopNode.types.js";