@flowsterix/react 0.11.1 → 0.12.1

package/dist/devtools/index.cjs

@@ -9,10 +9,81 @@ 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 stagger = {
+  fast: {
+    staggerChildren: 0.03,
+    delayChildren: 0.05
+  },
+  default: {
+    staggerChildren: 0.05,
+    delayChildren: 0.1
+  }
+};
+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
 
 
 
+
 // src/devtools/utils/sourceExtractor.ts
 function getReactFiber(element) {
   const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -125,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%",
@@ -183,7 +258,6 @@ var styles = {
     position: "fixed",
     bottom: 20,
     left: "50%",
-    transform: "translateX(-50%)",
     display: "flex",
     alignItems: "center",
     gap: 12,
@@ -227,7 +301,24 @@ 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 = _nullishCoalesce(container, () => ( document.body));
   const labelStyle = {
@@ -243,12 +334,16 @@ function GrabberOverlay(props) {
     labelStyle.left = "auto";
     labelStyle.right = 0;
   }
+  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,
@@ -261,19 +356,20 @@ 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,
+          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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.labelTop, children: [
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: styles.tagBadge, children: [
@@ -311,10 +407,10 @@ function GrabberOverlay(props) {
         _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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles.hintItem, children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles.kbd, children: "Click" }),
@@ -349,6 +445,7 @@ function GrabberOverlay(props) {
 
 
 
+
 var _core = require('@dnd-kit/core');
 
 
@@ -358,8 +455,10 @@ var _sortable = require('@dnd-kit/sortable');
 
 // src/devtools/components/StepItem.tsx
 
+
 var _utilities = require('@dnd-kit/utilities');
 
+
 var styles2 = {
   card: {
     display: "flex",
@@ -370,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,
@@ -509,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,
@@ -530,86 +636,108 @@ function SortableStepItem(props) {
   };
   const cardStyle = {
     ...styles2.card,
+    ...isHovered && !isGhost && styles2.cardHover,
     ...isGhost && styles2.cardGhost
   };
   const handleStyle = {
     ...styles2.dragHandle
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setNodeRef, style: wrapperStyle, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: cardStyle, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "3", cy: "14", r: "1.5" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "7", cy: "14", r: "1.5" })
-    ] }) }),
-    /* @__PURE__ */ _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__ */ _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: "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, 
+  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__ */ _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" })
-                ]
+                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__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
-      {
-        type: "button",
-        style: styles2.deleteButton,
-        onClick: onDelete,
-        title: "Delete step",
-        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" }) })
-      }
-    )
-  ] }) });
+    }
+  );
 }
 function StepItemDragPreview(props) {
   const { step, index } = props;
@@ -698,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",
@@ -755,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] = _react.useState.call(void 0, false);
+  const reducedMotion = useReducedMotion();
   const isGrabbing = mode === "grabbing";
   const hasSteps = stepCount > 0;
   const handleCopy = async () => {
@@ -785,14 +921,15 @@ function Toolbar(props) {
     ...hasSteps && styles3.actionButtonDanger
   };
   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 },
+        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",
@@ -882,8 +1019,8 @@ function Toolbar(props) {
           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__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -901,8 +1038,8 @@ function Toolbar(props) {
           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__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -910,16 +1047,17 @@ function Toolbar(props) {
               /* @__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__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__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!"
               }
-            )
+            ) })
           ]
         }
       ),
@@ -930,8 +1068,8 @@ function Toolbar(props) {
           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__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -1013,6 +1151,7 @@ function StepList(props) {
     onExport
   } = props;
   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 = _core.useSensors.call(void 0, 
@@ -1079,26 +1218,37 @@ function StepList(props) {
         onReset: handleReset
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.scrollArea, children: steps.length === 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles4.empty, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.emptyIcon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "svg",
-        {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 16 16",
-          fill: "hsl(215 20% 45%)",
-          children: /* @__PURE__ */ _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"
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__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,
@@ -1112,34 +1262,56 @@ function StepList(props) {
             {
               items: steps.map((s) => s.id),
               strategy: _sortable.verticalListSortingStrategy,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles4.stepList, children: steps.map((step, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                SortableStepItem,
+              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__ */ _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 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,
@@ -1156,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",
@@ -1184,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
@@ -1210,7 +1401,21 @@ function TabNav(props) {
         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: "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__ */ _jsxruntime.jsx.call(void 0, "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: stepCountChanged && !reducedMotion ? [1.3, 1] : 1,
+                opacity: 1
+              },
+              exit: { scale: 0.8, opacity: 0 },
+              transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+              children: stepCount
+            },
+            "step-badge"
+          ) })
         ]
       }
     ),
@@ -1223,9 +1428,34 @@ function TabNav(props) {
         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: "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__ */ _jsxruntime.jsx.call(void 0, "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: { scale: 0.8, opacity: 0 },
+              animate: {
+                scale: flowCountChanged && !reducedMotion ? [1.3, 1] : 1,
+                opacity: 1
+              },
+              exit: { scale: 0.8, opacity: 0 },
+              transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+              children: flowCount
+            },
+            "flow-badge"
+          ) })
         ]
       }
+    ),
+    /* @__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)"
+        }
+      }
     )
   ] });
 }
@@ -1340,7 +1570,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)",
@@ -1461,6 +1696,8 @@ function FlowItem(props) {
   const { flow, onEdit, onDelete } = props;
   const { flowId, definition, state, isActive } = flow;
   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();
@@ -1472,6 +1709,7 @@ function FlowItem(props) {
   };
   const cardStyle = {
     ...styles6.card,
+    ...isHovered && styles6.cardHover,
     ...isActive && styles6.cardActive
   };
   const statusBadgeStyle = {
@@ -1483,72 +1721,103 @@ function FlowItem(props) {
     ...confirmDelete && styles6.actionButtonDanger
   };
   const stepInfo = state ? `Step ${state.stepIndex + 1}/${definition.steps.length}` : null;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: cardStyle, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles6.titleGroup, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: styles6.flowId, children: flowId }),
-        isActive && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { ...styles6.statusBadge, ...styles6.activeBadge }, children: "Active" })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: statusBadgeStyle, children: _nullishCoalesce(_optionalChain([state, 'optionalAccess', _2 => _2.status]), () => ( "no state")) })
-    ] }),
-    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 ? { scale: 1.02 } : {},
-          whileTap: state ? { 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 ? { 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__ */ _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"
-          ]
-        }
-      )
-    ] })
-  ] });
+  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
@@ -1561,6 +1830,8 @@ var styles7 = {
     position: "fixed",
     inset: 0,
     backgroundColor: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -1623,7 +1894,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%)"
@@ -1677,12 +1949,19 @@ function FlowEditModal(props) {
   const { isOpen, flowId, initialState, onClose, onSave, container } = props;
   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 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);
@@ -1699,8 +1978,9 @@ function FlowEditModal(props) {
       onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Invalid JSON");
+      triggerShake();
     }
-  }, [jsonValue, onSave, onClose]);
+  }, [jsonValue, onSave, onClose, triggerShake]);
   const handleKeyDown = _react.useCallback.call(void 0, 
     (e) => {
       if (e.key === "Escape") {
@@ -1729,10 +2009,10 @@ function FlowEditModal(props) {
       _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();
         },
@@ -1741,10 +2021,15 @@ function FlowEditModal(props) {
           _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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.header, children: [
@@ -1753,12 +2038,14 @@ function FlowEditModal(props) {
                   flowId
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
+                  _react3.motion.button,
                   {
                     type: "button",
                     style: styles7.closeButton,
                     onClick: onClose,
                     title: "Close",
+                    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" }) })
                   }
                 )
@@ -1777,15 +2064,27 @@ function FlowEditModal(props) {
                     autoFocus: true
                   }
                 ),
-                error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: styles7.footer, children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
+                  _react3.motion.button,
                   {
                     type: "button",
                     style: styles7.button,
                     onClick: onClose,
+                    whileHover: reducedMotion ? {} : { scale: 1.02 },
+                    whileTap: reducedMotion ? {} : { scale: 0.98 },
                     children: "Cancel"
                   }
                 ),
@@ -1796,8 +2095,8 @@ function FlowEditModal(props) {
                     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"
                   }
                 )
@@ -1885,6 +2184,7 @@ var styles8 = {
 function FlowsTab(props) {
   const { container } = props;
   const { flows, refreshFlows, deleteFlow, updateFlow } = useFlowsData();
+  const reducedMotion = useReducedMotion();
   const [editModal, setEditModal] = _react.useState.call(void 0, {
     isOpen: false,
     flowId: "",
@@ -1964,15 +2264,33 @@ function FlowsTab(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles8.flowList, children: flows.map((flow) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      FlowItem,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _react3.motion.div,
       {
-        flow,
-        onEdit: () => handleEdit(flow.flowId, flow.state),
-        onDelete: () => void handleDelete(flow.flowId)
-      },
-      flow.flowId
-    )) }),
+        style: styles8.flowList,
+        variants: reducedMotion ? void 0 : listContainerVariants,
+        initial: "hidden",
+        animate: "visible",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { mode: "popLayout", children: flows.map((flow) => /* @__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, 
+              FlowItem,
+              {
+                flow,
+                onEdit: () => handleEdit(flow.flowId, flow.state),
+                onDelete: () => void handleDelete(flow.flowId)
+              }
+            )
+          },
+          flow.flowId
+        )) })
+      }
+    ),
     editModal.state && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       FlowEditModal,
       {
@@ -2580,7 +2898,8 @@ function DevToolsProvider(props) {
   };
   const headerStyle = {
     ...styles9.header,
-    ...isPanelDragging && styles9.headerDragging
+    ...isPanelDragging && styles9.headerDragging,
+    ...collapsed && { borderBottom: "none" }
   };
   const portalContainer = _nullishCoalesce(shadowContainer, () => ( document.body));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -2598,6 +2917,8 @@ function DevToolsProvider(props) {
         _react3.motion.div,
         {
           style: panelStyle,
+          layoutRoot: true,
+          layout: "size",
           initial: { opacity: 0, x: 20, scale: 0.95 },
           animate: { opacity: 1, x: 0, scale: 1 },
           transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
@@ -2645,15 +2966,22 @@ function DevToolsProvider(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _react3.motion.div,
               {
-                style: styles9.body,
-                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] },
-                children: [
+                style: {
+                  ...styles9.body,
+                  overflow: "hidden",
+                  flex: collapsed ? "0 0 auto" : "1 1 auto"
+                },
+                initial: false,
+                animate: { height: collapsed ? 0 : "auto", opacity: collapsed ? 0 : 1 },
+                transition: {
+                  height: springs.smooth,
+                  opacity: { duration: 0.12 }
+                },
+                "aria-hidden": collapsed,
+                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { pointerEvents: collapsed ? "none" : "auto" }, children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     TabNav,
                     {
@@ -2675,9 +3003,9 @@ function DevToolsProvider(props) {
                       onExport: exportSteps
                     }
                   ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FlowsTab, { container: shadowContainer })
-                ]
+                ] })
               }
-            ) })
+            )
           ]
         }
       ),