@flowsterix/react 0.11.1 → 0.12.1

package/dist/devtools/index.mjs

@@ -5,11 +5,82 @@ import {
 } from "../chunk-AJZMUYBN.mjs";
 
 // src/devtools/DevToolsProvider.tsx
-import { useCallback as useCallback8, useEffect as useEffect5, useRef, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef2, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { AnimatePresence as AnimatePresence3, motion as motion6 } from "motion/react";
+import { motion as motion9 } from "motion/react";
+
+// src/devtools/motion.ts
+import { useEffect, useState } from "react";
+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] = useState(false);
+  useEffect(() => {
+    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
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "motion/react";
 
@@ -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] = useState2(false);
+  useEffect2(() => {
+    if (onElementSelected) {
+    }
+  }, [onElementSelected]);
+  useEffect2(() => {
+    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 labelStyle = {
@@ -243,12 +334,16 @@ function GrabberOverlay(props) {
     labelStyle.left = "auto";
     labelStyle.right = 0;
   }
+  const highlightStyle = {
+    ...styles.highlight,
+    ...showPulse && styles.highlightPulse
+  };
   return createPortal(
     /* @__PURE__ */ jsxs("div", { style: styles.root, "data-devtools-panel": "", children: [
       /* @__PURE__ */ jsx(AnimatePresence, { children: isGrabbing && hoveredInfo && /* @__PURE__ */ jsx(
         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__ */ jsxs(
             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__ */ jsxs("div", { style: styles.labelTop, children: [
                   /* @__PURE__ */ jsxs("span", { style: styles.tagBadge, children: [
@@ -311,10 +407,10 @@ function GrabberOverlay(props) {
         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__ */ jsxs("div", { style: styles.hintItem, children: [
               /* @__PURE__ */ jsx("span", { style: styles.kbd, children: "Click" }),
@@ -340,7 +436,8 @@ function GrabberOverlay(props) {
 }
 
 // src/devtools/components/StepList.tsx
-import { useCallback, useState as useState2 } from "react";
+import { useCallback, useState as useState5 } from "react";
+import { motion as motion4, AnimatePresence as AnimatePresence3 } from "motion/react";
 import {
   DndContext,
   DragOverlay,
@@ -357,8 +454,10 @@ import {
 } from "@dnd-kit/sortable";
 
 // src/devtools/components/StepItem.tsx
+import { useState as useState3 } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS as CSS2 } from "@dnd-kit/utilities";
+import { motion as motion2 } from "motion/react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var styles2 = {
   card: {
@@ -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] = useState3(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__ */ jsx2("div", { ref: setNodeRef, style: wrapperStyle, children: /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
-    /* @__PURE__ */ jsx2("div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ jsxs2("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
-      /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "2", r: "1.5" }),
-      /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "8", r: "1.5" }),
-      /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "14", r: "1.5" }),
-      /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "14", r: "1.5" })
-    ] }) }),
-    /* @__PURE__ */ jsxs2("div", { style: styles2.content, children: [
-      /* @__PURE__ */ jsxs2("div", { style: styles2.header, children: [
-        /* @__PURE__ */ jsx2("span", { style: styles2.order, children: index + 1 }),
-        /* @__PURE__ */ jsxs2("span", { style: styles2.tagBadge, children: [
-          "<",
-          step.elementTag,
-          ">"
-        ] }),
-        step.elementText && /* @__PURE__ */ jsx2("span", { style: styles2.text, children: step.elementText })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { style: styles2.selector, children: step.selector }),
-      step.source && /* @__PURE__ */ jsxs2("div", { style: styles2.sourceRow, children: [
-        /* @__PURE__ */ jsx2(
-          "svg",
-          {
-            width: "10",
-            height: "10",
-            viewBox: "0 0 16 16",
-            fill: "hsl(142 71% 55%)",
-            children: /* @__PURE__ */ jsx2("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__ */ jsx2(
-          "a",
-          {
-            href: getVSCodeLink({ source: step.source }),
-            style: styles2.sourceLink,
-            title: "Open in VS Code",
-            children: formatSourcePath({ source: step.source })
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            style: styles2.copyButton,
-            onClick: handleCopySource,
-            title: "Copy path",
-            children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: setNodeRef,
+      style: wrapperStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /* @__PURE__ */ jsxs2("div", { style: cardStyle, children: [
+        /* @__PURE__ */ jsx2("div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ jsxs2("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "2", r: "1.5" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "2", r: "1.5" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "8", r: "1.5" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "8", r: "1.5" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "14", r: "1.5" }),
+          /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "14", r: "1.5" })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("div", { style: styles2.content, children: [
+          /* @__PURE__ */ jsxs2("div", { style: styles2.header, children: [
+            /* @__PURE__ */ jsx2(
+              motion2.span,
+              {
+                style: styles2.order,
+                initial: reducedMotion ? {} : { scale: 1.2 },
+                animate: { scale: 1 },
+                transition: reducedMotion ? { duration: 0 } : springs.bouncy,
+                children: index + 1
+              },
+              `order-${index}`
+            ),
+            /* @__PURE__ */ jsxs2("span", { style: styles2.tagBadge, children: [
+              "<",
+              step.elementTag,
+              ">"
+            ] }),
+            step.elementText && /* @__PURE__ */ jsx2("span", { style: styles2.text, children: step.elementText })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { style: styles2.selector, children: step.selector }),
+          step.source && /* @__PURE__ */ jsxs2("div", { style: styles2.sourceRow, children: [
+            /* @__PURE__ */ jsx2(
               "svg",
               {
                 width: "10",
                 height: "10",
                 viewBox: "0 0 16 16",
-                fill: "currentColor",
-                children: [
-                  /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("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__ */ jsx2(
+              "a",
+              {
+                href: getVSCodeLink({ source: step.source }),
+                style: styles2.sourceLink,
+                title: "Open in VS Code",
+                children: formatSourcePath({ source: step.source })
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                style: styles2.copyButton,
+                onClick: handleCopySource,
+                title: "Copy path",
+                children: /* @__PURE__ */ jsxs2(
+                  "svg",
+                  {
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 16 16",
+                    fill: "currentColor",
+                    children: [
+                      /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2(
+          motion2.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__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("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__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        style: styles2.deleteButton,
-        onClick: onDelete,
-        title: "Delete step",
-        children: /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("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;
@@ -662,8 +790,8 @@ function StepItemDragPreview(props) {
 }
 
 // src/devtools/components/Toolbar.tsx
-import { useState } from "react";
-import { motion as motion2 } from "motion/react";
+import { useState as useState4 } from "react";
+import { motion as motion3, AnimatePresence as AnimatePresence2 } from "motion/react";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles3 = {
   toolbar: {
@@ -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] = useState(false);
+  const [copied, setCopied] = useState4(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__ */ jsxs3("div", { style: styles3.toolbar, children: [
+    /* @__PURE__ */ jsx3("style", { children: styles3.pulseKeyframes }),
     /* @__PURE__ */ jsx3("div", { style: styles3.grabRow, children: /* @__PURE__ */ jsx3(
-      motion2.button,
+      motion3.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__ */ jsxs3(Fragment, { children: [
           /* @__PURE__ */ jsxs3(
             "svg",
@@ -876,14 +1013,14 @@ function Toolbar(props) {
     ) }),
     /* @__PURE__ */ jsxs3("div", { style: styles3.actionRow, children: [
       /* @__PURE__ */ jsxs3(
-        motion2.button,
+        motion3.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__ */ jsxs3("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -895,14 +1032,14 @@ function Toolbar(props) {
         }
       ),
       /* @__PURE__ */ jsxs3(
-        motion2.button,
+        motion3.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__ */ jsxs3("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -910,28 +1047,29 @@ function Toolbar(props) {
               /* @__PURE__ */ jsx3("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__ */ jsx3(
-              motion2.span,
+            /* @__PURE__ */ jsx3(AnimatePresence2, { children: copied && /* @__PURE__ */ jsx3(
+              motion3.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__ */ jsxs3(
-        motion2.button,
+        motion3.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__ */ jsxs3("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
@@ -1012,7 +1150,8 @@ function StepList(props) {
     onClearAll,
     onExport
   } = props;
-  const [activeId, setActiveId] = useState2(null);
+  const [activeId, setActiveId] = useState5(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 = useSensors(
@@ -1079,26 +1218,37 @@ function StepList(props) {
         onReset: handleReset
       }
     ),
-    /* @__PURE__ */ jsx4("div", { style: styles4.scrollArea, children: steps.length === 0 ? /* @__PURE__ */ jsxs4("div", { style: styles4.empty, children: [
-      /* @__PURE__ */ jsx4("div", { style: styles4.emptyIcon, children: /* @__PURE__ */ jsx4(
-        "svg",
-        {
-          width: "20",
-          height: "20",
-          viewBox: "0 0 16 16",
-          fill: "hsl(215 20% 45%)",
-          children: /* @__PURE__ */ jsx4("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__ */ jsxs4("div", { style: styles4.emptyText, children: [
-        /* @__PURE__ */ jsx4("div", { children: "No steps captured yet." }),
-        /* @__PURE__ */ jsxs4("div", { style: { marginTop: 6 }, children: [
-          "Press ",
-          /* @__PURE__ */ jsx4("span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
-          " to grab"
-        ] })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx4("div", { style: styles4.scrollArea, children: /* @__PURE__ */ jsx4(AnimatePresence3, { mode: "wait", children: steps.length === 0 ? /* @__PURE__ */ jsxs4(
+      motion4.div,
+      {
+        style: styles4.empty,
+        initial: reducedMotion ? {} : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: reducedMotion ? {} : { opacity: 0 },
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ jsx4("div", { style: styles4.emptyIcon, children: /* @__PURE__ */ jsx4(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 16 16",
+              fill: "hsl(215 20% 45%)",
+              children: /* @__PURE__ */ jsx4("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__ */ jsxs4("div", { style: styles4.emptyText, children: [
+            /* @__PURE__ */ jsx4("div", { children: "No steps captured yet." }),
+            /* @__PURE__ */ jsxs4("div", { style: { marginTop: 6 }, children: [
+              "Press ",
+              /* @__PURE__ */ jsx4("span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
+              " to grab"
+            ] })
+          ] })
+        ]
+      },
+      "empty-state"
+    ) : /* @__PURE__ */ jsxs4(
       DndContext,
       {
         sensors,
@@ -1112,34 +1262,56 @@ function StepList(props) {
             {
               items: steps.map((s) => s.id),
               strategy: verticalListSortingStrategy,
-              children: /* @__PURE__ */ jsx4("div", { style: styles4.stepList, children: steps.map((step, index) => /* @__PURE__ */ jsx4(
-                SortableStepItem,
+              children: /* @__PURE__ */ jsx4(
+                motion4.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__ */ jsx4(AnimatePresence3, { mode: "popLayout", children: steps.map((step, index) => /* @__PURE__ */ jsx4(
+                    motion4.div,
+                    {
+                      variants: reducedMotion ? void 0 : listItemVariants,
+                      initial: "hidden",
+                      animate: "visible",
+                      exit: "exit",
+                      children: /* @__PURE__ */ jsx4(
+                        SortableStepItem,
+                        {
+                          step,
+                          index,
+                          onDelete: () => onDeleteStep({ id: step.id }),
+                          isDragActive: activeId !== null,
+                          isBeingDragged: step.id === activeId
+                        }
+                      )
+                    },
+                    step.id
+                  )) })
                 },
-                step.id
-              )) })
+                "step-list"
+              )
             }
           ),
           /* @__PURE__ */ jsx4(DragOverlay, { dropAnimation: null, children: activeStep && /* @__PURE__ */ jsx4(StepItemDragPreview, { step: activeStep, index: activeIndex }) })
         ]
       }
-    ) })
+    ) }) })
   ] });
 }
 
 // src/devtools/components/TabNav.tsx
+import { AnimatePresence as AnimatePresence4, motion as motion5 } from "motion/react";
+import { useEffect as useEffect3, useRef } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "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,
@@ -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 = useRef(stepCount);
+  const prevFlowCount = useRef(flowCount);
+  const stepCountChanged = stepCount !== prevStepCount.current;
+  const flowCountChanged = flowCount !== prevFlowCount.current;
+  useEffect3(() => {
+    prevStepCount.current = stepCount;
+  }, [stepCount]);
+  useEffect3(() => {
+    prevFlowCount.current = flowCount;
+  }, [flowCount]);
   const stepsTabStyle = {
     ...styles5.tab,
     ...activeTab === "steps" && styles5.tabActive
@@ -1210,7 +1401,21 @@ function TabNav(props) {
         children: [
           /* @__PURE__ */ jsx5("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { style: stepsBadgeStyle, children: stepCount })
+          /* @__PURE__ */ jsx5(AnimatePresence4, { mode: "popLayout", children: stepCount > 0 && /* @__PURE__ */ jsx5(
+            motion5.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,19 +1428,44 @@ function TabNav(props) {
         children: [
           /* @__PURE__ */ jsx5("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { style: flowsBadgeStyle, children: flowCount })
+          /* @__PURE__ */ jsx5(AnimatePresence4, { mode: "popLayout", children: flowCount > 0 && /* @__PURE__ */ jsx5(
+            motion5.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__ */ jsx5(
+      "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
-import { useCallback as useCallback4, useState as useState6 } from "react";
-import { motion as motion5 } from "motion/react";
+import { useCallback as useCallback4, useState as useState9 } from "react";
+import { motion as motion8, AnimatePresence as AnimatePresence7 } from "motion/react";
 
 // src/devtools/hooks/useFlowsData.ts
-import { useCallback as useCallback2, useEffect, useState as useState3, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState6, useSyncExternalStore } from "react";
 
 // src/devtools/globalBridge.ts
 var BRIDGE_KEY = "__FLOWSTERIX_DEVTOOLS_BRIDGE__";
@@ -1271,7 +1501,7 @@ function useBridge() {
 }
 function useFlowsData() {
   const bridge = useBridge();
-  const [flowsData, setFlowsData] = useState3([]);
+  const [flowsData, setFlowsData] = useState6([]);
   const loadFlowStates = useCallback2(async () => {
     if (!bridge) {
       setFlowsData([]);
@@ -1296,7 +1526,7 @@ function useFlowsData() {
     const results = await Promise.all(flowDataPromises);
     setFlowsData(results);
   }, [bridge]);
-  useEffect(() => {
+  useEffect4(() => {
     void loadFlowStates();
   }, [loadFlowStates]);
   const deleteFlow = useCallback2(
@@ -1327,8 +1557,8 @@ function useFlowsData() {
 }
 
 // src/devtools/components/FlowItem.tsx
-import { useState as useState4 } from "react";
-import { motion as motion3 } from "motion/react";
+import { useState as useState7 } from "react";
+import { motion as motion6, AnimatePresence as AnimatePresence5 } from "motion/react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var styles6 = {
   card: {
@@ -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)",
@@ -1460,7 +1695,9 @@ var statusStyles = {
 function FlowItem(props) {
   const { flow, onEdit, onDelete } = props;
   const { flowId, definition, state, isActive } = flow;
-  const [confirmDelete, setConfirmDelete] = useState4(false);
+  const [confirmDelete, setConfirmDelete] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(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,84 +1721,117 @@ function FlowItem(props) {
     ...confirmDelete && styles6.actionButtonDanger
   };
   const stepInfo = state ? `Step ${state.stepIndex + 1}/${definition.steps.length}` : null;
-  return /* @__PURE__ */ jsxs6("div", { style: cardStyle, children: [
-    /* @__PURE__ */ jsxs6("div", { style: styles6.header, children: [
-      /* @__PURE__ */ jsxs6("div", { style: styles6.titleGroup, children: [
-        /* @__PURE__ */ jsx6("span", { style: styles6.flowId, children: flowId }),
-        isActive && /* @__PURE__ */ jsx6("span", { style: { ...styles6.statusBadge, ...styles6.activeBadge }, children: "Active" })
-      ] }),
-      /* @__PURE__ */ jsx6("span", { style: statusBadgeStyle, children: state?.status ?? "no state" })
-    ] }),
-    state ? /* @__PURE__ */ jsxs6("div", { style: styles6.infoRow, children: [
-      stepInfo && /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "Step:" }),
-        /* @__PURE__ */ jsx6("span", { style: styles6.value, children: stepInfo })
-      ] }),
-      /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "Version:" }),
-        /* @__PURE__ */ jsx6("span", { style: styles6.value, children: state.version })
-      ] }),
-      state.stepId && /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
-        /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "ID:" }),
-        /* @__PURE__ */ jsx6("span", { style: styles6.value, children: state.stepId })
-      ] })
-    ] }) : /* @__PURE__ */ jsx6("div", { style: styles6.noState, children: "No stored state" }),
-    /* @__PURE__ */ jsxs6("div", { style: styles6.actions, children: [
-      /* @__PURE__ */ jsxs6(
-        motion3.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__ */ jsx6("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx6("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__ */ jsxs6(
-        motion3.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__ */ jsxs6("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
-              /* @__PURE__ */ jsx6("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__ */ jsx6(
-                "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 = state?.status ?? "no state";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: styles6.header, children: [
+          /* @__PURE__ */ jsxs6("div", { style: styles6.titleGroup, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles6.flowId, children: flowId }),
+            /* @__PURE__ */ jsx6(AnimatePresence5, { mode: "wait", children: isActive && /* @__PURE__ */ jsx6(
+              motion6.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__ */ jsx6(AnimatePresence5, { mode: "wait", children: /* @__PURE__ */ jsx6(
+            motion6.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__ */ jsxs6("div", { style: styles6.infoRow, children: [
+          stepInfo && /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "Step:" }),
+            /* @__PURE__ */ jsx6("span", { style: styles6.value, children: stepInfo })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "Version:" }),
+            /* @__PURE__ */ jsx6("span", { style: styles6.value, children: state.version })
+          ] }),
+          state.stepId && /* @__PURE__ */ jsxs6("div", { style: styles6.infoItem, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles6.label, children: "ID:" }),
+            /* @__PURE__ */ jsx6("span", { style: styles6.value, children: state.stepId })
+          ] })
+        ] }) : /* @__PURE__ */ jsx6("div", { style: styles6.noState, children: "No stored state" }),
+        /* @__PURE__ */ jsxs6("div", { style: styles6.actions, children: [
+          /* @__PURE__ */ jsxs6(
+            motion6.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__ */ jsx6("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx6("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__ */ jsxs6(
+            motion6.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__ */ jsxs6("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+                  /* @__PURE__ */ jsx6("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__ */ jsx6(
+                    "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
-import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useState as useState8 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { AnimatePresence as AnimatePresence2, motion as motion4 } from "motion/react";
+import { AnimatePresence as AnimatePresence6, motion as motion7 } from "motion/react";
 import { jsx as jsx7, jsxs as jsxs7 } from "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",
@@ -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%)"
@@ -1675,14 +1947,21 @@ var styles7 = {
 };
 function FlowEditModal(props) {
   const { isOpen, flowId, initialState, onClose, onSave, container } = props;
-  const [jsonValue, setJsonValue] = useState5("");
-  const [error, setError] = useState5(null);
-  useEffect2(() => {
+  const [jsonValue, setJsonValue] = useState8("");
+  const [error, setError] = useState8(null);
+  const [shake, setShake] = useState8(false);
+  const reducedMotion = useReducedMotion();
+  useEffect5(() => {
     if (isOpen && initialState) {
       setJsonValue(JSON.stringify(initialState, null, 2));
       setError(null);
     }
   }, [isOpen, initialState]);
+  const triggerShake = useCallback3(() => {
+    if (reducedMotion) return;
+    setShake(true);
+    setTimeout(() => setShake(false), 400);
+  }, [reducedMotion]);
   const handleSave = useCallback3(() => {
     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 = useCallback3(
     (e) => {
       if (e.key === "Escape") {
@@ -1725,26 +2005,31 @@ function FlowEditModal(props) {
     ...error && styles7.buttonDisabled
   };
   return createPortal2(
-    /* @__PURE__ */ jsx7(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsx7(
-      motion4.div,
+    /* @__PURE__ */ jsx7(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsx7(
+      motion7.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__ */ jsxs7(
-          motion4.div,
+          motion7.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__ */ jsxs7("div", { style: styles7.header, children: [
@@ -1753,12 +2038,14 @@ function FlowEditModal(props) {
                   flowId
                 ] }),
                 /* @__PURE__ */ jsx7(
-                  "button",
+                  motion7.button,
                   {
                     type: "button",
                     style: styles7.closeButton,
                     onClick: onClose,
                     title: "Close",
+                    whileHover: reducedMotion ? {} : { scale: 1.1 },
+                    whileTap: reducedMotion ? {} : { scale: 0.9 },
                     children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx7("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,27 +2064,39 @@ function FlowEditModal(props) {
                     autoFocus: true
                   }
                 ),
-                error && /* @__PURE__ */ jsx7("div", { style: styles7.error, children: error })
+                /* @__PURE__ */ jsx7(AnimatePresence6, { children: error && /* @__PURE__ */ jsx7(
+                  motion7.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__ */ jsxs7("div", { style: styles7.footer, children: [
                 /* @__PURE__ */ jsx7(
-                  "button",
+                  motion7.button,
                   {
                     type: "button",
                     style: styles7.button,
                     onClick: onClose,
+                    whileHover: reducedMotion ? {} : { scale: 1.02 },
+                    whileTap: reducedMotion ? {} : { scale: 0.98 },
                     children: "Cancel"
                   }
                 ),
                 /* @__PURE__ */ jsx7(
-                  motion4.button,
+                  motion7.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"
                   }
                 )
@@ -1885,7 +2184,8 @@ var styles8 = {
 function FlowsTab(props) {
   const { container } = props;
   const { flows, refreshFlows, deleteFlow, updateFlow } = useFlowsData();
-  const [editModal, setEditModal] = useState6({
+  const reducedMotion = useReducedMotion();
+  const [editModal, setEditModal] = useState9({
     isOpen: false,
     flowId: "",
     state: null
@@ -1940,7 +2240,7 @@ function FlowsTab(props) {
         " registered"
       ] }),
       /* @__PURE__ */ jsxs8(
-        motion5.button,
+        motion8.button,
         {
           type: "button",
           style: styles8.refreshButton,
@@ -1964,15 +2264,33 @@ function FlowsTab(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8("div", { style: styles8.flowList, children: flows.map((flow) => /* @__PURE__ */ jsx8(
-      FlowItem,
+    /* @__PURE__ */ jsx8(
+      motion8.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__ */ jsx8(AnimatePresence7, { mode: "popLayout", children: flows.map((flow) => /* @__PURE__ */ jsx8(
+          motion8.div,
+          {
+            variants: reducedMotion ? void 0 : listItemVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            children: /* @__PURE__ */ jsx8(
+              FlowItem,
+              {
+                flow,
+                onEdit: () => handleEdit(flow.flowId, flow.state),
+                onDelete: () => void handleDelete(flow.flowId)
+              }
+            )
+          },
+          flow.flowId
+        )) })
+      }
+    ),
     editModal.state && /* @__PURE__ */ jsx8(
       FlowEditModal,
       {
@@ -1988,7 +2306,7 @@ function FlowsTab(props) {
 }
 
 // src/devtools/hooks/useGrabMode.ts
-import { useCallback as useCallback6, useEffect as useEffect3, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState10 } from "react";
 
 // src/devtools/hooks/useElementInfo.ts
 import { useCallback as useCallback5 } from "react";
@@ -2125,8 +2443,8 @@ function isDevToolsElement(element) {
   return false;
 }
 function useGrabMode() {
-  const [mode, setMode] = useState7("idle");
-  const [hoveredElement, setHoveredElement] = useState7(null);
+  const [mode, setMode] = useState10("idle");
+  const [hoveredElement, setHoveredElement] = useState10(null);
   const { getElementInfo } = useElementInfo();
   const startGrabbing = useCallback6(() => {
     setMode("grabbing");
@@ -2144,7 +2462,7 @@ function useGrabMode() {
     if (!hoveredElement) return null;
     return hoveredElement.info;
   }, [hoveredElement]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (mode !== "grabbing") return;
     const handleMouseMove = (e) => {
       const target = document.elementFromPoint(e.clientX, e.clientY);
@@ -2168,7 +2486,7 @@ function useGrabMode() {
     document.addEventListener("mousemove", handleMouseMove, { passive: true });
     return () => document.removeEventListener("mousemove", handleMouseMove);
   }, [mode, getElementInfo]);
-  useEffect3(() => {
+  useEffect6(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "g") {
         e.preventDefault();
@@ -2195,7 +2513,7 @@ function useGrabMode() {
 }
 
 // src/devtools/hooks/useStepStore.ts
-import { useCallback as useCallback7, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
 // src/devtools/utils/storage.ts
 var STORAGE_KEY = "flowsterix-devtools-steps";
@@ -2258,14 +2576,14 @@ function generateId() {
 }
 function useStepStore() {
   const steps = useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
-  useEffect4(() => {
+  useEffect7(() => {
     const saved = loadSteps();
     if (saved.length > 0) {
       store.steps = saved;
       notifyListeners();
     }
   }, []);
-  useEffect4(() => {
+  useEffect7(() => {
     saveSteps(steps);
   }, [steps]);
   const addStep = useCallback7((params) => {
@@ -2452,10 +2770,10 @@ var styles9 = {
 };
 function DevToolsProvider(props) {
   const { children, enabled = true, defaultTab = "steps" } = props;
-  const [mounted, setMounted] = useState8(false);
-  const [shadowRoot, setShadowRoot] = useState8(null);
-  const [activeTab, setActiveTab] = useState8(defaultTab);
-  useEffect5(() => {
+  const [mounted, setMounted] = useState11(false);
+  const [shadowRoot, setShadowRoot] = useState11(null);
+  const [activeTab, setActiveTab] = useState11(defaultTab);
+  useEffect8(() => {
     setMounted(true);
     const host = document.createElement("div");
     host.setAttribute("data-devtools-host", "");
@@ -2486,10 +2804,10 @@ function DevToolsProvider(props) {
     exportSteps
   } = useStepStore();
   const { flows } = useFlowsData();
-  const [collapsed, setCollapsed] = useState8(false);
-  const [position, setPosition] = useState8({ x: 16, y: 16 });
-  const [isPanelDragging, setIsPanelDragging] = useState8(false);
-  const dragStartRef = useRef(null);
+  const [collapsed, setCollapsed] = useState11(false);
+  const [position, setPosition] = useState11({ x: 16, y: 16 });
+  const [isPanelDragging, setIsPanelDragging] = useState11(false);
+  const dragStartRef = useRef2(null);
   const handleClick = useCallback8(
     (e) => {
       if (mode !== "grabbing") return;
@@ -2510,12 +2828,12 @@ function DevToolsProvider(props) {
     },
     [mode, selectCurrent, addStep]
   );
-  useEffect5(() => {
+  useEffect8(() => {
     if (mode !== "grabbing") return;
     document.addEventListener("click", handleClick, { capture: true });
     return () => document.removeEventListener("click", handleClick, { capture: true });
   }, [mode, handleClick]);
-  useEffect5(() => {
+  useEffect8(() => {
     if (mode !== "grabbing") return;
     const preventDefault = (e) => {
       const target = e.target;
@@ -2527,7 +2845,7 @@ function DevToolsProvider(props) {
       document.removeEventListener("submit", preventDefault, { capture: true });
     };
   }, [mode]);
-  useEffect5(() => {
+  useEffect8(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "m") {
         e.preventDefault();
@@ -2580,7 +2898,8 @@ function DevToolsProvider(props) {
   };
   const headerStyle = {
     ...styles9.header,
-    ...isPanelDragging && styles9.headerDragging
+    ...isPanelDragging && styles9.headerDragging,
+    ...collapsed && { borderBottom: "none" }
   };
   const portalContainer = shadowContainer ?? document.body;
   return /* @__PURE__ */ jsxs9(Fragment3, { children: [
@@ -2595,9 +2914,11 @@ function DevToolsProvider(props) {
     ),
     createPortal3(
       /* @__PURE__ */ jsxs9(
-        motion6.div,
+        motion9.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__ */ jsx9(AnimatePresence3, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs9(
-              motion6.div,
+            /* @__PURE__ */ jsx9(
+              motion9.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__ */ jsxs9("div", { style: { pointerEvents: collapsed ? "none" : "auto" }, children: [
                   /* @__PURE__ */ jsx9(
                     TabNav,
                     {
@@ -2675,9 +3003,9 @@ function DevToolsProvider(props) {
                       onExport: exportSteps
                     }
                   ) : /* @__PURE__ */ jsx9(FlowsTab, { container: shadowContainer })
-                ]
+                ] })
               }
-            ) })
+            )
           ]
         }
       ),