webdrive 1.0.0

package/dist/index.js

@@ -0,0 +1,1395 @@
+// src/core/EventEmitter.ts
+var EventEmitter = class {
+  constructor() {
+    this.events = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    let handlers = this.events.get(event);
+    if (!handlers) {
+      handlers = /* @__PURE__ */ new Set();
+      this.events.set(event, handlers);
+    }
+    handlers.add(handler);
+  }
+  off(event, handler) {
+    const handlers = this.events.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.events.delete(event);
+      }
+    }
+  }
+  emit(event, ...args) {
+    const handlers = this.events.get(event);
+    if (handlers) {
+      const data = args[0];
+      for (const handler of Array.from(handlers)) {
+        try {
+          handler(data);
+        } catch (error) {
+          console.error(`[WebDrive] Error in "${String(event)}" event handler:`, error);
+        }
+      }
+    }
+  }
+  removeAllListeners() {
+    this.events.clear();
+  }
+};
+
+// src/storage/StorageManager.ts
+var MemoryStorage = class {
+  constructor() {
+    this.memory = /* @__PURE__ */ new Map();
+  }
+  getItem(key) {
+    return this.memory.get(key) ?? null;
+  }
+  setItem(key, value) {
+    this.memory.set(key, value);
+  }
+  removeItem(key) {
+    this.memory.delete(key);
+  }
+  clear() {
+    this.memory.clear();
+  }
+};
+var LocalStorageAdapter = class {
+  constructor() {
+    this.fallback = new MemoryStorage();
+  }
+  isAvailable() {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return false;
+    }
+    try {
+      const testKey = "__webdrive_storage_test__";
+      window.localStorage.setItem(testKey, "1");
+      window.localStorage.removeItem(testKey);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  getItem(key) {
+    if (!this.isAvailable()) {
+      return this.fallback.getItem(key);
+    }
+    try {
+      return window.localStorage.getItem(key);
+    } catch {
+      return this.fallback.getItem(key);
+    }
+  }
+  setItem(key, value) {
+    if (!this.isAvailable()) {
+      this.fallback.setItem(key, value);
+      return;
+    }
+    try {
+      window.localStorage.setItem(key, value);
+    } catch {
+      this.fallback.setItem(key, value);
+    }
+  }
+  removeItem(key) {
+    if (!this.isAvailable()) {
+      this.fallback.removeItem(key);
+      return;
+    }
+    try {
+      window.localStorage.removeItem(key);
+    } catch {
+      this.fallback.removeItem(key);
+    }
+  }
+};
+var StorageManager = class {
+  constructor(customStorage) {
+    this.prefix = "webdrive:tour:";
+    this.storage = customStorage ?? new LocalStorageAdapter();
+  }
+  getKey(id) {
+    return `${this.prefix}${id}`;
+  }
+  async isCompleted(id) {
+    if (!id) return false;
+    const value = await this.storage.getItem(this.getKey(id));
+    return value === "completed" || value === "true";
+  }
+  async markCompleted(id) {
+    if (!id) return;
+    await this.storage.setItem(this.getKey(id), "completed");
+  }
+  async reset(id) {
+    if (!id) return;
+    await this.storage.removeItem(this.getKey(id));
+  }
+  async resetAll() {
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        const keysToRemove = [];
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i);
+          if (key && key.startsWith(this.prefix)) {
+            keysToRemove.push(key);
+          }
+        }
+        for (const key of keysToRemove) {
+          window.localStorage.removeItem(key);
+        }
+      } catch {
+      }
+    }
+  }
+};
+
+// src/dom/DOMUtils.ts
+function resolveElement(target) {
+  if (!target) return null;
+  if (typeof target === "string") {
+    if (typeof document === "undefined") return null;
+    try {
+      const el = document.querySelector(target);
+      if (!el) {
+        console.warn(`[WebDrive] Target element "${target}" was not found.`);
+        return null;
+      }
+      return el;
+    } catch (error) {
+      console.warn(`[WebDrive] Invalid selector "${target}":`, error);
+      return null;
+    }
+  }
+  if (typeof HTMLElement !== "undefined" && target instanceof HTMLElement) {
+    return target;
+  }
+  return null;
+}
+function scrollIntoViewSafely(element, smooth = true) {
+  if (!element || typeof element.scrollIntoView !== "function") return;
+  try {
+    element.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto",
+      block: "center",
+      inline: "nearest"
+    });
+  } catch {
+    try {
+      element.scrollIntoView(true);
+    } catch {
+    }
+  }
+}
+function getElementBoundingBox(element, padding = 0) {
+  const rect = element.getBoundingClientRect();
+  const top = rect.top - padding;
+  const left = rect.left - padding;
+  const width = rect.width + padding * 2;
+  const height = rect.height + padding * 2;
+  return {
+    top,
+    left,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height
+  };
+}
+function getFocusableElements(container) {
+  const selector = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(", ");
+  return Array.from(container.querySelectorAll(selector)).filter(
+    (el) => el.offsetParent !== null || el.getClientRects().length > 0
+  );
+}
+function removeElement(el) {
+  if (el && el.parentNode) {
+    el.parentNode.removeChild(el);
+  }
+}
+
+// src/dom/Overlay.ts
+var Overlay = class {
+  constructor(config = {}) {
+    this.rootElement = null;
+    this.cutoutRect = null;
+    this.stageElement = null;
+    this.config = {
+      enabled: config.enabled ?? true,
+      opacity: config.opacity ?? 0.6,
+      color: config.color,
+      zIndex: config.zIndex ?? 1e5,
+      animate: config.animate ?? true,
+      allowClose: config.allowClose ?? true,
+      onOverlayClick: config.onOverlayClick
+    };
+    this.maskId = `webdrive-mask-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  mount() {
+    if (typeof document === "undefined") return;
+    if (this.rootElement && this.rootElement.isConnected) return;
+    const root = document.createElement("div");
+    root.setAttribute("data-webdrive-root", "");
+    root.className = "webdrive-root";
+    root.style.setProperty("--webdrive-z-index", String(this.config.zIndex));
+    if (this.config.opacity !== void 0) {
+      root.style.setProperty("--webdrive-overlay-opacity", String(this.config.opacity));
+    }
+    if (this.config.color) {
+      root.style.setProperty("--webdrive-overlay", this.config.color);
+    }
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("data-webdrive-overlay", "");
+    svg.setAttribute("class", "webdrive-overlay");
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", "100%");
+    if (!this.config.enabled) {
+      svg.style.display = "none";
+    }
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
+    mask.setAttribute("id", this.maskId);
+    const maskBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    maskBg.setAttribute("x", "0");
+    maskBg.setAttribute("y", "0");
+    maskBg.setAttribute("width", "100%");
+    maskBg.setAttribute("height", "100%");
+    maskBg.setAttribute("fill", "#ffffff");
+    const cutout = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    cutout.setAttribute("data-webdrive-cutout", "");
+    cutout.setAttribute("class", "webdrive-cutout");
+    cutout.setAttribute("x", "0");
+    cutout.setAttribute("y", "0");
+    cutout.setAttribute("width", "0");
+    cutout.setAttribute("height", "0");
+    cutout.setAttribute("rx", "4");
+    cutout.setAttribute("ry", "4");
+    cutout.setAttribute("fill", "#000000");
+    mask.appendChild(maskBg);
+    mask.appendChild(cutout);
+    defs.appendChild(mask);
+    svg.appendChild(defs);
+    const overlayRect = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    );
+    overlayRect.setAttribute("x", "0");
+    overlayRect.setAttribute("y", "0");
+    overlayRect.setAttribute("width", "100%");
+    overlayRect.setAttribute("height", "100%");
+    overlayRect.setAttribute("fill", "currentColor");
+    overlayRect.setAttribute("mask", `url(#${this.maskId})`);
+    svg.appendChild(overlayRect);
+    const stage = document.createElement("div");
+    stage.setAttribute("data-webdrive-stage", "");
+    stage.className = "webdrive-stage";
+    if (this.config.allowClose && this.config.onOverlayClick) {
+      svg.addEventListener("click", (e) => {
+        if (e.target === svg || e.target === overlayRect) {
+          this.config.onOverlayClick?.();
+        }
+      });
+    }
+    root.appendChild(svg);
+    root.appendChild(stage);
+    document.body.appendChild(root);
+    this.rootElement = root;
+    this.cutoutRect = cutout;
+    this.stageElement = stage;
+  }
+  update(rect, animate = true) {
+    if (!this.cutoutRect || !this.stageElement) {
+      this.mount();
+    }
+    if (this.cutoutRect && this.stageElement) {
+      if (!animate || !this.config.animate) {
+        this.cutoutRect.style.transition = "none";
+        this.stageElement.style.transition = "none";
+      } else {
+        this.cutoutRect.style.transition = "";
+        this.stageElement.style.transition = "";
+      }
+      this.cutoutRect.setAttribute("x", String(rect.left));
+      this.cutoutRect.setAttribute("y", String(rect.top));
+      this.cutoutRect.setAttribute("width", String(Math.max(0, rect.width)));
+      this.cutoutRect.setAttribute("height", String(Math.max(0, rect.height)));
+      this.cutoutRect.setAttribute("rx", String(rect.radius));
+      this.cutoutRect.setAttribute("ry", String(rect.radius));
+      this.stageElement.style.left = `${rect.left}px`;
+      this.stageElement.style.top = `${rect.top}px`;
+      this.stageElement.style.width = `${Math.max(0, rect.width)}px`;
+      this.stageElement.style.height = `${Math.max(0, rect.height)}px`;
+      this.stageElement.style.borderRadius = `${rect.radius}px`;
+    }
+  }
+  getRootElement() {
+    if (!this.rootElement || !this.rootElement.isConnected) {
+      this.mount();
+    }
+    return this.rootElement;
+  }
+  getStageElement() {
+    return this.stageElement;
+  }
+  destroy() {
+    removeElement(this.rootElement);
+    this.rootElement = null;
+    this.cutoutRect = null;
+    this.stageElement = null;
+  }
+};
+
+// src/dom/Popover.ts
+var Popover = class {
+  constructor(callbacks, config = {}) {
+    this.element = null;
+    this.headerEl = null;
+    this.titleEl = null;
+    this.closeBtn = null;
+    this.contentEl = null;
+    this.footerEl = null;
+    this.prevBtn = null;
+    this.nextBtn = null;
+    this.progressEl = null;
+    this.arrowEl = null;
+    this.callbacks = callbacks;
+    this.config = config;
+  }
+  mount(container) {
+    if (this.element && this.element.isConnected) return;
+    const popover = document.createElement("div");
+    popover.setAttribute("data-webdrive-popover", "");
+    popover.className = "webdrive-popover";
+    popover.setAttribute("role", "dialog");
+    popover.setAttribute("aria-modal", "true");
+    popover.setAttribute("aria-labelledby", "webdrive-title");
+    popover.setAttribute("aria-describedby", "webdrive-description");
+    popover.setAttribute("tabindex", "-1");
+    const header = document.createElement("div");
+    header.setAttribute("data-webdrive-header", "");
+    header.className = "webdrive-header";
+    const title = document.createElement("h2");
+    title.setAttribute("data-webdrive-title", "");
+    title.id = "webdrive-title";
+    title.className = "webdrive-title";
+    const closeBtn = document.createElement("button");
+    closeBtn.setAttribute("data-webdrive-close", "");
+    closeBtn.setAttribute("type", "button");
+    closeBtn.className = "webdrive-close";
+    closeBtn.innerHTML = "&times;";
+    closeBtn.setAttribute("aria-label", this.config.closeButtonText || "Close tour");
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.callbacks.onClose();
+    });
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const content = document.createElement("div");
+    content.setAttribute("data-webdrive-content", "");
+    content.id = "webdrive-description";
+    content.className = "webdrive-content";
+    const footer = document.createElement("div");
+    footer.setAttribute("data-webdrive-footer", "");
+    footer.className = "webdrive-footer";
+    const prevBtn = document.createElement("button");
+    prevBtn.setAttribute("data-webdrive-prev", "");
+    prevBtn.setAttribute("type", "button");
+    prevBtn.className = "webdrive-button webdrive-prev";
+    prevBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.callbacks.onPrev();
+    });
+    const progress = document.createElement("div");
+    progress.setAttribute("data-webdrive-progress", "");
+    progress.className = "webdrive-progress";
+    const nextBtn = document.createElement("button");
+    nextBtn.setAttribute("data-webdrive-next", "");
+    nextBtn.setAttribute("type", "button");
+    nextBtn.className = "webdrive-button webdrive-next";
+    nextBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.callbacks.onNext();
+    });
+    footer.appendChild(prevBtn);
+    footer.appendChild(progress);
+    footer.appendChild(nextBtn);
+    const arrow = document.createElement("div");
+    arrow.setAttribute("data-webdrive-arrow", "");
+    arrow.className = "webdrive-arrow";
+    popover.appendChild(header);
+    popover.appendChild(content);
+    popover.appendChild(footer);
+    popover.appendChild(arrow);
+    container.appendChild(popover);
+    this.element = popover;
+    this.headerEl = header;
+    this.titleEl = title;
+    this.closeBtn = closeBtn;
+    this.contentEl = content;
+    this.footerEl = footer;
+    this.prevBtn = prevBtn;
+    this.nextBtn = nextBtn;
+    this.progressEl = progress;
+    this.arrowEl = arrow;
+  }
+  renderStep(step, stepIndex, totalSteps) {
+    if (!this.element) return;
+    if (this.titleEl) {
+      if (step.title) {
+        this.titleEl.textContent = step.title;
+        this.titleEl.style.display = "";
+      } else {
+        this.titleEl.textContent = "";
+        this.titleEl.style.display = "none";
+      }
+    }
+    const showClose = step.showCloseButton !== void 0 ? step.showCloseButton : this.config.allowClose !== false;
+    if (this.closeBtn) {
+      this.closeBtn.style.display = showClose ? "" : "none";
+      const closeText = step.closeButtonText || this.config.closeButtonText || "Close tour";
+      this.closeBtn.setAttribute("aria-label", closeText);
+    }
+    if (this.headerEl) {
+      if (!step.title && !showClose) {
+        this.headerEl.style.display = "none";
+      } else {
+        this.headerEl.style.display = "";
+      }
+    }
+    if (this.contentEl) {
+      if (step.content) {
+        this.contentEl.innerHTML = step.content;
+      } else if (step.description) {
+        this.contentEl.textContent = step.description;
+      } else {
+        this.contentEl.textContent = "";
+      }
+    }
+    const showProgress = this.config.showProgress !== false && totalSteps > 1;
+    if (this.progressEl) {
+      if (showProgress) {
+        this.progressEl.style.display = "";
+        if (this.config.renderProgress) {
+          this.progressEl.textContent = this.config.renderProgress(
+            stepIndex + 1,
+            totalSteps
+          );
+        } else {
+          this.progressEl.textContent = `${stepIndex + 1} / ${totalSteps}`;
+        }
+      } else {
+        this.progressEl.style.display = "none";
+      }
+    }
+    const isFirstStep = stepIndex === 0;
+    const showPrev = step.showPreviousButton !== void 0 ? step.showPreviousButton : this.config.showButtons !== false;
+    if (this.prevBtn) {
+      if (!showPrev) {
+        this.prevBtn.style.display = "none";
+      } else {
+        this.prevBtn.style.display = "";
+        this.prevBtn.disabled = isFirstStep;
+        this.prevBtn.textContent = step.previousButtonText || this.config.previousButtonText || "Previous";
+        if (isFirstStep) {
+          this.prevBtn.setAttribute("aria-disabled", "true");
+        } else {
+          this.prevBtn.removeAttribute("aria-disabled");
+        }
+      }
+    }
+    const isLastStep = stepIndex === totalSteps - 1;
+    const showNext = step.showNextButton !== void 0 ? step.showNextButton : this.config.showButtons !== false;
+    if (this.nextBtn) {
+      if (!showNext) {
+        this.nextBtn.style.display = "none";
+      } else {
+        this.nextBtn.style.display = "";
+        if (isLastStep) {
+          this.nextBtn.textContent = step.doneButtonText || this.config.doneButtonText || "Done";
+        } else {
+          this.nextBtn.textContent = step.nextButtonText || this.config.nextButtonText || "Next";
+        }
+      }
+    }
+    if (this.footerEl) {
+      const showFooter = showPrev || showNext || showProgress;
+      this.footerEl.style.display = showFooter ? "" : "none";
+    }
+  }
+  applyPosition(pos, animate = true) {
+    if (!this.element) return;
+    if (!animate) {
+      this.element.style.transition = "none";
+    } else {
+      this.element.style.transition = "";
+    }
+    this.element.style.left = `${pos.left}px`;
+    this.element.style.top = `${pos.top}px`;
+    this.element.setAttribute("data-placement", pos.placement);
+    this.element.setAttribute("data-alignment", pos.alignment);
+    if (this.arrowEl) {
+      this.arrowEl.setAttribute("data-arrow-placement", pos.arrowPlacement || "top");
+      if (pos.arrowLeft !== void 0) {
+        this.arrowEl.style.left = `${pos.arrowLeft}px`;
+      } else {
+        this.arrowEl.style.left = "";
+      }
+      if (pos.arrowTop !== void 0) {
+        this.arrowEl.style.top = `${pos.arrowTop}px`;
+      } else {
+        this.arrowEl.style.top = "";
+      }
+    }
+  }
+  getElement() {
+    return this.element;
+  }
+  getNextButton() {
+    return this.nextBtn;
+  }
+  getDimensions() {
+    if (!this.element) {
+      return { width: 320, height: 180 };
+    }
+    const rect = this.element.getBoundingClientRect();
+    return {
+      width: rect.width || 320,
+      height: rect.height || 180
+    };
+  }
+  destroy() {
+    removeElement(this.element);
+    this.element = null;
+    this.headerEl = null;
+    this.titleEl = null;
+    this.closeBtn = null;
+    this.contentEl = null;
+    this.footerEl = null;
+    this.prevBtn = null;
+    this.nextBtn = null;
+    this.progressEl = null;
+    this.arrowEl = null;
+  }
+};
+
+// src/dom/Highlight.ts
+var Highlight = class {
+  constructor() {
+    this.currentElement = null;
+    this.padding = 0;
+    this.radius = 4;
+  }
+  setTarget(element, padding = 8, radius = 4) {
+    this.currentElement = element;
+    this.padding = padding;
+    this.radius = radius;
+    return this.getRect();
+  }
+  getRect() {
+    if (!this.currentElement || !this.currentElement.isConnected) {
+      return {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        right: 0,
+        bottom: 0,
+        radius: this.radius
+      };
+    }
+    const box = getElementBoundingBox(this.currentElement, this.padding);
+    return {
+      ...box,
+      radius: this.radius
+    };
+  }
+  getElement() {
+    return this.currentElement;
+  }
+  clear() {
+    this.currentElement = null;
+  }
+};
+
+// src/accessibility/AccessibilityManager.ts
+var AccessibilityManager = class {
+  constructor(config = {}) {
+    this.previousActiveElement = null;
+    this.keydownListener = null;
+    this.popoverElement = null;
+    this.config = {
+      keyboardNavigation: config.keyboardNavigation ?? true,
+      closeOnEscape: config.closeOnEscape ?? true
+    };
+  }
+  saveActiveElement() {
+    if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
+      this.previousActiveElement = document.activeElement;
+    }
+  }
+  attach(popover, callbacks) {
+    this.popoverElement = popover;
+    if (this.keydownListener) {
+      this.detach();
+    }
+    this.keydownListener = (e) => {
+      if ((this.config.closeOnEscape !== false || this.config.keyboardNavigation) && (e.key === "Escape" || e.key === "Esc")) {
+        e.preventDefault();
+        callbacks.onClose();
+        return;
+      }
+      if (this.config.keyboardNavigation) {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          callbacks.onNext();
+          return;
+        }
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          callbacks.onPrev();
+          return;
+        }
+      }
+      if (e.key === "Tab" && this.popoverElement) {
+        const focusables = getFocusableElements(this.popoverElement);
+        if (focusables.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last?.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first?.focus();
+          }
+        }
+      }
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", this.keydownListener);
+    }
+  }
+  focusPopover(preferredElement) {
+    if (preferredElement && typeof preferredElement.focus === "function") {
+      preferredElement.focus();
+      return;
+    }
+    if (this.popoverElement) {
+      const focusables = getFocusableElements(this.popoverElement);
+      if (focusables.length > 0 && focusables[0]) {
+        focusables[0].focus();
+      } else {
+        this.popoverElement.focus();
+      }
+    }
+  }
+  restoreFocus() {
+    if (this.previousActiveElement && this.previousActiveElement.isConnected && typeof this.previousActiveElement.focus === "function") {
+      try {
+        this.previousActiveElement.focus();
+      } catch {
+      }
+    }
+    this.previousActiveElement = null;
+  }
+  detach() {
+    if (typeof window !== "undefined" && this.keydownListener) {
+      window.removeEventListener("keydown", this.keydownListener);
+    }
+    this.keydownListener = null;
+    this.popoverElement = null;
+  }
+};
+
+// src/positioning/PositionEngine.ts
+function getRawPosition(target, popover, placement, alignment, offset) {
+  let top = 0;
+  let left = 0;
+  switch (placement) {
+    case "top":
+      top = target.top - popover.height - offset;
+      break;
+    case "bottom":
+      top = target.top + target.height + offset;
+      break;
+    case "left":
+      left = target.left - popover.width - offset;
+      break;
+    case "right":
+      left = target.left + target.width + offset;
+      break;
+  }
+  if (placement === "top" || placement === "bottom") {
+    switch (alignment) {
+      case "start":
+        left = target.left;
+        break;
+      case "center":
+        left = target.left + (target.width - popover.width) / 2;
+        break;
+      case "end":
+        left = target.left + target.width - popover.width;
+        break;
+    }
+  } else {
+    switch (alignment) {
+      case "start":
+        top = target.top;
+        break;
+      case "center":
+        top = target.top + (target.height - popover.height) / 2;
+        break;
+      case "end":
+        top = target.top + target.height - popover.height;
+        break;
+    }
+  }
+  return { top, left };
+}
+function fitsInViewport(pos, popover, vw, vh, padding) {
+  return pos.left >= padding && pos.top >= padding && pos.left + popover.width <= vw - padding && pos.top + popover.height <= vh - padding;
+}
+function getVisibleArea(pos, popover, vw, vh, padding) {
+  const visibleLeft = Math.max(padding, pos.left);
+  const visibleTop = Math.max(padding, pos.top);
+  const visibleRight = Math.min(vw - padding, pos.left + popover.width);
+  const visibleBottom = Math.min(vh - padding, pos.top + popover.height);
+  const visibleW = Math.max(0, visibleRight - visibleLeft);
+  const visibleH = Math.max(0, visibleBottom - visibleTop);
+  return visibleW * visibleH;
+}
+function getFallbackPlacements(preferred) {
+  switch (preferred) {
+    case "right":
+      return ["right", "left", "bottom", "top"];
+    case "left":
+      return ["left", "right", "bottom", "top"];
+    case "bottom":
+      return ["bottom", "top", "right", "left"];
+    case "top":
+      return ["top", "bottom", "right", "left"];
+  }
+}
+function calculatePopoverPosition(params) {
+  const {
+    targetRect,
+    popoverRect,
+    placement: preferredPlacement = "bottom",
+    alignment = "center",
+    offset = 12,
+    viewportPadding = 12,
+    arrowSize = 8
+  } = params;
+  const vw = params.viewportWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1024);
+  const vh = params.viewportHeight ?? (typeof window !== "undefined" ? window.innerHeight : 768);
+  const placementsToTest = getFallbackPlacements(preferredPlacement);
+  let chosenPlacement = preferredPlacement;
+  let chosenPos = getRawPosition(
+    targetRect,
+    popoverRect,
+    preferredPlacement,
+    alignment,
+    offset
+  );
+  let foundFit = false;
+  for (const p of placementsToTest) {
+    const rawPos = getRawPosition(
+      targetRect,
+      popoverRect,
+      p,
+      alignment,
+      offset
+    );
+    if (fitsInViewport(rawPos, popoverRect, vw, vh, viewportPadding)) {
+      chosenPlacement = p;
+      chosenPos = rawPos;
+      foundFit = true;
+      break;
+    }
+  }
+  if (!foundFit) {
+    let bestPlacement = preferredPlacement;
+    let bestScore = -1;
+    let bestPos = chosenPos;
+    for (const p of placementsToTest) {
+      const rawPos = getRawPosition(
+        targetRect,
+        popoverRect,
+        p,
+        alignment,
+        offset
+      );
+      const score = getVisibleArea(
+        rawPos,
+        popoverRect,
+        vw,
+        vh,
+        viewportPadding
+      );
+      if (score > bestScore) {
+        bestScore = score;
+        bestPlacement = p;
+        bestPos = rawPos;
+      }
+    }
+    chosenPlacement = bestPlacement;
+    chosenPos = bestPos;
+  }
+  const minLeft = viewportPadding;
+  const maxLeft = Math.max(viewportPadding, vw - popoverRect.width - viewportPadding);
+  const minTop = viewportPadding;
+  const maxTop = Math.max(viewportPadding, vh - popoverRect.height - viewportPadding);
+  const clampedLeft = Math.max(minLeft, Math.min(chosenPos.left, maxLeft));
+  const clampedTop = Math.max(minTop, Math.min(chosenPos.top, maxTop));
+  const targetCenterX = targetRect.left + targetRect.width / 2;
+  const targetCenterY = targetRect.top + targetRect.height / 2;
+  let arrowTop;
+  let arrowLeft;
+  let arrowPlacement = "top";
+  const minArrowOffset = arrowSize + 8;
+  switch (chosenPlacement) {
+    case "top":
+      arrowPlacement = "bottom";
+      arrowTop = popoverRect.height;
+      arrowLeft = Math.max(
+        minArrowOffset,
+        Math.min(
+          targetCenterX - clampedLeft,
+          popoverRect.width - minArrowOffset
+        )
+      );
+      break;
+    case "bottom":
+      arrowPlacement = "top";
+      arrowTop = -arrowSize;
+      arrowLeft = Math.max(
+        minArrowOffset,
+        Math.min(
+          targetCenterX - clampedLeft,
+          popoverRect.width - minArrowOffset
+        )
+      );
+      break;
+    case "left":
+      arrowPlacement = "right";
+      arrowLeft = popoverRect.width;
+      arrowTop = Math.max(
+        minArrowOffset,
+        Math.min(
+          targetCenterY - clampedTop,
+          popoverRect.height - minArrowOffset
+        )
+      );
+      break;
+    case "right":
+      arrowPlacement = "left";
+      arrowLeft = -arrowSize;
+      arrowTop = Math.max(
+        minArrowOffset,
+        Math.min(
+          targetCenterY - clampedTop,
+          popoverRect.height - minArrowOffset
+        )
+      );
+      break;
+  }
+  return {
+    top: Math.round(clampedTop),
+    left: Math.round(clampedLeft),
+    placement: chosenPlacement,
+    alignment,
+    arrowTop: arrowTop !== void 0 ? Math.round(arrowTop) : void 0,
+    arrowLeft: arrowLeft !== void 0 ? Math.round(arrowLeft) : void 0,
+    arrowPlacement
+  };
+}
+
+// src/core/TourController.ts
+var TourController = class {
+  constructor(options, emitter, storage) {
+    this.currentStepIndex = -1;
+    this.tourActive = false;
+    this.destroyed = false;
+    this.resizeListener = null;
+    this.scrollListener = null;
+    this.rafId = null;
+    this.waitObserver = null;
+    this.waitTimeoutId = null;
+    this.options = {
+      animate: true,
+      smoothScroll: true,
+      overlay: true,
+      overlayOpacity: 0.6,
+      zIndex: 1e5,
+      stagePadding: 8,
+      stageRadius: 6,
+      keyboardNavigation: true,
+      closeOnEscape: true,
+      showButtons: true,
+      showProgress: true,
+      allowClose: true,
+      missingElementBehavior: "skip",
+      missingElementWaitTimeout: 3e3,
+      ...options
+    };
+    this.emitter = emitter;
+    this.storage = storage;
+    this.highlight = new Highlight();
+    this.overlay = new Overlay({
+      enabled: this.options.overlay !== false,
+      opacity: this.options.overlayOpacity,
+      color: this.options.overlayColor,
+      zIndex: this.options.zIndex,
+      animate: this.options.animate,
+      allowClose: this.options.allowClose,
+      onOverlayClick: () => this.stop()
+    });
+    this.popover = new Popover(
+      {
+        onPrev: () => this.previous(),
+        onNext: () => this.next(),
+        onClose: () => this.stop()
+      },
+      {
+        allowClose: this.options.allowClose,
+        showProgress: this.options.showProgress,
+        showButtons: this.options.showButtons,
+        nextButtonText: this.options.nextButtonText,
+        previousButtonText: this.options.previousButtonText,
+        doneButtonText: this.options.doneButtonText,
+        closeButtonText: this.options.closeButtonText,
+        renderProgress: this.options.renderProgress
+      }
+    );
+    this.accessibility = new AccessibilityManager({
+      keyboardNavigation: this.options.keyboardNavigation,
+      closeOnEscape: this.options.closeOnEscape
+    });
+  }
+  async start(startIndex = 0) {
+    if (this.destroyed) {
+      console.warn("[WebDrive] Cannot start a destroyed tour instance.");
+      return;
+    }
+    if (this.tourActive) {
+      return;
+    }
+    if (!this.options.steps || this.options.steps.length === 0) {
+      console.warn("[WebDrive] Cannot start tour without steps.");
+      return;
+    }
+    if (this.options.remember && this.options.id) {
+      const alreadyDone = await this.storage.isCompleted(this.options.id);
+      if (alreadyDone) {
+        return;
+      }
+    }
+    this.tourActive = true;
+    this.accessibility.saveActiveElement();
+    this.overlay.mount();
+    const rootEl = this.overlay.getRootElement();
+    if (rootEl) {
+      this.popover.mount(rootEl);
+    }
+    const popoverEl = this.popover.getElement();
+    if (popoverEl) {
+      this.accessibility.attach(popoverEl, {
+        onNext: () => this.next(),
+        onPrev: () => this.previous(),
+        onClose: () => this.stop()
+      });
+    }
+    this.setupViewportListeners();
+    this.emitter.emit("start");
+    this.options.onStart?.();
+    await this.goTo(startIndex);
+  }
+  async stop() {
+    if (!this.tourActive) return;
+    this.cleanupWaiting();
+    await this.triggerStepLeave();
+    this.tourActive = false;
+    this.currentStepIndex = -1;
+    this.highlight.clear();
+    this.removeViewportListeners();
+    this.accessibility.detach();
+    this.accessibility.restoreFocus();
+    this.overlay.destroy();
+    this.popover.destroy();
+    this.emitter.emit("close");
+    this.options.onClose?.();
+  }
+  async complete() {
+    if (!this.tourActive) return;
+    this.cleanupWaiting();
+    await this.triggerStepLeave();
+    if (this.options.remember && this.options.id) {
+      await this.storage.markCompleted(this.options.id);
+    }
+    this.tourActive = false;
+    this.currentStepIndex = -1;
+    this.highlight.clear();
+    this.removeViewportListeners();
+    this.accessibility.detach();
+    this.accessibility.restoreFocus();
+    this.overlay.destroy();
+    this.popover.destroy();
+    this.emitter.emit("complete");
+    this.options.onComplete?.();
+  }
+  async next() {
+    if (!this.tourActive) return;
+    const nextIdx = this.currentStepIndex + 1;
+    if (nextIdx >= this.options.steps.length) {
+      await this.complete();
+    } else {
+      await this.goTo(nextIdx, "forward");
+    }
+  }
+  async previous() {
+    if (!this.tourActive) return;
+    const prevIdx = this.currentStepIndex - 1;
+    if (prevIdx >= 0) {
+      await this.goTo(prevIdx, "backward");
+    }
+  }
+  async goTo(index, direction = "forward") {
+    if (!this.tourActive || this.destroyed) return;
+    if (index < 0 || index >= this.options.steps.length) {
+      return;
+    }
+    this.cleanupWaiting();
+    const step = this.options.steps[index];
+    if (!step) return;
+    let targetEl = resolveElement(step.element);
+    if (!targetEl) {
+      const behavior = this.options.missingElementBehavior ?? "skip";
+      if (behavior === "stop") {
+        console.warn(`[WebDrive] Stopping tour because element "${String(step.element)}" was not found.`);
+        await this.stop();
+        return;
+      }
+      if (behavior === "wait") {
+        targetEl = await this.waitForElement(
+          step.element,
+          this.options.missingElementWaitTimeout ?? 3e3
+        );
+        if (!targetEl) {
+          console.warn(`[WebDrive] Timeout waiting for element "${String(step.element)}". Skipping.`);
+          await this.advanceFromMissing(index, direction);
+          return;
+        }
+      } else {
+        console.warn(`[WebDrive] Skipping step ${index} because element "${String(step.element)}" was not found.`);
+        await this.advanceFromMissing(index, direction);
+        return;
+      }
+    }
+    await this.triggerStepLeave();
+    this.currentStepIndex = index;
+    if (this.options.smoothScroll !== false) {
+      scrollIntoViewSafely(targetEl, this.options.animate !== false);
+    }
+    const padding = step.padding ?? this.options.stagePadding ?? 8;
+    const radius = this.options.stageRadius ?? 6;
+    const highlightRect = this.highlight.setTarget(targetEl, padding, radius);
+    this.overlay.update(highlightRect, this.options.animate !== false);
+    this.popover.renderStep(step, index, this.options.steps.length);
+    this.updatePosition();
+    const nextBtn = this.popover.getNextButton();
+    this.accessibility.focusPopover(nextBtn);
+    try {
+      await step.onEnter?.();
+    } catch (error) {
+      console.error(`[WebDrive] Error in step ${index} onEnter:`, error);
+    }
+    this.emitter.emit("stepChange", { step, index });
+    this.options.onStepChange?.(step, index);
+  }
+  refresh() {
+    if (!this.tourActive || this.currentStepIndex === -1) return;
+    if (this.rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+      cancelAnimationFrame(this.rafId);
+    }
+    if (typeof requestAnimationFrame !== "undefined") {
+      this.rafId = requestAnimationFrame(() => {
+        this.syncUI();
+      });
+    } else {
+      this.syncUI();
+    }
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.cleanupWaiting();
+    this.removeViewportListeners();
+    if (this.tourActive) {
+      this.tourActive = false;
+      this.accessibility.detach();
+      this.accessibility.restoreFocus();
+      this.overlay.destroy();
+      this.popover.destroy();
+    }
+    this.emitter.emit("destroy");
+    this.options.onDestroy?.();
+    this.emitter.removeAllListeners();
+  }
+  isActive() {
+    return this.tourActive;
+  }
+  getCurrentStep() {
+    if (!this.tourActive || this.currentStepIndex === -1) {
+      return null;
+    }
+    return this.options.steps[this.currentStepIndex] ?? null;
+  }
+  getCurrentStepIndex() {
+    return this.currentStepIndex;
+  }
+  syncUI() {
+    if (!this.tourActive || this.currentStepIndex === -1) return;
+    const targetEl = this.highlight.getElement();
+    if (!targetEl || !targetEl.isConnected) {
+      return;
+    }
+    const highlightRect = this.highlight.getRect();
+    this.overlay.update(highlightRect, false);
+    this.updatePosition(false);
+  }
+  updatePosition(animate = true) {
+    const step = this.getCurrentStep();
+    if (!step) return;
+    const highlightRect = this.highlight.getRect();
+    const popoverDim = this.popover.getDimensions();
+    const positionResult = calculatePopoverPosition({
+      targetRect: highlightRect,
+      popoverRect: popoverDim,
+      placement: step.position ?? "bottom",
+      alignment: step.align ?? "center",
+      offset: step.offset ?? 12
+    });
+    this.popover.applyPosition(positionResult, animate && this.options.animate !== false);
+  }
+  async triggerStepLeave() {
+    if (this.currentStepIndex >= 0 && this.currentStepIndex < this.options.steps.length) {
+      const prevStep = this.options.steps[this.currentStepIndex];
+      if (prevStep?.onLeave) {
+        try {
+          await prevStep.onLeave();
+        } catch (error) {
+          console.error(`[WebDrive] Error in step ${this.currentStepIndex} onLeave:`, error);
+        }
+      }
+    }
+  }
+  async advanceFromMissing(currentIndex, direction) {
+    if (direction === "forward") {
+      const nextIdx = currentIndex + 1;
+      if (nextIdx >= this.options.steps.length) {
+        await this.complete();
+      } else {
+        await this.goTo(nextIdx, "forward");
+      }
+    } else {
+      const prevIdx = currentIndex - 1;
+      if (prevIdx < 0) {
+        await this.stop();
+      } else {
+        await this.goTo(prevIdx, "backward");
+      }
+    }
+  }
+  waitForElement(target, timeoutMs) {
+    return new Promise((resolve) => {
+      const existing = resolveElement(target);
+      if (existing) {
+        resolve(existing);
+        return;
+      }
+      if (typeof MutationObserver === "undefined" || typeof document === "undefined") {
+        resolve(null);
+        return;
+      }
+      this.waitObserver = new MutationObserver(() => {
+        const found = resolveElement(target);
+        if (found) {
+          this.cleanupWaiting();
+          resolve(found);
+        }
+      });
+      this.waitObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+      this.waitTimeoutId = setTimeout(() => {
+        this.cleanupWaiting();
+        resolve(resolveElement(target));
+      }, timeoutMs);
+    });
+  }
+  cleanupWaiting() {
+    if (this.waitObserver) {
+      this.waitObserver.disconnect();
+      this.waitObserver = null;
+    }
+    if (this.waitTimeoutId !== null) {
+      clearTimeout(this.waitTimeoutId);
+      this.waitTimeoutId = null;
+    }
+  }
+  setupViewportListeners() {
+    if (typeof window === "undefined") return;
+    this.resizeListener = () => this.refresh();
+    this.scrollListener = () => this.refresh();
+    window.addEventListener("resize", this.resizeListener, { passive: true });
+    window.addEventListener("scroll", this.scrollListener, { passive: true, capture: true });
+  }
+  removeViewportListeners() {
+    if (typeof window === "undefined") return;
+    if (this.resizeListener) {
+      window.removeEventListener("resize", this.resizeListener);
+      this.resizeListener = null;
+    }
+    if (this.scrollListener) {
+      window.removeEventListener("scroll", this.scrollListener, true);
+      this.scrollListener = null;
+    }
+    if (this.rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+};
+
+// src/core/WebDrive.ts
+var WebDrive = class {
+  constructor(options) {
+    this.controller = null;
+    this.options = { ...options };
+    this.emitter = new EventEmitter();
+    this.storage = new StorageManager(this.options.storage);
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      this.controller = new TourController(
+        this.options,
+        this.emitter,
+        this.storage
+      );
+      if (this.options.autoStart) {
+        setTimeout(() => {
+          this.start();
+        }, 0);
+      }
+    }
+  }
+  ensureController() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return null;
+    }
+    if (!this.controller) {
+      this.controller = new TourController(
+        this.options,
+        this.emitter,
+        this.storage
+      );
+    }
+    return this.controller;
+  }
+  async start(startIndex = 0) {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      await ctrl.start(startIndex);
+    }
+  }
+  async stop() {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      await ctrl.stop();
+    }
+  }
+  async next() {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      await ctrl.next();
+    }
+  }
+  async previous() {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      await ctrl.previous();
+    }
+  }
+  async goTo(index) {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      await ctrl.goTo(index);
+    }
+  }
+  refresh() {
+    const ctrl = this.ensureController();
+    if (ctrl) {
+      ctrl.refresh();
+    }
+  }
+  destroy() {
+    if (this.controller) {
+      this.controller.destroy();
+      this.controller = null;
+    }
+  }
+  isActive() {
+    return this.controller ? this.controller.isActive() : false;
+  }
+  getCurrentStep() {
+    return this.controller ? this.controller.getCurrentStep() : null;
+  }
+  getCurrentStepIndex() {
+    return this.controller ? this.controller.getCurrentStepIndex() : -1;
+  }
+  async hasCompleted() {
+    if (!this.options.id) return false;
+    return this.storage.isCompleted(this.options.id);
+  }
+  async reset() {
+    if (!this.options.id) return;
+    await this.storage.reset(this.options.id);
+  }
+  async resetAll() {
+    await this.storage.resetAll();
+  }
+  on(event, callback) {
+    this.emitter.on(event, callback);
+    return this;
+  }
+  off(event, callback) {
+    this.emitter.off(event, callback);
+    return this;
+  }
+};
+
+// src/index.ts
+var index_default = WebDrive;
+export {
+  EventEmitter,
+  StorageManager,
+  TourController,
+  WebDrive,
+  calculatePopoverPosition,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map