@flowsterix/react 0.10.0 → 0.11.0

package/dist/devtools/index.cjs

@@ -0,0 +1,2736 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/devtools/index.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  DevToolsContext: () => DevToolsContext,
+  DevToolsProvider: () => DevToolsProvider,
+  FlowEditModal: () => FlowEditModal,
+  FlowItem: () => FlowItem,
+  FlowsTab: () => FlowsTab,
+  GrabberOverlay: () => GrabberOverlay,
+  SortableStepItem: () => SortableStepItem,
+  StepItem: () => SortableStepItem,
+  StepItemDragPreview: () => StepItemDragPreview,
+  StepList: () => StepList,
+  TabNav: () => TabNav,
+  Toolbar: () => Toolbar,
+  clearSteps: () => clearSteps,
+  extractComponentHierarchy: () => extractComponentHierarchy,
+  extractSource: () => extractSource,
+  formatSourcePath: () => formatSourcePath,
+  generateSelector: () => generateSelector,
+  getVSCodeLink: () => getVSCodeLink,
+  loadSteps: () => loadSteps,
+  saveSteps: () => saveSteps,
+  useDevToolsContext: () => useDevToolsContext,
+  useDevToolsContextRequired: () => useDevToolsContextRequired,
+  useElementInfo: () => useElementInfo,
+  useFlowsData: () => useFlowsData,
+  useGrabMode: () => useGrabMode,
+  useStepStore: () => useStepStore
+});
+module.exports = __toCommonJS(devtools_exports);
+
+// src/devtools/DevToolsProvider.tsx
+var import_react16 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_react17 = require("motion/react");
+
+// src/devtools/components/GrabberOverlay.tsx
+var import_react_dom = require("react-dom");
+var import_react = require("motion/react");
+
+// src/devtools/utils/sourceExtractor.ts
+function getReactFiber(element) {
+  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook?.renderers) {
+    for (const renderer of hook.renderers.values()) {
+      if (renderer.findFiberByHostInstance) {
+        const fiber = renderer.findFiberByHostInstance(element);
+        if (fiber) return fiber;
+      }
+    }
+  }
+  const keys = Object.keys(element);
+  for (const key of keys) {
+    if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+      return element[key];
+    }
+  }
+  return null;
+}
+function getFiberName(fiber) {
+  const type = fiber.type || fiber.elementType;
+  if (!type) return null;
+  if (typeof type === "string") {
+    return type;
+  }
+  if (typeof type === "object") {
+    return type.displayName || type.name || null;
+  }
+  if (typeof type === "function") {
+    return type.displayName || type.name || null;
+  }
+  return null;
+}
+function findDebugSource(fiber) {
+  let current = fiber;
+  let depth = 0;
+  const maxDepth = 50;
+  while (current && depth < maxDepth) {
+    if (current._debugSource) {
+      const source = current._debugSource;
+      return {
+        fileName: source.fileName,
+        lineNumber: source.lineNumber,
+        columnNumber: source.columnNumber ?? 0
+      };
+    }
+    current = current.return ?? null;
+    depth++;
+  }
+  return null;
+}
+function extractSource(params) {
+  const { element } = params;
+  if (typeof window === "undefined") return null;
+  try {
+    const fiber = getReactFiber(element);
+    if (!fiber) return null;
+    return findDebugSource(fiber);
+  } catch {
+    return null;
+  }
+}
+function extractComponentHierarchy(params) {
+  const { element } = params;
+  const hierarchy = [];
+  if (typeof window === "undefined") return hierarchy;
+  try {
+    const fiber = getReactFiber(element);
+    if (!fiber) return hierarchy;
+    let current = fiber;
+    let depth = 0;
+    const maxDepth = 20;
+    while (current && depth < maxDepth) {
+      const name = getFiberName(current);
+      if (name && !hierarchy.includes(name)) {
+        hierarchy.push(name);
+      }
+      current = current.return ?? null;
+      depth++;
+    }
+    return hierarchy;
+  } catch {
+    return hierarchy;
+  }
+}
+function formatSourcePath(params) {
+  const { source } = params;
+  const fileName = source.fileName.replace(/^.*\/src\//, "src/");
+  return `${fileName}:${source.lineNumber}`;
+}
+function getVSCodeLink(params) {
+  const { source } = params;
+  return `vscode://file${source.fileName}:${source.lineNumber}:${source.columnNumber}`;
+}
+
+// src/devtools/components/GrabberOverlay.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var styles = {
+  root: {
+    position: "fixed",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 99999
+  },
+  highlight: {
+    position: "absolute",
+    border: "2px solid hsl(217 91% 60%)",
+    backgroundColor: "hsl(217 91% 60% / 0.08)",
+    borderRadius: 6,
+    pointerEvents: "none",
+    boxShadow: "0 0 0 4px hsl(217 91% 60% / 0.15), 0 4px 20px hsl(217 91% 60% / 0.2)"
+  },
+  label: {
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    marginBottom: 6,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    padding: "8px 10px",
+    backgroundColor: "hsl(222 47% 11%)",
+    border: "1px solid hsl(215 20% 22%)",
+    color: "hsl(215 20% 75%)",
+    fontSize: 11,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    borderRadius: 8,
+    boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+    maxWidth: 280
+  },
+  labelTop: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  tagBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 6px",
+    backgroundColor: "hsl(215 20% 22%)",
+    color: "hsl(217 91% 70%)",
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: 4
+  },
+  selector: {
+    color: "hsl(265 83% 78%)",
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 10,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    padding: "4px 6px",
+    backgroundColor: "hsl(215 20% 15%)",
+    borderRadius: 4,
+    border: "1px solid hsl(215 20% 20%)"
+  },
+  source: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    color: "hsl(142 71% 55%)",
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 10
+  },
+  hint: {
+    position: "fixed",
+    bottom: 20,
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    padding: "10px 16px",
+    backgroundColor: "hsl(222 47% 11%)",
+    border: "1px solid hsl(215 20% 22%)",
+    color: "hsl(215 20% 70%)",
+    fontSize: 12,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    borderRadius: 10,
+    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)"
+  },
+  hintItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    color: "hsl(215 20% 65%)"
+  },
+  kbd: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 5px",
+    backgroundColor: "hsl(215 20% 15%)",
+    border: "1px solid hsl(215 20% 22%)",
+    borderRadius: 4,
+    fontSize: 10,
+    fontFamily: "ui-monospace, monospace",
+    color: "hsl(215 20% 60%)",
+    fontWeight: 500
+  },
+  divider: {
+    width: 1,
+    height: 16,
+    backgroundColor: "hsl(215 20% 25%)"
+  }
+};
+var springTransition = {
+  type: "spring",
+  damping: 30,
+  stiffness: 400,
+  mass: 0.8
+};
+function GrabberOverlay(props) {
+  const { isGrabbing, hoveredInfo, container } = props;
+  if (typeof window === "undefined") return null;
+  const portalContainer = container ?? document.body;
+  const labelStyle = {
+    ...styles.label
+  };
+  if (hoveredInfo && hoveredInfo.rect.top < 80) {
+    labelStyle.bottom = "auto";
+    labelStyle.top = "100%";
+    labelStyle.marginBottom = 0;
+    labelStyle.marginTop = 6;
+  }
+  if (hoveredInfo && hoveredInfo.rect.left > window.innerWidth - 300) {
+    labelStyle.left = "auto";
+    labelStyle.right = 0;
+  }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.root, "data-devtools-panel": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: isGrabbing && hoveredInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react.motion.div,
+        {
+          style: styles.highlight,
+          initial: {
+            top: hoveredInfo.rect.top,
+            left: hoveredInfo.rect.left,
+            width: hoveredInfo.rect.width,
+            height: hoveredInfo.rect.height,
+            opacity: 0
+          },
+          animate: {
+            top: hoveredInfo.rect.top,
+            left: hoveredInfo.rect.left,
+            width: hoveredInfo.rect.width,
+            height: hoveredInfo.rect.height,
+            opacity: 1
+          },
+          exit: {
+            opacity: 0
+          },
+          transition: springTransition,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react.motion.div,
+            {
+              style: labelStyle,
+              initial: { opacity: 0, y: 4 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.03, duration: 0.12 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.labelTop, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: styles.tagBadge, children: [
+                    "<",
+                    hoveredInfo.tag,
+                    ">"
+                  ] }),
+                  hoveredInfo.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      style: {
+                        color: "hsl(215 20% 65%)",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: 150,
+                        fontSize: 11
+                      },
+                      children: hoveredInfo.text
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.selector, children: hoveredInfo.selector }),
+                hoveredInfo.source && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.source, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" }) }),
+                  formatSourcePath({ source: hoveredInfo.source })
+                ] })
+              ]
+            }
+          )
+        },
+        "grabber-highlight"
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: isGrabbing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react.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] },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "Click" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Add step" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "ESC" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Cancel" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.hintItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.kbd, children: "Ctrl+Shift+G" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Toggle" })
+            ] })
+          ]
+        },
+        "grabber-hint"
+      ) })
+    ] }),
+    portalContainer
+  );
+}
+
+// src/devtools/components/StepList.tsx
+var import_react4 = require("react");
+var import_core = require("@dnd-kit/core");
+var import_sortable2 = require("@dnd-kit/sortable");
+
+// src/devtools/components/StepItem.tsx
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var styles2 = {
+  card: {
+    display: "flex",
+    alignItems: "stretch",
+    gap: 0,
+    backgroundColor: "hsl(215 20% 16%)",
+    borderRadius: 8,
+    border: "1px solid hsl(215 20% 22%)",
+    fontSize: 12,
+    fontFamily: "inherit",
+    overflow: "hidden"
+  },
+  cardGhost: {
+    opacity: 0.4,
+    border: "1px dashed hsl(217 91% 60%)",
+    backgroundColor: "hsl(217 91% 60% / 0.05)"
+  },
+  cardOverlay: {
+    boxShadow: "0 12px 24px rgba(0, 0, 0, 0.4)",
+    border: "1px solid hsl(217 91% 60%)"
+  },
+  dragHandle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 28,
+    cursor: "grab",
+    color: "hsl(215 20% 40%)",
+    flexShrink: 0,
+    backgroundColor: "hsl(215 20% 13%)",
+    borderRight: "1px solid hsl(215 20% 20%)",
+    transition: "color 0.15s ease, background-color 0.15s ease"
+  },
+  dragHandleActive: {
+    cursor: "grabbing",
+    backgroundColor: "hsl(217 91% 60% / 0.15)",
+    color: "hsl(217 91% 60%)"
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    padding: 10
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  order: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 18,
+    height: 18,
+    backgroundColor: "hsl(217 91% 55% / 0.2)",
+    color: "hsl(217 91% 70%)",
+    fontSize: 10,
+    fontWeight: 600,
+    borderRadius: 5,
+    flexShrink: 0
+  },
+  tagBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 6px",
+    backgroundColor: "hsl(215 20% 22%)",
+    color: "hsl(217 91% 70%)",
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: 4
+  },
+  text: {
+    color: "hsl(215 20% 65%)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 140,
+    fontSize: 11
+  },
+  selector: {
+    display: "block",
+    color: "hsl(265 83% 75%)",
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 10,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    padding: "4px 6px",
+    backgroundColor: "hsl(215 20% 12%)",
+    borderRadius: 4,
+    border: "1px solid hsl(215 20% 18%)"
+  },
+  sourceRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    marginTop: 2
+  },
+  sourceLink: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    color: "hsl(142 71% 55%)",
+    fontSize: 10,
+    fontFamily: "ui-monospace, monospace",
+    textDecoration: "none",
+    padding: "2px 0",
+    transition: "color 0.15s ease"
+  },
+  copyButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 18,
+    height: 18,
+    backgroundColor: "transparent",
+    border: "none",
+    color: "hsl(215 20% 50%)",
+    cursor: "pointer",
+    padding: 0,
+    borderRadius: 4,
+    transition: "color 0.15s ease, background-color 0.15s ease",
+    outline: "none"
+  },
+  deleteButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    backgroundColor: "transparent",
+    border: "none",
+    color: "hsl(215 20% 45%)",
+    cursor: "pointer",
+    padding: 0,
+    borderRadius: 5,
+    flexShrink: 0,
+    alignSelf: "flex-start",
+    marginTop: 2,
+    transition: "color 0.15s ease, background-color 0.15s ease",
+    outline: "none"
+  }
+};
+function SortableStepItem(props) {
+  const { step, index, onDelete, isBeingDragged = false } = props;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id: step.id });
+  const handleCopySource = async () => {
+    if (step.source) {
+      const path = formatSourcePath({ source: step.source });
+      await navigator.clipboard.writeText(path);
+    }
+  };
+  const isGhost = isDragging || isBeingDragged;
+  const wrapperStyle = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition: transition ?? "transform 200ms ease"
+  };
+  const cardStyle = {
+    ...styles2.card,
+    ...isGhost && styles2.cardGhost
+  };
+  const handleStyle = {
+    ...styles2.dragHandle
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: setNodeRef, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: handleStyle, ...attributes, ...listeners, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "14", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "14", r: "1.5" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.order, children: index + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles2.tagBadge, children: [
+          "<",
+          step.elementTag,
+          ">"
+        ] }),
+        step.elementText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.text, children: step.elementText })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles2.selector, children: step.selector }),
+      step.source && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.sourceRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            width: "10",
+            height: "10",
+            viewBox: "0 0 16 16",
+            fill: "hsl(142 71% 55%)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "a",
+          {
+            href: getVSCodeLink({ source: step.source }),
+            style: styles2.sourceLink,
+            title: "Open in VS Code",
+            children: formatSourcePath({ source: step.source })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles2.copyButton,
+            onClick: handleCopySource,
+            title: "Copy path",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        style: styles2.deleteButton,
+        onClick: onDelete,
+        title: "Delete step",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+      }
+    )
+  ] }) });
+}
+function StepItemDragPreview(props) {
+  const { step, index } = props;
+  const cardStyle = {
+    ...styles2.card,
+    ...styles2.cardOverlay,
+    width: 298
+    // Fixed width for overlay
+  };
+  const handleStyle = {
+    ...styles2.dragHandle,
+    ...styles2.dragHandleActive
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: handleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "2", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "8", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3", cy: "14", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "14", r: "1.5" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.order, children: index + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: styles2.tagBadge, children: [
+          "<",
+          step.elementTag,
+          ">"
+        ] }),
+        step.elementText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.text, children: step.elementText })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: styles2.selector, children: step.selector }),
+      step.source && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: styles2.sourceRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "svg",
+          {
+            width: "10",
+            height: "10",
+            viewBox: "0 0 16 16",
+            fill: "hsl(142 71% 55%)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: styles2.sourceLink, children: formatSourcePath({ source: step.source }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...styles2.deleteButton, visibility: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) }) })
+  ] });
+}
+
+// src/devtools/components/Toolbar.tsx
+var import_react2 = require("react");
+var import_react3 = require("motion/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var styles3 = {
+  toolbar: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: "10px 10px 0"
+  },
+  grabRow: {
+    display: "flex",
+    gap: 6
+  },
+  grabButton: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "8px 12px",
+    backgroundColor: "#252a35",
+    border: "1px solid #353d4a",
+    borderRadius: 8,
+    color: "#a3adc2",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  grabButtonActive: {
+    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)"
+  },
+  actionRow: {
+    display: "flex",
+    gap: 6
+  },
+  actionButton: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 5,
+    padding: "7px 8px",
+    backgroundColor: "transparent",
+    border: "1px solid #2d3544",
+    borderRadius: 6,
+    color: "#8b96a9",
+    fontSize: 11,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    whiteSpace: "nowrap",
+    position: "relative",
+    outline: "none"
+  },
+  actionButtonDisabled: {
+    opacity: 0.4,
+    cursor: "not-allowed"
+  },
+  actionButtonDanger: {
+    borderColor: "#7a2c2c",
+    color: "#e05555"
+  },
+  kbd: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "1px 4px",
+    marginLeft: 6,
+    backgroundColor: "#1e232c",
+    border: "1px solid #2d3544",
+    borderRadius: 3,
+    fontSize: 10,
+    fontFamily: "ui-monospace, monospace",
+    color: "#6b7685"
+  },
+  copiedBadge: {
+    position: "absolute",
+    top: -6,
+    right: -6,
+    padding: "2px 5px",
+    backgroundColor: "#166534",
+    color: "#86efac",
+    fontSize: 9,
+    fontWeight: 600,
+    borderRadius: 4,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+  }
+};
+function Toolbar(props) {
+  const { mode, stepCount, onToggleGrab, onExport, onCopyForAI, onReset } = props;
+  const [copied, setCopied] = (0, import_react2.useState)(false);
+  const isGrabbing = mode === "grabbing";
+  const hasSteps = stepCount > 0;
+  const handleCopy = async () => {
+    await onCopyForAI();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const grabButtonStyle = {
+    ...styles3.grabButton,
+    ...isGrabbing && styles3.grabButtonActive
+  };
+  const exportButtonStyle = {
+    ...styles3.actionButton,
+    ...!hasSteps && styles3.actionButtonDisabled
+  };
+  const copyButtonStyle = {
+    ...styles3.actionButton,
+    ...!hasSteps && styles3.actionButtonDisabled
+  };
+  const resetButtonStyle = {
+    ...styles3.actionButton,
+    ...!hasSteps && styles3.actionButtonDisabled,
+    ...hasSteps && styles3.actionButtonDanger
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles3.toolbar, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles3.grabRow, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react3.motion.button,
+      {
+        type: "button",
+        style: grabButtonStyle,
+        onClick: onToggleGrab,
+        whileHover: { scale: 1.01 },
+        whileTap: { scale: 0.98 },
+        children: isGrabbing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("circle", { cx: "8", cy: "8", r: "3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "animate",
+                    {
+                      attributeName: "r",
+                      values: "3;4;3",
+                      dur: "1s",
+                      repeatCount: "indefinite"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      values: "1;0.5;1",
+                      dur: "1s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "circle",
+                  {
+                    cx: "8",
+                    cy: "8",
+                    r: "6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1",
+                    opacity: "0.3",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: "4;7;4",
+                          dur: "1.5s",
+                          repeatCount: "indefinite"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.3;0;0.3",
+                          dur: "1.5s",
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          "Grabbing..."
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 16 16",
+              fill: "currentColor",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
+            }
+          ),
+          "Grab Element",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles3.kbd, children: "Ctrl+Shift+G" })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles3.actionRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_react3.motion.button,
+        {
+          type: "button",
+          style: exportButtonStyle,
+          onClick: onExport,
+          disabled: !hasSteps,
+          whileHover: hasSteps ? { scale: 1.02 } : {},
+          whileTap: hasSteps ? { scale: 0.98 } : {},
+          title: "Download JSON file",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" })
+            ] }),
+            "Export"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_react3.motion.button,
+        {
+          type: "button",
+          style: copyButtonStyle,
+          onClick: handleCopy,
+          disabled: !hasSteps,
+          whileHover: hasSteps ? { scale: 1.02 } : {},
+          whileTap: hasSteps ? { scale: 0.98 } : {},
+          title: "Copy JSON to clipboard",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 1h6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 5a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H6a1 1 0 0 1 0-2h7V6a1 1 0 0 1 1-1z" })
+            ] }),
+            "Copy",
+            copied && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_react3.motion.span,
+              {
+                style: styles3.copiedBadge,
+                initial: { opacity: 0, scale: 0.8, y: 4 },
+                animate: { opacity: 1, scale: 1, y: 0 },
+                exit: { opacity: 0, scale: 0.8 },
+                children: "Copied!"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_react3.motion.button,
+        {
+          type: "button",
+          style: resetButtonStyle,
+          onClick: onReset,
+          disabled: !hasSteps,
+          whileHover: hasSteps ? { scale: 1.02 } : {},
+          whileTap: hasSteps ? { scale: 0.98 } : {},
+          title: "Clear all steps",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "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"
+                }
+              )
+            ] }),
+            "Reset"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/devtools/components/StepList.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var styles4 = {
+  scrollArea: {
+    flex: 1,
+    overflowY: "auto",
+    overflowX: "hidden",
+    padding: 10
+  },
+  stepList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  empty: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: "32px 16px",
+    textAlign: "center",
+    color: "hsl(215 20% 55%)"
+  },
+  emptyIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: "hsl(215 20% 18%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  emptyText: {
+    fontSize: 13,
+    lineHeight: 1.5
+  },
+  kbd: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 5px",
+    backgroundColor: "hsl(215 20% 15%)",
+    border: "1px solid hsl(215 20% 22%)",
+    borderRadius: 4,
+    fontSize: 11,
+    fontFamily: "ui-monospace, monospace",
+    color: "hsl(215 20% 55%)"
+  }
+};
+function StepList(props) {
+  const {
+    steps,
+    mode,
+    onToggleGrab,
+    onDeleteStep,
+    onReorderSteps,
+    onClearAll,
+    onExport
+  } = props;
+  const [activeId, setActiveId] = (0, import_react4.useState)(null);
+  const activeStep = activeId ? steps.find((s) => s.id === activeId) : null;
+  const activeIndex = activeId ? steps.findIndex((s) => s.id === activeId) : -1;
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 4
+      }
+    }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {
+      coordinateGetter: import_sortable2.sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (0, import_react4.useCallback)((event) => {
+    setActiveId(event.active.id);
+  }, []);
+  const handleDragEnd = (0, import_react4.useCallback)(
+    (event) => {
+      const { active, over } = event;
+      setActiveId(null);
+      if (over && active.id !== over.id) {
+        const oldIndex = steps.findIndex((s) => s.id === active.id);
+        const newIndex = steps.findIndex((s) => s.id === over.id);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          onReorderSteps({ fromIndex: oldIndex, toIndex: newIndex });
+        }
+      }
+    },
+    [steps, onReorderSteps]
+  );
+  const handleDragCancel = (0, import_react4.useCallback)(() => {
+    setActiveId(null);
+  }, []);
+  const handleExportClick = (0, import_react4.useCallback)(() => {
+    const data = onExport();
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `flowsterix-steps-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [onExport]);
+  const handleCopyForAI = (0, import_react4.useCallback)(async () => {
+    const data = onExport();
+    await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+  }, [onExport]);
+  const handleReset = (0, import_react4.useCallback)(() => {
+    if (confirm("Clear all steps? This cannot be undone.")) {
+      onClearAll();
+    }
+  }, [onClearAll]);
+  if (typeof window === "undefined") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Toolbar,
+      {
+        mode,
+        stepCount: steps.length,
+        onToggleGrab,
+        onExport: handleExportClick,
+        onCopyForAI: handleCopyForAI,
+        onReset: handleReset
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.scrollArea, children: steps.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles4.empty, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.emptyIcon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 16 16",
+          fill: "hsl(215 20% 45%)",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles4.emptyText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "No steps captured yet." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: 6 }, children: [
+          "Press ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles4.kbd, children: "Ctrl+Shift+G" }),
+          " to grab"
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_core.DndContext,
+      {
+        sensors,
+        collisionDetection: import_core.closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_sortable2.SortableContext,
+            {
+              items: steps.map((s) => s.id),
+              strategy: import_sortable2.verticalListSortingStrategy,
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles4.stepList, children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                SortableStepItem,
+                {
+                  step,
+                  index,
+                  onDelete: () => onDeleteStep({ id: step.id }),
+                  isDragActive: activeId !== null,
+                  isBeingDragged: step.id === activeId
+                },
+                step.id
+              )) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.DragOverlay, { dropAnimation: null, children: activeStep && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StepItemDragPreview, { step: activeStep, index: activeIndex }) })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/devtools/components/TabNav.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var styles5 = {
+  container: {
+    display: "flex",
+    gap: 2,
+    padding: "8px 10px 0",
+    borderBottom: "1px solid hsl(215 20% 20%)"
+  },
+  tab: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "8px 12px",
+    backgroundColor: "transparent",
+    border: "none",
+    borderBottom: "2px solid transparent",
+    color: "hsl(215 20% 55%)",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    outline: "none",
+    marginBottom: -1
+  },
+  tabActive: {
+    color: "hsl(217 91% 70%)",
+    borderBottomColor: "hsl(217 91% 60%)"
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 18,
+    height: 18,
+    padding: "0 5px",
+    backgroundColor: "hsl(215 20% 22%)",
+    color: "hsl(215 20% 60%)",
+    fontSize: 10,
+    fontWeight: 600,
+    borderRadius: 9
+  },
+  badgeActive: {
+    backgroundColor: "hsl(217 91% 55% / 0.2)",
+    color: "hsl(217 91% 70%)"
+  }
+};
+function TabNav(props) {
+  const { activeTab, onTabChange, stepCount, flowCount } = props;
+  const stepsTabStyle = {
+    ...styles5.tab,
+    ...activeTab === "steps" && styles5.tabActive
+  };
+  const flowsTabStyle = {
+    ...styles5.tab,
+    ...activeTab === "flows" && styles5.tabActive
+  };
+  const stepsBadgeStyle = {
+    ...styles5.badge,
+    ...activeTab === "steps" && styles5.badgeActive
+  };
+  const flowsBadgeStyle = {
+    ...styles5.badge,
+    ...activeTab === "flows" && styles5.badgeActive
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles5.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        style: stepsTabStyle,
+        onClick: () => onTabChange("steps"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" }) }),
+          "Steps",
+          stepCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: stepsBadgeStyle, children: stepCount })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        style: flowsTabStyle,
+        onClick: () => onTabChange("flows"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" }) }),
+          "Flows",
+          flowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: flowsBadgeStyle, children: flowCount })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/devtools/components/FlowsTab.tsx
+var import_react11 = require("react");
+var import_react12 = require("motion/react");
+
+// src/devtools/hooks/useFlowsData.ts
+var import_react6 = require("react");
+
+// src/devtools/DevToolsContext.tsx
+var import_react5 = require("react");
+var DevToolsContext = (0, import_react5.createContext)(null);
+function useDevToolsContext() {
+  return (0, import_react5.useContext)(DevToolsContext);
+}
+function useDevToolsContextRequired() {
+  const context = (0, import_react5.useContext)(DevToolsContext);
+  if (!context) {
+    throw new Error(
+      "useDevToolsContext must be used within a TourProvider with devtools enabled"
+    );
+  }
+  return context;
+}
+
+// src/devtools/hooks/useFlowsData.ts
+function useFlowsData() {
+  const devtools = useDevToolsContext();
+  const [flowsData, setFlowsData] = (0, import_react6.useState)([]);
+  const loadFlowStates = (0, import_react6.useCallback)(async () => {
+    if (!devtools) {
+      setFlowsData([]);
+      return;
+    }
+    const { flows, activeFlowId, state: activeState, getFlowState } = devtools;
+    const flowDataPromises = [];
+    for (const [flowId, definition] of flows) {
+      const isActive = flowId === activeFlowId;
+      flowDataPromises.push(
+        (async () => {
+          const flowState = isActive ? activeState : await getFlowState(flowId);
+          return {
+            flowId,
+            definition,
+            state: flowState,
+            isActive
+          };
+        })()
+      );
+    }
+    const results = await Promise.all(flowDataPromises);
+    setFlowsData(results);
+  }, [devtools]);
+  (0, import_react6.useEffect)(() => {
+    void loadFlowStates();
+  }, [loadFlowStates]);
+  (0, import_react6.useEffect)(() => {
+    if (!devtools?.activeFlowId || !devtools?.state) return;
+    void loadFlowStates();
+  }, [devtools?.activeFlowId, devtools?.state, loadFlowStates]);
+  const deleteFlow = (0, import_react6.useCallback)(
+    async (flowId) => {
+      if (!devtools) return;
+      devtools.cancelFlow(flowId);
+      await devtools.deleteFlowStorage(flowId);
+      await loadFlowStates();
+    },
+    [devtools, loadFlowStates]
+  );
+  const updateFlow = (0, import_react6.useCallback)(
+    async (flowId, state) => {
+      if (!devtools) return;
+      await devtools.updateFlowStorage(flowId, state);
+      await loadFlowStates();
+    },
+    [devtools, loadFlowStates]
+  );
+  return {
+    flows: flowsData,
+    refreshFlows: loadFlowStates,
+    deleteFlow,
+    updateFlow
+  };
+}
+
+// src/devtools/components/FlowItem.tsx
+var import_react7 = require("react");
+var import_react8 = require("motion/react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var styles6 = {
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: 12,
+    backgroundColor: "hsl(215 20% 16%)",
+    borderRadius: 8,
+    border: "1px solid hsl(215 20% 22%)",
+    fontSize: 12,
+    fontFamily: "inherit"
+  },
+  cardActive: {
+    borderColor: "hsl(217 91% 55% / 0.5)",
+    backgroundColor: "hsl(217 91% 55% / 0.05)"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  titleGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 0
+  },
+  flowId: {
+    fontWeight: 600,
+    color: "hsl(215 20% 85%)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  statusBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 6px",
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: 4,
+    flexShrink: 0
+  },
+  statusIdle: {
+    backgroundColor: "hsl(215 20% 22%)",
+    color: "hsl(215 20% 60%)"
+  },
+  statusRunning: {
+    backgroundColor: "hsl(142 71% 45% / 0.2)",
+    color: "hsl(142 71% 60%)"
+  },
+  statusPaused: {
+    backgroundColor: "hsl(45 93% 47% / 0.2)",
+    color: "hsl(45 93% 60%)"
+  },
+  statusCompleted: {
+    backgroundColor: "hsl(217 91% 55% / 0.2)",
+    color: "hsl(217 91% 70%)"
+  },
+  statusCancelled: {
+    backgroundColor: "hsl(0 70% 50% / 0.2)",
+    color: "hsl(0 70% 65%)"
+  },
+  activeBadge: {
+    backgroundColor: "hsl(142 71% 45% / 0.2)",
+    color: "hsl(142 71% 60%)"
+  },
+  infoRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    color: "hsl(215 20% 55%)",
+    fontSize: 11
+  },
+  infoItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+  },
+  label: {
+    color: "hsl(215 20% 45%)"
+  },
+  value: {
+    fontFamily: "ui-monospace, monospace",
+    color: "hsl(215 20% 65%)"
+  },
+  actions: {
+    display: "flex",
+    gap: 6,
+    marginTop: 4
+  },
+  actionButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    padding: "6px 10px",
+    backgroundColor: "transparent",
+    border: "1px solid hsl(215 20% 25%)",
+    borderRadius: 5,
+    color: "hsl(215 20% 60%)",
+    fontSize: 10,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  actionButtonDanger: {
+    borderColor: "hsl(0 70% 40%)",
+    color: "hsl(0 70% 60%)"
+  },
+  noState: {
+    padding: "8px 0",
+    color: "hsl(215 20% 45%)",
+    fontSize: 11,
+    fontStyle: "italic"
+  }
+};
+var statusStyles = {
+  idle: styles6.statusIdle,
+  running: styles6.statusRunning,
+  paused: styles6.statusPaused,
+  completed: styles6.statusCompleted,
+  cancelled: styles6.statusCancelled
+};
+function FlowItem(props) {
+  const { flow, onEdit, onDelete } = props;
+  const { flowId, definition, state, isActive } = flow;
+  const [confirmDelete, setConfirmDelete] = (0, import_react7.useState)(false);
+  const handleDelete = () => {
+    if (confirmDelete) {
+      onDelete();
+      setConfirmDelete(false);
+    } else {
+      setConfirmDelete(true);
+      setTimeout(() => setConfirmDelete(false), 3e3);
+    }
+  };
+  const cardStyle = {
+    ...styles6.card,
+    ...isActive && styles6.cardActive
+  };
+  const statusBadgeStyle = {
+    ...styles6.statusBadge,
+    ...state ? statusStyles[state.status] || styles6.statusIdle : styles6.statusIdle
+  };
+  const deleteButtonStyle = {
+    ...styles6.actionButton,
+    ...confirmDelete && styles6.actionButtonDanger
+  };
+  const stepInfo = state ? `Step ${state.stepIndex + 1}/${definition.steps.length}` : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.titleGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.flowId, children: flowId }),
+        isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { ...styles6.statusBadge, ...styles6.activeBadge }, children: "Active" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: statusBadgeStyle, children: state?.status ?? "no state" })
+    ] }),
+    state ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoRow, children: [
+      stepInfo && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "Step:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: stepInfo })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "Version:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: state.version })
+      ] }),
+      state.stepId && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.infoItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.label, children: "ID:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles6.value, children: state.stepId })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles6.noState, children: "No stored state" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles6.actions, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_react8.motion.button,
+        {
+          type: "button",
+          style: styles6.actionButton,
+          onClick: onEdit,
+          disabled: !state,
+          whileHover: state ? { scale: 1.02 } : {},
+          whileTap: state ? { scale: 0.98 } : {},
+          title: state ? "Edit flow state" : "No state to edit",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" }) }),
+            "Edit"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_react8.motion.button,
+        {
+          type: "button",
+          style: deleteButtonStyle,
+          onClick: handleDelete,
+          disabled: !state,
+          whileHover: state ? { scale: 1.02 } : {},
+          whileTap: state ? { scale: 0.98 } : {},
+          title: confirmDelete ? "Click again to confirm deletion" : state ? "Delete flow state" : "No state to delete",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+                }
+              )
+            ] }),
+            confirmDelete ? "Confirm?" : "Delete"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/devtools/components/FlowEditModal.tsx
+var import_react9 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_react10 = require("motion/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var styles7 = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e5,
+    padding: 20
+  },
+  modal: {
+    width: "100%",
+    maxWidth: 500,
+    maxHeight: "calc(100vh - 40px)",
+    backgroundColor: "hsl(222 47% 11%)",
+    borderRadius: 12,
+    border: "1px solid hsl(215 20% 25%)",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "14px 16px",
+    borderBottom: "1px solid hsl(215 20% 20%)"
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "hsl(215 20% 85%)"
+  },
+  closeButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 28,
+    height: 28,
+    backgroundColor: "transparent",
+    border: "none",
+    color: "hsl(215 20% 55%)",
+    cursor: "pointer",
+    borderRadius: 6,
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  body: {
+    flex: 1,
+    padding: 16,
+    overflowY: "auto"
+  },
+  textarea: {
+    width: "100%",
+    minHeight: 300,
+    padding: 12,
+    backgroundColor: "hsl(215 20% 8%)",
+    border: "1px solid hsl(215 20% 20%)",
+    borderRadius: 8,
+    color: "hsl(215 20% 85%)",
+    fontSize: 12,
+    fontFamily: "ui-monospace, monospace",
+    resize: "vertical",
+    outline: "none",
+    lineHeight: 1.5
+  },
+  textareaError: {
+    borderColor: "hsl(0 70% 50%)"
+  },
+  error: {
+    marginTop: 8,
+    padding: "8px 10px",
+    backgroundColor: "hsl(0 70% 50% / 0.15)",
+    border: "1px solid hsl(0 70% 50% / 0.3)",
+    borderRadius: 6,
+    color: "hsl(0 70% 70%)",
+    fontSize: 11,
+    fontFamily: "ui-monospace, monospace"
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    padding: "12px 16px",
+    borderTop: "1px solid hsl(215 20% 20%)"
+  },
+  button: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "8px 16px",
+    backgroundColor: "hsl(215 20% 20%)",
+    border: "1px solid hsl(215 20% 28%)",
+    borderRadius: 6,
+    color: "hsl(215 20% 75%)",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  buttonPrimary: {
+    backgroundColor: "hsl(217 91% 55%)",
+    borderColor: "hsl(217 91% 60%)",
+    color: "white"
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  }
+};
+function FlowEditModal(props) {
+  const { isOpen, flowId, initialState, onClose, onSave, container } = props;
+  const [jsonValue, setJsonValue] = (0, import_react9.useState)("");
+  const [error, setError] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (isOpen && initialState) {
+      setJsonValue(JSON.stringify(initialState, null, 2));
+      setError(null);
+    }
+  }, [isOpen, initialState]);
+  const handleSave = (0, import_react9.useCallback)(() => {
+    try {
+      const parsed = JSON.parse(jsonValue);
+      if (typeof parsed.status !== "string") {
+        throw new Error('Missing or invalid "status" field');
+      }
+      if (typeof parsed.stepIndex !== "number") {
+        throw new Error('Missing or invalid "stepIndex" field');
+      }
+      if (typeof parsed.version !== "string") {
+        throw new Error('Missing or invalid "version" field');
+      }
+      onSave(parsed);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Invalid JSON");
+    }
+  }, [jsonValue, onSave, onClose]);
+  const handleKeyDown = (0, import_react9.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [onClose, handleSave]
+  );
+  if (typeof window === "undefined") return null;
+  const portalContainer = container ?? document.body;
+  const textareaStyle = {
+    ...styles7.textarea,
+    ...error && styles7.textareaError
+  };
+  const saveButtonStyle = {
+    ...styles7.button,
+    ...styles7.buttonPrimary,
+    ...error && styles7.buttonDisabled
+  };
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react10.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react10.motion.div,
+      {
+        style: styles7.overlay,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react10.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] },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.header, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: styles7.title, children: [
+                  "Edit Flow: ",
+                  flowId
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    style: styles7.closeButton,
+                    onClick: onClose,
+                    title: "Close",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.body, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "textarea",
+                  {
+                    style: textareaStyle,
+                    value: jsonValue,
+                    onChange: (e) => {
+                      setJsonValue(e.target.value);
+                      setError(null);
+                    },
+                    spellCheck: false,
+                    autoFocus: true
+                  }
+                ),
+                error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles7.error, children: error })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles7.footer, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    style: styles7.button,
+                    onClick: onClose,
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react10.motion.button,
+                  {
+                    type: "button",
+                    style: saveButtonStyle,
+                    onClick: handleSave,
+                    disabled: !!error,
+                    whileHover: !error ? { scale: 1.02 } : {},
+                    whileTap: !error ? { scale: 0.98 } : {},
+                    children: "Save"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ) }),
+    portalContainer
+  );
+}
+
+// src/devtools/components/FlowsTab.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var styles8 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: 10,
+    flex: 1,
+    overflowY: "auto"
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    marginBottom: 4
+  },
+  refreshButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "6px 10px",
+    backgroundColor: "transparent",
+    border: "1px solid hsl(215 20% 25%)",
+    borderRadius: 5,
+    color: "hsl(215 20% 60%)",
+    fontSize: 11,
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  flowList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  empty: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: "32px 16px",
+    textAlign: "center",
+    color: "hsl(215 20% 55%)"
+  },
+  emptyIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: "hsl(215 20% 18%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  emptyText: {
+    fontSize: 13,
+    lineHeight: 1.5
+  },
+  noContext: {
+    padding: "20px 16px",
+    textAlign: "center",
+    color: "hsl(215 20% 50%)",
+    fontSize: 12
+  }
+};
+function FlowsTab(props) {
+  const { container } = props;
+  const { flows, refreshFlows, deleteFlow, updateFlow } = useFlowsData();
+  const [editModal, setEditModal] = (0, import_react11.useState)({
+    isOpen: false,
+    flowId: "",
+    state: null
+  });
+  const handleEdit = (0, import_react11.useCallback)((flowId, state) => {
+    if (!state) return;
+    setEditModal({
+      isOpen: true,
+      flowId,
+      state
+    });
+  }, []);
+  const handleCloseModal = (0, import_react11.useCallback)(() => {
+    setEditModal((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const handleSave = (0, import_react11.useCallback)(
+    async (newState) => {
+      await updateFlow(editModal.flowId, newState);
+    },
+    [editModal.flowId, updateFlow]
+  );
+  const handleDelete = (0, import_react11.useCallback)(
+    async (flowId) => {
+      await deleteFlow(flowId);
+    },
+    [deleteFlow]
+  );
+  if (flows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.container, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.empty, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.emptyIcon, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 16 16",
+          fill: "hsl(215 20% 45%)",
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-3 8A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1z" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.emptyText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "No flows registered." }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginTop: 6, fontSize: 11, color: "hsl(215 20% 45%)" }, children: "Add flows to TourProvider to see them here." })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles8.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { fontSize: 11, color: "hsl(215 20% 50%)" }, children: [
+        flows.length,
+        " flow",
+        flows.length !== 1 ? "s" : "",
+        " registered"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        import_react12.motion.button,
+        {
+          type: "button",
+          style: styles8.refreshButton,
+          onClick: () => void refreshFlows(),
+          whileHover: { scale: 1.02 },
+          whileTap: { scale: 0.98 },
+          title: "Refresh flow states",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" })
+            ] }),
+            "Refresh"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: styles8.flowList, children: flows.map((flow) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      FlowItem,
+      {
+        flow,
+        onEdit: () => handleEdit(flow.flowId, flow.state),
+        onDelete: () => void handleDelete(flow.flowId)
+      },
+      flow.flowId
+    )) }),
+    editModal.state && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      FlowEditModal,
+      {
+        isOpen: editModal.isOpen,
+        flowId: editModal.flowId,
+        initialState: editModal.state,
+        onClose: handleCloseModal,
+        onSave: handleSave,
+        container
+      }
+    )
+  ] });
+}
+
+// src/devtools/hooks/useGrabMode.ts
+var import_react14 = require("react");
+
+// src/devtools/hooks/useElementInfo.ts
+var import_react13 = require("react");
+
+// src/devtools/utils/selectorGenerator.ts
+function generateSemanticName(element) {
+  const tag = element.tagName.toLowerCase();
+  const text = element.textContent?.trim().slice(0, 20).toLowerCase() || "";
+  const className = element.className;
+  const id = element.id;
+  if (text) {
+    const words = text.replace(/[^a-z0-9\s]/gi, "").split(/\s+/).filter(Boolean).slice(0, 3);
+    if (words.length > 0) {
+      return `${tag}-${words.join("-")}`;
+    }
+  }
+  if (id) {
+    return id;
+  }
+  if (typeof className === "string" && className) {
+    const firstClass = className.split(/\s+/)[0];
+    if (firstClass && !firstClass.startsWith("_") && firstClass.length < 30) {
+      return `${tag}-${firstClass}`;
+    }
+  }
+  return `${tag}-${Math.random().toString(36).slice(2, 6)}`;
+}
+function getExistingDataAttrs(element) {
+  const attrs = [];
+  for (const attr of element.attributes) {
+    if (attr.name.startsWith("data-")) {
+      attrs.push(attr.name);
+    }
+  }
+  return attrs;
+}
+function isUnique(params) {
+  try {
+    return document.querySelectorAll(params.selector).length === 1;
+  } catch {
+    return false;
+  }
+}
+function generateSelector(params) {
+  const { element } = params;
+  const existingAttrs = getExistingDataAttrs(element);
+  const tourTarget = element.getAttribute("data-tour-target");
+  if (tourTarget) {
+    return {
+      selector: `[data-tour-target="${tourTarget}"]`,
+      selectorType: "data-attr",
+      suggestedAttrName: tourTarget,
+      existingAttrs
+    };
+  }
+  if (element.id && isUnique({ selector: `#${CSS.escape(element.id)}` })) {
+    return {
+      selector: `#${CSS.escape(element.id)}`,
+      selectorType: "auto",
+      suggestedAttrName: element.id,
+      existingAttrs
+    };
+  }
+  const testId = element.getAttribute("data-testid");
+  if (testId && isUnique({ selector: `[data-testid="${testId}"]` })) {
+    return {
+      selector: `[data-testid="${testId}"]`,
+      selectorType: "data-attr",
+      suggestedAttrName: testId,
+      existingAttrs
+    };
+  }
+  for (const attr of existingAttrs) {
+    if (attr === "data-tour-target" || attr === "data-testid") continue;
+    const value = element.getAttribute(attr);
+    if (value) {
+      const selector = `[${attr}="${value}"]`;
+      if (isUnique({ selector })) {
+        return {
+          selector,
+          selectorType: "data-attr",
+          suggestedAttrName: value,
+          existingAttrs
+        };
+      }
+    }
+  }
+  const suggestedName = generateSemanticName(element);
+  return {
+    selector: `[data-tour-target="${suggestedName}"]`,
+    selectorType: "auto",
+    suggestedAttrName: suggestedName,
+    existingAttrs
+  };
+}
+
+// src/devtools/hooks/useElementInfo.ts
+function useElementInfo() {
+  const getElementInfo = (0, import_react13.useCallback)((params) => {
+    const { element } = params;
+    const selectorResult = generateSelector({ element });
+    const source = extractSource({ element });
+    const componentHierarchy = extractComponentHierarchy({ element });
+    const rect = element.getBoundingClientRect();
+    const htmlElement = element;
+    const styleAttr = htmlElement.getAttribute?.("style") || void 0;
+    return {
+      element,
+      selector: selectorResult.selector,
+      selectorType: selectorResult.selectorType,
+      suggestedAttrName: selectorResult.suggestedAttrName,
+      tag: element.tagName.toLowerCase(),
+      text: element.textContent?.trim().slice(0, 50) || void 0,
+      className: typeof element.className === "string" ? element.className : void 0,
+      style: styleAttr,
+      existingAttrs: selectorResult.existingAttrs,
+      componentHierarchy,
+      rect,
+      source: source ?? void 0
+    };
+  }, []);
+  return { getElementInfo };
+}
+
+// src/devtools/hooks/useGrabMode.ts
+function isDevToolsElement(element) {
+  if (element.closest("[data-devtools-panel]")) return true;
+  if (element.closest("[data-devtools-host]")) return true;
+  const root = element.getRootNode();
+  if (root instanceof ShadowRoot) {
+    const host = root.host;
+    if (host?.hasAttribute("data-devtools-host")) return true;
+  }
+  return false;
+}
+function useGrabMode() {
+  const [mode, setMode] = (0, import_react14.useState)("idle");
+  const [hoveredElement, setHoveredElement] = (0, import_react14.useState)(null);
+  const { getElementInfo } = useElementInfo();
+  const startGrabbing = (0, import_react14.useCallback)(() => {
+    setMode("grabbing");
+    setHoveredElement(null);
+  }, []);
+  const stopGrabbing = (0, import_react14.useCallback)(() => {
+    setMode("idle");
+    setHoveredElement(null);
+  }, []);
+  const toggleGrabbing = (0, import_react14.useCallback)(() => {
+    setMode((prev) => prev === "grabbing" ? "idle" : "grabbing");
+    setHoveredElement(null);
+  }, []);
+  const selectCurrent = (0, import_react14.useCallback)(() => {
+    if (!hoveredElement) return null;
+    return hoveredElement.info;
+  }, [hoveredElement]);
+  (0, import_react14.useEffect)(() => {
+    if (mode !== "grabbing") return;
+    const handleMouseMove = (e) => {
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) {
+        setHoveredElement(null);
+        return;
+      }
+      if (isDevToolsElement(target)) {
+        setHoveredElement(null);
+        return;
+      }
+      if (target.tagName === "HTML" || target.tagName === "BODY") {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement({
+        element: target,
+        info: getElementInfo({ element: target })
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [mode, getElementInfo]);
+  (0, import_react14.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "g") {
+        e.preventDefault();
+        toggleGrabbing();
+        return;
+      }
+      if (mode !== "grabbing") return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        stopGrabbing();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mode, toggleGrabbing, stopGrabbing]);
+  return {
+    mode,
+    hoveredElement,
+    startGrabbing,
+    stopGrabbing,
+    toggleGrabbing,
+    selectCurrent
+  };
+}
+
+// src/devtools/hooks/useStepStore.ts
+var import_react15 = require("react");
+
+// src/devtools/utils/storage.ts
+var STORAGE_KEY = "flowsterix-devtools-steps";
+function migrateStep(step) {
+  return {
+    ...step,
+    componentHierarchy: step.componentHierarchy ?? [],
+    existingAttrs: step.existingAttrs ?? []
+  };
+}
+function loadSteps() {
+  if (typeof window === "undefined") return [];
+  try {
+    const data = localStorage.getItem(STORAGE_KEY);
+    if (!data) return [];
+    const parsed = JSON.parse(data);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.map(migrateStep);
+  } catch {
+    return [];
+  }
+}
+function saveSteps(steps) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(steps));
+  } catch {
+  }
+}
+function clearSteps() {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+  }
+}
+
+// src/devtools/hooks/useStepStore.ts
+var store = {
+  steps: [],
+  listeners: /* @__PURE__ */ new Set()
+};
+function notifyListeners() {
+  for (const listener of store.listeners) {
+    listener();
+  }
+}
+function subscribe(listener) {
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
+function getSnapshot() {
+  return store.steps;
+}
+function getServerSnapshot() {
+  return [];
+}
+function generateId() {
+  return `step-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+}
+function useStepStore() {
+  const steps = (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  (0, import_react15.useEffect)(() => {
+    const saved = loadSteps();
+    if (saved.length > 0) {
+      store.steps = saved;
+      notifyListeners();
+    }
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    saveSteps(steps);
+  }, [steps]);
+  const addStep = (0, import_react15.useCallback)((params) => {
+    const { info } = params;
+    const newStep = {
+      id: generateId(),
+      order: store.steps.length,
+      selector: info.selector,
+      selectorType: info.selectorType,
+      elementTag: info.tag,
+      elementText: info.text,
+      elementClassName: info.className,
+      elementStyle: info.style,
+      existingAttrs: info.existingAttrs,
+      suggestedAttrName: info.suggestedAttrName,
+      componentHierarchy: info.componentHierarchy,
+      rect: {
+        top: info.rect.top,
+        left: info.rect.left,
+        width: info.rect.width,
+        height: info.rect.height
+      },
+      source: info.source,
+      createdAt: Date.now()
+    };
+    store.steps = [...store.steps, newStep];
+    notifyListeners();
+    return newStep;
+  }, []);
+  const removeStep = (0, import_react15.useCallback)((params) => {
+    const { id } = params;
+    store.steps = store.steps.filter((s) => s.id !== id).map((s, i) => ({ ...s, order: i }));
+    notifyListeners();
+  }, []);
+  const updateStep = (0, import_react15.useCallback)(
+    (params) => {
+      const { id, updates } = params;
+      store.steps = store.steps.map(
+        (s) => s.id === id ? { ...s, ...updates } : s
+      );
+      notifyListeners();
+    },
+    []
+  );
+  const reorderSteps = (0, import_react15.useCallback)(
+    (params) => {
+      const { fromIndex, toIndex } = params;
+      const newSteps = [...store.steps];
+      const [removed] = newSteps.splice(fromIndex, 1);
+      newSteps.splice(toIndex, 0, removed);
+      store.steps = newSteps.map((s, i) => ({ ...s, order: i }));
+      notifyListeners();
+    },
+    []
+  );
+  const clearAllSteps = (0, import_react15.useCallback)(() => {
+    store.steps = [];
+    clearSteps();
+    notifyListeners();
+  }, []);
+  const exportSteps = (0, import_react15.useCallback)(() => {
+    return {
+      version: "1.0",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      steps: store.steps.map((step) => {
+        let elementStr = `<${step.elementTag}`;
+        if (step.elementClassName) {
+          elementStr += ` class="${step.elementClassName.slice(0, 60)}${step.elementClassName.length > 60 ? "..." : ""}"`;
+        }
+        if (step.elementStyle) {
+          elementStr += ` style="${step.elementStyle.slice(0, 40)}${step.elementStyle.length > 40 ? "..." : ""}"`;
+        }
+        for (const attr of step.existingAttrs) {
+          if (attr !== "class" && attr !== "style") {
+            elementStr += ` ${attr}`;
+          }
+        }
+        elementStr += ">";
+        if (step.elementText) {
+          elementStr += `${step.elementText.slice(0, 30)}${step.elementText.length > 30 ? "..." : ""}`;
+        }
+        elementStr += `</${step.elementTag}>`;
+        const sourceStr = step.source ? `${step.source.fileName.replace(/^.*\/src\//, "src/")}:${step.source.lineNumber}` : void 0;
+        return {
+          order: step.order,
+          element: elementStr,
+          componentTree: step.componentHierarchy,
+          source: sourceStr
+        };
+      })
+    };
+  }, []);
+  return {
+    steps,
+    addStep,
+    removeStep,
+    updateStep,
+    reorderSteps,
+    clearAllSteps,
+    exportSteps
+  };
+}
+
+// src/devtools/DevToolsProvider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var styles9 = {
+  panel: {
+    position: "fixed",
+    width: 320,
+    maxWidth: "calc(100vw - 32px)",
+    maxHeight: "calc(100vh - 32px)",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 99998,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontSize: 13,
+    backgroundColor: "hsl(222 47% 11%)",
+    borderRadius: 12,
+    border: "1px solid hsl(215 20% 25%)",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05)",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "10px 12px",
+    borderBottom: "1px solid hsl(215 20% 20%)",
+    backgroundColor: "hsl(222 47% 9%)",
+    cursor: "grab",
+    userSelect: "none",
+    touchAction: "none"
+  },
+  headerDragging: {
+    cursor: "grabbing"
+  },
+  titleGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  logo: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    backgroundColor: "hsl(217 91% 55% / 0.2)"
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "hsl(215 20% 75%)",
+    letterSpacing: "-0.01em"
+  },
+  headerButtons: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2
+  },
+  iconButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 26,
+    height: 26,
+    backgroundColor: "transparent",
+    border: "none",
+    color: "hsl(215 20% 55%)",
+    cursor: "pointer",
+    padding: 0,
+    borderRadius: 6,
+    transition: "all 0.15s ease",
+    outline: "none"
+  },
+  body: {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  }
+};
+function DevToolsProvider(props) {
+  const { children, enabled = true, defaultTab = "steps" } = props;
+  const [mounted, setMounted] = (0, import_react16.useState)(false);
+  const [shadowRoot, setShadowRoot] = (0, import_react16.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react16.useState)(defaultTab);
+  (0, import_react16.useEffect)(() => {
+    setMounted(true);
+    const host = document.createElement("div");
+    host.setAttribute("data-devtools-host", "");
+    host.style.cssText = "position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;";
+    document.body.appendChild(host);
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { all: initial; }
+      *, *::before, *::after { box-sizing: border-box; }
+    `;
+    shadow.appendChild(style);
+    const container = document.createElement("div");
+    container.style.cssText = "pointer-events: auto;";
+    shadow.appendChild(container);
+    setShadowRoot(shadow);
+    return () => {
+      document.body.removeChild(host);
+    };
+  }, []);
+  const { mode, hoveredElement, toggleGrabbing, selectCurrent } = useGrabMode();
+  const {
+    steps,
+    addStep,
+    removeStep,
+    reorderSteps,
+    clearAllSteps,
+    exportSteps
+  } = useStepStore();
+  const { flows } = useFlowsData();
+  const [collapsed, setCollapsed] = (0, import_react16.useState)(false);
+  const [position, setPosition] = (0, import_react16.useState)({ x: 16, y: 16 });
+  const [isPanelDragging, setIsPanelDragging] = (0, import_react16.useState)(false);
+  const dragStartRef = { current: null };
+  const handleClick = (0, import_react16.useCallback)(
+    (e) => {
+      if (mode !== "grabbing") return;
+      const target = e.target;
+      if (target.closest("[data-devtools-panel]")) return;
+      if (target.closest("[data-devtools-host]")) return;
+      const root = target.getRootNode();
+      if (root instanceof ShadowRoot) {
+        const host = root.host;
+        if (host?.hasAttribute("data-devtools-host")) return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const info = selectCurrent();
+      if (info) {
+        addStep({ info });
+      }
+    },
+    [mode, selectCurrent, addStep]
+  );
+  (0, import_react16.useEffect)(() => {
+    if (mode !== "grabbing") return;
+    document.addEventListener("click", handleClick, { capture: true });
+    return () => document.removeEventListener("click", handleClick, { capture: true });
+  }, [mode, handleClick]);
+  (0, import_react16.useEffect)(() => {
+    if (mode !== "grabbing") return;
+    const preventDefault = (e) => {
+      const target = e.target;
+      if (target.closest("[data-devtools-panel]")) return;
+      e.preventDefault();
+    };
+    document.addEventListener("submit", preventDefault, { capture: true });
+    return () => {
+      document.removeEventListener("submit", preventDefault, { capture: true });
+    };
+  }, [mode]);
+  (0, import_react16.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "m") {
+        e.preventDefault();
+        setCollapsed((c) => !c);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  const handlePointerDown = (0, import_react16.useCallback)(
+    (e) => {
+      const target = e.target;
+      if (target.closest("button")) return;
+      e.preventDefault();
+      setIsPanelDragging(true);
+      dragStartRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        posX: position.x,
+        posY: position.y
+      };
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [position]
+  );
+  const handlePointerMove = (0, import_react16.useCallback)(
+    (e) => {
+      if (!dragStartRef.current || !isPanelDragging) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
+      const newX = Math.max(8, dragStartRef.current.posX - dx);
+      const newY = Math.max(8, dragStartRef.current.posY + dy);
+      setPosition({ x: newX, y: newY });
+    },
+    [isPanelDragging]
+  );
+  const handlePointerUp = (0, import_react16.useCallback)((e) => {
+    setIsPanelDragging(false);
+    dragStartRef.current = null;
+    e.target.releasePointerCapture(e.pointerId);
+  }, []);
+  if (!enabled || !mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+  }
+  const shadowContainer = shadowRoot?.lastElementChild ?? null;
+  const panelStyle = {
+    ...styles9.panel,
+    right: position.x,
+    top: position.y
+  };
+  const headerStyle = {
+    ...styles9.header,
+    ...isPanelDragging && styles9.headerDragging
+  };
+  const portalContainer = shadowContainer ?? document.body;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      GrabberOverlay,
+      {
+        isGrabbing: mode === "grabbing",
+        hoveredInfo: hoveredElement?.info ?? null,
+        container: shadowContainer
+      }
+    ),
+    (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_react17.motion.div,
+        {
+          style: panelStyle,
+          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] },
+          "data-devtools-panel": "",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "div",
+              {
+                style: headerStyle,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles9.titleGroup, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles9.logo, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "hsl(217 91% 70%)", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 0L14.9 4v8L8 16 1.1 12V4L8 0zm0 2.3L3.1 5.2v5.6L8 13.7l4.9-2.9V5.2L8 2.3z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 5l3 1.7v3.4L8 11.8 5 10.1V6.7L8 5z" })
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styles9.title, children: "DevTools" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles9.headerButtons, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      style: styles9.iconButton,
+                      onClick: () => setCollapsed(!collapsed),
+                      title: collapsed ? "Expand (Ctrl+Shift+M)" : "Collapse (Ctrl+Shift+M)",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 16 16",
+                          fill: "currentColor",
+                          style: {
+                            transform: collapsed ? "rotate(180deg)" : "none",
+                            transition: "transform 0.2s ease"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" })
+                        }
+                      )
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react17.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              import_react17.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: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    TabNav,
+                    {
+                      activeTab,
+                      onTabChange: setActiveTab,
+                      stepCount: steps.length,
+                      flowCount: flows.length
+                    }
+                  ),
+                  activeTab === "steps" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    StepList,
+                    {
+                      steps,
+                      mode,
+                      onToggleGrab: toggleGrabbing,
+                      onDeleteStep: removeStep,
+                      onReorderSteps: reorderSteps,
+                      onClearAll: clearAllSteps,
+                      onExport: exportSteps
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlowsTab, { container: shadowContainer })
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      portalContainer
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevToolsContext,
+  DevToolsProvider,
+  FlowEditModal,
+  FlowItem,
+  FlowsTab,
+  GrabberOverlay,
+  SortableStepItem,
+  StepItem,
+  StepItemDragPreview,
+  StepList,
+  TabNav,
+  Toolbar,
+  clearSteps,
+  extractComponentHierarchy,
+  extractSource,
+  formatSourcePath,
+  generateSelector,
+  getVSCodeLink,
+  loadSteps,
+  saveSteps,
+  useDevToolsContext,
+  useDevToolsContextRequired,
+  useElementInfo,
+  useFlowsData,
+  useGrabMode,
+  useStepStore
+});