@flowsterix/react 0.11.0 → 0.11.1

package/dist/devtools/index.cjs

@@ -1,67 +1,22 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/devtools/index.tsx
-var devtools_exports = {};
-__export(devtools_exports, {
-  DevToolsContext: () => DevToolsContext,
-  DevToolsProvider: () => DevToolsProvider,
-  FlowEditModal: () => FlowEditModal,
-  FlowItem: () => FlowItem,
-  FlowsTab: () => FlowsTab,
-  GrabberOverlay: () => GrabberOverlay,
-  SortableStepItem: () => SortableStepItem,
-  StepItem: () => SortableStepItem,
-  StepItemDragPreview: () => StepItemDragPreview,
-  StepList: () => StepList,
-  TabNav: () => TabNav,
-  Toolbar: () => Toolbar,
-  clearSteps: () => clearSteps,
-  extractComponentHierarchy: () => extractComponentHierarchy,
-  extractSource: () => extractSource,
-  formatSourcePath: () => formatSourcePath,
-  generateSelector: () => generateSelector,
-  getVSCodeLink: () => getVSCodeLink,
-  loadSteps: () => loadSteps,
-  saveSteps: () => saveSteps,
-  useDevToolsContext: () => useDevToolsContext,
-  useDevToolsContextRequired: () => useDevToolsContextRequired,
-  useElementInfo: () => useElementInfo,
-  useFlowsData: () => useFlowsData,
-  useGrabMode: () => useGrabMode,
-  useStepStore: () => useStepStore
-});
-module.exports = __toCommonJS(devtools_exports);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+var _chunkFCOKCGV3cjs = require('../chunk-FCOKCGV3.cjs');
 
 // src/devtools/DevToolsProvider.tsx
-var import_react16 = require("react");
-var import_react_dom3 = require("react-dom");
-var import_react17 = require("motion/react");
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _react3 = require('motion/react');
 
 // src/devtools/components/GrabberOverlay.tsx
-var import_react_dom = require("react-dom");
-var import_react = require("motion/react");
+
+
 
 // src/devtools/utils/sourceExtractor.ts
 function getReactFiber(element) {
   const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook?.renderers) {
+  if (_optionalChain([hook, 'optionalAccess', _ => _.renderers])) {
     for (const renderer of hook.renderers.values()) {
       if (renderer.findFiberByHostInstance) {
         const fiber = renderer.findFiberByHostInstance(element);
@@ -101,10 +56,10 @@ function findDebugSource(fiber) {
       return {
         fileName: source.fileName,
         lineNumber: source.lineNumber,
-        columnNumber: source.columnNumber ?? 0
+        columnNumber: _nullishCoalesce(source.columnNumber, () => ( 0))
       };
     }
-    current = current.return ?? null;
+    current = _nullishCoalesce(current.return, () => ( null));
     depth++;
   }
   return null;
@@ -116,7 +71,7 @@ function extractSource(params) {
     const fiber = getReactFiber(element);
     if (!fiber) return null;
     return findDebugSource(fiber);
-  } catch {
+  } catch (e2) {
     return null;
   }
 }
@@ -135,11 +90,11 @@ function extractComponentHierarchy(params) {
       if (name && !hierarchy.includes(name)) {
         hierarchy.push(name);
       }
-      current = current.return ?? null;
+      current = _nullishCoalesce(current.return, () => ( null));
       depth++;
     }
     return hierarchy;
-  } catch {
+  } catch (e3) {
     return hierarchy;
   }
 }
@@ -154,7 +109,7 @@ function getVSCodeLink(params) {
 }
 
 // src/devtools/components/GrabberOverlay.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var _jsxruntime = require('react/jsx-runtime');
 var styles = {
   root: {
     position: "fixed",
@@ -274,7 +229,7 @@ var springTransition = {
 function GrabberOverlay(props) {
   const { isGrabbing, hoveredInfo, container } = props;
   if (typeof window === "undefined") return null;
-  const portalContainer = container ?? document.body;
+  const portalContainer = _nullishCoalesce(container, () => ( document.body));
   const labelStyle = {
     ...styles.label
   };
@@ -288,10 +243,10 @@ function GrabberOverlay(props) {
     labelStyle.left = "auto";
     labelStyle.right = 0;
   }
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.root, "data-devtools-panel": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: isGrabbing && hoveredInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react.motion.div,
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.root, "data-devtools-panel": "", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { children: isGrabbing && hoveredInfo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _react3.motion.div,
         {
           style: styles.highlight,
           initial: {
@@ -312,21 +267,21 @@ function GrabberOverlay(props) {
             opacity: 0
           },
           transition: springTransition,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_react.motion.div,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _react3.motion.div,
             {
               style: labelStyle,
               initial: { opacity: 0, y: 4 },
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.03, duration: 0.12 },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.labelTop, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: styles.tagBadge, children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.labelTop, children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles.tagBadge, children: [
                     "<",
                     hoveredInfo.tag,
                     ">"
                   ] }),
-                  hoveredInfo.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  hoveredInfo.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "span",
                     {
                       style: {
@@ -341,9 +296,9 @@ function GrabberOverlay(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.selector, children: hoveredInfo.selector }),
-                hoveredInfo.source && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.source, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" }) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.selector, children: hoveredInfo.selector }),
+                hoveredInfo.source && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.source, children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" }) }),
                   formatSourcePath({ source: hoveredInfo.source })
                 ] })
               ]
@@ -352,8 +307,8 @@ function GrabberOverlay(props) {
         },
         "grabber-highlight"
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: isGrabbing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_react.motion.div,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { children: isGrabbing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.div,
         {
           style: styles.hint,
           initial: { opacity: 0, y: 10, scale: 0.95 },
@@ -361,19 +316,19 @@ function GrabberOverlay(props) {
           exit: { opacity: 0, y: 10, scale: 0.95 },
           transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "Click" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Add step" })
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles.kbd, children: "Click" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Add step" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "ESC" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Cancel" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.divider }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles.kbd, children: "ESC" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Cancel" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "Ctrl+Shift+G" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Toggle" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.divider }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles.kbd, children: "Ctrl+Shift+G" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Toggle" })
             ] })
           ]
         },
@@ -385,14 +340,26 @@ function GrabberOverlay(props) {
 }
 
 // src/devtools/components/StepList.tsx
-var import_react4 = require("react");
-var import_core = require("@dnd-kit/core");
-var import_sortable2 = require("@dnd-kit/sortable");
+
+
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+
+
+
+var _sortable = require('@dnd-kit/sortable');
 
 // src/devtools/components/StepItem.tsx
-var import_sortable = require("@dnd-kit/sortable");
-var import_utilities = require("@dnd-kit/utilities");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+
+var _utilities = require('@dnd-kit/utilities');
+
 var styles2 = {
   card: {
     display: "flex",
@@ -549,7 +516,7 @@ function SortableStepItem(props) {
     transform,
     transition,
     isDragging
-  } = (0, import_sortable.useSortable)({ id: step.id });
+  } = _sortable.useSortable.call(void 0, { id: step.id });
   const handleCopySource = async () => {
     if (step.source) {
       const path = formatSourcePath({ source: step.source });
@@ -558,8 +525,8 @@ function SortableStepItem(props) {
   };
   const isGhost = isDragging || isBeingDragged;
   const wrapperStyle = {
-    transform: import_utilities.CSS.Transform.toString(transform),
-    transition: transition ?? "transform 200ms ease"
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: _nullishCoalesce(transition, () => ( "transform 200ms ease"))
   };
   const cardStyle = {
     ...styles2.card,
@@ -568,38 +535,38 @@ function SortableStepItem(props) {
   const handleStyle = {
     ...styles2.dragHandle
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: setNodeRef, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "14", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "14", r: "1.5" })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setNodeRef, style: wrapperStyle, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: cardStyle, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "14", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "14", r: "1.5" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.order, children: index + 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles2.tagBadge, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.content, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.header, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.order, children: index + 1 }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles2.tagBadge, children: [
           "<",
           step.elementTag,
           ">"
         ] }),
-        step.elementText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.text, children: step.elementText })
+        step.elementText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.text, children: step.elementText })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles2.selector, children: step.selector }),
-      step.source && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.sourceRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles2.selector, children: step.selector }),
+      step.source && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.sourceRow, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "svg",
           {
             width: "10",
             height: "10",
             viewBox: "0 0 16 16",
             fill: "hsl(142 71% 55%)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "a",
           {
             href: getVSCodeLink({ source: step.source }),
@@ -608,14 +575,14 @@ function SortableStepItem(props) {
             children: formatSourcePath({ source: step.source })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
             type: "button",
             style: styles2.copyButton,
             onClick: handleCopySource,
             title: "Copy path",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "svg",
               {
                 width: "10",
@@ -623,8 +590,8 @@ function SortableStepItem(props) {
                 viewBox: "0 0 16 16",
                 fill: "currentColor",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
                 ]
               }
             )
@@ -632,14 +599,14 @@ function SortableStepItem(props) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         type: "button",
         style: styles2.deleteButton,
         onClick: onDelete,
         title: "Delete step",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
       }
     )
   ] }) });
@@ -656,48 +623,48 @@ function StepItemDragPreview(props) {
     ...styles2.dragHandle,
     ...styles2.dragHandleActive
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: handleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "14", r: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "14", r: "1.5" })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: cardStyle, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: handleStyle, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "14", r: "1.5" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "14", r: "1.5" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.order, children: index + 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles2.tagBadge, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.content, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.header, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.order, children: index + 1 }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles2.tagBadge, children: [
           "<",
           step.elementTag,
           ">"
         ] }),
-        step.elementText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.text, children: step.elementText })
+        step.elementText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.text, children: step.elementText })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles2.selector, children: step.selector }),
-      step.source && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.sourceRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles2.selector, children: step.selector }),
+      step.source && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles2.sourceRow, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "svg",
           {
             width: "10",
             height: "10",
             viewBox: "0 0 16 16",
             fill: "hsl(142 71% 55%)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.sourceLink, children: formatSourcePath({ source: step.source }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.sourceLink, children: formatSourcePath({ source: step.source }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...styles2.deleteButton, visibility: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { ...styles2.deleteButton, visibility: "hidden" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) }) })
   ] });
 }
 
 // src/devtools/components/Toolbar.tsx
-var import_react2 = require("react");
-var import_react3 = require("motion/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+
+
+
 var styles3 = {
   toolbar: {
     display: "flex",
@@ -792,7 +759,7 @@ var styles3 = {
 };
 function Toolbar(props) {
   const { mode, stepCount, onToggleGrab, onExport, onCopyForAI, onReset } = props;
-  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const [copied, setCopied] = _react.useState.call(void 0, false);
   const isGrabbing = mode === "grabbing";
   const hasSteps = stepCount > 0;
   const handleCopy = async () => {
@@ -817,17 +784,17 @@ function Toolbar(props) {
     ...!hasSteps && styles3.actionButtonDisabled,
     ...hasSteps && styles3.actionButtonDanger
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles3.toolbar, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles3.grabRow, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react3.motion.button,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles3.toolbar, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles3.grabRow, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _react3.motion.button,
       {
         type: "button",
         style: grabButtonStyle,
         onClick: onToggleGrab,
         whileHover: { scale: 1.01 },
         whileTap: { scale: 0.98 },
-        children: isGrabbing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        children: isGrabbing ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "svg",
             {
               width: "14",
@@ -835,8 +802,8 @@ function Toolbar(props) {
               viewBox: "0 0 16 16",
               fill: "currentColor",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "8", cy: "8", r: "3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "circle", { cx: "8", cy: "8", r: "3", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "animate",
                     {
                       attributeName: "r",
@@ -845,7 +812,7 @@ function Toolbar(props) {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "animate",
                     {
                       attributeName: "opacity",
@@ -855,7 +822,7 @@ function Toolbar(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "circle",
                   {
                     cx: "8",
@@ -866,7 +833,7 @@ function Toolbar(props) {
                     strokeWidth: "1",
                     opacity: "0.3",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "animate",
                         {
                           attributeName: "r",
@@ -875,7 +842,7 @@ function Toolbar(props) {
                           repeatCount: "indefinite"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "animate",
                         {
                           attributeName: "opacity",
@@ -891,25 +858,25 @@ function Toolbar(props) {
             }
           ),
           "Grabbing..."
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "svg",
             {
               width: "14",
               height: "14",
               viewBox: "0 0 16 16",
               fill: "currentColor",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
             }
           ),
           "Grab Element",
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles3.kbd, children: "Ctrl+Shift+G" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles3.kbd, children: "Ctrl+Shift+G" })
         ] })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles3.actionRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_react3.motion.button,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles3.actionRow, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: exportButtonStyle,
@@ -919,16 +886,16 @@ function Toolbar(props) {
           whileTap: hasSteps ? { scale: 0.98 } : {},
           title: "Download JSON file",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" })
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" })
             ] }),
             "Export"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_react3.motion.button,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: copyButtonStyle,
@@ -938,13 +905,13 @@ function Toolbar(props) {
           whileTap: hasSteps ? { scale: 0.98 } : {},
           title: "Copy JSON to clipboard",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
             ] }),
             "Copy",
-            copied && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react3.motion.span,
+            copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _react3.motion.span,
               {
                 style: styles3.copiedBadge,
                 initial: { opacity: 0, scale: 0.8, y: 4 },
@@ -956,8 +923,8 @@ function Toolbar(props) {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_react3.motion.button,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: resetButtonStyle,
@@ -967,9 +934,9 @@ function Toolbar(props) {
           whileTap: hasSteps ? { scale: 0.98 } : {},
           title: "Clear all steps",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
                   fillRule: "evenodd",
@@ -986,7 +953,7 @@ function Toolbar(props) {
 }
 
 // src/devtools/components/StepList.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+
 var styles4 = {
   scrollArea: {
     flex: 1,
@@ -1045,23 +1012,23 @@ function StepList(props) {
     onClearAll,
     onExport
   } = props;
-  const [activeId, setActiveId] = (0, import_react4.useState)(null);
+  const [activeId, setActiveId] = _react.useState.call(void 0, null);
   const activeStep = activeId ? steps.find((s) => s.id === activeId) : null;
   const activeIndex = activeId ? steps.findIndex((s) => s.id === activeId) : -1;
-  const sensors = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.PointerSensor, {
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor, {
       activationConstraint: {
         distance: 4
       }
     }),
-    (0, import_core.useSensor)(import_core.KeyboardSensor, {
-      coordinateGetter: import_sortable2.sortableKeyboardCoordinates
+    _core.useSensor.call(void 0, _core.KeyboardSensor, {
+      coordinateGetter: _sortable.sortableKeyboardCoordinates
     })
   );
-  const handleDragStart = (0, import_react4.useCallback)((event) => {
+  const handleDragStart = _react.useCallback.call(void 0, (event) => {
     setActiveId(event.active.id);
   }, []);
-  const handleDragEnd = (0, import_react4.useCallback)(
+  const handleDragEnd = _react.useCallback.call(void 0, 
     (event) => {
       const { active, over } = event;
       setActiveId(null);
@@ -1075,10 +1042,10 @@ function StepList(props) {
     },
     [steps, onReorderSteps]
   );
-  const handleDragCancel = (0, import_react4.useCallback)(() => {
+  const handleDragCancel = _react.useCallback.call(void 0, () => {
     setActiveId(null);
   }, []);
-  const handleExportClick = (0, import_react4.useCallback)(() => {
+  const handleExportClick = _react.useCallback.call(void 0, () => {
     const data = onExport();
     const blob = new Blob([JSON.stringify(data, null, 2)], {
       type: "application/json"
@@ -1090,18 +1057,18 @@ function StepList(props) {
     a.click();
     URL.revokeObjectURL(url);
   }, [onExport]);
-  const handleCopyForAI = (0, import_react4.useCallback)(async () => {
+  const handleCopyForAI = _react.useCallback.call(void 0, async () => {
     const data = onExport();
     await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
   }, [onExport]);
-  const handleReset = (0, import_react4.useCallback)(() => {
+  const handleReset = _react.useCallback.call(void 0, () => {
     if (confirm("Clear all steps? This cannot be undone.")) {
       onClearAll();
     }
   }, [onClearAll]);
   if (typeof window === "undefined") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       Toolbar,
       {
         mode,
@@ -1112,40 +1079,40 @@ function StepList(props) {
         onReset: handleReset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.scrollArea, children: steps.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles4.empty, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.emptyIcon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.scrollArea, children: steps.length === 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles4.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.emptyIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "svg",
         {
           width: "20",
           height: "20",
           viewBox: "0 0 16 16",
           fill: "hsl(215 20% 45%)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles4.emptyText, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "No steps captured yet." }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: 6 }, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles4.emptyText, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: "No steps captured yet." }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { marginTop: 6 }, children: [
           "Press ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
           " to grab"
         ] })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      import_core.DndContext,
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _core.DndContext,
       {
         sensors,
-        collisionDetection: import_core.closestCenter,
+        collisionDetection: _core.closestCenter,
         onDragStart: handleDragStart,
         onDragEnd: handleDragEnd,
         onDragCancel: handleDragCancel,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_sortable2.SortableContext,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _sortable.SortableContext,
             {
               items: steps.map((s) => s.id),
-              strategy: import_sortable2.verticalListSortingStrategy,
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.stepList, children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              strategy: _sortable.verticalListSortingStrategy,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.stepList, children: steps.map((step, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 SortableStepItem,
                 {
                   step,
@@ -1158,7 +1125,7 @@ function StepList(props) {
               )) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.DragOverlay, { dropAnimation: null, children: activeStep && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StepItemDragPreview, { step: activeStep, index: activeIndex }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.DragOverlay, { dropAnimation: null, children: activeStep && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StepItemDragPreview, { step: activeStep, index: activeIndex }) })
         ]
       }
     ) })
@@ -1166,7 +1133,7 @@ function StepList(props) {
 }
 
 // src/devtools/components/TabNav.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+
 var styles5 = {
   container: {
     display: "flex",
@@ -1233,30 +1200,30 @@ function TabNav(props) {
     ...styles5.badge,
     ...activeTab === "flows" && styles5.badgeActive
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles5.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles5.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
         type: "button",
         style: stepsTabStyle,
         onClick: () => onTabChange("steps"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" }) }),
           "Steps",
-          stepCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: stepsBadgeStyle, children: stepCount })
+          stepCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: stepsBadgeStyle, children: stepCount })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
         type: "button",
         style: flowsTabStyle,
         onClick: () => onTabChange("flows"),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" }) }),
           "Flows",
-          flowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: flowsBadgeStyle, children: flowCount })
+          flowCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: flowsBadgeStyle, children: flowCount })
         ]
       }
     )
@@ -1264,38 +1231,53 @@ function TabNav(props) {
 }
 
 // src/devtools/components/FlowsTab.tsx
-var import_react11 = require("react");
-var import_react12 = require("motion/react");
+
+
 
 // src/devtools/hooks/useFlowsData.ts
-var import_react6 = require("react");
 
-// src/devtools/DevToolsContext.tsx
-var import_react5 = require("react");
-var DevToolsContext = (0, import_react5.createContext)(null);
-function useDevToolsContext() {
-  return (0, import_react5.useContext)(DevToolsContext);
-}
-function useDevToolsContextRequired() {
-  const context = (0, import_react5.useContext)(DevToolsContext);
-  if (!context) {
-    throw new Error(
-      "useDevToolsContext must be used within a TourProvider with devtools enabled"
-    );
+
+// src/devtools/globalBridge.ts
+var BRIDGE_KEY = "__FLOWSTERIX_DEVTOOLS_BRIDGE__";
+function getBridge() {
+  if (typeof window === "undefined") {
+    return { value: null, listeners: /* @__PURE__ */ new Set() };
+  }
+  const w = window;
+  if (!w[BRIDGE_KEY]) {
+    w[BRIDGE_KEY] = { value: null, listeners: /* @__PURE__ */ new Set() };
   }
-  return context;
+  return w[BRIDGE_KEY];
+}
+function getDevToolsBridge() {
+  return getBridge().value;
+}
+function subscribeDevToolsBridge(listener) {
+  const bridge = getBridge();
+  bridge.listeners.add(listener);
+  return () => {
+    bridge.listeners.delete(listener);
+  };
 }
 
 // src/devtools/hooks/useFlowsData.ts
+function useBridge() {
+  return _react.useSyncExternalStore.call(void 0, 
+    subscribeDevToolsBridge,
+    getDevToolsBridge,
+    () => null
+    // Server snapshot
+  );
+}
 function useFlowsData() {
-  const devtools = useDevToolsContext();
-  const [flowsData, setFlowsData] = (0, import_react6.useState)([]);
-  const loadFlowStates = (0, import_react6.useCallback)(async () => {
-    if (!devtools) {
+  const bridge = useBridge();
+  const [flowsData, setFlowsData] = _react.useState.call(void 0, []);
+  const loadFlowStates = _react.useCallback.call(void 0, async () => {
+    if (!bridge) {
       setFlowsData([]);
       return;
     }
-    const { flows, activeFlowId, state: activeState, getFlowState } = devtools;
+    const { flows, activeFlowId, state: activeState, getFlowState } = bridge;
     const flowDataPromises = [];
     for (const [flowId, definition] of flows) {
       const isActive = flowId === activeFlowId;
@@ -1313,30 +1295,28 @@ function useFlowsData() {
     }
     const results = await Promise.all(flowDataPromises);
     setFlowsData(results);
-  }, [devtools]);
-  (0, import_react6.useEffect)(() => {
+  }, [bridge]);
+  _react.useEffect.call(void 0, () => {
     void loadFlowStates();
   }, [loadFlowStates]);
-  (0, import_react6.useEffect)(() => {
-    if (!devtools?.activeFlowId || !devtools?.state) return;
-    void loadFlowStates();
-  }, [devtools?.activeFlowId, devtools?.state, loadFlowStates]);
-  const deleteFlow = (0, import_react6.useCallback)(
+  const deleteFlow = _react.useCallback.call(void 0, 
     async (flowId) => {
-      if (!devtools) return;
-      devtools.cancelFlow(flowId);
-      await devtools.deleteFlowStorage(flowId);
+      if (!bridge) return;
+      if (bridge.activeFlowId === flowId) {
+        bridge.cancel();
+      }
+      await bridge.deleteFlowStorage(flowId);
       await loadFlowStates();
     },
-    [devtools, loadFlowStates]
+    [bridge, loadFlowStates]
   );
-  const updateFlow = (0, import_react6.useCallback)(
-    async (flowId, state) => {
-      if (!devtools) return;
-      await devtools.updateFlowStorage(flowId, state);
+  const updateFlow = _react.useCallback.call(void 0, 
+    async (flowId, newState) => {
+      if (!bridge) return;
+      await bridge.updateFlowStorage(flowId, newState);
       await loadFlowStates();
     },
-    [devtools, loadFlowStates]
+    [bridge, loadFlowStates]
   );
   return {
     flows: flowsData,
@@ -1347,9 +1327,9 @@ function useFlowsData() {
 }
 
 // src/devtools/components/FlowItem.tsx
-var import_react7 = require("react");
-var import_react8 = require("motion/react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+
+
+
 var styles6 = {
   card: {
     display: "flex",
@@ -1480,7 +1460,7 @@ var statusStyles = {
 function FlowItem(props) {
   const { flow, onEdit, onDelete } = props;
   const { flowId, definition, state, isActive } = flow;
-  const [confirmDelete, setConfirmDelete] = (0, import_react7.useState)(false);
+  const [confirmDelete, setConfirmDelete] = _react.useState.call(void 0, false);
   const handleDelete = () => {
     if (confirmDelete) {
       onDelete();
@@ -1503,31 +1483,31 @@ function FlowItem(props) {
     ...confirmDelete && styles6.actionButtonDanger
   };
   const stepInfo = state ? `Step ${state.stepIndex + 1}/${definition.steps.length}` : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: cardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.titleGroup, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.flowId, children: flowId }),
-        isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { ...styles6.statusBadge, ...styles6.activeBadge }, children: "Active" })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: cardStyle, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.titleGroup, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.flowId, children: flowId }),
+        isActive && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { ...styles6.statusBadge, ...styles6.activeBadge }, children: "Active" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: statusBadgeStyle, children: state?.status ?? "no state" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: statusBadgeStyle, children: _nullishCoalesce(_optionalChain([state, 'optionalAccess', _2 => _2.status]), () => ( "no state")) })
     ] }),
-    state ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoRow, children: [
-      stepInfo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "Step:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: stepInfo })
+    state ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.infoRow, children: [
+      stepInfo && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.label, children: "Step:" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.value, children: stepInfo })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "Version:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: state.version })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.label, children: "Version:" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.value, children: state.version })
       ] }),
-      state.stepId && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "ID:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: state.stepId })
+      state.stepId && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.label, children: "ID:" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.value, children: state.stepId })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles6.noState, children: "No stored state" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.actions, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react8.motion.button,
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles6.noState, children: "No stored state" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.actions, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: styles6.actionButton,
@@ -1537,13 +1517,13 @@ function FlowItem(props) {
           whileTap: state ? { scale: 0.98 } : {},
           title: state ? "Edit flow state" : "No state to edit",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" }) }),
             "Edit"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react8.motion.button,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: deleteButtonStyle,
@@ -1553,9 +1533,9 @@ function FlowItem(props) {
           whileTap: state ? { scale: 0.98 } : {},
           title: confirmDelete ? "Click again to confirm deletion" : state ? "Delete flow state" : "No state to delete",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
                   fillRule: "evenodd",
@@ -1572,10 +1552,10 @@ function FlowItem(props) {
 }
 
 // src/devtools/components/FlowEditModal.tsx
-var import_react9 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_react10 = require("motion/react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+
+
+
+
 var styles7 = {
   overlay: {
     position: "fixed",
@@ -1695,15 +1675,15 @@ var styles7 = {
 };
 function FlowEditModal(props) {
   const { isOpen, flowId, initialState, onClose, onSave, container } = props;
-  const [jsonValue, setJsonValue] = (0, import_react9.useState)("");
-  const [error, setError] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [jsonValue, setJsonValue] = _react.useState.call(void 0, "");
+  const [error, setError] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
     if (isOpen && initialState) {
       setJsonValue(JSON.stringify(initialState, null, 2));
       setError(null);
     }
   }, [isOpen, initialState]);
-  const handleSave = (0, import_react9.useCallback)(() => {
+  const handleSave = _react.useCallback.call(void 0, () => {
     try {
       const parsed = JSON.parse(jsonValue);
       if (typeof parsed.status !== "string") {
@@ -1721,7 +1701,7 @@ function FlowEditModal(props) {
       setError(err instanceof Error ? err.message : "Invalid JSON");
     }
   }, [jsonValue, onSave, onClose]);
-  const handleKeyDown = (0, import_react9.useCallback)(
+  const handleKeyDown = _react.useCallback.call(void 0, 
     (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -1734,7 +1714,7 @@ function FlowEditModal(props) {
     [onClose, handleSave]
   );
   if (typeof window === "undefined") return null;
-  const portalContainer = container ?? document.body;
+  const portalContainer = _nullishCoalesce(container, () => ( document.body));
   const textareaStyle = {
     ...styles7.textarea,
     ...error && styles7.textareaError
@@ -1744,9 +1724,9 @@ function FlowEditModal(props) {
     ...styles7.buttonPrimary,
     ...error && styles7.buttonDisabled
   };
-  return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react10.motion.div,
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { children: isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _react3.motion.div,
       {
         style: styles7.overlay,
         initial: { opacity: 0 },
@@ -1757,8 +1737,8 @@ function FlowEditModal(props) {
           if (e.target === e.currentTarget) onClose();
         },
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          import_react10.motion.div,
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _react3.motion.div,
           {
             style: styles7.modal,
             initial: { opacity: 0, scale: 0.95, y: 10 },
@@ -1767,24 +1747,24 @@ function FlowEditModal(props) {
             transition: { duration: 0.15, ease: [0.16, 1, 0.3, 1] },
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.header, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles7.title, children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.header, children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles7.title, children: [
                   "Edit Flow: ",
                   flowId
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "button",
                   {
                     type: "button",
                     style: styles7.closeButton,
                     onClick: onClose,
                     title: "Close",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.body, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.body, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "textarea",
                   {
                     style: textareaStyle,
@@ -1797,10 +1777,10 @@ function FlowEditModal(props) {
                     autoFocus: true
                   }
                 ),
-                error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles7.error, children: error })
+                error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles7.error, children: error })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.footer, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.footer, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "button",
                   {
                     type: "button",
@@ -1809,8 +1789,8 @@ function FlowEditModal(props) {
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react10.motion.button,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _react3.motion.button,
                   {
                     type: "button",
                     style: saveButtonStyle,
@@ -1832,7 +1812,7 @@ function FlowEditModal(props) {
 }
 
 // src/devtools/components/FlowsTab.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+
 var styles8 = {
   container: {
     display: "flex",
@@ -1905,12 +1885,12 @@ var styles8 = {
 function FlowsTab(props) {
   const { container } = props;
   const { flows, refreshFlows, deleteFlow, updateFlow } = useFlowsData();
-  const [editModal, setEditModal] = (0, import_react11.useState)({
+  const [editModal, setEditModal] = _react.useState.call(void 0, {
     isOpen: false,
     flowId: "",
     state: null
   });
-  const handleEdit = (0, import_react11.useCallback)((flowId, state) => {
+  const handleEdit = _react.useCallback.call(void 0, (flowId, state) => {
     if (!state) return;
     setEditModal({
       isOpen: true,
@@ -1918,49 +1898,49 @@ function FlowsTab(props) {
       state
     });
   }, []);
-  const handleCloseModal = (0, import_react11.useCallback)(() => {
+  const handleCloseModal = _react.useCallback.call(void 0, () => {
     setEditModal((prev) => ({ ...prev, isOpen: false }));
   }, []);
-  const handleSave = (0, import_react11.useCallback)(
+  const handleSave = _react.useCallback.call(void 0, 
     async (newState) => {
       await updateFlow(editModal.flowId, newState);
     },
     [editModal.flowId, updateFlow]
   );
-  const handleDelete = (0, import_react11.useCallback)(
+  const handleDelete = _react.useCallback.call(void 0, 
     async (flowId) => {
       await deleteFlow(flowId);
     },
     [deleteFlow]
   );
   if (flows.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.container, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.empty, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.emptyIcon, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles8.container, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles8.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles8.emptyIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "svg",
         {
           width: "20",
           height: "20",
           viewBox: "0 0 16 16",
           fill: "hsl(215 20% 45%)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.emptyText, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "No flows registered." }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: 6, fontSize: 11, color: "hsl(215 20% 45%)" }, children: "Add flows to TourProvider to see them here." })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles8.emptyText, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: "No flows registered." }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginTop: 6, fontSize: 11, color: "hsl(215 20% 45%)" }, children: "Add flows to TourProvider to see them here." })
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.toolbar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { fontSize: 11, color: "hsl(215 20% 50%)" }, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles8.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles8.toolbar, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { fontSize: 11, color: "hsl(215 20% 50%)" }, children: [
         flows.length,
         " flow",
         flows.length !== 1 ? "s" : "",
         " registered"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        import_react12.motion.button,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: styles8.refreshButton,
@@ -1969,22 +1949,22 @@ function FlowsTab(props) {
           whileTap: { scale: 0.98 },
           title: "Refresh flow states",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
                   fillRule: "evenodd",
                   d: "M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" })
             ] }),
             "Refresh"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.flowList, children: flows.map((flow) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles8.flowList, children: flows.map((flow) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       FlowItem,
       {
         flow,
@@ -1993,7 +1973,7 @@ function FlowsTab(props) {
       },
       flow.flowId
     )) }),
-    editModal.state && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    editModal.state && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       FlowEditModal,
       {
         isOpen: editModal.isOpen,
@@ -2008,15 +1988,15 @@ function FlowsTab(props) {
 }
 
 // src/devtools/hooks/useGrabMode.ts
-var import_react14 = require("react");
+
 
 // src/devtools/hooks/useElementInfo.ts
-var import_react13 = require("react");
+
 
 // src/devtools/utils/selectorGenerator.ts
 function generateSemanticName(element) {
   const tag = element.tagName.toLowerCase();
-  const text = element.textContent?.trim().slice(0, 20).toLowerCase() || "";
+  const text = _optionalChain([element, 'access', _3 => _3.textContent, 'optionalAccess', _4 => _4.trim, 'call', _5 => _5(), 'access', _6 => _6.slice, 'call', _7 => _7(0, 20), 'access', _8 => _8.toLowerCase, 'call', _9 => _9()]) || "";
   const className = element.className;
   const id = element.id;
   if (text) {
@@ -2048,7 +2028,7 @@ function getExistingDataAttrs(element) {
 function isUnique(params) {
   try {
     return document.querySelectorAll(params.selector).length === 1;
-  } catch {
+  } catch (e4) {
     return false;
   }
 }
@@ -2107,27 +2087,27 @@ function generateSelector(params) {
 
 // src/devtools/hooks/useElementInfo.ts
 function useElementInfo() {
-  const getElementInfo = (0, import_react13.useCallback)((params) => {
+  const getElementInfo = _react.useCallback.call(void 0, (params) => {
     const { element } = params;
     const selectorResult = generateSelector({ element });
     const source = extractSource({ element });
     const componentHierarchy = extractComponentHierarchy({ element });
     const rect = element.getBoundingClientRect();
     const htmlElement = element;
-    const styleAttr = htmlElement.getAttribute?.("style") || void 0;
+    const styleAttr = _optionalChain([htmlElement, 'access', _10 => _10.getAttribute, 'optionalCall', _11 => _11("style")]) || void 0;
     return {
       element,
       selector: selectorResult.selector,
       selectorType: selectorResult.selectorType,
       suggestedAttrName: selectorResult.suggestedAttrName,
       tag: element.tagName.toLowerCase(),
-      text: element.textContent?.trim().slice(0, 50) || void 0,
+      text: _optionalChain([element, 'access', _12 => _12.textContent, 'optionalAccess', _13 => _13.trim, 'call', _14 => _14(), 'access', _15 => _15.slice, 'call', _16 => _16(0, 50)]) || void 0,
       className: typeof element.className === "string" ? element.className : void 0,
       style: styleAttr,
       existingAttrs: selectorResult.existingAttrs,
       componentHierarchy,
       rect,
-      source: source ?? void 0
+      source: _nullishCoalesce(source, () => ( void 0))
     };
   }, []);
   return { getElementInfo };
@@ -2140,31 +2120,31 @@ function isDevToolsElement(element) {
   const root = element.getRootNode();
   if (root instanceof ShadowRoot) {
     const host = root.host;
-    if (host?.hasAttribute("data-devtools-host")) return true;
+    if (_optionalChain([host, 'optionalAccess', _17 => _17.hasAttribute, 'call', _18 => _18("data-devtools-host")])) return true;
   }
   return false;
 }
 function useGrabMode() {
-  const [mode, setMode] = (0, import_react14.useState)("idle");
-  const [hoveredElement, setHoveredElement] = (0, import_react14.useState)(null);
+  const [mode, setMode] = _react.useState.call(void 0, "idle");
+  const [hoveredElement, setHoveredElement] = _react.useState.call(void 0, null);
   const { getElementInfo } = useElementInfo();
-  const startGrabbing = (0, import_react14.useCallback)(() => {
+  const startGrabbing = _react.useCallback.call(void 0, () => {
     setMode("grabbing");
     setHoveredElement(null);
   }, []);
-  const stopGrabbing = (0, import_react14.useCallback)(() => {
+  const stopGrabbing = _react.useCallback.call(void 0, () => {
     setMode("idle");
     setHoveredElement(null);
   }, []);
-  const toggleGrabbing = (0, import_react14.useCallback)(() => {
+  const toggleGrabbing = _react.useCallback.call(void 0, () => {
     setMode((prev) => prev === "grabbing" ? "idle" : "grabbing");
     setHoveredElement(null);
   }, []);
-  const selectCurrent = (0, import_react14.useCallback)(() => {
+  const selectCurrent = _react.useCallback.call(void 0, () => {
     if (!hoveredElement) return null;
     return hoveredElement.info;
   }, [hoveredElement]);
-  (0, import_react14.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     if (mode !== "grabbing") return;
     const handleMouseMove = (e) => {
       const target = document.elementFromPoint(e.clientX, e.clientY);
@@ -2188,7 +2168,7 @@ function useGrabMode() {
     document.addEventListener("mousemove", handleMouseMove, { passive: true });
     return () => document.removeEventListener("mousemove", handleMouseMove);
   }, [mode, getElementInfo]);
-  (0, import_react14.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "g") {
         e.preventDefault();
@@ -2215,15 +2195,15 @@ function useGrabMode() {
 }
 
 // src/devtools/hooks/useStepStore.ts
-var import_react15 = require("react");
+
 
 // src/devtools/utils/storage.ts
 var STORAGE_KEY = "flowsterix-devtools-steps";
 function migrateStep(step) {
   return {
     ...step,
-    componentHierarchy: step.componentHierarchy ?? [],
-    existingAttrs: step.existingAttrs ?? []
+    componentHierarchy: _nullishCoalesce(step.componentHierarchy, () => ( [])),
+    existingAttrs: _nullishCoalesce(step.existingAttrs, () => ( []))
   };
 }
 function loadSteps() {
@@ -2234,7 +2214,7 @@ function loadSteps() {
     const parsed = JSON.parse(data);
     if (!Array.isArray(parsed)) return [];
     return parsed.map(migrateStep);
-  } catch {
+  } catch (e5) {
     return [];
   }
 }
@@ -2242,14 +2222,14 @@ function saveSteps(steps) {
   if (typeof window === "undefined") return;
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(steps));
-  } catch {
+  } catch (e6) {
   }
 }
 function clearSteps() {
   if (typeof window === "undefined") return;
   try {
     localStorage.removeItem(STORAGE_KEY);
-  } catch {
+  } catch (e7) {
   }
 }
 
@@ -2277,18 +2257,18 @@ function generateId() {
   return `step-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
 }
 function useStepStore() {
-  const steps = (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
-  (0, import_react15.useEffect)(() => {
+  const steps = _react.useSyncExternalStore.call(void 0, subscribe, getSnapshot, getServerSnapshot);
+  _react.useEffect.call(void 0, () => {
     const saved = loadSteps();
     if (saved.length > 0) {
       store.steps = saved;
       notifyListeners();
     }
   }, []);
-  (0, import_react15.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     saveSteps(steps);
   }, [steps]);
-  const addStep = (0, import_react15.useCallback)((params) => {
+  const addStep = _react.useCallback.call(void 0, (params) => {
     const { info } = params;
     const newStep = {
       id: generateId(),
@@ -2315,12 +2295,12 @@ function useStepStore() {
     notifyListeners();
     return newStep;
   }, []);
-  const removeStep = (0, import_react15.useCallback)((params) => {
+  const removeStep = _react.useCallback.call(void 0, (params) => {
     const { id } = params;
     store.steps = store.steps.filter((s) => s.id !== id).map((s, i) => ({ ...s, order: i }));
     notifyListeners();
   }, []);
-  const updateStep = (0, import_react15.useCallback)(
+  const updateStep = _react.useCallback.call(void 0, 
     (params) => {
       const { id, updates } = params;
       store.steps = store.steps.map(
@@ -2330,7 +2310,7 @@ function useStepStore() {
     },
     []
   );
-  const reorderSteps = (0, import_react15.useCallback)(
+  const reorderSteps = _react.useCallback.call(void 0, 
     (params) => {
       const { fromIndex, toIndex } = params;
       const newSteps = [...store.steps];
@@ -2341,12 +2321,12 @@ function useStepStore() {
     },
     []
   );
-  const clearAllSteps = (0, import_react15.useCallback)(() => {
+  const clearAllSteps = _react.useCallback.call(void 0, () => {
     store.steps = [];
     clearSteps();
     notifyListeners();
   }, []);
-  const exportSteps = (0, import_react15.useCallback)(() => {
+  const exportSteps = _react.useCallback.call(void 0, () => {
     return {
       version: "1.0",
       createdAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -2390,7 +2370,7 @@ function useStepStore() {
 }
 
 // src/devtools/DevToolsProvider.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+
 var styles9 = {
   panel: {
     position: "fixed",
@@ -2472,10 +2452,10 @@ var styles9 = {
 };
 function DevToolsProvider(props) {
   const { children, enabled = true, defaultTab = "steps" } = props;
-  const [mounted, setMounted] = (0, import_react16.useState)(false);
-  const [shadowRoot, setShadowRoot] = (0, import_react16.useState)(null);
-  const [activeTab, setActiveTab] = (0, import_react16.useState)(defaultTab);
-  (0, import_react16.useEffect)(() => {
+  const [mounted, setMounted] = _react.useState.call(void 0, false);
+  const [shadowRoot, setShadowRoot] = _react.useState.call(void 0, null);
+  const [activeTab, setActiveTab] = _react.useState.call(void 0, defaultTab);
+  _react.useEffect.call(void 0, () => {
     setMounted(true);
     const host = document.createElement("div");
     host.setAttribute("data-devtools-host", "");
@@ -2506,11 +2486,11 @@ function DevToolsProvider(props) {
     exportSteps
   } = useStepStore();
   const { flows } = useFlowsData();
-  const [collapsed, setCollapsed] = (0, import_react16.useState)(false);
-  const [position, setPosition] = (0, import_react16.useState)({ x: 16, y: 16 });
-  const [isPanelDragging, setIsPanelDragging] = (0, import_react16.useState)(false);
-  const dragStartRef = { current: null };
-  const handleClick = (0, import_react16.useCallback)(
+  const [collapsed, setCollapsed] = _react.useState.call(void 0, false);
+  const [position, setPosition] = _react.useState.call(void 0, { x: 16, y: 16 });
+  const [isPanelDragging, setIsPanelDragging] = _react.useState.call(void 0, false);
+  const dragStartRef = _react.useRef.call(void 0, null);
+  const handleClick = _react.useCallback.call(void 0, 
     (e) => {
       if (mode !== "grabbing") return;
       const target = e.target;
@@ -2519,7 +2499,7 @@ function DevToolsProvider(props) {
       const root = target.getRootNode();
       if (root instanceof ShadowRoot) {
         const host = root.host;
-        if (host?.hasAttribute("data-devtools-host")) return;
+        if (_optionalChain([host, 'optionalAccess', _19 => _19.hasAttribute, 'call', _20 => _20("data-devtools-host")])) return;
       }
       e.preventDefault();
       e.stopPropagation();
@@ -2530,12 +2510,12 @@ function DevToolsProvider(props) {
     },
     [mode, selectCurrent, addStep]
   );
-  (0, import_react16.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     if (mode !== "grabbing") return;
     document.addEventListener("click", handleClick, { capture: true });
     return () => document.removeEventListener("click", handleClick, { capture: true });
   }, [mode, handleClick]);
-  (0, import_react16.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     if (mode !== "grabbing") return;
     const preventDefault = (e) => {
       const target = e.target;
@@ -2547,7 +2527,7 @@ function DevToolsProvider(props) {
       document.removeEventListener("submit", preventDefault, { capture: true });
     };
   }, [mode]);
-  (0, import_react16.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "m") {
         e.preventDefault();
@@ -2557,7 +2537,7 @@ function DevToolsProvider(props) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
-  const handlePointerDown = (0, import_react16.useCallback)(
+  const handlePointerDown = _react.useCallback.call(void 0, 
     (e) => {
       const target = e.target;
       if (target.closest("button")) return;
@@ -2573,7 +2553,7 @@ function DevToolsProvider(props) {
     },
     [position]
   );
-  const handlePointerMove = (0, import_react16.useCallback)(
+  const handlePointerMove = _react.useCallback.call(void 0, 
     (e) => {
       if (!dragStartRef.current || !isPanelDragging) return;
       const dx = e.clientX - dragStartRef.current.x;
@@ -2584,15 +2564,15 @@ function DevToolsProvider(props) {
     },
     [isPanelDragging]
   );
-  const handlePointerUp = (0, import_react16.useCallback)((e) => {
+  const handlePointerUp = _react.useCallback.call(void 0, (e) => {
     setIsPanelDragging(false);
     dragStartRef.current = null;
     e.target.releasePointerCapture(e.pointerId);
   }, []);
   if (!enabled || !mounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   }
-  const shadowContainer = shadowRoot?.lastElementChild ?? null;
+  const shadowContainer = _nullishCoalesce(_optionalChain([shadowRoot, 'optionalAccess', _21 => _21.lastElementChild]), () => ( null));
   const panelStyle = {
     ...styles9.panel,
     right: position.x,
@@ -2602,20 +2582,20 @@ function DevToolsProvider(props) {
     ...styles9.header,
     ...isPanelDragging && styles9.headerDragging
   };
-  const portalContainer = shadowContainer ?? document.body;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+  const portalContainer = _nullishCoalesce(shadowContainer, () => ( document.body));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       GrabberOverlay,
       {
         isGrabbing: mode === "grabbing",
-        hoveredInfo: hoveredElement?.info ?? null,
+        hoveredInfo: _nullishCoalesce(_optionalChain([hoveredElement, 'optionalAccess', _22 => _22.info]), () => ( null)),
         container: shadowContainer
       }
     ),
-    (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        import_react17.motion.div,
+    _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.div,
         {
           style: panelStyle,
           initial: { opacity: 0, x: 20, scale: 0.95 },
@@ -2623,7 +2603,7 @@ function DevToolsProvider(props) {
           transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
           "data-devtools-panel": "",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "div",
               {
                 style: headerStyle,
@@ -2632,21 +2612,21 @@ function DevToolsProvider(props) {
                 onPointerUp: handlePointerUp,
                 onPointerCancel: handlePointerUp,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles9.titleGroup, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles9.logo, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "hsl(217 91% 70%)", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 0L14.9 4v8L8 16 1.1 12V4L8 0zm0 2.3L3.1 5.2v5.6L8 13.7l4.9-2.9V5.2L8 2.3z" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 5l3 1.7v3.4L8 11.8 5 10.1V6.7L8 5z" })
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles9.titleGroup, children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles9.logo, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "hsl(217 91% 70%)", children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 0L14.9 4v8L8 16 1.1 12V4L8 0zm0 2.3L3.1 5.2v5.6L8 13.7l4.9-2.9V5.2L8 2.3z" }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 5l3 1.7v3.4L8 11.8 5 10.1V6.7L8 5z" })
                     ] }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles9.title, children: "DevTools" })
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles9.title, children: "DevTools" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles9.headerButtons, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles9.headerButtons, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "button",
                     {
                       type: "button",
                       style: styles9.iconButton,
                       onClick: () => setCollapsed(!collapsed),
                       title: collapsed ? "Expand (Ctrl+Shift+M)" : "Collapse (Ctrl+Shift+M)",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "svg",
                         {
                           width: "14",
@@ -2657,7 +2637,7 @@ function DevToolsProvider(props) {
                             transform: collapsed ? "rotate(180deg)" : "none",
                             transition: "transform 0.2s ease"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" })
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" })
                         }
                       )
                     }
@@ -2665,8 +2645,8 @@ function DevToolsProvider(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              import_react17.motion.div,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _react3.motion.div,
               {
                 style: styles9.body,
                 initial: { height: 0, opacity: 0 },
@@ -2674,7 +2654,7 @@ function DevToolsProvider(props) {
                 exit: { height: 0, opacity: 0 },
                 transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     TabNav,
                     {
                       activeTab,
@@ -2683,7 +2663,7 @@ function DevToolsProvider(props) {
                       flowCount: flows.length
                     }
                   ),
-                  activeTab === "steps" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  activeTab === "steps" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     StepList,
                     {
                       steps,
@@ -2694,7 +2674,7 @@ function DevToolsProvider(props) {
                       onClearAll: clearAllSteps,
                       onExport: exportSteps
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlowsTab, { container: shadowContainer })
+                  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FlowsTab, { container: shadowContainer })
                 ]
               }
             ) })
@@ -2705,32 +2685,31 @@ function DevToolsProvider(props) {
     )
   ] });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DevToolsContext,
-  DevToolsProvider,
-  FlowEditModal,
-  FlowItem,
-  FlowsTab,
-  GrabberOverlay,
-  SortableStepItem,
-  StepItem,
-  StepItemDragPreview,
-  StepList,
-  TabNav,
-  Toolbar,
-  clearSteps,
-  extractComponentHierarchy,
-  extractSource,
-  formatSourcePath,
-  generateSelector,
-  getVSCodeLink,
-  loadSteps,
-  saveSteps,
-  useDevToolsContext,
-  useDevToolsContextRequired,
-  useElementInfo,
-  useFlowsData,
-  useGrabMode,
-  useStepStore
-});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.DevToolsContext = _chunkFCOKCGV3cjs.DevToolsContext; exports.DevToolsProvider = DevToolsProvider; exports.FlowEditModal = FlowEditModal; exports.FlowItem = FlowItem; exports.FlowsTab = FlowsTab; exports.GrabberOverlay = GrabberOverlay; exports.SortableStepItem = SortableStepItem; exports.StepItem = SortableStepItem; exports.StepItemDragPreview = StepItemDragPreview; exports.StepList = StepList; exports.TabNav = TabNav; exports.Toolbar = Toolbar; exports.clearSteps = clearSteps; exports.extractComponentHierarchy = extractComponentHierarchy; exports.extractSource = extractSource; exports.formatSourcePath = formatSourcePath; exports.generateSelector = generateSelector; exports.getVSCodeLink = getVSCodeLink; exports.loadSteps = loadSteps; exports.saveSteps = saveSteps; exports.useDevToolsContext = _chunkFCOKCGV3cjs.useDevToolsContext; exports.useDevToolsContextRequired = _chunkFCOKCGV3cjs.useDevToolsContextRequired; exports.useElementInfo = useElementInfo; exports.useFlowsData = useFlowsData; exports.useGrabMode = useGrabMode; exports.useStepStore = useStepStore;