@walkeros/explorer 1.0.2 → 2.1.0

package/dist/index.mjs

@@ -5,13 +5,13 @@ import {
   loadPackageTypes,
   loadTypeLibraryFromURL,
   registerWalkerOSTypes
-} from "./chunk-VWWAIDNX.mjs";
+} from "./chunk-YKT4D7MG.mjs";
 
 // src/components/demos/MappingDemo.tsx
-import { useState as useState6, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+import { useState as useState6, useCallback as useCallback5, useEffect as useEffect5 } from "react";
 
 // src/components/molecules/code-box.tsx
-import { useState as useState4, useCallback as useCallback3 } from "react";
+import { useState as useState4, useCallback as useCallback3, useRef as useRef4, useEffect as useEffect3 } from "react";
 
 // src/components/atoms/box.tsx
 import { useState } from "react";
@@ -302,6 +302,7 @@ var palenightTheme = {
     "editorStickyScroll.border": "#676E9540",
     "editorStickyScrollHover.background": "#292d3e",
     "editorStickyScroll.shadow": "#00000000",
+    "editorStickyScrollGutter.background": "#292d3e",
     // Hover Widgets - Tooltips and hover information
     "editorHoverWidget.background": "#1e1e2e",
     "editorHoverWidget.border": "#676E95",
@@ -515,6 +516,7 @@ var lighthouseTheme = {
     "editorStickyScroll.border": "#E1E4E8",
     "editorStickyScrollHover.background": "#ffffff",
     "editorStickyScroll.shadow": "#00000000",
+    "editorStickyScrollGutter.background": "#ffffff",
     // Hover Widgets - Tooltips and hover information
     "editorHoverWidget.background": "#F6F8FA",
     "editorHoverWidget.border": "#E1E4E8",
@@ -577,10 +579,14 @@ var DATA_ELB_PATTERNS = [
   // data-elb (not followed by hyphen)
   /\bdata-elbaction\b/g,
   // data-elbaction
+  /\bdata-elbactions\b/g,
+  // data-elbactions
   /\bdata-elbglobals\b/g,
   // data-elbglobals
   /\bdata-elbcontext\b/g,
   // data-elbcontext
+  /\bdata-elblink\b/g,
+  // data-elblink
   /\bdata-elb-[\w-]+\b/g
   // data-elb-* (property attributes)
 ];
@@ -764,6 +770,35 @@ function registerFormatters(monacoInstance) {
   });
 }
 
+// src/utils/monaco-json-schema.ts
+import { json } from "monaco-editor";
+var schemaRegistry = /* @__PURE__ */ new Map();
+var idCounter = 0;
+function generateModelPath() {
+  return `inmemory://walkeros/json-${++idCounter}.json`;
+}
+function registerJsonSchema(modelPath, schema) {
+  schemaRegistry.set(modelPath, {
+    uri: `schema://walkeros/${modelPath}`,
+    fileMatch: [modelPath],
+    schema
+  });
+  applySchemas();
+}
+function unregisterJsonSchema(modelPath) {
+  schemaRegistry.delete(modelPath);
+  applySchemas();
+}
+function applySchemas() {
+  json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    schemaValidation: "error",
+    schemaRequest: "ignore",
+    enableSchemaRequest: false,
+    schemas: Array.from(schemaRegistry.values())
+  });
+}
+
 // src/hooks/useMonacoHeight.ts
 import { useState as useState2, useRef as useRef2, useCallback } from "react";
 function useMonacoHeight({
@@ -840,6 +875,7 @@ function Code({
   onChange,
   disabled = false,
   lineNumbers = false,
+  minimap = false,
   folding = false,
   wordWrap = false,
   className,
@@ -849,8 +885,10 @@ function Code({
   fontSize = 13,
   packages,
   sticky = true,
-  ide = false
+  ide = false,
+  jsonSchema
 }) {
+  const [isMounted, setIsMounted] = useState3(false);
   const [monacoTheme, setMonacoTheme] = useState3("vs-light");
   const decorationsCleanupRef = useRef3(null);
   const monacoRef = useRef3(null);
@@ -888,6 +926,7 @@ function Code({
     registerDataElbStyles();
   }, []);
   const getDataTheme = useCallback2(() => {
+    if (typeof document === "undefined") return null;
     if (containerRef.current) {
       const closest = containerRef.current.closest("[data-theme]");
       if (closest) {
@@ -897,6 +936,10 @@ function Code({
     return document.documentElement.getAttribute("data-theme");
   }, []);
   useEffect2(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect2(() => {
+    if (!isMounted) return;
     const checkTheme = () => {
       const dataTheme = getDataTheme();
       const isDark = dataTheme === "dark" || dataTheme === null && window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -920,7 +963,7 @@ function Code({
       observer.disconnect();
       mediaQuery.removeEventListener("change", handleChange2);
     };
-  }, [getDataTheme]);
+  }, [isMounted, getDataTheme]);
   useEffect2(() => {
     const editor = editorRef.current;
     const container = containerRef.current;
@@ -935,6 +978,19 @@ function Code({
       resizeObserver.disconnect();
     };
   }, []);
+  const modelPathRef = useRef3(null);
+  if (jsonSchema && !modelPathRef.current) {
+    modelPathRef.current = generateModelPath();
+  }
+  useEffect2(() => {
+    if (!jsonSchema || !modelPathRef.current) return;
+    registerJsonSchema(modelPathRef.current, jsonSchema);
+    return () => {
+      if (modelPathRef.current) {
+        unregisterJsonSchema(modelPathRef.current);
+      }
+    };
+  }, [jsonSchema]);
   const handleChange = (value) => {
     if (onChange && value !== void 0) {
       onChange(value);
@@ -942,15 +998,11 @@ function Code({
   };
   const handleBeforeMount = async (monaco) => {
     monacoRef.current = monaco;
-    if (beforeMount) {
-      beforeMount(monaco);
-      return;
-    }
     registerAllThemes(monaco);
     registerFormatters(monaco);
     if (packages && packages.length > 0) {
       registerWalkerOSTypes(monaco);
-      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-4FIH5OVX.mjs");
+      const { loadPackageTypes: loadPackageTypes2 } = await import("./monaco-types-OLSF6MIE.mjs");
       for (const pkg of packages) {
         if (pkg !== "@walkeros/core") {
           await loadPackageTypes2(monaco, { package: pkg }).catch(() => {
@@ -962,6 +1014,9 @@ function Code({
     const isDark = dataTheme === "dark" || dataTheme === null && window.matchMedia("(prefers-color-scheme: dark)").matches;
     const themeName = isDark ? "elbTheme-dark" : "elbTheme-light";
     monaco.editor.setTheme(themeName);
+    if (beforeMount) {
+      beforeMount(monaco);
+    }
   };
   const MonacoEditor = Editor;
   const handleEditorMount = (monacoEditor) => {
@@ -1002,10 +1057,11 @@ function Code({
       beforeMount: handleBeforeMount,
       onMount: handleEditorMount,
       theme: monacoTheme,
+      path: modelPathRef.current || void 0,
       options: {
         readOnly: disabled || !onChange,
         readOnlyMessage: { value: "" },
-        minimap: { enabled: false },
+        minimap: { enabled: minimap },
         fontSize,
         lineHeight: Math.round(fontSize * 1.5),
         padding: 0,
@@ -1024,8 +1080,8 @@ function Code({
         fixedOverflowWidgets: true,
         overviewRulerLanes: 0,
         renderLineHighlight: "none",
-        renderValidationDecorations: ide ? "editable" : "off",
-        hover: { enabled: ide },
+        renderValidationDecorations: ide || jsonSchema ? "editable" : "off",
+        hover: { enabled: ide || !!jsonSchema },
         "semanticHighlighting.enabled": ide,
         showDeprecated: ide,
         showUnused: ide,
@@ -1059,8 +1115,7 @@ function Code({
         // Don't select line when clicking line numbers
         wordBasedSuggestions: "off",
         // Reduce auto-completion interference
-        quickSuggestions: false,
-        // Disable quick suggestions popup
+        quickSuggestions: jsonSchema ? { strings: true, other: true, comments: false } : false,
         stickyScroll: { enabled: sticky }
       }
     }
@@ -1068,7 +1123,7 @@ function Code({
 }
 
 // src/components/molecules/code-box.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CodeBox({
   // Code props (single code mode)
   code,
@@ -1088,8 +1143,9 @@ function CodeBox({
   // Visual
   showTrafficLights = false,
   // Actions
-  showCopy = false,
+  showCopy = true,
   showFormat = false,
+  showSettings = false,
   // Layout
   footer,
   height,
@@ -1098,6 +1154,24 @@ function CodeBox({
   ...codeProps
 }) {
   const [copied, setCopied] = useState4(false);
+  const [showSettingsPanel, setShowSettingsPanel] = useState4(false);
+  const [settings, setSettings] = useState4({
+    lineNumbers: false,
+    minimap: false,
+    wordWrap: false,
+    sticky: true
+  });
+  const settingsRef = useRef4(null);
+  useEffect3(() => {
+    if (!showSettingsPanel) return;
+    const handleClickOutside = (e) => {
+      if (settingsRef.current && !settingsRef.current.contains(e.target)) {
+        setShowSettingsPanel(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showSettingsPanel]);
   const [currentTabId, setCurrentTabId] = useState4(
     controlledActiveTab ?? defaultTab ?? tabs?.[0]?.id ?? ""
   );
@@ -1130,7 +1204,13 @@ function CodeBox({
     } catch (e) {
     }
   };
-  const actions = /* @__PURE__ */ jsxs3(Fragment, { children: [
+  const settingsProps = {
+    lineNumbers: settings.lineNumbers,
+    minimap: settings.minimap,
+    wordWrap: settings.wordWrap,
+    sticky: settings.sticky
+  };
+  const actions = /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
     showFormat && !disabled && currentLanguage === "json" && /* @__PURE__ */ jsx4(
       "button",
       {
@@ -1149,8 +1229,10 @@ function CodeBox({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx4("polyline", { points: "16 18 22 12 16 6" }),
-              /* @__PURE__ */ jsx4("polyline", { points: "8 6 2 12 8 18" })
+              /* @__PURE__ */ jsx4("line", { x1: "3", y1: "5", x2: "16", y2: "5" }),
+              /* @__PURE__ */ jsx4("line", { x1: "7", y1: "10", x2: "20", y2: "10" }),
+              /* @__PURE__ */ jsx4("line", { x1: "7", y1: "15", x2: "18", y2: "15" }),
+              /* @__PURE__ */ jsx4("line", { x1: "3", y1: "20", x2: "12", y2: "20" })
             ]
           }
         )
@@ -1193,7 +1275,80 @@ function CodeBox({
           }
         )
       }
-    )
+    ),
+    showSettings && /* @__PURE__ */ jsxs3("div", { ref: settingsRef, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          className: `elb-explorer-btn${showSettingsPanel ? " active" : ""}`,
+          onClick: () => setShowSettingsPanel(!showSettingsPanel),
+          title: "Editor settings",
+          children: /* @__PURE__ */ jsxs3(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+              ]
+            }
+          )
+        }
+      ),
+      showSettingsPanel && /* @__PURE__ */ jsxs3("div", { className: "elb-codebox-settings", children: [
+        /* @__PURE__ */ jsxs3("label", { className: "elb-codebox-settings-option", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              checked: settings.lineNumbers,
+              onChange: () => setSettings((s) => ({ ...s, lineNumbers: !s.lineNumbers }))
+            }
+          ),
+          "Line numbers"
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { className: "elb-codebox-settings-option", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              checked: settings.minimap,
+              onChange: () => setSettings((s) => ({ ...s, minimap: !s.minimap }))
+            }
+          ),
+          "Minimap"
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { className: "elb-codebox-settings-option", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              checked: settings.wordWrap,
+              onChange: () => setSettings((s) => ({ ...s, wordWrap: !s.wordWrap }))
+            }
+          ),
+          "Word wrap"
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { className: "elb-codebox-settings-option", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              checked: settings.sticky,
+              onChange: () => setSettings((s) => ({ ...s, sticky: !s.sticky }))
+            }
+          ),
+          "Sticky scroll"
+        ] })
+      ] })
+    ] })
   ] });
   const autoHeightClass = autoHeight ? "elb-box--auto-height" : "";
   const boxClassName = `${autoHeightClass} ${className || ""}`.trim();
@@ -1208,7 +1363,8 @@ function CodeBox({
         onChange,
         disabled,
         autoHeight,
-        ...codeProps
+        ...codeProps,
+        ...settingsProps
       }
     )
   }));
@@ -1235,7 +1391,8 @@ function CodeBox({
           onChange,
           disabled,
           autoHeight,
-          ...codeProps
+          ...codeProps,
+          ...settingsProps
         }
       )
     }
@@ -1244,9 +1401,9 @@ function CodeBox({
 
 // src/components/atoms/grid.tsx
 import {
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState5,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useCallback as useCallback4,
   useMemo
 } from "react";
@@ -1261,11 +1418,11 @@ function Grid({
   showScrollButtons = true,
   className = ""
 }) {
-  const gridRef = useRef4(null);
+  const gridRef = useRef5(null);
   const [canScrollLeft, setCanScrollLeft] = useState5(false);
   const [canScrollRight, setCanScrollRight] = useState5(false);
   const [boxHeights, setBoxHeights] = useState5(/* @__PURE__ */ new Map());
-  const boxIdCounter = useRef4(0);
+  const boxIdCounter = useRef5(0);
   const getBoxId = useCallback4(() => boxIdCounter.current++, []);
   const registerBox = useCallback4((id, height) => {
     setBoxHeights((prev) => {
@@ -1338,7 +1495,7 @@ function Grid({
     const scrollAmount = gridRef.current.clientWidth * 0.8;
     gridRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
   };
-  useEffect3(() => {
+  useEffect4(() => {
     const el = gridRef.current;
     if (!el || !showScrollButtons) return;
     updateScrollState();
@@ -1401,7 +1558,7 @@ function MappingDemo({
       );
     }
   }, [input, config, fn]);
-  useEffect4(() => {
+  useEffect5(() => {
     const timeoutId = setTimeout(updateOutput, 500);
     return () => clearTimeout(timeoutId);
   }, [updateOutput]);
@@ -1442,7 +1599,7 @@ function MappingDemo({
 }
 
 // src/components/demos/MappingCode.tsx
-import { useState as useState7, useCallback as useCallback6, useEffect as useEffect5 } from "react";
+import { useState as useState7, useCallback as useCallback6, useEffect as useEffect6 } from "react";
 import { getMappingEvent, getMappingValue, createEvent } from "@walkeros/core";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function MappingCode({
@@ -1475,7 +1632,7 @@ function MappingCode({
       );
     }
   }, [input, config]);
-  useEffect5(() => {
+  useEffect6(() => {
     const timeoutId = setTimeout(executeCode, 500);
     return () => clearTimeout(timeoutId);
   }, [executeCode]);
@@ -1494,7 +1651,7 @@ function MappingCode({
 }
 
 // src/components/demos/DestinationDemo.tsx
-import { useState as useState8, useCallback as useCallback7, useEffect as useEffect6 } from "react";
+import { useState as useState8, useCallback as useCallback7, useEffect as useEffect7 } from "react";
 import {
   createEvent as createEvent2,
   tryCatchAsync,
@@ -1623,7 +1780,7 @@ function DestinationDemo({
       (error) => setOutput(`Error: ${error}`)
     )();
   }, [eventInput, mappingInput, destination, settings, generic, fn]);
-  useEffect6(() => {
+  useEffect7(() => {
     const timeoutId = setTimeout(executeDestination, 500);
     return () => clearTimeout(timeoutId);
   }, [executeDestination]);
@@ -1664,7 +1821,7 @@ function DestinationDemo({
 }
 
 // src/components/demos/DestinationInitDemo.tsx
-import { useState as useState9, useCallback as useCallback8, useEffect as useEffect7 } from "react";
+import { useState as useState9, useCallback as useCallback8, useEffect as useEffect8 } from "react";
 import { tryCatchAsync as tryCatchAsync2 } from "@walkeros/core";
 import { startFlow as startFlow2 } from "@walkeros/collector";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1705,7 +1862,7 @@ function DestinationInitDemo({
       (error) => setOutput(`Error: ${error}`)
     )();
   }, [settingsInput, destination]);
-  useEffect7(() => {
+  useEffect8(() => {
     const timeoutId = setTimeout(executeInit, 500);
     return () => clearTimeout(timeoutId);
   }, [executeInit]);
@@ -1737,15 +1894,15 @@ function DestinationInitDemo({
 // src/components/demos/PromotionPlayground.tsx
 import {
   useState as useState12,
-  useEffect as useEffect9,
-  useRef as useRef6,
+  useEffect as useEffect10,
+  useRef as useRef7,
   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 { useState as useState10, useEffect as useEffect9, useRef as useRef6, useCallback as useCallback9 } from "react";
 import {
   sourceBrowser
 } from "@walkeros/web-source-browser";
@@ -1784,11 +1941,11 @@ function Preview({
   label = "Preview"
 }) {
   const [highlights, setHighlights] = useState10(/* @__PURE__ */ new Set());
-  const iframeRef = useRef5(null);
-  const updateTimeoutRef = useRef5(void 0);
-  const elbRef = useRef5(elb);
-  const sourceRef = useRef5(null);
-  useEffect8(() => {
+  const iframeRef = useRef6(null);
+  const updateTimeoutRef = useRef6(void 0);
+  const elbRef = useRef6(elb);
+  const sourceRef = useRef6(null);
+  useEffect9(() => {
     elbRef.current = elb;
   }, [elb]);
   const toggleHighlight = (type) => {
@@ -1816,7 +1973,7 @@ function Preview({
     },
     []
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (updateTimeoutRef.current) {
       clearTimeout(updateTimeoutRef.current);
     }
@@ -1936,7 +2093,6 @@ function Preview({
               config: {
                 settings: {
                   pageview: false,
-                  session: false,
                   prefix: "data-elb",
                   elb: "elb",
                   elbLayer: "elbLayer",
@@ -2423,11 +2579,11 @@ function PromotionPlayground({
   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 collectorRef = useRef7(null);
+  const elbRef = useRef7(null);
+  const lastEventRef = useRef7(null);
   const [isReady, setIsReady] = useState12(false);
-  useEffect9(() => {
+  useEffect10(() => {
     let mounted = true;
     const init = async () => {
       try {
@@ -2553,7 +2709,7 @@ function PromotionPlayground({
 }
 
 // src/components/organisms/live-code.tsx
-import { useState as useState13, useEffect as useEffect10, useCallback as useCallback11 } from "react";
+import { useState as useState13, useEffect as useEffect11, useCallback as useCallback11 } from "react";
 import { debounce, isString, tryCatchAsync as tryCatchAsync3 } from "@walkeros/core";
 
 // src/utils/format-code.ts
@@ -2567,15 +2723,21 @@ async function formatCode(code, language) {
     let formatted;
     switch (language) {
       case "javascript":
-      case "js":
-        formatted = await prettier2.format(code, {
+      case "js": {
+        const isBareObject = code.trimStart().startsWith("{") && code.includes("\n");
+        const input = isBareObject ? `(${code})` : code;
+        formatted = await prettier2.format(input, {
           parser: "babel",
           plugins: [prettierBabel2, prettierEstree2],
           semi: true,
           singleQuote: true,
           trailingComma: "all"
         });
+        if (isBareObject) {
+          formatted = formatted.replace(/^\(/, "").replace(/\);?\s*$/, "");
+        }
         break;
+      }
       case "typescript":
       case "ts":
       case "tsx":
@@ -2643,13 +2805,13 @@ function LiveCode({
   const [input, setInput] = useState13(formatValue(initInput));
   const [config, setConfig] = useState13(formatValue(initConfig));
   const [output, setOutput] = useState13([formatValue(initOutput)]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (format3 && initInput) {
       const rawInput = formatValue(initInput);
       formatCode(rawInput, language).then(setInput);
     }
   }, [initInput, language, format3]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (format3 && initConfig) {
       const rawConfig = formatValue(initConfig);
       formatCode(rawConfig, language).then(setConfig);
@@ -2676,7 +2838,7 @@ function LiveCode({
     ),
     [fn, log]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     updateOutput(input, config, options || {});
   }, [input, config, options, updateOutput]);
   return /* @__PURE__ */ jsxs10(Grid, { columns: 3, className, rowHeight, children: [
@@ -2715,7 +2877,7 @@ function LiveCode({
 }
 
 // src/components/organisms/collector-box.tsx
-import { useState as useState14, useEffect as useEffect11 } from "react";
+import { useState as useState14, useEffect as useEffect12 } from "react";
 import { startFlow as startFlow4 } from "@walkeros/collector";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function CollectorBox({
@@ -2728,7 +2890,7 @@ function CollectorBox({
   const [output, setOutput] = useState14(
     "// Click elements in the preview to see function call"
   );
-  useEffect11(() => {
+  useEffect12(() => {
     (async () => {
       try {
         const eventObj = JSON.parse(event);
@@ -2772,10 +2934,10 @@ function CollectorBox({
 import { useState as useState36, useMemo as useMemo6, useCallback as useCallback18 } from "react";
 
 // src/components/organisms/config-editor/config-editor-tabs.tsx
-import { useEffect as useEffect24, useState as useState35, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect25, useState as useState35, useMemo as useMemo5 } from "react";
 
 // src/hooks/useMappingState.ts
-import { useState as useState15, useCallback as useCallback12, useRef as useRef7 } from "react";
+import { useState as useState15, useCallback as useCallback12, useRef as useRef8 } from "react";
 
 // src/utils/mapping-path.ts
 function getValueAtPath(obj, path) {
@@ -2860,7 +3022,7 @@ function getParentPath(path) {
 // src/hooks/useMappingState.ts
 function useMappingState(initialMapping, onChange) {
   const [config, setConfig] = useState15(initialMapping);
-  const isCallingOnChange = useRef7(false);
+  const isCallingOnChange = useRef8(false);
   const updateConfig = useCallback12(
     (newConfig) => {
       setConfig(newConfig);
@@ -3643,7 +3805,7 @@ function useTreeState(initialExpanded = [[]]) {
 }
 
 // src/components/atoms/mapping-breadcrumb.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function MappingBreadcrumb({
   segments,
   onNavigate,
@@ -3662,7 +3824,7 @@ function MappingBreadcrumb({
           "li",
           {
             className: "elb-mapping-breadcrumb-item",
-            children: isClickable ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+            children: isClickable ? /* @__PURE__ */ jsxs11(Fragment, { children: [
               /* @__PURE__ */ jsx18(
                 "button",
                 {
@@ -3691,7 +3853,7 @@ function MappingBreadcrumb({
 }
 
 // src/components/atoms/mapping-confirm-button.tsx
-import { useState as useState18, useEffect as useEffect12, useRef as useRef8 } from "react";
+import { useState as useState18, useEffect as useEffect13, useRef as useRef9 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var TrashIcon = () => /* @__PURE__ */ jsx19(
   "svg",
@@ -3718,8 +3880,8 @@ function MappingConfirmButton({
   className = ""
 }) {
   const [isConfirming, setIsConfirming] = useState18(false);
-  const buttonRef = useRef8(null);
-  useEffect12(() => {
+  const buttonRef = useRef9(null);
+  useEffect13(() => {
     if (!isConfirming) return;
     const handleClickOutside = (e) => {
       if (buttonRef.current && !buttonRef.current.contains(e.target)) {
@@ -3864,7 +4026,7 @@ function MappingNavigationHeader({
 }
 
 // src/components/molecules/config-tree-sidebar.tsx
-import { useState as useState19, useRef as useRef9, useEffect as useEffect13 } from "react";
+import { useState as useState19, useRef as useRef10, useEffect as useEffect14 } from "react";
 
 // src/components/atoms/mapping-input.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -3987,14 +4149,14 @@ function ConfigTreeNodeComponent({
   const [isAddingAction, setIsAddingAction] = useState19(false);
   const [newActionName, setNewActionName] = useState19("");
   const [actionExists, setActionExists] = useState19(false);
-  const inputRef = useRef9(null);
+  const inputRef = useRef10(null);
   const isEntityNode = node.type === "entity" && node.path.length === 2 && node.path[0] === "mapping";
-  useEffect13(() => {
+  useEffect14(() => {
     if (isAddingAction && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isAddingAction]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (isEntityNode && newActionName) {
       const exists = node.children?.some((child) => child.label === newActionName) ?? false;
       setActionExists(exists);
@@ -4161,13 +4323,13 @@ function ConfigTreeSidebar({
   const [isAddingEntity, setIsAddingEntity] = useState19(false);
   const [newEntityName, setNewEntityName] = useState19("");
   const [entityExists, setEntityExists] = useState19(false);
-  const entityInputRef = useRef9(null);
-  useEffect13(() => {
+  const entityInputRef = useRef10(null);
+  useEffect14(() => {
     if (isAddingEntity && entityInputRef.current) {
       entityInputRef.current.focus();
     }
   }, [isAddingEntity]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (newEntityName) {
       const mappingNode = tree.find((node) => node.key === "mapping");
       const exists = mappingNode?.children?.some((child) => child.label === newEntityName) ?? false;
@@ -4308,7 +4470,7 @@ function ConfigTreeSidebar({
 }
 
 // src/components/molecules/mapping-entity-pane.tsx
-import { useState as useState20, useEffect as useEffect14 } from "react";
+import { useState as useState20, useEffect as useEffect15 } from "react";
 
 // src/components/atoms/pane-header.tsx
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -4414,7 +4576,7 @@ function MappingEntityPane({
   const entity = path[0];
   const entityConfig = mappingState.actions.getValue([entity]);
   const actions = entityConfig && typeof entityConfig === "object" ? Object.keys(entityConfig).sort() : [];
-  useEffect14(() => {
+  useEffect15(() => {
     if (newActionName) {
       const exists = actions.includes(newActionName);
       setActionExists(exists);
@@ -5406,7 +5568,7 @@ function MappingKeyPaneView({
 }
 
 // src/components/molecules/mapping-function-pane-base.tsx
-import { useState as useState22, useEffect as useEffect15 } from "react";
+import { useState as useState22, useEffect as useEffect16 } from "react";
 
 // src/utils/code-normalizer.ts
 function normalizeCode(code) {
@@ -5429,7 +5591,7 @@ function MappingFunctionPaneBase({
   const value = mappingState.actions.getValue(path);
   const initialCode = typeof value === "string" ? value : defaultCode;
   const [code, setCode] = useState22(initialCode);
-  useEffect15(() => {
+  useEffect16(() => {
     const currentValue = mappingState.actions.getValue(path);
     const newCode = typeof currentValue === "string" ? currentValue : defaultCode;
     setCode(newCode);
@@ -5508,7 +5670,7 @@ function MappingFunctionPaneBase({
 }
 
 // src/components/molecules/mapping-condition-pane-view.tsx
-import { Fragment as Fragment3, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx35 } from "react/jsx-runtime";
 var DEFAULT_CONDITION = `(
   value: WalkerOS.DeepPartialEvent | unknown,
   mapping: Mapping.Value,
@@ -5553,15 +5715,15 @@ var HELP_SECTIONS = [
     examples: [
       {
         label: "Only for high-value orders:",
-        code: /* @__PURE__ */ jsx35(Fragment3, { children: "(value) => value.data?.total > 100" })
+        code: /* @__PURE__ */ jsx35(Fragment2, { children: "(value) => value.data?.total > 100" })
       },
       {
         label: "Only for specific user segment:",
-        code: /* @__PURE__ */ jsx35(Fragment3, { children: "(value) => value.user?.segment === 'premium'" })
+        code: /* @__PURE__ */ jsx35(Fragment2, { children: "(value) => value.user?.segment === 'premium'" })
       },
       {
         label: "Only during business hours:",
-        code: /* @__PURE__ */ jsx35(Fragment3, { children: "() => new Date().getHours() >= 9 && new Date().getHours() < 17" })
+        code: /* @__PURE__ */ jsx35(Fragment2, { children: "() => new Date().getHours() >= 9 && new Date().getHours() < 17" })
       }
     ]
   }
@@ -5581,7 +5743,7 @@ function MappingConditionPaneView(props) {
 }
 
 // src/components/molecules/mapping-fn-pane-view.tsx
-import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var DEFAULT_FN = `(
   value: WalkerOS.DeepPartialEvent | unknown,
   mapping: Mapping.Value,
@@ -5632,11 +5794,11 @@ var HELP_SECTIONS2 = [
     examples: [
       {
         label: "Extract nested property:",
-        code: /* @__PURE__ */ jsx36(Fragment4, { children: "(value) => value.data?.product?.id" })
+        code: /* @__PURE__ */ jsx36(Fragment3, { children: "(value) => value.data?.product?.id" })
       },
       {
         label: "Format currency:",
-        code: /* @__PURE__ */ jsxs26(Fragment4, { children: [
+        code: /* @__PURE__ */ jsxs26(Fragment3, { children: [
           "(value) => {",
           "\n",
           "  ",
@@ -5650,11 +5812,11 @@ var HELP_SECTIONS2 = [
       },
       {
         label: "Combine multiple fields:",
-        code: /* @__PURE__ */ jsx36(Fragment4, { children: "(value) => `${value.data?.firstName} ${value.data?.lastName}`" })
+        code: /* @__PURE__ */ jsx36(Fragment3, { children: "(value) => `${value.data?.firstName} ${value.data?.lastName}`" })
       },
       {
         label: "Conditional transformation with consent:",
-        code: /* @__PURE__ */ jsxs26(Fragment4, { children: [
+        code: /* @__PURE__ */ jsxs26(Fragment3, { children: [
           "(value, mapping, options) => {",
           "\n",
           "  ",
@@ -5674,7 +5836,7 @@ var HELP_SECTIONS2 = [
       },
       {
         label: "Use collector for context:",
-        code: /* @__PURE__ */ jsxs26(Fragment4, { children: [
+        code: /* @__PURE__ */ jsxs26(Fragment3, { children: [
           "(value, mapping, options) => {",
           "\n",
           "  ",
@@ -5713,7 +5875,7 @@ function MappingFnPaneView(props) {
 }
 
 // src/components/molecules/mapping-validate-pane-view.tsx
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var DEFAULT_VALIDATE = `(
   value: unknown
 ): boolean | Promise<boolean> => {
@@ -5753,19 +5915,19 @@ var HELP_SECTIONS3 = [
     examples: [
       {
         label: "Exclude empty values:",
-        code: /* @__PURE__ */ jsx37(Fragment5, { children: "(value) => value !== undefined && value !== null && value !== ''" })
+        code: /* @__PURE__ */ jsx37(Fragment4, { children: "(value) => value !== undefined && value !== null && value !== ''" })
       },
       {
         label: "Only include valid email addresses:",
-        code: /* @__PURE__ */ jsx37(Fragment5, { children: "(value) => typeof value === 'string' && /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)" })
+        code: /* @__PURE__ */ jsx37(Fragment4, { children: "(value) => typeof value === 'string' && /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)" })
       },
       {
         label: "Only include positive numbers:",
-        code: /* @__PURE__ */ jsx37(Fragment5, { children: "(value) => typeof value === 'number' && value > 0" })
+        code: /* @__PURE__ */ jsx37(Fragment4, { children: "(value) => typeof value === 'number' && value > 0" })
       },
       {
         label: "Validate URL format:",
-        code: /* @__PURE__ */ jsxs27(Fragment5, { children: [
+        code: /* @__PURE__ */ jsxs27(Fragment4, { children: [
           "(value) => {",
           "\n",
           "  ",
@@ -5791,7 +5953,7 @@ var HELP_SECTIONS3 = [
       },
       {
         label: "Exclude specific values:",
-        code: /* @__PURE__ */ jsx37(Fragment5, { children: "(value) => !['test', 'localhost', 'example.com'].includes(value)" })
+        code: /* @__PURE__ */ jsx37(Fragment4, { children: "(value) => !['test', 'localhost', 'example.com'].includes(value)" })
       }
     ]
   }
@@ -5904,7 +6066,7 @@ function validateValue(value, schema) {
 }
 
 // src/components/molecules/mapping-name-pane-view.tsx
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function MappingNamePaneView({
   path,
   mappingState,
@@ -5948,7 +6110,7 @@ function MappingNamePaneView({
           ),
           /* @__PURE__ */ jsxs28("div", { className: "elb-mapping-pane-hint", children: [
             uiSchema?.["ui:help"] || "This string will be sent to the destination instead of the default entity-action name. Leave empty to use default.",
-            hasError && validationResult.error && /* @__PURE__ */ jsxs28(Fragment6, { children: [
+            hasError && validationResult.error && /* @__PURE__ */ jsxs28(Fragment5, { children: [
               /* @__PURE__ */ jsx38("br", {}),
               /* @__PURE__ */ jsxs28("span", { style: { color: "var(--color-button-danger)" }, children: [
                 "\u26A0 ",
@@ -5984,7 +6146,7 @@ function MappingNamePaneView({
 }
 
 // src/components/molecules/mapping-batch-pane-view.tsx
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function MappingBatchPaneView({
   path,
   mappingState,
@@ -6033,7 +6195,7 @@ function MappingBatchPaneView({
           ),
           /* @__PURE__ */ jsxs29("div", { className: "elb-mapping-pane-hint", children: [
             uiSchema?.["ui:help"] || "Events will be collected and sent in batches. Use time (ms) for timed batches or count for event-based batches. Leave empty to disable batching.",
-            hasError && validationResult.error && /* @__PURE__ */ jsxs29(Fragment7, { children: [
+            hasError && validationResult.error && /* @__PURE__ */ jsxs29(Fragment6, { children: [
               /* @__PURE__ */ jsx39("br", {}),
               /* @__PURE__ */ jsxs29("span", { style: { color: "var(--color-button-danger)" }, children: [
                 "\u26A0 ",
@@ -6659,7 +6821,7 @@ function MappingBooleanWidget(props) {
 }
 
 // src/components/atoms/mapping-consent.tsx
-import { useState as useState26, useEffect as useEffect16 } from "react";
+import { useState as useState26, useEffect as useEffect17 } from "react";
 
 // src/components/atoms/mapping-collapsible.tsx
 import { useState as useState25 } from "react";
@@ -6981,7 +7143,7 @@ function MappingConsentWidget(props) {
   const title = schema?.title || "Consent";
   const description = schema?.description;
   const [isExpanded, setIsExpanded] = useState26(hasConsent);
-  useEffect16(() => {
+  useEffect17(() => {
     setIsExpanded(hasConsent);
   }, [hasConsent]);
   const handleAddConsent = () => {
@@ -7063,10 +7225,10 @@ function MappingConsentWidget(props) {
 }
 
 // src/components/atoms/mapping-value.tsx
-import React15, { useState as useState27, useEffect as useEffect17 } from "react";
+import React15, { useState as useState27, useEffect as useEffect18 } from "react";
 
 // src/components/atoms/field-header.tsx
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 function FieldHeader({
   title,
   description,
@@ -7085,7 +7247,7 @@ function FieldHeader({
       action
     ] });
   }
-  return /* @__PURE__ */ jsxs41(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs41(Fragment7, { children: [
     /* @__PURE__ */ jsxs41("label", { className: "elb-rjsf-label", children: [
       title,
       required && /* @__PURE__ */ jsx51("span", { className: "elb-rjsf-required", children: " *" })
@@ -7143,7 +7305,7 @@ function MappingValueWidget(props) {
   const [selectedType, setSelectedType] = useState27(getCurrentType);
   const userSelectedTypeRef = React15.useRef(false);
   const prevValueRef = React15.useRef(value);
-  useEffect17(() => {
+  useEffect18(() => {
     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;
@@ -7990,7 +8152,7 @@ function MappingValidateField(props) {
 }
 
 // src/components/atoms/mapping-data.tsx
-import { useState as useState29, useEffect as useEffect18, useRef as useRef10, useCallback as useCallback15 } from "react";
+import { useState as useState29, useEffect as useEffect19, useRef as useRef11, useCallback as useCallback15 } from "react";
 
 // src/schemas/value-config-schema.ts
 var valueConfigSchema = {
@@ -8232,8 +8394,8 @@ function MappingDataWidget(props) {
   const description = schema?.description;
   const [showForm, setShowForm] = useState29(hasData);
   const [isExpanded, setIsExpanded] = useState29(hasData);
-  const prevValueRef = useRef10(value);
-  useEffect18(() => {
+  const prevValueRef = useRef11(value);
+  useEffect19(() => {
     const newHasData = value && typeof value === "object" && Object.keys(value).length > 0;
     setShowForm(!!newHasData);
     setIsExpanded(!!newHasData);
@@ -8316,7 +8478,7 @@ function MappingDataField(props) {
 }
 
 // src/components/atoms/mapping-settings.tsx
-import { useState as useState30, useEffect as useEffect19, useRef as useRef11, useCallback as useCallback16 } from "react";
+import { useState as useState30, useEffect as useEffect20, useRef as useRef12, useCallback as useCallback16 } from "react";
 import { jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
 function MappingSettingsWidget(props) {
   const {
@@ -8338,8 +8500,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 = useRef11(value);
-  useEffect19(() => {
+  const prevValueRef = useRef12(value);
+  useEffect20(() => {
     const newHasSettings = value && typeof value === "object" && Object.keys(value).length > 0;
     setShowForm(!!newHasSettings);
     setIsExpanded(!!newHasSettings);
@@ -8497,7 +8659,7 @@ function MappingObjectExplorerField(props) {
 }
 
 // src/components/molecules/mapping-map-field.tsx
-import { useState as useState31, useEffect as useEffect20, useRef as useRef12 } from "react";
+import { useState as useState31, useEffect as useEffect21, useRef as useRef13 } from "react";
 
 // src/components/atoms/mapping-map-entry.tsx
 import { jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
@@ -8627,15 +8789,15 @@ function MappingMapField(props) {
   );
   const hasEntries = entries.length > 0;
   const [isExpanded, setIsExpanded] = useState31(hasEntries);
-  const prevFormDataRef = useRef12(formData);
-  useEffect20(() => {
+  const prevFormDataRef = useRef13(formData);
+  useEffect21(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
     prevFormDataRef.current = formData;
     setEntries(objectToEntries(formData));
   }, [formData]);
-  useEffect20(() => {
+  useEffect21(() => {
     setIsExpanded(hasEntries);
   }, [hasEntries]);
   const duplicateKeys = /* @__PURE__ */ new Set();
@@ -8722,7 +8884,7 @@ function MappingMapField(props) {
 }
 
 // src/components/molecules/mapping-set-field.tsx
-import { useState as useState32, useEffect as useEffect21, useRef as useRef13 } from "react";
+import { useState as useState32, useEffect as useEffect22, useRef as useRef14 } from "react";
 
 // src/components/atoms/mapping-set-entry.tsx
 import { jsx as jsx72, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -8856,8 +9018,8 @@ function MappingSetField(props) {
   );
   const hasEntries = entries.length > 0;
   const [isExpanded, setIsExpanded] = useState32(hasEntries);
-  const prevFormDataRef = useRef13(formData);
-  useEffect21(() => {
+  const prevFormDataRef = useRef14(formData);
+  useEffect22(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
@@ -8880,7 +9042,7 @@ function MappingSetField(props) {
     });
     setEntries(newEntries);
   }, [formData]);
-  useEffect21(() => {
+  useEffect22(() => {
     setIsExpanded(hasEntries);
   }, [hasEntries]);
   const handleEntriesChange = (newEntries) => {
@@ -9003,7 +9165,7 @@ function MappingSetField(props) {
 }
 
 // src/components/molecules/mapping-loop-field.tsx
-import { useState as useState33, useEffect as useEffect22, useRef as useRef14 } from "react";
+import { useState as useState33, useEffect as useEffect23, useRef as useRef15 } from "react";
 import { jsx as jsx74, jsxs as jsxs56 } from "react/jsx-runtime";
 function MappingLoopField(props) {
   const { formData, onChange, schema, disabled, readonly } = props;
@@ -9028,8 +9190,8 @@ function MappingLoopField(props) {
   );
   const [transform, setTransform] = useState33(() => parseFormData(formData)[1]);
   const [isExpanded, setIsExpanded] = useState33(false);
-  const prevFormDataRef = useRef14(formData);
-  useEffect22(() => {
+  const prevFormDataRef = useRef15(formData);
+  useEffect23(() => {
     if (prevFormDataRef.current === formData) {
       return;
     }
@@ -9403,7 +9565,7 @@ function MappingMapPaneViewRJSF({
 }
 
 // src/components/atoms/mapping-enum-select.tsx
-import { useState as useState34, useRef as useRef15, useEffect as useEffect23 } from "react";
+import { useState as useState34, useRef as useRef16, useEffect as useEffect24 } from "react";
 import { jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
 function MappingEnumSelect({
   value,
@@ -9417,19 +9579,19 @@ function MappingEnumSelect({
   const [highlightedIndex, setHighlightedIndex] = useState34(0);
   const [inputValue, setInputValue] = useState34(String(value || ""));
   const [hasTyped, setHasTyped] = useState34(false);
-  const containerRef = useRef15(null);
-  const inputRef = useRef15(null);
-  const dropdownRef = useRef15(null);
-  useEffect23(() => {
+  const containerRef = useRef16(null);
+  const inputRef = useRef16(null);
+  const dropdownRef = useRef16(null);
+  useEffect24(() => {
     setInputValue(String(value || ""));
     setHasTyped(false);
   }, [value]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (isOpen) {
       setHighlightedIndex(0);
     }
   }, [isOpen]);
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -9443,7 +9605,7 @@ function MappingEnumSelect({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen, hasTyped, inputValue, onChange, type]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (isOpen && dropdownRef.current && dropdownRef.current.children[highlightedIndex]) {
       const highlighted = dropdownRef.current.children[highlightedIndex];
       if (highlighted) {
@@ -9649,7 +9811,7 @@ function MappingBooleanPaneView({
 }
 
 // src/components/molecules/mapping-primitive-pane-view.tsx
-import { Fragment as Fragment9, jsx as jsx81, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx81, jsxs as jsxs61 } from "react/jsx-runtime";
 function MappingPrimitivePaneView({
   path,
   mappingState,
@@ -9703,11 +9865,11 @@ function MappingPrimitivePaneView({
         /* @__PURE__ */ jsxs61("div", { className: "elb-mapping-pane-hint", children: [
           "Current type: ",
           /* @__PURE__ */ jsx81("strong", { children: typeof value }),
-          uiSchema?.["ui:help"] && /* @__PURE__ */ jsxs61(Fragment9, { children: [
+          uiSchema?.["ui:help"] && /* @__PURE__ */ jsxs61(Fragment8, { children: [
             /* @__PURE__ */ jsx81("br", {}),
             uiSchema["ui:help"]
           ] }),
-          hasError && validationResult.error && /* @__PURE__ */ jsxs61(Fragment9, { children: [
+          hasError && validationResult.error && /* @__PURE__ */ jsxs61(Fragment8, { children: [
             /* @__PURE__ */ jsx81("br", {}),
             /* @__PURE__ */ jsxs61("span", { style: { color: "var(--color-button-danger)" }, children: [
               "\u26A0 ",
@@ -10388,7 +10550,7 @@ function buildValueChildren(value, basePath, schemas, structure) {
 }
 
 // src/components/organisms/config-editor/config-editor-tabs.tsx
-import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs65 } from "react/jsx-runtime";
 function ConfigEditorTabs({
   config,
   onChange,
@@ -10447,7 +10609,7 @@ function ConfigEditorTabs({
     } catch (e) {
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     if (navigation.navigationHistory.length === 0) {
       navigation.switchToTab("");
       if (initialNavigationState && initialNavigationState.currentPath.length > 0) {
@@ -10458,7 +10620,7 @@ function ConfigEditorTabs({
       }
     }
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (onNavigationStateChange && activeTab) {
       onNavigationStateChange({
         currentPath: activeTab.path,
@@ -10469,7 +10631,7 @@ function ConfigEditorTabs({
       });
     }
   }, [activeTab, treeState.expandedPaths, onNavigationStateChange]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (activeTab && activeTab.path.length > 0) {
       for (let i = 1; i <= activeTab.path.length; i++) {
         const pathToExpand = activeTab.path.slice(0, i);
@@ -10487,7 +10649,7 @@ function ConfigEditorTabs({
       className: `elb-mapping-editor-tabs elb-mapping-editor-tabs--responsive ${className}`,
       "data-layout": "responsive",
       children: [
-        showTree && /* @__PURE__ */ jsxs65(Fragment10, { children: [
+        showTree && /* @__PURE__ */ jsxs65(Fragment9, { children: [
           /* @__PURE__ */ jsx85(
             "div",
             {
@@ -10689,7 +10851,7 @@ function ConfigEditor(props) {
 }
 
 // node_modules/@iconify/react/dist/iconify.js
-import { createElement, forwardRef, useState as useState37, useEffect as useEffect25 } from "react";
+import { createElement, forwardRef, useState as useState37, useEffect as useEffect26 } from "react";
 function getIconsTree(data, names) {
   const icons = data.icons;
   const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
@@ -11287,9 +11449,9 @@ function updateCallbacks(storage2) {
     });
   }
 }
-var idCounter = 0;
+var idCounter2 = 0;
 function storeCallback(callback, icons, pendingSources) {
-  const id = idCounter++;
+  const id = idCounter2++;
   const abort = removeCallback.bind(null, pendingSources, id);
   if (!icons.pending.length) return abort;
   const item = {
@@ -12053,11 +12215,11 @@ function IconComponent(props) {
       }
     }
   }
-  useEffect25(() => {
+  useEffect26(() => {
     setMounted(true);
     return cleanup;
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     if (mounted) {
       updateState();
     }
@@ -12547,6 +12709,8 @@ var isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever
 var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
 var isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
 var isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
+var isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
+var isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
 var isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
 var isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
 var isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
@@ -12557,6 +12721,7 @@ var isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLab
 var isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
 var isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
 var isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
+var isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
 var getIsArbitraryValue = (value, testLabel, testValue) => {
   const result = arbitraryValueRegex.exec(value);
   if (result) {
@@ -12583,6 +12748,7 @@ var isLabelSize = (label) => label === "length" || label === "size" || label ===
 var isLabelLength = (label) => label === "length";
 var isLabelNumber = (label) => label === "number";
 var isLabelFamilyName = (label) => label === "family-name";
+var isLabelWeight = (label) => label === "number" || label === "weight";
 var isLabelShadow = (label) => label === "shadow";
 var getDefaultConfig = () => {
   const themeColor = fromTheme("color");
@@ -13384,7 +13550,7 @@ var getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber]
+        font: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
       }],
       /**
        * Font Stretch
@@ -13398,7 +13564,7 @@ var getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont]
+        font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
       }],
       /**
        * Font Variant Numeric
@@ -15159,7 +15325,7 @@ function FlowSectionBox({ section }) {
 }
 
 // src/components/molecules/code-snippet.tsx
-import { useState as useState38, useEffect as useEffect26 } from "react";
+import { useState as useState38, useEffect as useEffect27 } from "react";
 import { jsx as jsx89 } from "react/jsx-runtime";
 function CodeSnippet(props) {
   const {
@@ -15175,7 +15341,7 @@ function CodeSnippet(props) {
   } = props;
   const snippetClassName = `elb-code-snippet ${className || ""}`.trim();
   const [formattedCode, setFormattedCode] = useState38(code);
-  useEffect26(() => {
+  useEffect27(() => {
     if (format3 && code) {
       formatCode(code, language).then(setFormattedCode);
     } else {
@@ -15199,9 +15365,9 @@ function CodeSnippet(props) {
 }
 
 // src/components/molecules/flow-map/FlowMap.tsx
-import React23, { useEffect as useEffect27, useRef as useRef16 } from "react";
+import React23, { useEffect as useEffect28, useRef as useRef17 } from "react";
 import rough from "roughjs";
-import { Fragment as Fragment11, jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
 function RoughRect({
   x,
   y,
@@ -15210,8 +15376,8 @@ function RoughRect({
   fill,
   stroke
 }) {
-  const ref = useRef16(null);
-  useEffect27(() => {
+  const ref = useRef17(null);
+  useEffect28(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15250,8 +15416,8 @@ function RoughCircle({
   fill,
   stroke
 }) {
-  const ref = useRef16(null);
-  useEffect27(() => {
+  const ref = useRef17(null);
+  useEffect28(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15308,8 +15474,8 @@ function RoughArrow({
   arrowSize = 8,
   centerY
 }) {
-  const ref = useRef16(null);
-  useEffect27(() => {
+  const ref = useRef17(null);
+  useEffect28(() => {
     if (!ref.current) return;
     const svg = ref.current.ownerSVGElement;
     if (!svg) return;
@@ -15645,7 +15811,7 @@ function FlowMap({
       return aIdx - bIdx;
     }
   );
-  const containerRef = useRef16(null);
+  const containerRef = useRef17(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 = [
@@ -15986,7 +16152,7 @@ function FlowMap({
                 }
                 return collectorPos;
               };
-              return /* @__PURE__ */ jsxs67(Fragment11, { children: [
+              return /* @__PURE__ */ jsxs67(Fragment10, { children: [
                 !stageBefore && sourceEntries.length === 1 && /* @__PURE__ */ jsx90(
                   RoughArrow,
                   {
@@ -16165,7 +16331,7 @@ function FlowMap({
                   const fromY = collectorCenterY;
                   const toY = firstPostPos.y + boxHeight / 2;
                   const offset = withReturn ? ARROW_OFFSET : 0;
-                  return /* @__PURE__ */ jsxs67(Fragment11, { children: [
+                  return /* @__PURE__ */ jsxs67(Fragment10, { children: [
                     /* @__PURE__ */ jsx90(
                       RoughArrow,
                       {
@@ -16232,7 +16398,7 @@ function FlowMap({
                 const stageHighlight = config?.highlight !== false;
                 const labelY = text ? pos.y + pos.height * 0.28 : pos.y + pos.height / 2;
                 const linkUrl = link === false ? null : typeof link === "string" ? link : defaultLink;
-                const stageContent = /* @__PURE__ */ jsxs67(Fragment11, { children: [
+                const stageContent = /* @__PURE__ */ jsxs67(Fragment10, { children: [
                   /* @__PURE__ */ jsx90(
                     RoughRect,
                     {
@@ -16601,6 +16767,414 @@ function PropertyTable({ schema, className }) {
   ] });
 }
 
+// src/components/molecules/form-card.tsx
+import { jsx as jsx92, jsxs as jsxs69 } from "react/jsx-runtime";
+function FormCard({
+  children,
+  title,
+  subtitle,
+  footer,
+  maxWidth = "md",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs69(
+    "div",
+    {
+      className: `elb-form-card elb-form-card--${maxWidth} ${className}`.trim(),
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs69("div", { className: "elb-form-card__header", children: [
+          title && /* @__PURE__ */ jsx92("h1", { className: "elb-form-card__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx92("p", { className: "elb-form-card__subtitle", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx92("div", { className: "elb-form-card__content", children }),
+        footer && /* @__PURE__ */ jsx92("div", { className: "elb-form-card__footer", children: footer })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/dropdown.tsx
+import { jsx as jsx93, jsxs as jsxs70 } from "react/jsx-runtime";
+function Dropdown({
+  trigger,
+  isOpen,
+  onToggle,
+  children,
+  align = "left",
+  ariaLabel,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs70("div", { className: `elb-dropdown ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx93(
+      "div",
+      {
+        className: "elb-dropdown__trigger",
+        onClick: onToggle,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-label": ariaLabel,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle();
+          }
+        },
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx93(
+      "div",
+      {
+        className: `elb-dropdown__panel elb-dropdown__panel--${align}`,
+        role: "menu",
+        children
+      }
+    )
+  ] });
+}
+function DropdownItem({
+  children,
+  onClick,
+  disabled = false,
+  variant = "default",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx93(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: `elb-dropdown__item elb-dropdown__item--${variant} ${disabled ? "elb-dropdown__item--disabled" : ""} ${className}`.trim(),
+      onClick,
+      disabled,
+      children
+    }
+  );
+}
+function DropdownDivider({ className = "" }) {
+  return /* @__PURE__ */ jsx93(
+    "div",
+    {
+      className: `elb-dropdown__divider ${className}`.trim(),
+      role: "separator"
+    }
+  );
+}
+
+// src/components/atoms/form-textarea.tsx
+import { useId } from "react";
+
+// src/components/atoms/form-field.tsx
+import { jsx as jsx94, jsxs as jsxs71 } from "react/jsx-runtime";
+function FormField({
+  children,
+  label,
+  htmlFor,
+  error,
+  required,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs71(
+    "div",
+    {
+      className: `elb-form-field ${error ? "elb-form-field--error" : ""} ${className}`.trim(),
+      children: [
+        label && /* @__PURE__ */ jsxs71("label", { htmlFor, className: "elb-form-field__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx94("span", { className: "elb-form-field__required", "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx94("div", { className: "elb-form-field__input", children }),
+        error && /* @__PURE__ */ jsx94("div", { className: "elb-form-field__error", role: "alert", children: error })
+      ]
+    }
+  );
+}
+
+// src/components/atoms/form-textarea.tsx
+import { jsx as jsx95 } from "react/jsx-runtime";
+function FormTextarea({
+  value,
+  onChange,
+  label,
+  rows = 5,
+  placeholder,
+  disabled = false,
+  spellCheck = true,
+  required = false,
+  error,
+  id,
+  className = ""
+}) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsx95(
+    FormField,
+    {
+      label,
+      htmlFor: textareaId,
+      error: errorMessage,
+      required,
+      className,
+      children: /* @__PURE__ */ jsx95(
+        "textarea",
+        {
+          id: textareaId,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          rows,
+          placeholder,
+          disabled,
+          spellCheck,
+          required,
+          className: `elb-form-textarea ${hasError ? "elb-form-textarea--error" : ""}`,
+          "aria-invalid": hasError
+        }
+      )
+    }
+  );
+}
+
+// src/components/atoms/spinner.tsx
+import { jsx as jsx96 } from "react/jsx-runtime";
+function Spinner({ size = "md", className = "" }) {
+  return /* @__PURE__ */ jsx96(
+    "span",
+    {
+      className: `elb-spinner elb-spinner--${size} ${className}`.trim(),
+      role: "status",
+      "aria-label": "Loading"
+    }
+  );
+}
+
+// src/components/atoms/submit-button.tsx
+import { Fragment as Fragment11, jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
+function SubmitButton({
+  children,
+  loadingText,
+  loading = false,
+  disabled = false,
+  variant = "primary",
+  fullWidth = false,
+  type = "submit",
+  onClick,
+  className = ""
+}) {
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsx97(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      onClick,
+      className: `elb-submit-button elb-submit-button--${variant} ${fullWidth ? "elb-submit-button--full-width" : ""} ${loading ? "elb-submit-button--loading" : ""} ${className}`.trim(),
+      children: loading ? /* @__PURE__ */ jsxs72(Fragment11, { children: [
+        /* @__PURE__ */ jsx97(Spinner, { size: "sm", className: "elb-submit-button__spinner" }),
+        /* @__PURE__ */ jsx97("span", { children: loadingText ?? children })
+      ] }) : children
+    }
+  );
+}
+
+// src/components/atoms/alert.tsx
+import { jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
+function Alert({
+  children,
+  title,
+  variant,
+  role = variant === "error" ? "alert" : "status",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs73(
+    "div",
+    {
+      className: `elb-alert elb-alert--${variant} ${className}`.trim(),
+      role,
+      children: [
+        title && /* @__PURE__ */ jsx98("div", { className: "elb-alert__title", children: title }),
+        /* @__PURE__ */ jsx98("div", { className: "elb-alert__content", children })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/config-form-card.tsx
+import { jsx as jsx99, jsxs as jsxs74 } from "react/jsx-runtime";
+function ConfigFormCard({
+  config,
+  onConfigChange,
+  onSubmit,
+  loading = false,
+  error = null,
+  title = "Configuration",
+  label = "Configuration (JSON)",
+  submitText = "Submit",
+  loadingText = "Processing...",
+  rows = 20,
+  maxWidth = "lg",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx99(FormCard, { title, maxWidth, className, children: /* @__PURE__ */ jsxs74("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx99(
+      FormTextarea,
+      {
+        label,
+        value: config,
+        onChange: onConfigChange,
+        rows,
+        disabled: loading,
+        spellCheck: false,
+        error: !!error
+      }
+    ),
+    error && /* @__PURE__ */ jsx99(Alert, { variant: "error", children: error }),
+    /* @__PURE__ */ jsx99(SubmitButton, { loading, loadingText, fullWidth: true, children: submitText })
+  ] }) });
+}
+
+// src/components/molecules/split-button.tsx
+import { useState as useState40, useRef as useRef18, useEffect as useEffect29, useCallback as useCallback19 } from "react";
+import { Fragment as Fragment12, jsx as jsx100, jsxs as jsxs75 } from "react/jsx-runtime";
+function SplitButton({
+  children,
+  onClick,
+  actions = [],
+  variant = "primary",
+  loading = false,
+  loadingText,
+  disabled = false,
+  className = ""
+}) {
+  const [open, setOpen] = useState40(false);
+  const ref = useRef18(null);
+  const isDisabled = disabled || loading;
+  const handleClickOutside = useCallback19((e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      setOpen(false);
+    }
+  }, []);
+  const handleKeyDown = useCallback19((e) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
+  useEffect29(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [open, handleClickOutside, handleKeyDown]);
+  return /* @__PURE__ */ jsxs75(
+    "div",
+    {
+      ref,
+      className: `elb-split-button elb-split-button--${variant} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx100(
+          "button",
+          {
+            type: "button",
+            className: "elb-split-button__primary",
+            onClick,
+            disabled: isDisabled,
+            children: loading ? loadingText ?? children : children
+          }
+        ),
+        actions.length > 0 && /* @__PURE__ */ jsxs75(Fragment12, { children: [
+          /* @__PURE__ */ jsx100(
+            "button",
+            {
+              type: "button",
+              className: "elb-split-button__toggle",
+              onClick: () => setOpen(!open),
+              disabled: isDisabled,
+              "aria-label": "More actions",
+              "aria-expanded": open,
+              children: /* @__PURE__ */ jsx100(
+                "svg",
+                {
+                  className: "elb-split-button__arrow",
+                  width: "10",
+                  height: "6",
+                  viewBox: "0 0 10 6",
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx100(
+                    "path",
+                    {
+                      d: "M1 1l4 4 4-4",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      fill: "none"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          open && /* @__PURE__ */ jsx100("div", { className: "elb-split-button__dropdown", children: actions.map((action) => /* @__PURE__ */ jsx100(
+            "button",
+            {
+              type: "button",
+              className: "elb-split-button__action",
+              disabled: action.disabled,
+              onClick: () => {
+                setOpen(false);
+                action.onClick();
+              },
+              children: action.label
+            },
+            action.key
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/flow-selector.tsx
+import { jsx as jsx101, jsxs as jsxs76 } from "react/jsx-runtime";
+var STATUS_DOT = {
+  active: "elb-flow-selector__dot--active",
+  published: "elb-flow-selector__dot--active",
+  deploying: "elb-flow-selector__dot--deploying",
+  failed: "elb-flow-selector__dot--failed",
+  stopped: "elb-flow-selector__dot--failed"
+};
+function FlowSelector({
+  flows,
+  selectedFlow,
+  onSelectFlow,
+  className = ""
+}) {
+  if (flows.length <= 1) return null;
+  return /* @__PURE__ */ jsx101("div", { className: `elb-flow-selector ${className}`, role: "tablist", children: flows.map((flow) => {
+    const isSelected = flow.name === selectedFlow;
+    const dotClass = flow.deploymentStatus ? STATUS_DOT[flow.deploymentStatus] ?? "" : "";
+    return /* @__PURE__ */ jsxs76(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": isSelected,
+        className: `elb-flow-selector__tab ${isSelected ? "elb-flow-selector__tab--selected" : ""}`,
+        onClick: () => onSelectFlow(flow.name),
+        children: [
+          /* @__PURE__ */ jsx101("span", { className: `elb-flow-selector__dot ${dotClass}` }),
+          /* @__PURE__ */ jsx101("span", { className: "elb-flow-selector__name", children: flow.name }),
+          flow.platform && /* @__PURE__ */ jsx101("span", { className: "elb-flow-selector__platform", children: flow.platform })
+        ]
+      },
+      flow.name
+    );
+  }) });
+}
+
 // src/schemas/config-structures/destination-config.ts
 var DESTINATION_CONFIG_STRUCTURE = {
   type: "object",
@@ -16687,13 +17261,13 @@ var DESTINATION_CONFIG_STRUCTURE = {
 };
 
 // src/components/atoms/footer.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 function Footer({ children, className = "" }) {
-  return /* @__PURE__ */ jsx92("div", { className: `elb-explorer-footer ${className}`, children });
+  return /* @__PURE__ */ jsx102("div", { className: `elb-explorer-footer ${className}`, children });
 }
 
 // src/components/atoms/button-link.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 function ButtonLink({
   variant = "default",
   size = "md",
@@ -16706,9 +17280,9 @@ function ButtonLink({
   const baseClass = "elb-button-link";
   const classes = `${baseClass} ${baseClass}-${variant} ${baseClass}-${size} ${className}`.trim();
   if (href && !disabled) {
-    return /* @__PURE__ */ jsx93("a", { href, className: classes, children });
+    return /* @__PURE__ */ jsx103("a", { href, className: classes, children });
   }
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx103(
     "button",
     {
       type: "button",
@@ -16721,21 +17295,70 @@ function ButtonLink({
 }
 
 // src/components/atoms/panel-hints.tsx
-import { jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs77 } from "react/jsx-runtime";
 function PanelHints({
   title = "Common patterns",
   hints,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs69("div", { className: `elb-panel-hints ${className}`, children: [
-    title && /* @__PURE__ */ jsx94("div", { className: "elb-panel-hints-title", children: title }),
-    /* @__PURE__ */ jsx94("ul", { className: "elb-panel-hints-list", children: hints.map((hint, index) => /* @__PURE__ */ jsxs69("li", { className: "elb-panel-hints-item", children: [
-      /* @__PURE__ */ jsx94("code", { className: "elb-panel-hints-code", children: hint.code }),
-      /* @__PURE__ */ jsx94("span", { className: "elb-panel-hints-desc", children: hint.description })
+  return /* @__PURE__ */ jsxs77("div", { className: `elb-panel-hints ${className}`, children: [
+    title && /* @__PURE__ */ jsx104("div", { className: "elb-panel-hints-title", children: title }),
+    /* @__PURE__ */ jsx104("ul", { className: "elb-panel-hints-list", children: hints.map((hint, index) => /* @__PURE__ */ jsxs77("li", { className: "elb-panel-hints-item", children: [
+      /* @__PURE__ */ jsx104("code", { className: "elb-panel-hints-code", children: hint.code }),
+      /* @__PURE__ */ jsx104("span", { className: "elb-panel-hints-desc", children: hint.description })
     ] }, index)) })
   ] });
 }
 
+// src/components/atoms/form-input.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx105 } from "react/jsx-runtime";
+function FormInput({
+  value,
+  onChange,
+  label,
+  type = "text",
+  placeholder,
+  disabled = false,
+  autoFocus = false,
+  autoComplete,
+  required = false,
+  error,
+  id,
+  className = ""
+}) {
+  const generatedId = useId2();
+  const inputId = id ?? generatedId;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  return /* @__PURE__ */ jsx105(
+    FormField,
+    {
+      label,
+      htmlFor: inputId,
+      error: errorMessage,
+      required,
+      className,
+      children: /* @__PURE__ */ jsx105(
+        "input",
+        {
+          id: inputId,
+          type,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          disabled,
+          autoFocus,
+          autoComplete,
+          required,
+          className: `elb-form-input ${hasError ? "elb-form-input--error" : ""}`,
+          "aria-invalid": hasError
+        }
+      )
+    }
+  );
+}
+
 // src/components/atoms/icons/icons.tsx
 addIcon("walkeros:piwik-pro", {
   body: '<g fill="none" fill-rule="evenodd"><path fill="#231F20" d="M0 0h90v90H0z"/><path d="M50.792 57.21v.044H37.99v8.675c0 3.38-2.652 6.07-6.006 6.07a5.917 5.917 0 0 1-4.243-1.77 6.073 6.073 0 0 1-1.74-4.3v-38.88C26 23.67 28.65 21 31.983 21H50.79v.022c9.58.4 17.209 8.341 17.209 18.104 0 9.764-7.628 17.704-17.209 18.083h.001Zm-2.148-25.29H37.99v14.57h10.872c3.88-.112 6.993-3.337 6.993-7.274a7.347 7.347 0 0 0-2.114-5.16 7.16 7.16 0 0 0-5.098-2.134Z" fill="#FFF" fill-rule="nonzero"/></g>',
@@ -16744,12 +17367,12 @@ addIcon("walkeros:piwik-pro", {
 });
 
 // node_modules/@mdx-js/react/lib/index.js
-import React25 from "react";
+import React28 from "react";
 var emptyComponents = {};
-var MDXContext = React25.createContext(emptyComponents);
+var MDXContext = React28.createContext(emptyComponents);
 function useMDXComponents(components) {
-  const contextComponents = React25.useContext(MDXContext);
-  return React25.useMemo(
+  const contextComponents = React28.useContext(MDXContext);
+  return React28.useMemo(
     function() {
       if (typeof components === "function") {
         return components(contextComponents);
@@ -16766,7 +17389,7 @@ function MDXProvider(properties) {
   } else {
     allComponents = useMDXComponents(properties.components);
   }
-  return React25.createElement(
+  return React28.createElement(
     MDXContext.Provider,
     { value: allComponents },
     properties.children
@@ -16775,7 +17398,7 @@ function MDXProvider(properties) {
 
 // src/components/atoms/mdx-code.tsx
 import { Children } from "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var MDXCode = ({
   className,
   children
@@ -16789,7 +17412,7 @@ var MDXCode = ({
     return false;
   });
   if (!hasClassName || !hasNewlines) {
-    return /* @__PURE__ */ jsx95("code", { className: "elb-code-inline", children });
+    return /* @__PURE__ */ jsx106("code", { className: "elb-code-inline", children });
   }
   const mdxLanguage = className.replace(/^language-/, "");
   const languageMap = {
@@ -16804,7 +17427,7 @@ var MDXCode = ({
   };
   const monacoLanguage = languageMap[mdxLanguage] || mdxLanguage;
   const code = childrenArray.map((child) => typeof child === "string" ? child : "").join("").trim();
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx106(
     CodeBox,
     {
       code,
@@ -16818,7 +17441,7 @@ var MDXCode = ({
 };
 
 // src/providers/MDXProvider.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var MDXProvider2 = ({ children }) => {
   const components = {
     // Markdown element mappings
@@ -16830,9 +17453,53 @@ var MDXProvider2 = ({ children }) => {
     DestinationInitDemo,
     DestinationDemo
   };
-  return /* @__PURE__ */ jsx96(MDXProvider, { components, children });
+  return /* @__PURE__ */ jsx107(MDXProvider, { components, children });
 };
+
+// src/hooks/useDropdown.ts
+import { useState as useState41, useRef as useRef19, useEffect as useEffect30, useCallback as useCallback20 } from "react";
+function useDropdown() {
+  const [isOpen, setIsOpen] = useState41(false);
+  const containerRef = useRef19(null);
+  const toggle = useCallback20(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const open = useCallback20(() => {
+    setIsOpen(true);
+  }, []);
+  const close = useCallback20(() => {
+    setIsOpen(false);
+  }, []);
+  useEffect30(() => {
+    if (!isOpen) return;
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect30(() => {
+    if (!isOpen) return;
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  return {
+    isOpen,
+    toggle,
+    open,
+    close,
+    containerRef
+  };
+}
 export {
+  Alert,
   ArchitectureFlow,
   Box,
   BrowserBox,
@@ -16844,13 +17511,22 @@ export {
   CodeSnippet,
   CollectorBox,
   ConfigEditor,
+  ConfigFormCard,
   DESTINATION_CONFIG_STRUCTURE,
   DestinationDemo,
   DestinationInitDemo as DestinationInit,
   DestinationInitDemo,
   DestinationDemo as DestinationPush,
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
   FlowMap,
+  FlowSelector,
   Footer,
+  FormCard,
+  FormField,
+  FormInput,
+  FormTextarea,
   Grid,
   Header,
   Icon,
@@ -16866,6 +17542,9 @@ export {
   Preview,
   PromotionPlayground,
   PropertyTable,
+  Spinner,
+  SplitButton,
+  SubmitButton,
   captureDestinationPush,
   cn,
   createCaptureFn,
@@ -16874,14 +17553,18 @@ export {
   createPlausibleDestination,
   createRawCapture,
   formatCapturedCalls,
+  generateModelPath,
   initializeMonacoTypes,
   lighthouseTheme,
   loadPackageTypes,
   loadTypeLibraryFromURL,
   palenightTheme,
   registerAllThemes,
+  registerJsonSchema,
   registerLighthouseTheme,
   registerPalenightTheme,
-  registerWalkerOSTypes
+  registerWalkerOSTypes,
+  unregisterJsonSchema,
+  useDropdown
 };
 //# sourceMappingURL=index.mjs.map