@flowsterix/react 0.11.0 → 0.12.0

package/dist/devtools/index.cjs

@@ -1,67 +1,93 @@
-"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 });
+"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 _react = require('react');
+var _reactdom = require('react-dom');
+var _react3 = require('motion/react');
+
+// src/devtools/motion.ts
+
+var springs = {
+  snappy: {
+    type: "spring",
+    damping: 30,
+    stiffness: 500,
+    mass: 0.5
+  },
+  smooth: {
+    type: "spring",
+    damping: 30,
+    stiffness: 300,
+    mass: 0.8
+  },
+  bouncy: {
+    type: "spring",
+    damping: 15,
+    stiffness: 400,
+    mass: 0.5
+  }
 };
-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 });
+var stagger = {
+  fast: {
+    staggerChildren: 0.03,
+    delayChildren: 0.05
+  },
+  default: {
+    staggerChildren: 0.05,
+    delayChildren: 0.1
   }
-  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);
-
-// src/devtools/DevToolsProvider.tsx
-var import_react16 = require("react");
-var import_react_dom3 = require("react-dom");
-var import_react17 = require("motion/react");
+var listItemVariants = {
+  hidden: {
+    opacity: 0,
+    y: 8,
+    scale: 0.98
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    transition: { duration: 0.15 }
+  }
+};
+var listContainerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: stagger.fast
+  }
+};
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handler = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  return prefersReducedMotion;
+}
 
 // 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 +127,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 +142,7 @@ function extractSource(params) {
     const fiber = getReactFiber(element);
     if (!fiber) return null;
     return findDebugSource(fiber);
-  } catch {
+  } catch (e2) {
     return null;
   }
 }
@@ -135,11 +161,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 +180,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",
@@ -170,6 +196,10 @@ var styles = {
     pointerEvents: "none",
     boxShadow: "0 0 0 4px hsl(217 91% 60% / 0.15), 0 4px 20px hsl(217 91% 60% / 0.2)"
   },
+  highlightPulse: {
+    boxShadow: "0 0 0 8px hsl(142 71% 55% / 0.3), 0 4px 20px hsl(142 71% 55% / 0.4)",
+    borderColor: "hsl(142 71% 55%)"
+  },
   label: {
     position: "absolute",
     bottom: "100%",
@@ -228,7 +258,6 @@ var styles = {
     position: "fixed",
     bottom: 20,
     left: "50%",
-    transform: "translateX(-50%)",
     display: "flex",
     alignItems: "center",
     gap: 12,
@@ -272,9 +301,26 @@ var springTransition = {
   mass: 0.8
 };
 function GrabberOverlay(props) {
-  const { isGrabbing, hoveredInfo, container } = props;
+  const { isGrabbing, hoveredInfo, container, onElementSelected } = props;
+  const reducedMotion = useReducedMotion();
+  const [showPulse, setShowPulse] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (onElementSelected) {
+    }
+  }, [onElementSelected]);
+  _react.useEffect.call(void 0, () => {
+    const handlePulse = () => {
+      if (reducedMotion) return;
+      setShowPulse(true);
+      setTimeout(() => setShowPulse(false), 300);
+    };
+    window.__devtools_pulse = handlePulse;
+    return () => {
+      delete window.__devtools_pulse;
+    };
+  }, [reducedMotion]);
   if (typeof window === "undefined") return null;
-  const portalContainer = container ?? document.body;
+  const portalContainer = _nullishCoalesce(container, () => ( document.body));
   const labelStyle = {
     ...styles.label
   };
@@ -288,12 +334,16 @@ 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,
+  const highlightStyle = {
+    ...styles.highlight,
+    ...showPulse && styles.highlightPulse
+  };
+  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,
+          style: highlightStyle,
           initial: {
             top: hoveredInfo.rect.top,
             left: hoveredInfo.rect.left,
@@ -306,27 +356,28 @@ function GrabberOverlay(props) {
             left: hoveredInfo.rect.left,
             width: hoveredInfo.rect.width,
             height: hoveredInfo.rect.height,
-            opacity: 1
+            opacity: 1,
+            scale: showPulse ? 1.02 : 1
           },
           exit: {
             opacity: 0
           },
-          transition: springTransition,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_react.motion.div,
+          transition: reducedMotion ? { duration: 0 } : springTransition,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _react3.motion.div,
             {
               style: labelStyle,
-              initial: { opacity: 0, y: 4 },
+              initial: reducedMotion ? {} : { opacity: 0, y: 4 },
               animate: { opacity: 1, y: 0 },
-              transition: { delay: 0.03, duration: 0.12 },
+              transition: reducedMotion ? { duration: 0 } : { 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 +392,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,28 +403,28 @@ 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 },
-          animate: { opacity: 1, y: 0, scale: 1 },
-          exit: { opacity: 0, y: 10, scale: 0.95 },
-          transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+          initial: reducedMotion ? {} : { opacity: 0, y: 10, scale: 0.95, x: "-50%" },
+          animate: { opacity: 1, y: 0, scale: 1, x: "-50%" },
+          exit: reducedMotion ? {} : { opacity: 0, y: 10, scale: 0.95, x: "-50%" },
+          transition: reducedMotion ? { duration: 0 } : springs.smooth,
           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 +436,29 @@ 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",
@@ -403,7 +469,12 @@ var styles2 = {
     border: "1px solid hsl(215 20% 22%)",
     fontSize: 12,
     fontFamily: "inherit",
-    overflow: "hidden"
+    overflow: "hidden",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  cardHover: {
+    borderColor: "hsl(217 91% 55% / 0.4)",
+    boxShadow: "0 0 0 2px hsl(217 91% 55% / 0.1), 0 4px 12px rgba(0, 0, 0, 0.2)"
   },
   cardGhost: {
     opacity: 0.4,
@@ -542,6 +613,8 @@ var styles2 = {
 };
 function SortableStepItem(props) {
   const { step, index, onDelete, isBeingDragged = false } = props;
+  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
+  const reducedMotion = useReducedMotion();
   const {
     attributes,
     listeners,
@@ -549,7 +622,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,91 +631,113 @@ 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,
+    ...isHovered && !isGhost && styles2.cardHover,
     ...isGhost && styles2.cardGhost
   };
   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" })
-    ] }) }),
-    /* @__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: [
-          "<",
-          step.elementTag,
-          ">"
-        ] }),
-        step.elementText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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)(
-          "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" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "a",
-          {
-            href: getVSCodeLink({ source: step.source }),
-            style: styles2.sourceLink,
-            title: "Open in VS Code",
-            children: formatSourcePath({ source: step.source })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            type: "button",
-            style: styles2.copyButton,
-            onClick: handleCopySource,
-            title: "Copy path",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: setNodeRef,
+      style: wrapperStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      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__ */ _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, 
+              _react3.motion.span,
+              {
+                style: styles2.order,
+                initial: reducedMotion ? {} : { scale: 1.2 },
+                animate: { scale: 1 },
+                transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+                children: index + 1
+              },
+              `order-${index}`
+            ),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles2.tagBadge, children: [
+              "<",
+              step.elementTag,
+              ">"
+            ] }),
+            step.elementText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles2.text, children: step.elementText })
+          ] }),
+          /* @__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: "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" })
-                ]
+                fill: "hsl(142 71% 55%)",
+                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__ */ _jsxruntime.jsx.call(void 0, 
+              "a",
+              {
+                href: getVSCodeLink({ source: step.source }),
+                style: styles2.sourceLink,
+                title: "Open in VS Code",
+                children: formatSourcePath({ source: step.source })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                style: styles2.copyButton,
+                onClick: handleCopySource,
+                title: "Copy path",
+                children: /* @__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: "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" })
+                    ]
+                  }
+                )
               }
             )
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react3.motion.button,
+          {
+            type: "button",
+            style: styles2.deleteButton,
+            onClick: onDelete,
+            title: "Delete step",
+            whileHover: reducedMotion ? {} : { scale: 1.1, color: "hsl(0 70% 60%)" },
+            whileTap: reducedMotion ? {} : { scale: 0.9 },
+            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" }) })
           }
         )
       ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "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" }) })
-      }
-    )
-  ] }) });
+    }
+  );
 }
 function StepItemDragPreview(props) {
   const { step, index } = props;
@@ -656,48 +751,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",
@@ -731,7 +826,8 @@ var styles3 = {
     backgroundColor: "rgba(59, 130, 246, 0.15)",
     borderColor: "rgba(59, 130, 246, 0.4)",
     color: "#60a5fa",
-    boxShadow: "0 0 0 2px rgba(59, 130, 246, 0.1)"
+    boxShadow: "0 0 0 2px rgba(59, 130, 246, 0.1), 0 0 12px rgba(59, 130, 246, 0.2)",
+    animation: "grabPulse 2s ease-in-out infinite"
   },
   actionRow: {
     display: "flex",
@@ -788,11 +884,18 @@ var styles3 = {
     fontWeight: 600,
     borderRadius: 4,
     boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
-  }
+  },
+  pulseKeyframes: `
+    @keyframes grabPulse {
+      0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1), 0 0 12px rgba(59, 130, 246, 0.2); }
+      50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 0 20px rgba(59, 130, 246, 0.3); }
+    }
+  `
 };
 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 reducedMotion = useReducedMotion();
   const isGrabbing = mode === "grabbing";
   const hasSteps = stepCount > 0;
   const handleCopy = async () => {
@@ -817,17 +920,18 @@ 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, "style", { children: styles3.pulseKeyframes }),
+    /* @__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)(
+        whileHover: reducedMotion ? {} : { scale: 1.01 },
+        whileTap: reducedMotion ? {} : { scale: 0.98 },
+        children: isGrabbing ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "svg",
             {
               width: "14",
@@ -835,8 +939,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 +949,7 @@ function Toolbar(props) {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "animate",
                     {
                       attributeName: "opacity",
@@ -855,7 +959,7 @@ function Toolbar(props) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "circle",
                   {
                     cx: "8",
@@ -866,7 +970,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 +979,7 @@ function Toolbar(props) {
                           repeatCount: "indefinite"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "animate",
                         {
                           attributeName: "opacity",
@@ -891,85 +995,86 @@ 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,
           onClick: onExport,
           disabled: !hasSteps,
-          whileHover: hasSteps ? { scale: 1.02 } : {},
-          whileTap: hasSteps ? { scale: 0.98 } : {},
+          whileHover: hasSteps && !reducedMotion ? { scale: 1.02 } : {},
+          whileTap: hasSteps && !reducedMotion ? { 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,
           onClick: handleCopy,
           disabled: !hasSteps,
-          whileHover: hasSteps ? { scale: 1.02 } : {},
-          whileTap: hasSteps ? { scale: 0.98 } : {},
+          whileHover: hasSteps && !reducedMotion ? { scale: 1.02 } : {},
+          whileTap: hasSteps && !reducedMotion ? { 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,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { children: copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _react3.motion.span,
               {
                 style: styles3.copiedBadge,
-                initial: { opacity: 0, scale: 0.8, y: 4 },
+                initial: reducedMotion ? {} : { opacity: 0, scale: 0.5, y: 4 },
                 animate: { opacity: 1, scale: 1, y: 0 },
-                exit: { opacity: 0, scale: 0.8 },
+                exit: reducedMotion ? {} : { opacity: 0, scale: 0.5, y: 4 },
+                transition: reducedMotion ? { duration: 0 } : springs.bouncy,
                 children: "Copied!"
               }
-            )
+            ) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_react3.motion.button,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _react3.motion.button,
         {
           type: "button",
           style: resetButtonStyle,
           onClick: onReset,
           disabled: !hasSteps,
-          whileHover: hasSteps ? { scale: 1.02 } : {},
-          whileTap: hasSteps ? { scale: 0.98 } : {},
+          whileHover: hasSteps && !reducedMotion ? { scale: 1.02 } : {},
+          whileTap: hasSteps && !reducedMotion ? { 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 +1091,7 @@ function Toolbar(props) {
 }
 
 // src/devtools/components/StepList.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+
 var styles4 = {
   scrollArea: {
     flex: 1,
@@ -1045,23 +1150,24 @@ function StepList(props) {
     onClearAll,
     onExport
   } = props;
-  const [activeId, setActiveId] = (0, import_react4.useState)(null);
+  const [activeId, setActiveId] = _react.useState.call(void 0, null);
+  const reducedMotion = useReducedMotion();
   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 +1181,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 +1196,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,67 +1218,100 @@ 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)(
-        "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" })
-        }
-      ) }),
-      /* @__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: [
-          "Press ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
-          " to grab"
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      import_core.DndContext,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.scrollArea, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "wait", children: steps.length === 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _react3.motion.div,
+      {
+        style: styles4.empty,
+        initial: reducedMotion ? {} : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: reducedMotion ? {} : { opacity: 0 },
+        transition: { duration: 0.2 },
+        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__ */ _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__ */ _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__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
+              " to grab"
+            ] })
+          ] })
+        ]
+      },
+      "empty-state"
+    ) : /* @__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)(
-                SortableStepItem,
+              strategy: _sortable.verticalListSortingStrategy,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _react3.motion.div,
                 {
-                  step,
-                  index,
-                  onDelete: () => onDeleteStep({ id: step.id }),
-                  isDragActive: activeId !== null,
-                  isBeingDragged: step.id === activeId
+                  style: styles4.stepList,
+                  variants: reducedMotion ? void 0 : listContainerVariants,
+                  initial: "hidden",
+                  animate: "visible",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "popLayout", children: steps.map((step, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _react3.motion.div,
+                    {
+                      variants: reducedMotion ? void 0 : listItemVariants,
+                      initial: "hidden",
+                      animate: "visible",
+                      exit: "exit",
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        SortableStepItem,
+                        {
+                          step,
+                          index,
+                          onDelete: () => onDeleteStep({ id: step.id }),
+                          isDragActive: activeId !== null,
+                          isBeingDragged: step.id === activeId
+                        }
+                      )
+                    },
+                    step.id
+                  )) })
                 },
-                step.id
-              )) })
+                "step-list"
+              )
             }
           ),
-          /* @__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 }) })
         ]
       }
-    ) })
+    ) }) })
   ] });
 }
 
 // src/devtools/components/TabNav.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+
+
+
 var styles5 = {
   container: {
     display: "flex",
     gap: 2,
     padding: "8px 10px 0",
-    borderBottom: "1px solid hsl(215 20% 20%)"
+    borderBottom: "1px solid hsl(215 20% 20%)",
+    position: "relative"
   },
   tab: {
     flex: 1,
@@ -1189,13 +1328,21 @@ var styles5 = {
     fontWeight: 500,
     fontFamily: "inherit",
     cursor: "pointer",
-    transition: "all 0.15s ease",
+    transition: "color 0.15s ease",
     outline: "none",
-    marginBottom: -1
+    marginBottom: -1,
+    position: "relative",
+    zIndex: 1
   },
   tabActive: {
-    color: "hsl(217 91% 70%)",
-    borderBottomColor: "hsl(217 91% 60%)"
+    color: "hsl(217 91% 70%)"
+  },
+  indicator: {
+    position: "absolute",
+    bottom: -1,
+    height: 2,
+    backgroundColor: "hsl(217 91% 60%)",
+    borderRadius: 1
   },
   badge: {
     display: "inline-flex",
@@ -1217,6 +1364,17 @@ var styles5 = {
 };
 function TabNav(props) {
   const { activeTab, onTabChange, stepCount, flowCount } = props;
+  const reducedMotion = useReducedMotion();
+  const prevStepCount = _react.useRef.call(void 0, stepCount);
+  const prevFlowCount = _react.useRef.call(void 0, flowCount);
+  const stepCountChanged = stepCount !== prevStepCount.current;
+  const flowCountChanged = flowCount !== prevFlowCount.current;
+  _react.useEffect.call(void 0, () => {
+    prevStepCount.current = stepCount;
+  }, [stepCount]);
+  _react.useEffect.call(void 0, () => {
+    prevFlowCount.current = flowCount;
+  }, [flowCount]);
   const stepsTabStyle = {
     ...styles5.tab,
     ...activeTab === "steps" && styles5.tabActive
@@ -1233,69 +1391,117 @@ 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 })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "popLayout", children: stepCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react3.motion.span,
+            {
+              style: stepsBadgeStyle,
+              initial: stepCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
+              animate: { scale: 1 },
+              exit: { scale: 0.8, opacity: 0 },
+              transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+              children: stepCount
+            },
+            `step-badge-${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 })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "popLayout", children: flowCount > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react3.motion.span,
+            {
+              style: flowsBadgeStyle,
+              initial: flowCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
+              animate: { scale: 1 },
+              exit: { scale: 0.8, opacity: 0 },
+              transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+              children: flowCount
+            },
+            `flow-badge-${flowCount}`
+          ) })
         ]
       }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        style: {
+          ...styles5.indicator,
+          left: activeTab === "steps" ? 10 : "50%",
+          width: "calc(50% - 11px)",
+          transition: reducedMotion ? "none" : "left 0.2s cubic-bezier(0.16, 1, 0.3, 1)"
+        }
+      }
     )
   ] });
 }
 
 // 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 +1519,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 +1551,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",
@@ -1360,7 +1564,12 @@ var styles6 = {
     borderRadius: 8,
     border: "1px solid hsl(215 20% 22%)",
     fontSize: 12,
-    fontFamily: "inherit"
+    fontFamily: "inherit",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  cardHover: {
+    borderColor: "hsl(215 20% 28%)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
   },
   cardActive: {
     borderColor: "hsl(217 91% 55% / 0.5)",
@@ -1480,7 +1689,9 @@ 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 [isHovered, setIsHovered] = _react.useState.call(void 0, false);
+  const reducedMotion = useReducedMotion();
   const handleDelete = () => {
     if (confirmDelete) {
       onDelete();
@@ -1492,6 +1703,7 @@ function FlowItem(props) {
   };
   const cardStyle = {
     ...styles6.card,
+    ...isHovered && styles6.cardHover,
     ...isActive && styles6.cardActive
   };
   const statusBadgeStyle = {
@@ -1503,84 +1715,117 @@ 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" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: statusBadgeStyle, children: state?.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 })
-      ] }),
-      /* @__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 })
-      ] }),
-      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 })
-      ] })
-    ] }) : /* @__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,
-        {
-          type: "button",
-          style: styles6.actionButton,
-          onClick: onEdit,
-          disabled: !state,
-          whileHover: state ? { scale: 1.02 } : {},
-          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" }) }),
-            "Edit"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react8.motion.button,
-        {
-          type: "button",
-          style: deleteButtonStyle,
-          onClick: handleDelete,
-          disabled: !state,
-          whileHover: state ? { scale: 1.02 } : {},
-          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)(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
-                }
-              )
-            ] }),
-            confirmDelete ? "Confirm?" : "Delete"
-          ]
-        }
-      )
-    ] })
-  ] });
+  const currentStatus = _nullishCoalesce(_optionalChain([state, 'optionalAccess', _2 => _2.status]), () => ( "no state"));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      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 }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "wait", children: isActive && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _react3.motion.span,
+              {
+                style: { ...styles6.statusBadge, ...styles6.activeBadge },
+                initial: reducedMotion ? {} : { scale: 0.8, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: reducedMotion ? {} : { scale: 0.8, opacity: 0 },
+                transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+                children: "Active"
+              },
+              "active-badge"
+            ) })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react3.motion.span,
+            {
+              style: statusBadgeStyle,
+              initial: reducedMotion ? {} : { scale: 0.9, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: reducedMotion ? {} : { scale: 0.9, opacity: 0 },
+              transition: reducedMotion ? { duration: 0 } : { duration: 0.15 },
+              children: currentStatus
+            },
+            currentStatus
+          ) })
+        ] }),
+        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__ */ _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__ */ _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__ */ _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,
+              onClick: onEdit,
+              disabled: !state,
+              whileHover: state && !reducedMotion ? { scale: 1.02 } : {},
+              whileTap: state && !reducedMotion ? { scale: 0.98 } : {},
+              title: state ? "Edit flow state" : "No state to edit",
+              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: "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__ */ _jsxruntime.jsxs.call(void 0, 
+            _react3.motion.button,
+            {
+              type: "button",
+              style: deleteButtonStyle,
+              onClick: handleDelete,
+              disabled: !state,
+              whileHover: state && !reducedMotion ? { scale: 1.02 } : {},
+              whileTap: state && !reducedMotion ? { scale: 0.98 } : {},
+              title: confirmDelete ? "Click again to confirm deletion" : state ? "Delete flow state" : "No state to delete",
+              children: [
+                /* @__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",
+                      d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+                    }
+                  )
+                ] }),
+                confirmDelete ? "Confirm?" : "Delete"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // 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",
     inset: 0,
     backgroundColor: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -1643,7 +1888,8 @@ var styles7 = {
     fontFamily: "ui-monospace, monospace",
     resize: "vertical",
     outline: "none",
-    lineHeight: 1.5
+    lineHeight: 1.5,
+    transition: "border-color 0.15s ease"
   },
   textareaError: {
     borderColor: "hsl(0 70% 50%)"
@@ -1695,15 +1941,22 @@ 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);
+  const [shake, setShake] = _react.useState.call(void 0, false);
+  const reducedMotion = useReducedMotion();
+  _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 triggerShake = _react.useCallback.call(void 0, () => {
+    if (reducedMotion) return;
+    setShake(true);
+    setTimeout(() => setShake(false), 400);
+  }, [reducedMotion]);
+  const handleSave = _react.useCallback.call(void 0, () => {
     try {
       const parsed = JSON.parse(jsonValue);
       if (typeof parsed.status !== "string") {
@@ -1719,9 +1972,10 @@ function FlowEditModal(props) {
       onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Invalid JSON");
+      triggerShake();
     }
-  }, [jsonValue, onSave, onClose]);
-  const handleKeyDown = (0, import_react9.useCallback)(
+  }, [jsonValue, onSave, onClose, triggerShake]);
+  const handleKeyDown = _react.useCallback.call(void 0, 
     (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -1734,7 +1988,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,47 +1998,54 @@ 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 },
+        initial: reducedMotion ? {} : { opacity: 0 },
         animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.15 },
+        exit: reducedMotion ? {} : { opacity: 0 },
+        transition: reducedMotion ? { duration: 0 } : { duration: 0.15 },
         onClick: (e) => {
           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 },
-            animate: { opacity: 1, scale: 1, y: 0 },
-            exit: { opacity: 0, scale: 0.95, y: 10 },
-            transition: { duration: 0.15, ease: [0.16, 1, 0.3, 1] },
+            initial: reducedMotion ? {} : { opacity: 0, scale: 0.95, y: 10 },
+            animate: {
+              opacity: 1,
+              scale: 1,
+              y: 0,
+              x: shake ? [0, -8, 8, -6, 6, -4, 4, 0] : 0
+            },
+            exit: reducedMotion ? {} : { opacity: 0, scale: 0.95, y: 10 },
+            transition: reducedMotion ? { duration: 0 } : springs.smooth,
             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)(
-                  "button",
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _react3.motion.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" }) })
+                    whileHover: reducedMotion ? {} : { scale: 1.1 },
+                    whileTap: reducedMotion ? {} : { scale: 0.9 },
+                    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,27 +2058,39 @@ function FlowEditModal(props) {
                     autoFocus: true
                   }
                 ),
-                error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles7.error, children: error })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { children: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _react3.motion.div,
+                  {
+                    style: styles7.error,
+                    initial: reducedMotion ? {} : { opacity: 0, y: -4 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: reducedMotion ? {} : { opacity: 0, y: -4 },
+                    transition: { duration: 0.15 },
+                    children: error
+                  }
+                ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.footer, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "button",
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.footer, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _react3.motion.button,
                   {
                     type: "button",
                     style: styles7.button,
                     onClick: onClose,
+                    whileHover: reducedMotion ? {} : { scale: 1.02 },
+                    whileTap: reducedMotion ? {} : { scale: 0.98 },
                     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,
                     onClick: handleSave,
                     disabled: !!error,
-                    whileHover: !error ? { scale: 1.02 } : {},
-                    whileTap: !error ? { scale: 0.98 } : {},
+                    whileHover: !error && !reducedMotion ? { scale: 1.02 } : {},
+                    whileTap: !error && !reducedMotion ? { scale: 0.98 } : {},
                     children: "Save"
                   }
                 )
@@ -1832,7 +2105,7 @@ function FlowEditModal(props) {
 }
 
 // src/devtools/components/FlowsTab.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+
 var styles8 = {
   container: {
     display: "flex",
@@ -1905,12 +2178,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 +2191,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 +2242,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 +2266,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 +2281,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 +2321,7 @@ function getExistingDataAttrs(element) {
 function isUnique(params) {
   try {
     return document.querySelectorAll(params.selector).length === 1;
-  } catch {
+  } catch (e4) {
     return false;
   }
 }
@@ -2107,27 +2380,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 +2413,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 +2461,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 +2488,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 +2507,7 @@ function loadSteps() {
     const parsed = JSON.parse(data);
     if (!Array.isArray(parsed)) return [];
     return parsed.map(migrateStep);
-  } catch {
+  } catch (e5) {
     return [];
   }
 }
@@ -2242,14 +2515,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 +2550,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 +2588,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 +2603,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 +2614,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 +2663,7 @@ function useStepStore() {
 }
 
 // src/devtools/DevToolsProvider.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+
 var styles9 = {
   panel: {
     position: "fixed",
@@ -2472,10 +2745,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 +2779,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 +2792,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 +2803,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 +2820,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 +2830,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 +2846,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 +2857,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 +2875,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 +2896,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 +2905,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 +2930,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,16 +2938,16 @@ 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,
+                style: { ...styles9.body, overflow: "hidden" },
                 initial: { height: 0, opacity: 0 },
                 animate: { height: "auto", opacity: 1 },
                 exit: { height: 0, opacity: 0 },
-                transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+                transition: springs.smooth,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     TabNav,
                     {
                       activeTab,
@@ -2683,7 +2956,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 +2967,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 +2978,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;