tour-guide-live 0.1.0

package/dist/index.js

@@ -0,0 +1,817 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TourProvider: () => TourProvider,
+  TourTooltip: () => TourTooltip,
+  useTour: () => useTour
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function storageKey(tourId) {
+  return `tour_progress_${tourId}`;
+}
+function loadProgress(tourId) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(storageKey(tourId));
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function saveProgress(tourId, progress) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(storageKey(tourId), JSON.stringify(progress));
+  } catch {
+  }
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_TOURS":
+      return { ...state, tours: action.tours, resolved: true };
+    case "START_TOUR":
+      return {
+        ...state,
+        activeTourId: action.tourId,
+        currentStepIndex: action.resumeIndex,
+        completedSteps: action.completedSteps
+      };
+    case "END_TOUR":
+      return {
+        ...state,
+        activeTourId: null,
+        currentStepIndex: 0,
+        completedSteps: []
+      };
+    case "GO_TO_STEP":
+      return { ...state, currentStepIndex: action.index };
+    case "COMPLETE_STEP": {
+      const tour = state.tours.find((t) => t.id === state.activeTourId);
+      if (!tour) return state;
+      const newCompleted = state.completedSteps.includes(state.currentStepIndex) ? state.completedSteps : [...state.completedSteps, state.currentStepIndex];
+      const isLastStep = state.currentStepIndex >= tour.steps.length - 1;
+      if (isLastStep) {
+        return {
+          ...state,
+          completedSteps: newCompleted
+          // Tour will be ended by the effect that detects completion
+        };
+      }
+      return {
+        ...state,
+        completedSteps: newCompleted,
+        currentStepIndex: state.currentStepIndex + 1
+      };
+    }
+    case "SKIP_TOUR":
+      return {
+        ...state,
+        activeTourId: null,
+        currentStepIndex: 0,
+        completedSteps: []
+      };
+    default:
+      return state;
+  }
+}
+var initialState = {
+  tours: [],
+  activeTourId: null,
+  currentStepIndex: 0,
+  completedSteps: [],
+  resolved: false
+};
+var TourContext = (0, import_react.createContext)(null);
+function TourProvider({
+  apiKey,
+  userId,
+  userAttributes,
+  apiBaseUrl = "",
+  children
+}) {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
+  const baseUrl = apiBaseUrl.replace(/\/$/, "");
+  const autoStarted = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    let cancelled = false;
+    async function resolve() {
+      try {
+        const currentUrl = window.location.pathname;
+        const res = await fetch(`${baseUrl}/api/tours/resolve`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ apiKey, userId, userAttributes, currentUrl })
+        });
+        if (!res.ok) {
+          console.warn("[tour-sdk] Failed to resolve tours:", res.status);
+          return;
+        }
+        const data = await res.json();
+        if (!cancelled) {
+          dispatch({ type: "SET_TOURS", tours: data.tours ?? [] });
+        }
+      } catch (err) {
+        console.warn("[tour-sdk] Error resolving tours:", err);
+      }
+    }
+    resolve();
+    return () => {
+      cancelled = true;
+    };
+  }, [baseUrl, apiKey, userId]);
+  (0, import_react.useEffect)(() => {
+    if (!state.resolved || autoStarted.current || state.tours.length === 0) return;
+    for (const tour of state.tours) {
+      const progress = loadProgress(tour.id);
+      if (progress?.completedAt || progress?.skipped) continue;
+      autoStarted.current = true;
+      const completed = progress?.completedSteps ?? [];
+      let resumeIndex = 0;
+      for (let i = 0; i < tour.steps.length; i++) {
+        if (!completed.includes(i)) {
+          resumeIndex = i;
+          break;
+        }
+      }
+      dispatch({
+        type: "START_TOUR",
+        tourId: tour.id,
+        resumeIndex,
+        completedSteps: completed
+      });
+      break;
+    }
+  }, [state.resolved, state.tours]);
+  const activeTour = (0, import_react.useMemo)(
+    () => state.tours.find((t) => t.id === state.activeTourId) ?? null,
+    [state.tours, state.activeTourId]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!state.activeTourId || !activeTour) return;
+    const isComplete = activeTour.steps.length > 0 && state.completedSteps.length >= activeTour.steps.length;
+    saveProgress(state.activeTourId, {
+      completedSteps: state.completedSteps,
+      completedAt: isComplete ? (/* @__PURE__ */ new Date()).toISOString() : null,
+      skipped: false
+    });
+    if (isComplete) {
+      syncProgress(state.activeTourId, state.completedSteps, false, (/* @__PURE__ */ new Date()).toISOString());
+      dispatch({ type: "END_TOUR" });
+    }
+  }, [state.activeTourId, state.completedSteps, activeTour]);
+  const syncProgress = (0, import_react.useCallback)(
+    async (tourId, completedSteps, skipped, completedAt) => {
+      try {
+        await fetch(`${baseUrl}/api/tours/progress`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            apiKey,
+            userId,
+            tourId,
+            completedSteps,
+            skipped,
+            completedAt
+          })
+        });
+      } catch (err) {
+        console.warn("[tour-sdk] Failed to sync progress:", err);
+      }
+    },
+    [baseUrl, apiKey, userId]
+  );
+  const startTour = (0, import_react.useCallback)(
+    (tourId) => {
+      const tour = state.tours.find((t) => t.id === tourId);
+      if (!tour) {
+        console.warn(`[tour-sdk] Tour "${tourId}" not found`);
+        return;
+      }
+      const progress = loadProgress(tourId);
+      const completed = progress?.completedSteps ?? [];
+      let resumeIndex = 0;
+      for (let i = 0; i < tour.steps.length; i++) {
+        if (!completed.includes(i)) {
+          resumeIndex = i;
+          break;
+        }
+      }
+      dispatch({ type: "START_TOUR", tourId, resumeIndex, completedSteps: completed });
+    },
+    [state.tours]
+  );
+  const endTour = (0, import_react.useCallback)(() => {
+    dispatch({ type: "END_TOUR" });
+  }, []);
+  const goToStep = (0, import_react.useCallback)((index) => {
+    dispatch({ type: "GO_TO_STEP", index });
+  }, []);
+  const completeStep = (0, import_react.useCallback)(() => {
+    dispatch({ type: "COMPLETE_STEP" });
+  }, []);
+  const skipTour = (0, import_react.useCallback)(() => {
+    if (state.activeTourId) {
+      saveProgress(state.activeTourId, {
+        completedSteps: state.completedSteps,
+        completedAt: null,
+        skipped: true
+      });
+      syncProgress(state.activeTourId, state.completedSteps, true, null);
+    }
+    dispatch({ type: "SKIP_TOUR" });
+  }, [state.activeTourId, state.completedSteps, syncProgress]);
+  const currentStep = activeTour ? activeTour.steps[state.currentStepIndex] ?? null : null;
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      startTour,
+      endTour,
+      goToStep,
+      completeStep,
+      skipTour,
+      currentStep,
+      currentStepIndex: state.currentStepIndex,
+      activeTourId: state.activeTourId,
+      activeTour,
+      isActive: state.activeTourId !== null && currentStep !== null
+    }),
+    [
+      startTour,
+      endTour,
+      goToStep,
+      completeStep,
+      skipTour,
+      currentStep,
+      state.currentStepIndex,
+      state.activeTourId,
+      activeTour
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TourContext.Provider, { value: contextValue, children });
+}
+function useTour() {
+  const ctx = (0, import_react.useContext)(TourContext);
+  if (!ctx) {
+    throw new Error("useTour must be used within a TourProvider");
+  }
+  return ctx;
+}
+
+// src/TourTooltip.tsx
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/hooks/useElementDetection.ts
+var import_react2 = require("react");
+var TIMEOUT_MS = 5e3;
+function useElementDetection(target) {
+  const [element, setElement] = (0, import_react2.useState)(null);
+  const prevTarget = (0, import_react2.useRef)(target);
+  if (prevTarget.current !== target) {
+    prevTarget.current = target;
+  }
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || !target) {
+      setElement(null);
+      return;
+    }
+    const selector = target.startsWith("[") || target.startsWith("#") || target.startsWith(".") ? target : `[data-tour="${target}"]`;
+    const found = document.querySelector(selector);
+    if (found) {
+      setElement(found);
+      return;
+    }
+    let timedOut = false;
+    const observer = new MutationObserver(() => {
+      const el = document.querySelector(selector);
+      if (el) {
+        observer.disconnect();
+        if (!timedOut) setElement(el);
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    const timer = setTimeout(() => {
+      timedOut = true;
+      observer.disconnect();
+      console.warn(
+        `[tour-sdk] Element "${target}" not found after ${TIMEOUT_MS}ms \u2014 skipping step`
+      );
+      setElement(null);
+    }, TIMEOUT_MS);
+    return () => {
+      timedOut = true;
+      observer.disconnect();
+      clearTimeout(timer);
+    };
+  }, [target]);
+  return element;
+}
+
+// src/hooks/useTooltipPosition.ts
+var import_react3 = require("react");
+var ARROW_SIZE = 8;
+var TOOLTIP_GAP = 12;
+var VIEWPORT_PADDING = 8;
+function useTooltipPosition(targetEl, tooltipEl, preferredPlacement) {
+  const [position, setPosition] = (0, import_react3.useState)({
+    top: 0,
+    left: 0,
+    actualPlacement: preferredPlacement,
+    arrowTop: 0,
+    arrowLeft: 0,
+    targetRect: null
+  });
+  const calculate = (0, import_react3.useCallback)(() => {
+    if (typeof window === "undefined" || !targetEl || !tooltipEl) return;
+    const targetRect = targetEl.getBoundingClientRect();
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const tooltipW = tooltipRect.width;
+    const tooltipH = tooltipRect.height;
+    function getPos(p) {
+      let top2 = 0;
+      let left2 = 0;
+      switch (p) {
+        case "bottom":
+          top2 = targetRect.bottom + TOOLTIP_GAP;
+          left2 = targetRect.left + targetRect.width / 2 - tooltipW / 2;
+          break;
+        case "top":
+          top2 = targetRect.top - tooltipH - TOOLTIP_GAP;
+          left2 = targetRect.left + targetRect.width / 2 - tooltipW / 2;
+          break;
+        case "right":
+          top2 = targetRect.top + targetRect.height / 2 - tooltipH / 2;
+          left2 = targetRect.right + TOOLTIP_GAP;
+          break;
+        case "left":
+          top2 = targetRect.top + targetRect.height / 2 - tooltipH / 2;
+          left2 = targetRect.left - tooltipW - TOOLTIP_GAP;
+          break;
+      }
+      return { top: top2, left: left2 };
+    }
+    function fits(p) {
+      const { top: top2, left: left2 } = getPos(p);
+      return top2 >= VIEWPORT_PADDING && left2 >= VIEWPORT_PADDING && top2 + tooltipH <= vh - VIEWPORT_PADDING && left2 + tooltipW <= vw - VIEWPORT_PADDING;
+    }
+    const opposite = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    const fallbackOrder = ["bottom", "top", "right", "left"];
+    let actual = preferredPlacement;
+    if (!fits(preferredPlacement)) {
+      if (fits(opposite[preferredPlacement])) {
+        actual = opposite[preferredPlacement];
+      } else {
+        actual = fallbackOrder.find(fits) ?? preferredPlacement;
+      }
+    }
+    let { top, left } = getPos(actual);
+    left = Math.max(VIEWPORT_PADDING, Math.min(left, vw - tooltipW - VIEWPORT_PADDING));
+    top = Math.max(VIEWPORT_PADDING, Math.min(top, vh - tooltipH - VIEWPORT_PADDING));
+    let arrowTop = 0;
+    let arrowLeft = 0;
+    const targetCenterX = targetRect.left + targetRect.width / 2;
+    const targetCenterY = targetRect.top + targetRect.height / 2;
+    switch (actual) {
+      case "bottom":
+        arrowTop = -ARROW_SIZE;
+        arrowLeft = Math.max(12, Math.min(targetCenterX - left, tooltipW - 12));
+        break;
+      case "top":
+        arrowTop = tooltipH;
+        arrowLeft = Math.max(12, Math.min(targetCenterX - left, tooltipW - 12));
+        break;
+      case "right":
+        arrowLeft = -ARROW_SIZE;
+        arrowTop = Math.max(12, Math.min(targetCenterY - top, tooltipH - 12));
+        break;
+      case "left":
+        arrowLeft = tooltipW;
+        arrowTop = Math.max(12, Math.min(targetCenterY - top, tooltipH - 12));
+        break;
+    }
+    setPosition({
+      top,
+      left,
+      actualPlacement: actual,
+      arrowTop,
+      arrowLeft,
+      targetRect
+    });
+  }, [targetEl, tooltipEl, preferredPlacement]);
+  (0, import_react3.useEffect)(() => {
+    if (typeof window === "undefined" || !targetEl || !tooltipEl) return;
+    calculate();
+    const onScroll = () => calculate();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => calculate());
+      resizeObserver.observe(targetEl);
+      resizeObserver.observe(tooltipEl);
+    }
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+      resizeObserver?.disconnect();
+    };
+  }, [targetEl, tooltipEl, calculate]);
+  return position;
+}
+
+// src/hooks/useStepTrigger.ts
+var import_react4 = require("react");
+function useStepTrigger(step, targetEl, onComplete) {
+  (0, import_react4.useEffect)(() => {
+    if (!step || step.completionTrigger !== "element-click" || !targetEl) return;
+    const handler = () => onComplete();
+    targetEl.addEventListener("click", handler, { once: true });
+    return () => targetEl.removeEventListener("click", handler);
+  }, [step, targetEl, onComplete]);
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined" || !step || step.completionTrigger !== "url-change" || !step.urlTrigger)
+      return;
+    const pattern = step.urlTrigger;
+    function matchesUrl() {
+      const path = window.location.pathname;
+      const regex = new RegExp(
+        "^" + pattern.replace(/\*/g, ".*").replace(/\?/g, ".") + "$"
+      );
+      return regex.test(path);
+    }
+    if (matchesUrl()) {
+      onComplete();
+      return;
+    }
+    const onUrlChange = () => {
+      if (matchesUrl()) {
+        onComplete();
+      }
+    };
+    window.addEventListener("popstate", onUrlChange);
+    const originalPush = history.pushState.bind(history);
+    const originalReplace = history.replaceState.bind(history);
+    history.pushState = function(...args) {
+      originalPush(...args);
+      onUrlChange();
+    };
+    history.replaceState = function(...args) {
+      originalReplace(...args);
+      onUrlChange();
+    };
+    return () => {
+      window.removeEventListener("popstate", onUrlChange);
+      history.pushState = originalPush;
+      history.replaceState = originalReplace;
+    };
+  }, [step, onComplete]);
+}
+
+// src/Spotlight.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PADDING = 4;
+function Spotlight({ targetRect }) {
+  if (!targetRect) return null;
+  const top = targetRect.top - PADDING;
+  const left = targetRect.left - PADDING;
+  const width = targetRect.width + PADDING * 2;
+  const height = targetRect.height + PADDING * 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "__tg_spotlight",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex: 9999,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          style: { position: "absolute", top: 0, left: 0 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mask", { id: "__tg_spotlight_mask", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "rect",
+                {
+                  x: left,
+                  y: top,
+                  width,
+                  height,
+                  rx: "4",
+                  ry: "4",
+                  fill: "black"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "rect",
+              {
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                fill: "rgba(0,0,0,0.55)",
+                mask: "url(#__tg_spotlight_mask)"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/TourTooltip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PREFIX = "__tg_";
+var styles = {
+  tooltip: {
+    position: "fixed",
+    zIndex: 1e4,
+    background: "#fff",
+    borderRadius: "8px",
+    boxShadow: "0 4px 24px rgba(0,0,0,0.18)",
+    padding: "16px",
+    maxWidth: "340px",
+    minWidth: "240px",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    color: "#1a1a1a"
+  },
+  arrow: {
+    position: "absolute",
+    width: "16px",
+    height: "16px",
+    background: "#fff",
+    transform: "rotate(45deg)",
+    zIndex: -1,
+    boxShadow: "2px 2px 4px rgba(0,0,0,0.06)"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: "8px"
+  },
+  stepCounter: {
+    fontSize: "12px",
+    color: "#888",
+    fontWeight: 500,
+    flexShrink: 0
+  },
+  dismissBtn: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "18px",
+    color: "#999",
+    padding: "0 0 0 8px",
+    lineHeight: "1"
+  },
+  title: {
+    fontSize: "15px",
+    fontWeight: 600,
+    margin: "0 0 6px 0",
+    color: "#111"
+  },
+  body: {
+    margin: "0 0 12px 0",
+    color: "#444",
+    fontSize: "13px",
+    lineHeight: "1.55"
+  },
+  image: {
+    width: "100%",
+    borderRadius: "4px",
+    marginBottom: "12px"
+  },
+  footer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "8px"
+  },
+  btn: {
+    padding: "6px 14px",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: "pointer",
+    border: "none"
+  },
+  btnPrimary: {
+    background: "#2563eb",
+    color: "#fff"
+  },
+  btnSecondary: {
+    background: "#f1f5f9",
+    color: "#334155"
+  }
+};
+function renderSimpleMarkdown(text) {
+  const parts = [];
+  const regex = /(\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\))/g;
+  let lastIndex = 0;
+  let match;
+  let key = 0;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    if (match[2]) {
+      parts.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: match[2] }, key++));
+    } else if (match[3]) {
+      parts.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("em", { children: match[3] }, key++));
+    } else if (match[4]) {
+      parts.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "code",
+          {
+            style: {
+              background: "#f1f5f9",
+              padding: "1px 4px",
+              borderRadius: "3px",
+              fontSize: "12px"
+            },
+            children: match[4]
+          },
+          key++
+        )
+      );
+    } else if (match[5] && match[6]) {
+      parts.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "a",
+          {
+            href: match[6],
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { color: "#2563eb", textDecoration: "underline" },
+            children: match[5]
+          },
+          key++
+        )
+      );
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts;
+}
+function TourTooltip() {
+  const {
+    isActive,
+    currentStep,
+    currentStepIndex,
+    activeTour,
+    completeStep,
+    goToStep,
+    skipTour
+  } = useTour();
+  const targetEl = useElementDetection(currentStep?.target ?? null);
+  const tooltipRef = (0, import_react5.useRef)(null);
+  const [portalContainer, setPortalContainer] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    let container = document.getElementById(`${PREFIX}portal`);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = `${PREFIX}portal`;
+      document.body.appendChild(container);
+    }
+    setPortalContainer(container);
+  }, []);
+  const position = useTooltipPosition(
+    targetEl,
+    tooltipRef.current,
+    currentStep?.placement ?? "bottom"
+  );
+  useStepTrigger(currentStep, targetEl, completeStep);
+  if (!isActive || !currentStep || !activeTour || !portalContainer) {
+    return null;
+  }
+  const totalSteps = activeTour.steps.length;
+  const isFirst = currentStepIndex === 0;
+  const isLast = currentStepIndex === totalSteps - 1;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    currentStep.spotlight && targetEl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spotlight, { targetRect: position.targetRect }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: tooltipRef,
+        className: `${PREFIX}tooltip`,
+        style: {
+          ...styles.tooltip,
+          top: `${position.top}px`,
+          left: `${position.left}px`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                ...styles.arrow,
+                top: `${position.arrowTop}px`,
+                left: `${position.arrowLeft}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: styles.stepCounter, children: [
+              currentStepIndex + 1,
+              " of ",
+              totalSteps
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: styles.dismissBtn,
+                onClick: skipTour,
+                "aria-label": "Dismiss tour",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { style: styles.title, children: currentStep.title }),
+          currentStep.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              src: currentStep.imageUrl,
+              alt: "",
+              style: styles.image
+            }
+          ),
+          currentStep.body && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles.body, children: renderSimpleMarkdown(currentStep.body) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.footer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: !isFirst && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: { ...styles.btn, ...styles.btnSecondary },
+                onClick: () => goToStep(currentStepIndex - 1),
+                children: "Back"
+              }
+            ) }),
+            currentStep.completionTrigger === "next-button" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: { ...styles.btn, ...styles.btnPrimary },
+                onClick: completeStep,
+                children: isLast ? "Finish" : "Next"
+              }
+            ),
+            currentStep.completionTrigger !== "next-button" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "12px", color: "#888" }, children: currentStep.completionTrigger === "element-click" ? "Click the highlighted element" : currentStep.completionTrigger === "url-change" ? "Navigate to continue" : "Waiting..." })
+          ] })
+        ]
+      }
+    )
+  ] });
+  return (0, import_react_dom.createPortal)(content, portalContainer);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TourProvider,
+  TourTooltip,
+  useTour
+});
+//# sourceMappingURL=index.js.map