ontheway-sdk 0.1.0

package/dist/devtools.js

@@ -0,0 +1,727 @@
+import { __spreadValues, __spreadProps } from './chunk-DDAAVRWG.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function genSelector(el) {
+  const ds = el.dataset;
+  if (ds == null ? void 0 : ds.onthewayId) return `[data-ontheway-id="${ds.onthewayId}"]`;
+  if (el.id && !/^[\d:]/.test(el.id)) {
+    try {
+      if (document.querySelectorAll("#" + CSS.escape(el.id)).length === 1) return "#" + CSS.escape(el.id);
+    } catch (e) {
+    }
+  }
+  const parts = [];
+  let cur = el;
+  while (cur && cur !== document.body && cur !== document.documentElement && parts.length < 4) {
+    let p = cur.tagName.toLowerCase();
+    if (cur.id && !/^[\d:]/.test(cur.id)) {
+      parts.unshift("#" + CSS.escape(cur.id));
+      break;
+    }
+    const cls = Array.from(cur.classList || []).filter((c) => !/^(w-|h-|p-|m-|text-|bg-|flex|grid|border|rounded|hover:|focus:|sm:|md:|lg:|xl:)/.test(c)).slice(0, 2);
+    if (cls.length) p += "." + cls.map((c) => CSS.escape(c)).join(".");
+    const parent = cur.parentElement;
+    if (parent) {
+      const sibs = Array.from(parent.children).filter((s) => s.tagName === cur.tagName);
+      if (sibs.length > 1) p += `:nth-child(${sibs.indexOf(cur) + 1})`;
+    }
+    parts.unshift(p);
+    cur = cur.parentElement;
+  }
+  const sel = parts.join(" > ");
+  try {
+    if (document.querySelector(sel) === el) return sel;
+  } catch (e) {
+  }
+  parts.length = 0;
+  cur = el;
+  while (cur && cur !== document.body) {
+    const parentEl = cur.parentElement;
+    if (!parentEl) break;
+    parts.unshift(cur.tagName.toLowerCase() + ":nth-child(" + (Array.from(parentEl.children).indexOf(cur) + 1) + ")");
+    cur = parentEl;
+  }
+  return "body > " + parts.join(" > ");
+}
+function OnTheWayDevToolsPanel({ projectId, apiKey, serverUrl }) {
+  const [minimized, setMinimized] = useState(true);
+  const [tab, setTab] = useState("record");
+  const [recording, setRecording] = useState(false);
+  const [steps, setSteps] = useState([]);
+  const [editingStep, setEditingStep] = useState(null);
+  const [taskName, setTaskName] = useState("");
+  const [taskSlug, setTaskSlug] = useState("");
+  const [trigger, setTrigger] = useState("manual");
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState("");
+  const [aiIntent, setAiIntent] = useState("");
+  const [aiGenerating, setAiGenerating] = useState(false);
+  const [tasks, setTasks] = useState([]);
+  const [loadingTasks, setLoadingTasks] = useState(false);
+  const highlightRef = useRef(null);
+  const hoveredRef = useRef(null);
+  const panelRef = useRef(null);
+  const baseUrl = serverUrl || (typeof window !== "undefined" ? window.location.origin : "");
+  const fetchTasks = useCallback(async () => {
+    setLoadingTasks(true);
+    try {
+      const res = await fetch(`${baseUrl}/api/sdk/${projectId}/config`);
+      const data = await res.json();
+      setTasks((data.tasks || []).map((t) => ({
+        id: t.id,
+        name: t.slug.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+        slug: t.slug,
+        steps: t.steps,
+        enabled: true
+      })));
+    } catch (e) {
+      setTasks([]);
+    }
+    setLoadingTasks(false);
+  }, [baseUrl, projectId]);
+  useEffect(() => {
+    if (tab === "tasks" && !minimized) fetchTasks();
+  }, [tab, minimized, fetchTasks]);
+  const isOurElement = useCallback((el) => {
+    var _a, _b;
+    return ((_a = panelRef.current) == null ? void 0 : _a.contains(el)) || ((_b = highlightRef.current) == null ? void 0 : _b.contains(el)) || el.id === "otw-devtools-highlight";
+  }, []);
+  const onMouseMove = useCallback((e) => {
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || el === hoveredRef.current || isOurElement(el)) return;
+    hoveredRef.current = el;
+    if (!highlightRef.current) {
+      const div = document.createElement("div");
+      div.id = "otw-devtools-highlight";
+      div.style.cssText = "position:fixed;pointer-events:none;z-index:2147483645;border:2px solid #3b82f6;background:rgba(59,130,246,0.15);border-radius:3px;transition:all .08s ease";
+      document.documentElement.appendChild(div);
+      highlightRef.current = div;
+    }
+    const r = el.getBoundingClientRect();
+    const h = highlightRef.current;
+    h.style.display = "block";
+    h.style.top = r.top + "px";
+    h.style.left = r.left + "px";
+    h.style.width = r.width + "px";
+    h.style.height = r.height + "px";
+  }, [isOurElement]);
+  const onMouseLeave = useCallback(() => {
+    if (highlightRef.current) highlightRef.current.style.display = "none";
+    hoveredRef.current = null;
+  }, []);
+  const onClick = useCallback((e) => {
+    var _a;
+    const el = e.target;
+    if (isOurElement(el)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    el.getBoundingClientRect();
+    const text = ((_a = el.innerText) == null ? void 0 : _a.trim().substring(0, 60)) || "";
+    const step = {
+      id: "step_" + Date.now(),
+      selector: genSelector(el),
+      tagName: el.tagName.toLowerCase(),
+      innerText: text,
+      title: `Step ${steps.length + 1}`,
+      description: "Click here to continue",
+      position: "auto",
+      spotlight: true,
+      url: location.href
+    };
+    setSteps((prev) => [...prev, step]);
+    setEditingStep(step.id);
+    const orig = el.style.outline;
+    el.style.outline = "3px solid #22c55e";
+    setTimeout(() => {
+      el.style.outline = orig;
+    }, 400);
+  }, [isOurElement, steps.length]);
+  const startRecording = useCallback(() => {
+    setRecording(true);
+    document.addEventListener("mousemove", onMouseMove, true);
+    document.addEventListener("mouseleave", onMouseLeave, true);
+    document.addEventListener("click", onClick, true);
+  }, [onMouseMove, onMouseLeave, onClick]);
+  const stopRecording = useCallback(() => {
+    setRecording(false);
+    document.removeEventListener("mousemove", onMouseMove, true);
+    document.removeEventListener("mouseleave", onMouseLeave, true);
+    document.removeEventListener("click", onClick, true);
+    if (highlightRef.current) {
+      highlightRef.current.remove();
+      highlightRef.current = null;
+    }
+    hoveredRef.current = null;
+  }, [onMouseMove, onMouseLeave, onClick]);
+  useEffect(() => {
+    return () => {
+      var _a;
+      document.removeEventListener("mousemove", onMouseMove, true);
+      document.removeEventListener("mouseleave", onMouseLeave, true);
+      document.removeEventListener("click", onClick, true);
+      (_a = highlightRef.current) == null ? void 0 : _a.remove();
+    };
+  }, [onMouseMove, onMouseLeave, onClick]);
+  useEffect(() => {
+    if (taskName) {
+      setTaskSlug(taskName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""));
+    }
+  }, [taskName]);
+  const updateStep = (id, updates) => {
+    setSteps((prev) => prev.map((s) => s.id === id ? __spreadValues(__spreadValues({}, s), updates) : s));
+  };
+  const deleteStep = (id) => {
+    setSteps((prev) => prev.filter((s) => s.id !== id));
+    if (editingStep === id) setEditingStep(null);
+  };
+  const moveStep = (id, dir) => {
+    setSteps((prev) => {
+      const i = prev.findIndex((s) => s.id === id);
+      if (i === -1) return prev;
+      if (dir === "up" && i === 0) return prev;
+      if (dir === "down" && i === prev.length - 1) return prev;
+      const next = [...prev];
+      const j = dir === "up" ? i - 1 : i + 1;
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  };
+  const extractDOM = useCallback(() => {
+    const walk = (el, depth) => {
+      var _a;
+      if (depth > 6) return "";
+      const tag = el.tagName.toLowerCase();
+      if (["script", "style", "noscript", "svg", "path"].includes(tag)) return "";
+      if ((_a = el.id) == null ? void 0 : _a.startsWith("otw-")) return "";
+      if (el.offsetParent === null && tag !== "body" && tag !== "html") return "";
+      const attrs = [];
+      if (el.id) attrs.push(`id="${el.id}"`);
+      if (el.className && typeof el.className === "string") {
+        const cls = el.className.split(/\s+/).filter(
+          (c) => !/^(w-|h-|p-|m-|text-|bg-|flex|grid|border|rounded|shadow|transition|transform|hover:|focus:|sm:|md:|lg:|xl:|2xl:)/.test(c)
+        ).slice(0, 3).join(" ");
+        if (cls) attrs.push(`class="${cls}"`);
+      }
+      if (el.type) attrs.push(`type="${el.type}"`);
+      if (el.name) attrs.push(`name="${el.name}"`);
+      if (el.placeholder) attrs.push(`placeholder="${el.placeholder}"`);
+      if (el.href && tag === "a") attrs.push(`href="..."`);
+      const ds = el.dataset;
+      if (ds == null ? void 0 : ds.onthewayId) attrs.push(`data-ontheway-id="${ds.onthewayId}"`);
+      const indent = "  ".repeat(depth);
+      const attrStr = attrs.length ? " " + attrs.join(" ") : "";
+      const text = Array.from(el.childNodes).filter((n) => n.nodeType === 3).map((n) => {
+        var _a2;
+        return (_a2 = n.textContent) == null ? void 0 : _a2.trim();
+      }).filter(Boolean).join(" ").substring(0, 60);
+      const children = Array.from(el.children).map((c) => walk(c, depth + 1)).filter(Boolean).join("\n");
+      if (!children && !text && !["input", "button", "img", "video", "iframe"].includes(tag)) {
+        return "";
+      }
+      if (!children) {
+        return `${indent}<${tag}${attrStr}>${text ? " " + text + " " : ""}</${tag}>`;
+      }
+      return `${indent}<${tag}${attrStr}>${text ? " " + text : ""}
+${children}
+${indent}</${tag}>`;
+    };
+    return walk(document.body, 0);
+  }, []);
+  const aiGenerate = useCallback(async () => {
+    if (!aiIntent.trim()) {
+      setSaveMsg("\u274C Describe what the tour should do");
+      return;
+    }
+    setAiGenerating(true);
+    setSaveMsg("");
+    try {
+      const dom = extractDOM();
+      const res = await fetch(`${baseUrl}/api/ai/generate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          intent: aiIntent,
+          dom,
+          url: location.href,
+          taskName: taskName || void 0
+        })
+      });
+      const data = await res.json();
+      if (data.steps && data.steps.length > 0) {
+        const newSteps = data.steps.map((s, i) => ({
+          id: "ai_" + Date.now() + "_" + i,
+          selector: s.selector || "",
+          tagName: "",
+          innerText: "",
+          title: s.title || `Step ${i + 1}`,
+          description: s.content || s.description || "",
+          position: s.position || "auto",
+          spotlight: s.spotlight !== false,
+          url: location.href
+        }));
+        setSteps((prev) => [...prev, ...newSteps]);
+        if (!taskName && data.taskName) {
+          setTaskName(data.taskName);
+        }
+        setEditingStep(newSteps[0].id);
+        setSaveMsg(`\u2728 ${newSteps.length} steps generated (${data.source})`);
+      } else {
+        setSaveMsg("\u274C No steps generated");
+      }
+    } catch (e) {
+      setSaveMsg("\u274C AI generation failed");
+    }
+    setAiGenerating(false);
+  }, [aiIntent, baseUrl, extractDOM, taskName]);
+  const saveTask = async () => {
+    if (!taskName || !taskSlug || steps.length === 0) {
+      setSaveMsg("\u274C Fill name + at least 1 step");
+      return;
+    }
+    setSaving(true);
+    setSaveMsg("");
+    try {
+      const res = await fetch(`${baseUrl}/api/projects/${projectId}/tasks`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: taskName,
+          slug: taskSlug,
+          trigger,
+          steps: steps.map((s) => ({
+            selector: s.selector,
+            title: s.title,
+            content: s.description,
+            position: s.position,
+            spotlight: s.spotlight
+          }))
+        })
+      });
+      if (res.ok) {
+        setSaveMsg("\u2705 Saved!");
+        setSteps([]);
+        setTaskName("");
+        setTaskSlug("");
+        setEditingStep(null);
+        stopRecording();
+      } else {
+        const err = await res.json();
+        setSaveMsg("\u274C " + (err.error || "Failed"));
+      }
+    } catch (e) {
+      setSaveMsg("\u274C Network error");
+    }
+    setSaving(false);
+  };
+  steps.find((s) => s.id === editingStep);
+  const S = {
+    panel: {
+      position: "fixed",
+      bottom: 16,
+      right: 16,
+      zIndex: 2147483646,
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      fontSize: 13,
+      color: "#1f2937"
+    },
+    card: {
+      width: 360,
+      maxHeight: "80vh",
+      background: "#fff",
+      borderRadius: 12,
+      boxShadow: "0 8px 40px rgba(0,0,0,0.18)",
+      border: "1px solid #e5e7eb",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column"
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 14px",
+      background: "#111",
+      color: "#fff",
+      fontSize: 13,
+      fontWeight: 600
+    },
+    tabs: {
+      display: "flex",
+      borderBottom: "1px solid #e5e7eb"
+    },
+    tab: (active) => ({
+      flex: 1,
+      padding: "8px 0",
+      border: "none",
+      background: active ? "#fff" : "#f9fafb",
+      borderBottom: active ? "2px solid #111" : "2px solid transparent",
+      cursor: "pointer",
+      fontSize: 12,
+      fontWeight: active ? 600 : 400,
+      color: active ? "#111" : "#6b7280"
+    }),
+    body: {
+      flex: 1,
+      overflow: "auto",
+      maxHeight: "calc(80vh - 100px)"
+    },
+    section: {
+      padding: "10px 14px",
+      borderBottom: "1px solid #f3f4f6"
+    },
+    input: {
+      width: "100%",
+      padding: "6px 8px",
+      border: "1px solid #d1d5db",
+      borderRadius: 6,
+      fontSize: 12,
+      marginTop: 4,
+      boxSizing: "border-box"
+    },
+    select: {
+      padding: "6px 8px",
+      border: "1px solid #d1d5db",
+      borderRadius: 6,
+      fontSize: 12,
+      marginTop: 4
+    },
+    btn: (color, disabled = false) => ({
+      padding: "6px 14px",
+      border: "none",
+      borderRadius: 6,
+      background: disabled ? "#d1d5db" : color,
+      color: "#fff",
+      fontSize: 12,
+      fontWeight: 600,
+      cursor: disabled ? "not-allowed" : "pointer"
+    }),
+    btnOutline: {
+      padding: "6px 14px",
+      border: "1px solid #d1d5db",
+      borderRadius: 6,
+      background: "#fff",
+      fontSize: 12,
+      cursor: "pointer"
+    },
+    stepItem: (active) => ({
+      padding: "8px 10px",
+      margin: "4px 0",
+      borderRadius: 6,
+      border: active ? "1px solid #3b82f6" : "1px solid #e5e7eb",
+      background: active ? "#eff6ff" : "#fff",
+      cursor: "pointer"
+    }),
+    fab: {
+      width: 48,
+      height: 48,
+      borderRadius: "50%",
+      border: "none",
+      background: "#111",
+      color: "#fff",
+      fontSize: 22,
+      cursor: "pointer",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    label: {
+      fontSize: 11,
+      fontWeight: 600,
+      color: "#6b7280",
+      marginBottom: 2,
+      display: "block"
+    },
+    recDot: {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: "#ef4444",
+      animation: "otw-blink 1s ease-in-out infinite",
+      display: "inline-block",
+      marginRight: 6
+    }
+  };
+  useEffect(() => {
+    if (document.getElementById("otw-devtools-style")) return;
+    const style = document.createElement("style");
+    style.id = "otw-devtools-style";
+    style.textContent = "@keyframes otw-blink{0%,100%{opacity:1}50%{opacity:0.3}}";
+    document.head.appendChild(style);
+    return () => {
+      style.remove();
+    };
+  }, []);
+  const logoSvg = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none"><rect width="40" height="40" rx="10" fill="#111"/><path d="M12 32 C12 24,16 22,20 20 C24 18,28 16,28 8" stroke="#22c55e" stroke-width="3.5" stroke-linecap="round" fill="none"/><path d="M12 32 C12 24,16 22,20 20 C24 18,28 16,28 8" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-dasharray="2.5 3.5" fill="none" opacity="0.6"/><circle cx="28" cy="8" r="3.5" fill="#22c55e"/><circle cx="28" cy="8" r="1.5" fill="#111"/><circle cx="12" cy="32" r="2.5" fill="#fff" opacity="0.9"/></svg>')}`;
+  if (minimized) {
+    return /* @__PURE__ */ jsx("div", { ref: panelRef, style: S.panel, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setMinimized(false),
+        style: __spreadValues(__spreadValues({}, S.fab), recording ? { background: "#22c55e", boxShadow: "0 0 20px rgba(34,197,94,0.5)" } : {}),
+        title: "OnTheWay DevTools",
+        children: recording ? /* @__PURE__ */ jsx("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx("span", { style: S.recDot }) }) : /* @__PURE__ */ jsx("img", { src: logoSvg, alt: "OTW", style: { width: 24, height: 24 } })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: panelRef, style: S.panel, children: /* @__PURE__ */ jsxs("div", { style: S.card, children: [
+    /* @__PURE__ */ jsxs("div", { style: S.header, children: [
+      /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx("img", { src: logoSvg, alt: "OTW", style: { width: 18, height: 18 } }),
+        "OnTheWay DevTools"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        recording && /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", fontSize: 11 }, children: [
+          /* @__PURE__ */ jsx("span", { style: S.recDot }),
+          " REC"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setMinimized(true), style: { background: "none", border: "none", color: "#fff", cursor: "pointer", fontSize: 16 }, children: "\u2212" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.tabs, children: [
+      /* @__PURE__ */ jsx("button", { style: S.tab(tab === "record"), onClick: () => setTab("record"), children: "\u23FA Record" }),
+      /* @__PURE__ */ jsxs("button", { style: S.tab(tab === "tasks"), onClick: () => setTab("tasks"), children: [
+        "\u{1F4CB} Tasks (",
+        tasks.length,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: S.body, children: tab === "record" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: S.label, children: "Task Name" }),
+            /* @__PURE__ */ jsx("input", { style: S.input, value: taskName, onChange: (e) => setTaskName(e.target.value), placeholder: "Welcome Tour" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: S.label, children: "Trigger" }),
+            /* @__PURE__ */ jsxs("select", { style: __spreadProps(__spreadValues({}, S.select), { width: "100%" }), value: trigger, onChange: (e) => setTrigger(e.target.value), children: [
+              /* @__PURE__ */ jsx("option", { value: "manual", children: "Manual" }),
+              /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
+              /* @__PURE__ */ jsx("option", { value: "first-visit", children: "First Visit" })
+            ] })
+          ] })
+        ] }),
+        taskSlug && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "#9ca3af", marginTop: 4 }, children: [
+          "slug: ",
+          taskSlug
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: __spreadProps(__spreadValues({}, S.section), { display: "flex", gap: 8, flexWrap: "wrap" }), children: [
+        !recording ? /* @__PURE__ */ jsx("button", { style: S.btn("#22c55e"), onClick: startRecording, children: "\u23FA Record" }) : /* @__PURE__ */ jsx("button", { style: S.btn("#ef4444"), onClick: stopRecording, children: "\u23F9 Stop" }),
+        /* @__PURE__ */ jsx("button", { style: S.btn("#111", saving || steps.length === 0 || !taskName), onClick: saveTask, disabled: saving || steps.length === 0 || !taskName, children: saving ? "..." : "\u{1F4BE} Save" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
+        /* @__PURE__ */ jsx("label", { style: S.label, children: "\u2728 AI Generate" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 4 }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: __spreadProps(__spreadValues({}, S.input), { flex: 1, marginTop: 0 }),
+              value: aiIntent,
+              onChange: (e) => setAiIntent(e.target.value),
+              placeholder: "e.g. Guide new users to create their first project",
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !aiGenerating) aiGenerate();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: S.btn("#7c3aed", aiGenerating || !aiIntent.trim()),
+              onClick: aiGenerate,
+              disabled: aiGenerating || !aiIntent.trim(),
+              children: aiGenerating ? "..." : "\u2728"
+            }
+          )
+        ] }),
+        saveMsg && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, marginTop: 4, color: saveMsg.startsWith("\u2705") || saveMsg.startsWith("\u2728") ? "#16a34a" : saveMsg.startsWith("\u274C") ? "#dc2626" : "#6b7280" }, children: saveMsg })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
+        /* @__PURE__ */ jsxs("label", { style: __spreadProps(__spreadValues({}, S.label), { marginBottom: 6 }), children: [
+          "Steps (",
+          steps.length,
+          ")"
+        ] }),
+        steps.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "16px 0", color: "#9ca3af", fontSize: 12 }, children: recording ? "Click elements on the page to capture steps" : "Click Record to start" }) : steps.map((step, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: S.stepItem(editingStep === step.id),
+            onClick: () => setEditingStep(editingStep === step.id ? null : step.id),
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontWeight: 500, fontSize: 12 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", marginRight: 6 }, children: i + 1 }),
+                  step.title
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        moveStep(step.id, "up");
+                      },
+                      disabled: i === 0,
+                      style: __spreadProps(__spreadValues({}, S.btnOutline), { padding: "2px 6px", fontSize: 10 }),
+                      children: "\u2191"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        moveStep(step.id, "down");
+                      },
+                      disabled: i === steps.length - 1,
+                      style: __spreadProps(__spreadValues({}, S.btnOutline), { padding: "2px 6px", fontSize: 10 }),
+                      children: "\u2193"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        deleteStep(step.id);
+                      },
+                      style: __spreadProps(__spreadValues({}, S.btnOutline), { padding: "2px 6px", fontSize: 10, color: "#ef4444" }),
+                      children: "\u2715"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: "#9ca3af", fontFamily: "monospace", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: step.selector }),
+              editingStep === step.id && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 },
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("label", { style: S.label, children: "Selector" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          style: __spreadProps(__spreadValues({}, S.input), { fontFamily: "monospace" }),
+                          value: step.selector,
+                          onChange: (e) => updateStep(step.id, { selector: e.target.value })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("label", { style: S.label, children: "Title" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          style: S.input,
+                          value: step.title,
+                          onChange: (e) => updateStep(step.id, { title: e.target.value })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("label", { style: S.label, children: "Description" }),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          style: S.input,
+                          value: step.description,
+                          onChange: (e) => updateStep(step.id, { description: e.target.value })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                        /* @__PURE__ */ jsx("label", { style: S.label, children: "Position" }),
+                        /* @__PURE__ */ jsxs(
+                          "select",
+                          {
+                            style: __spreadProps(__spreadValues({}, S.select), { width: "100%" }),
+                            value: step.position,
+                            onChange: (e) => updateStep(step.id, { position: e.target.value }),
+                            children: [
+                              /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
+                              /* @__PURE__ */ jsx("option", { value: "top", children: "Top" }),
+                              /* @__PURE__ */ jsx("option", { value: "bottom", children: "Bottom" }),
+                              /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                              /* @__PURE__ */ jsx("option", { value: "right", children: "Right" })
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "end", paddingBottom: 2 }, children: /* @__PURE__ */ jsxs("label", { style: { fontSize: 11, display: "flex", alignItems: "center", gap: 4 }, children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: step.spotlight,
+                            onChange: (e) => updateStep(step.id, { spotlight: e.target.checked })
+                          }
+                        ),
+                        "Spotlight"
+                      ] }) })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          step.id
+        ))
+      ] })
+    ] }) : (
+      /* Tasks tab */
+      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
+        loadingTasks ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 16, color: "#9ca3af" }, children: "Loading..." }) : tasks.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 16, color: "#9ca3af" }, children: "No tasks yet" }) : tasks.map((task) => /* @__PURE__ */ jsxs("div", { style: __spreadProps(__spreadValues({}, S.stepItem(false)), { display: "flex", justifyContent: "space-between", alignItems: "center" }), children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: 12 }, children: task.name }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: "#9ca3af" }, children: [
+              task.slug,
+              " \xB7 ",
+              task.steps.length,
+              " steps"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: S.btn("#111"),
+              onClick: () => {
+                if (window.ontheway) {
+                  window.ontheway.start(task.slug);
+                }
+              },
+              children: "\u25B6"
+            }
+          )
+        ] }, task.id)),
+        /* @__PURE__ */ jsx("button", { style: __spreadProps(__spreadValues({}, S.btnOutline), { width: "100%", marginTop: 8 }), onClick: fetchTasks, children: "\u21BB Refresh" })
+      ] })
+    ) })
+  ] }) });
+}
+var OnTheWayDevTools = {
+  init(config) {
+    if (typeof window === "undefined") return;
+    if (typeof document === "undefined") return;
+    console.log(
+      "%c\u{1F6E4}\uFE0F OnTheWay DevTools %c Use <OnTheWayDevToolsPanel /> in React, or import the standalone recorder-snippet.js",
+      "background:#22c55e;color:#fff;padding:4px 8px;border-radius:4px;font-weight:bold",
+      "color:#666"
+    );
+    const script = document.createElement("script");
+    script.src = (config.serverUrl || "") + "/recorder-snippet.js";
+    script.dataset.session = "devtools_" + Date.now().toString(36);
+    script.dataset.server = config.serverUrl || window.location.origin;
+    document.head.appendChild(script);
+  }
+};
+var devtools_default = OnTheWayDevToolsPanel;
+
+export { OnTheWayDevTools, OnTheWayDevToolsPanel, devtools_default as default };
+//# sourceMappingURL=devtools.js.map
+//# sourceMappingURL=devtools.js.map