@walkeros/explorer 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -1735,12 +1735,20 @@ function DestinationInitDemo({
 }
 
 // src/components/demos/PromotionPlayground.tsx
-import { useState as useState13, useCallback as useCallback10 } from "react";
+import {
+  useState as useState12,
+  useEffect as useEffect9,
+  useRef as useRef6,
+  useCallback as useCallback10,
+  useMemo as useMemo3
+} from "react";
+import { startFlow as startFlow3 } from "@walkeros/collector";
 
 // src/components/molecules/preview.tsx
 import { useState as useState10, useEffect as useEffect8, useRef as useRef5, useCallback as useCallback9 } from "react";
-import { sourceBrowser } from "@walkeros/web-source-browser";
-import { startFlow as startFlow3 } from "@walkeros/collector";
+import {
+  sourceBrowser
+} from "@walkeros/web-source-browser";
 
 // src/components/atoms/preview-footer.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -1772,17 +1780,17 @@ import { jsx as jsx11 } from "react/jsx-runtime";
 function Preview({
   html,
   css = "",
-  onEvent,
+  elb,
   label = "Preview"
 }) {
   const [highlights, setHighlights] = useState10(/* @__PURE__ */ new Set());
   const iframeRef = useRef5(null);
   const updateTimeoutRef = useRef5(void 0);
-  const onEventRef = useRef5(onEvent);
-  const collectorRef = useRef5(null);
+  const elbRef = useRef5(elb);
+  const sourceRef = useRef5(null);
   useEffect8(() => {
-    onEventRef.current = onEvent;
-  }, [onEvent]);
+    elbRef.current = elb;
+  }, [elb]);
   const toggleHighlight = (type) => {
     setHighlights((prev) => {
       const next = new Set(prev);
@@ -1889,58 +1897,65 @@ function Preview({
       `);
       doc.close();
       autoMarkProperties(doc);
-      if (onEventRef.current && iframe.contentWindow && iframe.contentDocument) {
+      if (elbRef.current && iframe.contentWindow && iframe.contentDocument) {
         setTimeout(async () => {
-          if (collectorRef.current) {
+          if (sourceRef.current) {
             try {
-              for (const source of Object.values(
-                collectorRef.current.sources
-              )) {
-                await source.destroy?.();
-              }
-            } catch (e) {
+              await sourceRef.current.destroy?.();
+            } catch {
             }
           }
           try {
-            if (!iframe.contentWindow || !iframe.contentDocument) return;
-            const { collector, elb } = await startFlow3({
-              sources: {
-                browser: {
-                  code: sourceBrowser,
-                  config: {
-                    settings: {
-                      pageview: true,
-                      session: false,
-                      prefix: "data-elb",
-                      elb: "elb",
-                      elbLayer: "elbLayer"
-                    }
-                  },
-                  env: {
-                    window: iframe.contentWindow,
-                    document: iframe.contentDocument
-                  },
-                  primary: true
-                }
+            if (!iframe.contentWindow || !iframe.contentDocument || !elbRef.current) {
+              return;
+            }
+            const createNoopLogger = () => ({
+              error: () => {
               },
-              destinations: {
-                // Capture events and forward to onEvent callback
-                preview: {
-                  code: {
-                    type: "preview",
-                    config: {},
-                    push: async (event) => {
-                      if (onEventRef.current) {
-                        onEventRef.current(event);
-                      }
-                    }
-                  }
+              info: () => {
+              },
+              debug: () => {
+              },
+              throw: (msg) => {
+                throw msg instanceof Error ? msg : new Error(msg);
+              },
+              scope: () => createNoopLogger()
+            });
+            const noopLogger = createNoopLogger();
+            const noopPush = async () => ({
+              ok: true,
+              destination: {}
+            });
+            const source = await sourceBrowser({
+              id: "preview",
+              collector: {},
+              // Not used when elb is provided directly
+              logger: noopLogger,
+              setIngest: async () => {
+              },
+              config: {
+                settings: {
+                  pageview: false,
+                  session: false,
+                  prefix: "data-elb",
+                  elb: "elb",
+                  elbLayer: "elbLayer",
+                  // Use body as scope - trigger.ts compares `scope !== document` against
+                  // main page's document, so iframe.contentDocument fails the Element cast
+                  scope: iframe.contentDocument.body
                 }
               },
-              run: false
+              env: {
+                elb: elbRef.current,
+                push: noopPush,
+                command: async () => ({ ok: true, destination: {} }),
+                logger: noopLogger,
+                window: iframe.contentWindow,
+                document: iframe.contentDocument
+              }
             });
-            collectorRef.current = collector;
-          } catch (error) {
+            sourceRef.current = source;
+          } catch {
           }
         }, 50);
       }
@@ -1949,13 +1964,11 @@ function Preview({
       if (updateTimeoutRef.current) {
         clearTimeout(updateTimeoutRef.current);
       }
-      if (collectorRef.current) {
-        for (const source of Object.values(collectorRef.current.sources)) {
-          source.destroy?.();
-        }
+      if (sourceRef.current) {
+        sourceRef.current.destroy?.();
       }
     };
-  }, [html, css, highlights, autoMarkProperties]);
+  }, [html, css, highlights, autoMarkProperties, elb]);
   return /* @__PURE__ */ jsx11(
     Box,
     {
@@ -2101,60 +2114,6 @@ function BrowserBox({
   );
 }
 
-// src/components/organisms/collector-box.tsx
-import { useState as useState12, useEffect as useEffect9 } from "react";
-import { startFlow as startFlow4 } from "@walkeros/collector";
-import { jsx as jsx15 } from "react/jsx-runtime";
-function CollectorBox({
-  event,
-  mapping,
-  destination,
-  label = "Result",
-  wordWrap = false
-}) {
-  const [output, setOutput] = useState12(
-    "// Click elements in the preview to see function call"
-  );
-  useEffect9(() => {
-    (async () => {
-      try {
-        const eventObj = JSON.parse(event);
-        const mappingObj = JSON.parse(mapping);
-        const { collector } = await startFlow4({
-          destinations: {
-            demo: {
-              code: destination,
-              config: {
-                mapping: mappingObj
-              },
-              env: {
-                elb: setOutput
-              }
-            }
-          }
-        });
-        await collector.push(eventObj);
-      } catch (error) {
-        if (error instanceof Error) {
-          setOutput(`// Error: ${error.message}`);
-        } else {
-          setOutput(`// Error: ${String(error)}`);
-        }
-      }
-    })();
-  }, [event, mapping, destination]);
-  return /* @__PURE__ */ jsx15(
-    CodeBox,
-    {
-      code: output,
-      language: "javascript",
-      disabled: true,
-      label,
-      wordWrap
-    }
-  );
-}
-
 // src/helpers/destinations.ts
 function createGtagDestination() {
   return {
@@ -2191,7 +2150,7 @@ function createPlausibleDestination() {
 }
 
 // src/components/demos/PromotionPlayground.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultHtml = `<div
   data-elb="product"
   data-elbaction="load:view"
@@ -2448,25 +2407,94 @@ function PromotionPlayground({
   labelEvents = "Events",
   labelMapping = "Mapping",
   labelResult = "Result",
-  destination = createGtagDestination()
+  destination: destinationProp
 }) {
-  const [html, setHtml] = useState13(initialHtml);
-  const [css, setCss] = useState13(initialCss);
-  const [js, setJs] = useState13(initialJs);
-  const [mappingInput, setMappingInput] = useState13(initialMapping);
-  const [capturedEvent, setCapturedEvent] = useState13(
-    null
+  const destination = useMemo3(
+    () => destinationProp ?? createGtagDestination(),
+    [destinationProp]
   );
-  const [eventInput, setEventInput] = useState13(
+  const [html, setHtml] = useState12(initialHtml);
+  const [css, setCss] = useState12(initialCss);
+  const [js, setJs] = useState12(initialJs);
+  const [mappingInput, setMappingInput] = useState12(initialMapping);
+  const [eventJson, setEventJson] = useState12(
     "// Click elements in the preview to see events"
   );
-  const handleEvent = useCallback10((event) => {
-    setCapturedEvent(event);
-    setEventInput(JSON.stringify(event, null, 2));
+  const [outputString, setOutputString] = useState12(
+    "// Click elements in the preview to see function call"
+  );
+  const collectorRef = useRef6(null);
+  const elbRef = useRef6(null);
+  const lastEventRef = useRef6(null);
+  const [isReady, setIsReady] = useState12(false);
+  useEffect9(() => {
+    let mounted = true;
+    const init = async () => {
+      try {
+        const parsedMapping = JSON.parse(initialMapping);
+        const { collector, elb } = await startFlow3({
+          destinations: {
+            // Capture raw events for display in Events column
+            rawCapture: {
+              code: {
+                type: "rawCapture",
+                config: {},
+                push: async (event) => {
+                  if (!mounted) return;
+                  lastEventRef.current = event;
+                  setEventJson(JSON.stringify(event, null, 2));
+                }
+              }
+            },
+            // Transform and display formatted output in Result column
+            gtag: {
+              code: destination,
+              config: {
+                mapping: parsedMapping
+              },
+              env: {
+                elb: (output) => {
+                  if (!mounted) return;
+                  setOutputString(output);
+                }
+              }
+            }
+          },
+          consent: { functional: true, marketing: true },
+          user: { session: "playground" }
+        });
+        if (!mounted) return;
+        collectorRef.current = collector;
+        elbRef.current = elb;
+        setIsReady(true);
+      } catch {
+      }
+    };
+    init();
+    return () => {
+      mounted = false;
+      if (collectorRef.current) {
+      }
+    };
+  }, [initialMapping, destination]);
+  const handleMappingChange = useCallback10((newMapping) => {
+    setMappingInput(newMapping);
+    const timeoutId = setTimeout(() => {
+      try {
+        const parsed = JSON.parse(newMapping);
+        if (collectorRef.current?.destinations?.gtag?.config) {
+          collectorRef.current.destinations.gtag.config.mapping = parsed;
+        }
+        if (lastEventRef.current && collectorRef.current) {
+          collectorRef.current.push(lastEventRef.current);
+        }
+      } catch {
+      }
+    }, 500);
+    return () => clearTimeout(timeoutId);
   }, []);
-  const eventDisplay = eventInput;
   return /* @__PURE__ */ jsxs9(Grid, { columns: 5, rowHeight: 600, children: [
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       BrowserBox,
       {
         label: labelCode,
@@ -2482,42 +2510,42 @@ function PromotionPlayground({
         wordWrap: true
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       Preview,
       {
         label: labelPreview,
         html,
         css,
-        onEvent: handleEvent
+        elb: isReady ? elbRef.current ?? void 0 : void 0
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       CodeBox,
       {
         label: labelEvents,
-        code: eventDisplay,
-        onChange: setEventInput,
+        code: eventJson,
+        onChange: setEventJson,
         language: "json",
         wordWrap: true
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       CodeBox,
       {
         label: labelMapping,
         code: mappingInput,
-        onChange: setMappingInput,
+        onChange: handleMappingChange,
         language: "json",
         wordWrap: true
       }
     ),
-    /* @__PURE__ */ jsx16(
-      CollectorBox,
+    /* @__PURE__ */ jsx15(
+      CodeBox,
       {
-        event: eventInput,
-        mapping: mappingInput,
-        destination,
         label: labelResult,
+        code: outputString,
+        language: "javascript",
+        disabled: true,
         wordWrap: true
       }
     )
@@ -2525,7 +2553,7 @@ function PromotionPlayground({
 }
 
 // src/components/organisms/live-code.tsx
-import { useState as useState14, useEffect as useEffect10, useCallback as useCallback11 } from "react";
+import { useState as useState13, useEffect as useEffect10, useCallback as useCallback11 } from "react";
 import { debounce, isString, tryCatchAsync as tryCatchAsync3 } from "@walkeros/core";
 
 // src/utils/format-code.ts
@@ -2587,7 +2615,7 @@ async function formatCode(code, language) {
 }
 
 // src/components/organisms/live-code.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function formatValue(value, options = {}) {
   if (value === void 0) return "";
   const str = isString(value) ? value.trim() : JSON.stringify(value, null, 2);
@@ -2612,9 +2640,9 @@ function LiveCode({
   format: format3 = true,
   rowHeight
 }) {
-  const [input, setInput] = useState14(formatValue(initInput));
-  const [config, setConfig] = useState14(formatValue(initConfig));
-  const [output, setOutput] = useState14([formatValue(initOutput)]);
+  const [input, setInput] = useState13(formatValue(initInput));
+  const [config, setConfig] = useState13(formatValue(initConfig));
+  const [output, setOutput] = useState13([formatValue(initOutput)]);
   useEffect10(() => {
     if (format3 && initInput) {
       const rawInput = formatValue(initInput);
@@ -2652,7 +2680,7 @@ function LiveCode({
     updateOutput(input, config, options || {});
   }, [input, config, options, updateOutput]);
   return /* @__PURE__ */ jsxs10(Grid, { columns: 3, className, rowHeight, children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(
       CodeBox,
       {
         label: labelInput,
@@ -2663,7 +2691,7 @@ function LiveCode({
         showFormat: !disableInput && language === "json"
       }
     ),
-    config && /* @__PURE__ */ jsx17(
+    config && /* @__PURE__ */ jsx16(
       CodeBox,
       {
         label: labelConfig,
@@ -2674,7 +2702,7 @@ function LiveCode({
         showFormat: !disableConfig && language === "json"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(
       CodeBox,
       {
         label: labelOutput,
@@ -2686,14 +2714,68 @@ function LiveCode({
   ] });
 }
 
+// src/components/organisms/collector-box.tsx
+import { useState as useState14, useEffect as useEffect11 } from "react";
+import { startFlow as startFlow4 } from "@walkeros/collector";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function CollectorBox({
+  event,
+  mapping,
+  destination,
+  label = "Result",
+  wordWrap = false
+}) {
+  const [output, setOutput] = useState14(
+    "// Click elements in the preview to see function call"
+  );
+  useEffect11(() => {
+    (async () => {
+      try {
+        const eventObj = JSON.parse(event);
+        const mappingObj = JSON.parse(mapping);
+        const { collector } = await startFlow4({
+          destinations: {
+            demo: {
+              code: destination,
+              config: {
+                mapping: mappingObj
+              },
+              env: {
+                elb: setOutput
+              }
+            }
+          }
+        });
+        await collector.push(eventObj);
+      } catch (error) {
+        if (error instanceof Error) {
+          setOutput(`// Error: ${error.message}`);
+        } else {
+          setOutput(`// Error: ${String(error)}`);
+        }
+      }
+    })();
+  }, [event, mapping, destination]);
+  return /* @__PURE__ */ jsx17(
+    CodeBox,
+    {
+      code: output,
+      language: "javascript",
+      disabled: true,
+      label,
+      wordWrap
+    }
+  );
+}
+
 // src/components/organisms/config-editor/config-editor-box.tsx
-import { useState as useState36, useMemo as useMemo5, useCallback as useCallback18 } from "react";
+import { useState as useState36, useMemo as useMemo6, useCallback as useCallback18 } from "react";
 
 // src/components/organisms/config-editor/config-editor-tabs.tsx
-import { useEffect as useEffect23, useState as useState35, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect24, useState as useState35, useMemo as useMemo5 } from "react";
 
 // src/hooks/useMappingState.ts
-import { useState as useState15, useCallback as useCallback12, useRef as useRef6 } from "react";
+import { useState as useState15, useCallback as useCallback12, useRef as useRef7 } from "react";
 
 // src/utils/mapping-path.ts
 function getValueAtPath(obj, path) {
@@ -2778,7 +2860,7 @@ function getParentPath(path) {
 // src/hooks/useMappingState.ts
 function useMappingState(initialMapping, onChange) {
   const [config, setConfig] = useState15(initialMapping);
-  const isCallingOnChange = useRef6(false);
+  const isCallingOnChange = useRef7(false);
   const updateConfig = useCallback12(
     (newConfig) => {
       setConfig(newConfig);
@@ -3609,7 +3691,7 @@ function MappingBreadcrumb({
 }
 
 // src/components/atoms/mapping-confirm-button.tsx
-import { useState as useState18, useEffect as useEffect11, useRef as useRef7 } from "react";
+import { useState as useState18, useEffect as useEffect12, useRef as useRef8 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var TrashIcon = () => /* @__PURE__ */ jsx19(
   "svg",
@@ -3636,8 +3718,8 @@ function MappingConfirmButton({
   className = ""
 }) {
   const [isConfirming, setIsConfirming] = useState18(false);
-  const buttonRef = useRef7(null);
-  useEffect11(() => {
+  const buttonRef = useRef8(null);
+  useEffect12(() => {
     if (!isConfirming) return;
     const handleClickOutside = (e) => {
       if (buttonRef.current && !buttonRef.current.contains(e.target)) {
@@ -3782,7 +3864,7 @@ function MappingNavigationHeader({
 }
 
 // src/components/molecules/config-tree-sidebar.tsx
-import { useState as useState19, useRef as useRef8, useEffect as useEffect12 } from "react";
+import { useState as useState19, useRef as useRef9, useEffect as useEffect13 } from "react";
 
 // src/components/atoms/mapping-input.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -3905,14 +3987,14 @@ function ConfigTreeNodeComponent({
   const [isAddingAction, setIsAddingAction] = useState19(false);
   const [newActionName, setNewActionName] = useState19("");
   const [actionExists, setActionExists] = useState19(false);
-  const inputRef = useRef8(null);
+  const inputRef = useRef9(null);
   const isEntityNode = node.type === "entity" && node.path.length === 2 && node.path[0] === "mapping";
-  useEffect12(() => {
+  useEffect13(() => {
     if (isAddingAction && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isAddingAction]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (isEntityNode && newActionName) {
       const exists = node.children?.some((child) => child.label === newActionName) ?? false;
       setActionExists(exists);
@@ -4079,13 +4161,13 @@ function ConfigTreeSidebar({
   const [isAddingEntity, setIsAddingEntity] = useState19(false);
   const [newEntityName, setNewEntityName] = useState19("");
   const [entityExists, setEntityExists] = useState19(false);
-  const entityInputRef = useRef8(null);
-  useEffect12(() => {
+  const entityInputRef = useRef9(null);
+  useEffect13(() => {
     if (isAddingEntity && entityInputRef.current) {
       entityInputRef.current.focus();
     }
   }, [isAddingEntity]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (newEntityName) {
       const mappingNode = tree.find((node) => node.key === "mapping");
       const exists = mappingNode?.children?.some((child) => child.label === newEntityName) ?? false;
@@ -4226,7 +4308,7 @@ function ConfigTreeSidebar({
 }
 
 // src/components/molecules/mapping-entity-pane.tsx
-import { useState as useState20, useEffect as useEffect13 } from "react";
+import { useState as useState20, useEffect as useEffect14 } from "react";
 
 // src/components/atoms/pane-header.tsx
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -4332,7 +4414,7 @@ function MappingEntityPane({
   const entity = path[0];
   const entityConfig = mappingState.actions.getValue([entity]);
   const actions = entityConfig && typeof entityConfig === "object" ? Object.keys(entityConfig).sort() : [];
-  useEffect13(() => {
+  useEffect14(() => {
     if (newActionName) {
       const exists = actions.includes(newActionName);
       setActionExists(exists);
@@ -5324,7 +5406,7 @@ function MappingKeyPaneView({
 }
 
 // src/components/molecules/mapping-function-pane-base.tsx
-import { useState as useState22, useEffect as useEffect14 } from "react";
+import { useState as useState22, useEffect as useEffect15 } from "react";
 
 // src/utils/code-normalizer.ts
 function normalizeCode(code) {
@@ -5347,7 +5429,7 @@ function MappingFunctionPaneBase({
   const value = mappingState.actions.getValue(path);
   const initialCode = typeof value === "string" ? value : defaultCode;
   const [code, setCode] = useState22(initialCode);
-  useEffect14(() => {
+  useEffect15(() => {
     const currentValue = mappingState.actions.getValue(path);
     const newCode = typeof currentValue === "string" ? currentValue : defaultCode;
     setCode(newCode);
@@ -5991,7 +6073,7 @@ function MappingBatchPaneView({
 }
 
 // src/components/molecules/mapping-consent-pane-view.tsx
-import { useState as useState23, useMemo as useMemo3 } from "react";
+import { useState as useState23, useMemo as useMemo4 } from "react";
 
 // src/components/atoms/consent-state-tile.tsx
 import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -6112,7 +6194,7 @@ function MappingConsentPaneView({
   const [newStateName, setNewStateName] = useState23("");
   const value = mappingState.actions.getValue(path);
   const currentConsent = value && typeof value === "object" ? value : {};
-  const discoveredStates = useMemo3(
+  const discoveredStates = useMemo4(
     () => scanMappingForConsentStates(mappingState.config),
     [mappingState.config]
   );
@@ -6151,7 +6233,7 @@ function MappingConsentPaneView({
       setNewStateName("");
     }
   };
-  const { title, description } = useMemo3(
+  const { title, description } = useMemo4(
     () => getPathDescription(path, mappingState.config),
     [path, mappingState.config]
   );
@@ -6577,7 +6659,7 @@ function MappingBooleanWidget(props) {
 }
 
 // src/components/atoms/mapping-consent.tsx
-import { useState as useState26, useEffect as useEffect15 } from "react";
+import { useState as useState26, useEffect as useEffect16 } from "react";
 
 // src/components/atoms/mapping-collapsible.tsx
 import { useState as useState25 } from "react";
@@ -6899,7 +6981,7 @@ function MappingConsentWidget(props) {
   const title = schema?.title || "Consent";
   const description = schema?.description;
   const [isExpanded, setIsExpanded] = useState26(hasConsent);
-  useEffect15(() => {
+  useEffect16(() => {
     setIsExpanded(hasConsent);
   }, [hasConsent]);
   const handleAddConsent = () => {
@@ -6981,7 +7063,7 @@ function MappingConsentWidget(props) {
 }
 
 // src/components/atoms/mapping-value.tsx
-import React15, { useState as useState27, useEffect as useEffect16 } from "react";
+import React15, { useState as useState27, useEffect as useEffect17 } from "react";
 
 // src/components/atoms/field-header.tsx
 import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -7061,7 +7143,7 @@ function MappingValueWidget(props) {
   const [selectedType, setSelectedType] = useState27(getCurrentType);
   const userSelectedTypeRef = React15.useRef(false);
   const prevValueRef = React15.useRef(value);
-  useEffect16(() => {
+  useEffect17(() => {
     const prevType = typeof prevValueRef.current;
     const currentType = typeof value;
     const isMajorTypeChange = prevType !== currentType || value === void 0 && prevValueRef.current !== void 0 || value !== void 0 && prevValueRef.current === void 0;
@@ -7908,7 +7990,7 @@ function MappingValidateField(props) {
 }
 
 // src/components/atoms/mapping-data.tsx
-import { useState as useState29, useEffect as useEffect17, useRef as useRef9, useCallback as useCallback15 } from "react";
+import { useState as useState29, useEffect as useEffect18, useRef as useRef10, useCallback as useCallback15 } from "react";
 
 // src/schemas/value-config-schema.ts
 var valueConfigSchema = {
@@ -8150,8 +8232,8 @@ function MappingDataWidget(props) {
   const description = schema?.description;
   const [showForm, setShowForm] = useState29(hasData);
   const [isExpanded, setIsExpanded] = useState29(hasData);
-  const prevValueRef = useRef9(value);
-  useEffect17(() => {
+  const prevValueRef = useRef10(value);
+  useEffect18(() => {
     const newHasData = value && typeof value === "object" && Object.keys(value).length > 0;
     setShowForm(!!newHasData);
     setIsExpanded(!!newHasData);
@@ -8234,7 +8316,7 @@ function MappingDataField(props) {
 }
 
 // src/components/atoms/mapping-settings.tsx
-import { useState as useState30, useEffect as useEffect18, useRef as useRef10, useCallback as useCallback16 } from "react";
+import { useState as useState30, useEffect as useEffect19, useRef as useRef11, useCallback as useCallback16 } from "react";
 import { jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
 function MappingSettingsWidget(props) {
   const {
@@ -8256,8 +8338,8 @@ function MappingSettingsWidget(props) {
   const hasSchema = destinationSchema && destinationSchema.properties && Object.keys(destinationSchema.properties).length > 0;
   const [showForm, setShowForm] = useState30(hasSettings);
   const [isExpanded, setIsExpanded] = useState30(hasSettings);
-  const prevValueRef = useRef10(value);
-  useEffect18(() => {
+  const prevValueRef = useRef11(value);
+  useEffect19(() => {
     const newHasSettings = value && typeof value === "object" && Object.keys(value).length > 0;
     setShowForm(!!newHasSettings);
     setIsExpanded(!!newHasSettings);
@@ -8415,7 +8497,7 @@ function MappingObjectExplorerField(props) {
 }
 
 // src/components/molecules/mapping-map-field.tsx
-import { useState as useState31, useEffect as useEffect19, useRef as useRef11 } from "react";
+import { useState as useState31, useEffect as useEffect20, useRef as useRef12 } from "react";
 
 // src/components/atoms/mapping-map-entry.tsx
 import { jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -8545,15 +8627,15 @@ function MappingMapField(props) {
   );
   const hasEntries = entries.length > 0;
   const [isExpanded, setIsExpanded] = useState31(hasEntries);
-  const prevFormDataRef = useRef11(formData);
-  useEffect19(() => {
+  const prevFormDataRef = useRef12(formData);
+  useEffect20(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
     prevFormDataRef.current = formData;
     setEntries(objectToEntries(formData));
   }, [formData]);
-  useEffect19(() => {
+  useEffect20(() => {
     setIsExpanded(hasEntries);
   }, [hasEntries]);
   const duplicateKeys = /* @__PURE__ */ new Set();
@@ -8640,7 +8722,7 @@ function MappingMapField(props) {
 }
 
 // src/components/molecules/mapping-set-field.tsx
-import { useState as useState32, useEffect as useEffect20, useRef as useRef12 } from "react";
+import { useState as useState32, useEffect as useEffect21, useRef as useRef13 } from "react";
 
 // src/components/atoms/mapping-set-entry.tsx
 import { jsx as jsx72, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -8774,8 +8856,8 @@ function MappingSetField(props) {
   );
   const hasEntries = entries.length > 0;
   const [isExpanded, setIsExpanded] = useState32(hasEntries);
-  const prevFormDataRef = useRef12(formData);
-  useEffect20(() => {
+  const prevFormDataRef = useRef13(formData);
+  useEffect21(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
@@ -8798,7 +8880,7 @@ function MappingSetField(props) {
     });
     setEntries(newEntries);
   }, [formData]);
-  useEffect20(() => {
+  useEffect21(() => {
     setIsExpanded(hasEntries);
   }, [hasEntries]);
   const handleEntriesChange = (newEntries) => {
@@ -8921,7 +9003,7 @@ function MappingSetField(props) {
 }
 
 // src/components/molecules/mapping-loop-field.tsx
-import { useState as useState33, useEffect as useEffect21, useRef as useRef13 } from "react";
+import { useState as useState33, useEffect as useEffect22, useRef as useRef14 } from "react";
 import { jsx as jsx74, jsxs as jsxs56 } from "react/jsx-runtime";
 function MappingLoopField(props) {
   const { formData, onChange, schema, disabled, readonly } = props;
@@ -8946,8 +9028,8 @@ function MappingLoopField(props) {
   );
   const [transform, setTransform] = useState33(() => parseFormData(formData)[1]);
   const [isExpanded, setIsExpanded] = useState33(false);
-  const prevFormDataRef = useRef13(formData);
-  useEffect21(() => {
+  const prevFormDataRef = useRef14(formData);
+  useEffect22(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
@@ -9321,7 +9403,7 @@ function MappingMapPaneViewRJSF({
 }
 
 // src/components/atoms/mapping-enum-select.tsx
-import { useState as useState34, useRef as useRef14, useEffect as useEffect22 } from "react";
+import { useState as useState34, useRef as useRef15, useEffect as useEffect23 } from "react";
 import { jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
 function MappingEnumSelect({
   value,
@@ -9335,19 +9417,19 @@ function MappingEnumSelect({
   const [highlightedIndex, setHighlightedIndex] = useState34(0);
   const [inputValue, setInputValue] = useState34(String(value || ""));
   const [hasTyped, setHasTyped] = useState34(false);
-  const containerRef = useRef14(null);
-  const inputRef = useRef14(null);
-  const dropdownRef = useRef14(null);
-  useEffect22(() => {
+  const containerRef = useRef15(null);
+  const inputRef = useRef15(null);
+  const dropdownRef = useRef15(null);
+  useEffect23(() => {
     setInputValue(String(value || ""));
     setHasTyped(false);
   }, [value]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (isOpen) {
       setHighlightedIndex(0);
     }
   }, [isOpen]);
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -9361,7 +9443,7 @@ function MappingEnumSelect({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen, hasTyped, inputValue, onChange, type]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (isOpen && dropdownRef.current && dropdownRef.current.children[highlightedIndex]) {
       const highlighted = dropdownRef.current.children[highlightedIndex];
       if (highlighted) {
@@ -10326,18 +10408,18 @@ function ConfigEditorTabs({
   });
   const treeState = useTreeState(initialNavigationState?.expandedPaths || [[]]);
   const [codeViewActive, setCodeViewActive] = useState35(false);
-  const configTree = useMemo4(
+  const configTree = useMemo5(
     () => buildTree(config, structure, schemas, sections),
     [config, structure, schemas, sections]
   );
-  const validationErrors = useMemo4(
+  const validationErrors = useMemo5(
     () => validateConfig(config, schemas),
     [config, schemas]
   );
   const activeTab = navigation.openTabs.find(
     (tab) => tab.id === navigation.activeTabId
   );
-  const currentCode = useMemo4(() => {
+  const currentCode = useMemo5(() => {
     if (!activeTab || activeTab.path.length === 0) {
       return JSON.stringify(config, null, 2);
     }
@@ -10365,7 +10447,7 @@ function ConfigEditorTabs({
     } catch (e) {
     }
   };
-  useEffect23(() => {
+  useEffect24(() => {
     if (navigation.navigationHistory.length === 0) {
       navigation.switchToTab("");
       if (initialNavigationState && initialNavigationState.currentPath.length > 0) {
@@ -10376,7 +10458,7 @@ function ConfigEditorTabs({
       }
     }
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     if (onNavigationStateChange && activeTab) {
       onNavigationStateChange({
         currentPath: activeTab.path,
@@ -10387,7 +10469,7 @@ function ConfigEditorTabs({
       });
     }
   }, [activeTab, treeState.expandedPaths, onNavigationStateChange]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (activeTab && activeTab.path.length > 0) {
       for (let i = 1; i <= activeTab.path.length; i++) {
         const pathToExpand = activeTab.path.slice(0, i);
@@ -10532,8 +10614,8 @@ function ConfigEditorBox({
 }) {
   const [activeTab, setActiveTab] = useState36(initialTab);
   const [persistedNavigationState, setPersistedNavigationState] = useState36(initialNavigationState || null);
-  const configJson = useMemo5(() => JSON.stringify(config, null, 2), [config]);
-  const buttons = useMemo5(
+  const configJson = useMemo6(() => JSON.stringify(config, null, 2), [config]);
+  const buttons = useMemo6(
     () => [
       {
         label: "Visual",
@@ -10607,7 +10689,7 @@ function ConfigEditor(props) {
 }
 
 // node_modules/@iconify/react/dist/iconify.js
-import { createElement, forwardRef, useState as useState37, useEffect as useEffect24 } from "react";
+import { createElement, forwardRef, useState as useState37, useEffect as useEffect25 } from "react";
 function getIconsTree(data, names) {
   const icons = data.icons;
   const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
@@ -11971,11 +12053,11 @@ function IconComponent(props) {
       }
     }
   }
-  useEffect24(() => {
+  useEffect25(() => {
     setMounted(true);
     return cleanup;
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (mounted) {
       updateState();
     }
@@ -15077,7 +15159,7 @@ function FlowSectionBox({ section }) {
 }
 
 // src/components/molecules/code-snippet.tsx
-import { useState as useState38, useEffect as useEffect25 } from "react";
+import { useState as useState38, useEffect as useEffect26 } from "react";
 import { jsx as jsx89 } from "react/jsx-runtime";
 function CodeSnippet(props) {
   const {
@@ -15093,7 +15175,7 @@ function CodeSnippet(props) {
   } = props;
   const snippetClassName = `elb-code-snippet ${className || ""}`.trim();
   const [formattedCode, setFormattedCode] = useState38(code);
-  useEffect25(() => {
+  useEffect26(() => {
     if (format3 && code) {
       formatCode(code, language).then(setFormattedCode);
     } else {
@@ -15117,7 +15199,7 @@ function CodeSnippet(props) {
 }
 
 // src/components/molecules/flow-map/FlowMap.tsx
-import React23, { useEffect as useEffect26, useRef as useRef15 } from "react";
+import React23, { useEffect as useEffect27, useRef as useRef16 } from "react";
 import rough from "roughjs";
 import { Fragment as Fragment11, jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
 function RoughRect({
@@ -15128,8 +15210,8 @@ function RoughRect({
   fill,
   stroke
 }) {
-  const ref = useRef15(null);
-  useEffect26(() => {
+  const ref = useRef16(null);
+  useEffect27(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15168,8 +15250,8 @@ function RoughCircle({
   fill,
   stroke
 }) {
-  const ref = useRef15(null);
-  useEffect26(() => {
+  const ref = useRef16(null);
+  useEffect27(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15226,8 +15308,8 @@ function RoughArrow({
   arrowSize = 8,
   centerY
 }) {
-  const ref = useRef15(null);
-  useEffect26(() => {
+  const ref = useRef16(null);
+  useEffect27(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15563,7 +15645,7 @@ function FlowMap({
       return aIdx - bIdx;
     }
   );
-  const containerRef = useRef15(null);
+  const containerRef = useRef16(null);
   const hasDescription = stageBefore?.description || sourceEntries.some(([, s]) => s.description) || preTransformerList.some((p) => p.config.description) || collector?.description || postTransformerList.some((p) => p.config.description) || destinationEntries.some(([, d]) => d.description) || stageAfter?.description || destinationEntries.some(([, d]) => d.after?.description);
   const hasLink = stageBefore?.link !== false || sourceEntries.some(([, s]) => s.link !== false) || preTransformerList.some((p) => p.config.link !== false) || collector?.link !== false || postTransformerList.some((p) => p.config.link !== false) || destinationEntries.some(([, d]) => d.link !== false) || stageAfter?.link !== false || destinationEntries.some(([, d]) => d.after?.link !== false);
   const stageMarkerPositions = [
@@ -15739,6 +15821,14 @@ function FlowMap({
     if (directDests.length === 1 && !hasChainOutput) {
       const destPos = stages[`destination-${directDests[0]}`];
       y = destPos ? destPos.y : stackedCenterY - boxHeight / 2;
+    } else if (directDests.length > 1 && !hasChainOutput) {
+      const destYPositions = directDests.map((d) => stages[`destination-${d}`]?.y).filter((pos2) => pos2 !== void 0);
+      if (destYPositions.length > 0) {
+        const avgY = destYPositions.reduce((sum, pos2) => sum + pos2, 0) / destYPositions.length;
+        y = avgY;
+      } else {
+        y = stackedCenterY - boxHeight / 2;
+      }
     } else {
       y = stackedCenterY - boxHeight / 2;
     }
@@ -15894,9 +15984,6 @@ function FlowMap({
                 if (destConfig.before && postTransformers?.[destConfig.before]) {
                   return stages[`post-${destConfig.before}`];
                 }
-                if (postTransformerList.length > 0) {
-                  return stages[`post-${postTransformerList[postTransformerList.length - 1].name}`];
-                }
                 return collectorPos;
               };
               return /* @__PURE__ */ jsxs67(Fragment11, { children: [