@flowsterix/react 0.12.0 → 0.12.1

package/dist/devtools/DevToolsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsProvider.d.ts","sourceRoot":"","sources":["../../src/devtools/DevToolsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAoF1C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAsR5D"}
+{"version":3,"file":"DevToolsProvider.d.ts","sourceRoot":"","sources":["../../src/devtools/DevToolsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAoF1C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA8R5D"}

package/dist/devtools/components/FlowsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowsTab.d.ts","sourceRoot":"","sources":["../../../src/devtools/components/FlowsTab.tsx"],"names":[],"mappings":"AAqFA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAC3B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6G5C"}
+{"version":3,"file":"FlowsTab.d.ts","sourceRoot":"","sources":["../../../src/devtools/components/FlowsTab.tsx"],"names":[],"mappings":"AA0FA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAC3B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA4H5C"}

package/dist/devtools/components/TabNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabNav.d.ts","sourceRoot":"","sources":["../../../src/devtools/components/TabNav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAgE3C,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,WAAW,CAAA;IACtB,WAAW,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAqGxC"}
+{"version":3,"file":"TabNav.d.ts","sourceRoot":"","sources":["../../../src/devtools/components/TabNav.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AA+D3C,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,WAAW,CAAA;IACtB,WAAW,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAiHxC"}

package/dist/devtools/index.cjs

@@ -1406,12 +1406,15 @@ function TabNav(props) {
             {
               style: stepsBadgeStyle,
               initial: stepCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
-              animate: { 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-${stepCount}`
+            "step-badge"
           ) })
         ]
       }
@@ -1429,13 +1432,16 @@ function TabNav(props) {
             _react3.motion.span,
             {
               style: flowsBadgeStyle,
-              initial: flowCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
-              animate: { scale: 1 },
+              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-${flowCount}`
+            "flow-badge"
           ) })
         ]
       }
@@ -2178,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: "",
@@ -2257,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,
       {
@@ -2873,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: [
@@ -2891,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] },
@@ -2938,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, overflow: "hidden" },
-                initial: { height: 0, opacity: 0 },
-                animate: { height: "auto", opacity: 1 },
-                exit: { height: 0, opacity: 0 },
-                transition: springs.smooth,
-                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,
                     {
@@ -2968,9 +3003,9 @@ function DevToolsProvider(props) {
                       onExport: exportSteps
                     }
                   ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FlowsTab, { container: shadowContainer })
-                ]
+                ] })
               }
-            ) })
+            )
           ]
         }
       ),

package/dist/devtools/index.mjs

@@ -7,7 +7,7 @@ import {
 // src/devtools/DevToolsProvider.tsx
 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 AnimatePresence7, motion as motion9 } from "motion/react";
+import { motion as motion9 } from "motion/react";
 
 // src/devtools/motion.ts
 import { useEffect, useState } from "react";
@@ -1302,8 +1302,8 @@ function StepList(props) {
 }
 
 // src/devtools/components/TabNav.tsx
+import { AnimatePresence as AnimatePresence4, motion as motion5 } from "motion/react";
 import { useEffect as useEffect3, useRef } from "react";
-import { motion as motion5, AnimatePresence as AnimatePresence4 } from "motion/react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var styles5 = {
   container: {
@@ -1406,12 +1406,15 @@ function TabNav(props) {
             {
               style: stepsBadgeStyle,
               initial: stepCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
-              animate: { 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-${stepCount}`
+            "step-badge"
           ) })
         ]
       }
@@ -1429,13 +1432,16 @@ function TabNav(props) {
             motion5.span,
             {
               style: flowsBadgeStyle,
-              initial: flowCountChanged && !reducedMotion ? { scale: 1.3 } : { scale: 1 },
-              animate: { scale: 1 },
+              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-${flowCount}`
+            "flow-badge"
           ) })
         ]
       }
@@ -1456,7 +1462,7 @@ function TabNav(props) {
 
 // src/devtools/components/FlowsTab.tsx
 import { useCallback as useCallback4, useState as useState9 } from "react";
-import { motion as motion8 } from "motion/react";
+import { motion as motion8, AnimatePresence as AnimatePresence7 } from "motion/react";
 
 // src/devtools/hooks/useFlowsData.ts
 import { useCallback as useCallback2, useEffect as useEffect4, useState as useState6, useSyncExternalStore } from "react";
@@ -2178,6 +2184,7 @@ var styles8 = {
 function FlowsTab(props) {
   const { container } = props;
   const { flows, refreshFlows, deleteFlow, updateFlow } = useFlowsData();
+  const reducedMotion = useReducedMotion();
   const [editModal, setEditModal] = useState9({
     isOpen: false,
     flowId: "",
@@ -2257,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,
       {
@@ -2873,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: [
@@ -2891,6 +2917,8 @@ function DevToolsProvider(props) {
         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] },
@@ -2938,15 +2966,22 @@ function DevToolsProvider(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9(AnimatePresence7, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsx9(
               motion9.div,
               {
-                style: { ...styles9.body, overflow: "hidden" },
-                initial: { height: 0, opacity: 0 },
-                animate: { height: "auto", opacity: 1 },
-                exit: { height: 0, opacity: 0 },
-                transition: springs.smooth,
-                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,
                     {
@@ -2968,9 +3003,9 @@ function DevToolsProvider(props) {
                       onExport: exportSteps
                     }
                   ) : /* @__PURE__ */ jsx9(FlowsTab, { container: shadowContainer })
-                ]
+                ] })
               }
-            ) })
+            )
           ]
         }
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {