torchlit 0.2.2 → 0.3.0

package/dist/tour-overlay-CBkFKv12.js

@@ -0,0 +1,1056 @@
+import { css, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
+const TOOLTIP_W = 320;
+const TOOLTIP_H_MAX = 270;
+const GAP = 16;
+const VIEWPORT_MARGIN = 24;
+const TOOLTIP_VERTICAL_OFFSET = 80;
+function fitsInViewport(rect, viewportHeight = window.innerHeight) {
+  return rect.height + TOOLTIP_H_MAX + GAP * 2 < viewportHeight;
+}
+function bestPlacement(rect, preferred, spotlightPadding, viewport = { width: window.innerWidth, height: window.innerHeight }) {
+  const fits = (placement) => {
+    switch (placement) {
+      case "bottom":
+        return rect.bottom + spotlightPadding + GAP + TOOLTIP_H_MAX < viewport.height;
+      case "top":
+        return rect.top - spotlightPadding - GAP - TOOLTIP_H_MAX > 0;
+      case "right":
+        return rect.right + spotlightPadding + GAP + TOOLTIP_W < viewport.width;
+      case "left":
+        return rect.left - spotlightPadding - GAP - TOOLTIP_W > 0;
+    }
+  };
+  const opposite = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  const perpendicular = {
+    top: ["left", "right"],
+    bottom: ["left", "right"],
+    left: ["top", "bottom"],
+    right: ["top", "bottom"]
+  };
+  if (fits(preferred)) return preferred;
+  if (fits(opposite[preferred])) return opposite[preferred];
+  for (const placement of perpendicular[preferred]) {
+    if (fits(placement)) return placement;
+  }
+  return preferred;
+}
+function getTooltipPosition(rect, placement, spotlightPadding, viewportHeight = window.innerHeight) {
+  const visibleTop = Math.max(0, rect.top);
+  const visibleBottom = Math.min(viewportHeight, rect.bottom);
+  const visibleCenterY = (visibleTop + visibleBottom) / 2;
+  switch (placement) {
+    case "right":
+      return {
+        top: visibleCenterY - TOOLTIP_VERTICAL_OFFSET,
+        left: rect.right + spotlightPadding + GAP
+      };
+    case "left":
+      return {
+        top: visibleCenterY - TOOLTIP_VERTICAL_OFFSET,
+        left: rect.left - spotlightPadding - GAP - TOOLTIP_W
+      };
+    case "bottom":
+      return {
+        top: rect.bottom + spotlightPadding + GAP,
+        left: rect.left + rect.width / 2 - TOOLTIP_W / 2
+      };
+    case "top":
+      return {
+        top: rect.top - spotlightPadding - GAP,
+        left: rect.left + rect.width / 2 - TOOLTIP_W / 2
+      };
+  }
+}
+function clampToViewport(pos, viewport = { width: window.innerWidth, height: window.innerHeight }) {
+  return {
+    top: Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(pos.top, viewport.height - TOOLTIP_H_MAX - VIEWPORT_MARGIN)
+    ),
+    left: Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(pos.left, viewport.width - TOOLTIP_W - VIEWPORT_MARGIN)
+    )
+  };
+}
+function getArrowClass(placement) {
+  switch (placement) {
+    case "right":
+      return "arrow-right";
+    case "left":
+      return "arrow-left";
+    case "bottom":
+      return "arrow-bottom";
+    case "top":
+      return "arrow-top";
+    default:
+      return "arrow-bottom";
+  }
+}
+function getArrowOffset(targetRect, tooltipPos, placement, viewportHeight = window.innerHeight) {
+  const arrowSize = 12;
+  const minOffset = arrowSize + 8;
+  if (placement === "top" || placement === "bottom") {
+    const targetCenterX = targetRect.left + targetRect.width / 2;
+    const offset2 = targetCenterX - tooltipPos.left;
+    const clamped2 = Math.max(minOffset, Math.min(offset2, TOOLTIP_W - minOffset));
+    return `${clamped2}px`;
+  }
+  const visibleTop = Math.max(0, targetRect.top);
+  const visibleBottom = Math.min(viewportHeight, targetRect.bottom);
+  const targetCenterY = (visibleTop + visibleBottom) / 2;
+  const offset = targetCenterY - tooltipPos.top;
+  const clamped = Math.max(minOffset, Math.min(offset, TOOLTIP_H_MAX - minOffset));
+  return `${clamped}px`;
+}
+function restoreScrollPosition(mode, savedScrollY) {
+  if (mode === "restore") {
+    window.scrollTo({ top: savedScrollY, behavior: "smooth" });
+  } else if (mode === "top") {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+function scrollAndSettle(element, placement, spotlightPadding) {
+  const initialRect = element.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  if (fitsInViewport(initialRect, viewportHeight)) {
+    element.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest"
+    });
+  } else {
+    const desiredTop = placement === "top" ? TOOLTIP_H_MAX + GAP + spotlightPadding : viewportHeight * 0.15;
+    const scrollTarget = window.scrollY + initialRect.top - desiredTop;
+    window.scrollTo({ top: Math.max(0, scrollTarget), behavior: "smooth" });
+  }
+  return new Promise((resolve) => {
+    let lastTop = element.getBoundingClientRect().top;
+    let stableFrames = 0;
+    let rafId = 0;
+    const maxWait = setTimeout(() => {
+      cancelAnimationFrame(rafId);
+      resolve();
+    }, 1500);
+    const poll = () => {
+      const top = element.getBoundingClientRect().top;
+      if (Math.abs(top - lastTop) < 1) {
+        stableFrames += 1;
+      } else {
+        stableFrames = 0;
+      }
+      lastTop = top;
+      if (stableFrames >= 3) {
+        clearTimeout(maxWait);
+        resolve();
+        return;
+      }
+      rafId = requestAnimationFrame(poll);
+    };
+    rafId = requestAnimationFrame(poll);
+  });
+}
+class FocusManager {
+  constructor() {
+    this.previouslyFocused = null;
+  }
+  capture() {
+    if (document.activeElement instanceof HTMLElement) {
+      this.previouslyFocused = document.activeElement;
+    }
+  }
+  restore() {
+    this.previouslyFocused?.focus();
+    this.previouslyFocused = null;
+  }
+  focusDialog(root) {
+    root?.querySelector(".tour-tooltip, .tour-center-card")?.focus();
+  }
+  trapFocus(event, root) {
+    const container = root?.querySelector(
+      ".tour-tooltip, .tour-center-card"
+    );
+    if (!container) return;
+    const focusable = container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const activeElement = root?.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+      return;
+    }
+    if (activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}
+function deepQuery(selector, root = document.body) {
+  const found = root.querySelector(selector);
+  if (found) return found;
+  const children = root.querySelectorAll("*");
+  for (const element of children) {
+    if (element.shadowRoot) {
+      const shadowResult = deepQuery(selector, element.shadowRoot);
+      if (shadowResult) return shadowResult;
+    }
+  }
+  return null;
+}
+const DEFAULT_TARGET_ATTR = "data-tour-id";
+const DEFAULT_TIMEOUT = 3e3;
+function resolveTargetSelector(targetId, targetAttribute = DEFAULT_TARGET_ATTR) {
+  return `[${targetAttribute}="${targetId}"]`;
+}
+function resolveTarget(targetId, targetAttribute = DEFAULT_TARGET_ATTR, root = document.body) {
+  if (!targetId || targetId === "_none_") return null;
+  return deepQuery(resolveTargetSelector(targetId, targetAttribute), root);
+}
+async function waitForTarget(targetId, targetAttribute = DEFAULT_TARGET_ATTR, timeout = DEFAULT_TIMEOUT) {
+  const existing = resolveTarget(targetId, targetAttribute);
+  if (existing) return existing;
+  return new Promise((resolve) => {
+    let resolved = false;
+    const observer = new MutationObserver(() => {
+      const element = resolveTarget(targetId, targetAttribute);
+      if (!element) return;
+      resolved = true;
+      observer.disconnect();
+      resolve(element);
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    setTimeout(() => {
+      if (resolved) return;
+      observer.disconnect();
+      resolve(resolveTarget(targetId, targetAttribute));
+    }, timeout);
+  });
+}
+function resolveStepTarget(step, targetAttribute = DEFAULT_TARGET_ATTR) {
+  const targetElement = resolveTarget(step.target, targetAttribute);
+  return {
+    targetElement,
+    targetRect: targetElement?.getBoundingClientRect() ?? null
+  };
+}
+const TARGET_CONTEXT_MARGIN = 32;
+class StepRunner {
+  constructor(options) {
+    this.options = options;
+    this.autoAdvanceTimer = null;
+  }
+  clearAutoAdvance() {
+    if (this.autoAdvanceTimer !== null) {
+      clearTimeout(this.autoAdvanceTimer);
+      this.autoAdvanceTimer = null;
+    }
+  }
+  startAutoAdvance(ms) {
+    this.clearAutoAdvance();
+    this.autoAdvanceTimer = setTimeout(() => {
+      this.autoAdvanceTimer = null;
+      this.options.nextStep();
+    }, ms);
+  }
+  async prepareStep(snapshot) {
+    if (snapshot.step.beforeShow) {
+      try {
+        await snapshot.step.beforeShow();
+      } catch (error) {
+        console.error("[torchlit] beforeShow hook failed:", error);
+      }
+    }
+    if (snapshot.step.route) {
+      this.options.dispatchRouteChange(snapshot.step.route);
+    }
+    if (snapshot.step.target && snapshot.step.target !== "_none_") {
+      await waitForTarget(snapshot.step.target, this.options.targetAttribute);
+    }
+    const currentSnapshot = this.options.getCurrentSnapshot() ?? snapshot;
+    const tour = this.options.getTour(currentSnapshot.tourId);
+    if (!tour) return null;
+    let resolved = this.resolveSnapshot(currentSnapshot, tour);
+    if (resolved.targetElement && this.shouldScrollIntoView(resolved)) {
+      await scrollAndSettle(
+        resolved.targetElement,
+        resolved.step.placement,
+        this.options.spotlightPadding
+      );
+      resolved = this.resolveSnapshot(
+        this.options.getCurrentSnapshot() ?? currentSnapshot,
+        tour
+      );
+    }
+    return resolved;
+  }
+  resolveSnapshot(snapshot, tour) {
+    const { targetElement, targetRect } = resolveStepTarget(
+      snapshot.step,
+      this.options.targetAttribute
+    );
+    return {
+      ...snapshot,
+      tour,
+      targetElement,
+      targetRect
+    };
+  }
+  shouldScrollIntoView(snapshot) {
+    const rect = snapshot.targetRect;
+    if (!rect) return false;
+    const viewportHeight = window.innerHeight;
+    const fits = rect.height + TOOLTIP_H_MAX + TARGET_CONTEXT_MARGIN < viewportHeight;
+    const inView = fits ? rect.top >= 0 && rect.bottom <= viewportHeight && rect.left >= 0 && rect.right <= window.innerWidth : snapshot.step.placement === "top" ? rect.top >= TOOLTIP_H_MAX + GAP + this.options.spotlightPadding && rect.top < viewportHeight : rect.top >= 0 && rect.top < viewportHeight;
+    return !inView;
+  }
+}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let TorchlitOverlay = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.snapshot = null;
+    this.visible = false;
+    this.teardownTimer = null;
+    this.focusManager = new FocusManager();
+    this.stepRunner = null;
+    this.lastResolvedPlacement = "bottom";
+    this.scrollRafId = 0;
+    this.savedScrollY = 0;
+    this.activeTour = null;
+    this.resolvedTargetElement = null;
+    this.changeToken = 0;
+    this.handleResize = () => {
+      this.refreshSnapshotFromTarget();
+    };
+    this.handleScroll = () => {
+      if (!this.snapshot || this.scrollRafId) return;
+      this.scrollRafId = requestAnimationFrame(() => {
+        this.scrollRafId = 0;
+        this.refreshSnapshotFromTarget();
+      });
+    };
+    this.handleKeydown = (e) => {
+      if (!this.snapshot || !this.service) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.clearAutoAdvance();
+        this.service.skipTour();
+      } else if (e.key === "ArrowRight" || e.key === "Enter") {
+        e.preventDefault();
+        this.clearAutoAdvance();
+        this.service.nextStep();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this.clearAutoAdvance();
+        this.service.prevStep();
+      } else if (e.key === "Tab") {
+        this.focusManager.trapFocus(e, this.shadowRoot);
+      }
+    };
+    this.handleBackdropClick = () => {
+      this.clearAutoAdvance();
+      this.service?.skipTour();
+    };
+  }
+  /* ── Lifecycle ──────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.service) {
+      this.attachService();
+    }
+    window.addEventListener("resize", this.handleResize);
+    window.addEventListener("scroll", this.handleScroll, true);
+    window.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unsubscribe?.();
+    this.clearAutoAdvance();
+    if (this.scrollRafId) cancelAnimationFrame(this.scrollRafId);
+    if (this.teardownTimer) clearTimeout(this.teardownTimer);
+    window.removeEventListener("resize", this.handleResize);
+    window.removeEventListener("scroll", this.handleScroll, true);
+    window.removeEventListener("keydown", this.handleKeydown);
+  }
+  updated(changed) {
+    if (changed.has("service") && this.service) {
+      this.unsubscribe?.();
+      this.attachService();
+    }
+    if (this.visible && this.snapshot) {
+      this.adjustTooltipPosition();
+      this.updateComplete.then(() => {
+        this.focusManager.focusDialog(this.shadowRoot);
+      });
+    }
+  }
+  /**
+   * After rendering, measure the tooltip's actual height and correct
+   * its position for 'top' placement (the only one that depends on
+   * tooltip height). This eliminates hardcoded height estimates.
+   */
+  adjustTooltipPosition() {
+    if (this.lastResolvedPlacement !== "top") return;
+    const tooltip = this.shadowRoot?.querySelector(".tour-tooltip");
+    const targetRect = this.snapshot?.targetRect;
+    if (!tooltip || !targetRect) return;
+    const PADDING = this.service?.spotlightPadding ?? 10;
+    const actualHeight = tooltip.getBoundingClientRect().height;
+    const correctTop = targetRect.top - PADDING - GAP - actualHeight;
+    const clampedTop = Math.max(VIEWPORT_MARGIN, correctTop);
+    tooltip.style.top = `${clampedTop}px`;
+  }
+  attachService() {
+    this.stepRunner = new StepRunner({
+      getCurrentSnapshot: () => this.service.getSnapshot(),
+      getTour: (tourId) => this.getTourDefinition(tourId),
+      nextStep: () => this.service.nextStep(),
+      spotlightPadding: this.service.spotlightPadding,
+      targetAttribute: this.service.targetAttribute,
+      dispatchRouteChange: (route) => this.dispatchRouteChange(route)
+    });
+    this.unsubscribe = this.service.subscribe((snapshot) => {
+      void this.handleTourChange(snapshot);
+    });
+  }
+  clearAutoAdvance() {
+    this.stepRunner?.clearAutoAdvance();
+  }
+  startAutoAdvance(ms) {
+    this.stepRunner?.startAutoAdvance(ms);
+  }
+  async handleTourChange(snapshot) {
+    const token = ++this.changeToken;
+    this.clearAutoAdvance();
+    if (this.teardownTimer) {
+      clearTimeout(this.teardownTimer);
+      this.teardownTimer = null;
+    }
+    if (!snapshot) {
+      const endingTour = this.activeTour;
+      this.visible = false;
+      this.activeTour = null;
+      this.resolvedTargetElement = null;
+      this.teardownTimer = setTimeout(() => {
+        if (token !== this.changeToken) return;
+        this.snapshot = null;
+        this.focusManager.restore();
+        restoreScrollPosition(endingTour?.onEndScroll ?? "restore", this.savedScrollY);
+      }, 300);
+      return;
+    }
+    const isNewTour = snapshot.tourId !== this.activeTour?.id;
+    if (!this.activeTour) {
+      this.focusManager.capture();
+    }
+    if (isNewTour) {
+      this.savedScrollY = window.scrollY;
+    }
+    const resolved = await this.stepRunner?.prepareStep(snapshot);
+    if (!resolved || token !== this.changeToken) return;
+    this.activeTour = resolved.tour;
+    this.snapshot = resolved;
+    this.resolvedTargetElement = resolved.targetElement;
+    requestAnimationFrame(() => {
+      if (token !== this.changeToken) return;
+      this.visible = true;
+      if (resolved.step.autoAdvance) {
+        this.startAutoAdvance(resolved.step.autoAdvance);
+      }
+    });
+  }
+  dispatchRouteChange(route) {
+    this.dispatchEvent(
+      new CustomEvent("tour-route-change", {
+        detail: { route },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  getTourDefinition(tourId) {
+    return this.service?.getTour(tourId);
+  }
+  refreshSnapshotFromTarget() {
+    if (!this.snapshot) return;
+    const targetElement = this.resolvedTargetElement?.isConnected ? this.resolvedTargetElement : null;
+    this.snapshot = {
+      ...this.snapshot,
+      targetElement,
+      targetRect: targetElement?.getBoundingClientRect() ?? null
+    };
+  }
+  /**
+   * Determine the best placement for the tooltip, flipping when the preferred
+   * placement would clip the viewport. Tries: preferred → opposite → perpendicular.
+   */
+  bestPlacement(rect, preferred) {
+    return bestPlacement(rect, preferred, this.service?.spotlightPadding ?? 10);
+  }
+  getTooltipPosition(rect, placement) {
+    return getTooltipPosition(rect, placement, this.service?.spotlightPadding ?? 10);
+  }
+  clampToViewport(pos) {
+    return clampToViewport(pos);
+  }
+  getArrowClass(placement) {
+    return getArrowClass(placement);
+  }
+  /**
+   * Compute the arrow's offset along the tooltip edge so it points at
+   * the center of the target element, clamped to stay within the tooltip.
+   */
+  getArrowOffset(targetRect, tooltipPos, placement) {
+    return getArrowOffset(targetRect, tooltipPos, placement);
+  }
+  /* ── Render ─────────────────────────────────────── */
+  render() {
+    if (!this.snapshot) return html``;
+    const { step, stepIndex, totalSteps, targetRect } = this.snapshot;
+    if (!targetRect) {
+      return this.renderCenteredStep(step, stepIndex, totalSteps);
+    }
+    const PADDING = this.service?.spotlightPadding ?? 10;
+    const spotlightRadius = step.spotlightBorderRadius ? `border-radius: ${step.spotlightBorderRadius};` : "";
+    const spotlightStyle = `
+      top: ${targetRect.top - PADDING}px;
+      left: ${targetRect.left - PADDING}px;
+      width: ${targetRect.width + PADDING * 2}px;
+      height: ${targetRect.height + PADDING * 2}px;
+      ${spotlightRadius}
+    `;
+    const resolved = this.bestPlacement(targetRect, step.placement);
+    this.lastResolvedPlacement = resolved;
+    const tooltipPos = this.clampToViewport(
+      this.getTooltipPosition(targetRect, resolved)
+    );
+    const arrowOffset = this.getArrowOffset(targetRect, tooltipPos, resolved);
+    const tooltipStyle = `top: ${tooltipPos.top}px; left: ${tooltipPos.left}px;`;
+    const stepLabel = `Step ${stepIndex + 1} of ${totalSteps}: ${step.title}`;
+    return html`
+      <!-- Screen reader announcement -->
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        ${stepLabel}
+      </div>
+
+      <div
+        class="tour-backdrop ${this.visible ? "visible" : ""}"
+        part="backdrop"
+        @click=${this.handleBackdropClick}
+      ></div>
+
+      <div class="tour-spotlight" part="spotlight" style=${spotlightStyle}></div>
+
+      <div
+        class="tour-tooltip ${this.visible ? "visible" : ""}"
+        part="tooltip"
+        style=${tooltipStyle}
+        role="dialog"
+        aria-modal="true"
+        aria-label="${step.title}"
+        aria-describedby="tour-desc"
+        tabindex="-1"
+      >
+        <div class="tour-arrow ${this.getArrowClass(resolved)}" style="--arrow-offset: ${arrowOffset}"></div>
+
+        <div class="tour-step-badge" aria-hidden="true">
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+            <line x1="12" y1="17" x2="12.01" y2="17"></line>
+          </svg>
+          Step ${stepIndex + 1} of ${totalSteps}
+        </div>
+
+        <h3 class="tour-title">${step.title}</h3>
+        <div class="tour-message" id="tour-desc">${step.message}</div>
+
+        ${this.renderProgressDots(stepIndex, totalSteps)}
+        ${this.renderFooter(stepIndex, totalSteps)}
+        ${this.renderAutoProgress(step, stepIndex)}
+      </div>
+    `;
+  }
+  renderProgressDots(current, total) {
+    if (total <= 1) return nothing;
+    return html`
+      <div class="tour-progress" role="group" aria-label="Tour progress">
+        ${Array.from({ length: total }, (_, i) => html`
+          <div
+            class="tour-dot ${i === current ? "active" : i < current ? "completed" : ""}"
+            role="presentation"
+          ></div>
+        `)}
+      </div>
+    `;
+  }
+  renderFooter(stepIndex, totalSteps, finishLabel = "Finish", finishAriaLabel = "Finish tour", showNavIcons = true) {
+    return html`
+      <div class="tour-footer">
+        <button
+          class="tour-skip"
+          aria-label="Skip tour"
+          @click=${() => {
+      this.clearAutoAdvance();
+      this.service.skipTour();
+    }}
+        >
+          Skip tour
+        </button>
+        <div class="tour-nav">
+          ${stepIndex > 0 ? html`
+            <button
+              class="tour-btn"
+              aria-label="Go to previous step"
+              @click=${() => {
+      this.clearAutoAdvance();
+      this.service.prevStep();
+    }}
+            >
+              ${showNavIcons ? html`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+              ` : nothing}
+              Back
+            </button>
+          ` : nothing}
+          <button
+            class="tour-btn primary"
+            aria-label="${stepIndex === totalSteps - 1 ? finishAriaLabel : "Go to next step"}"
+            @click=${() => {
+      this.clearAutoAdvance();
+      this.service.nextStep();
+    }}
+          >
+            ${stepIndex === totalSteps - 1 ? finishLabel : "Next"}
+            ${stepIndex < totalSteps - 1 ? html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            ` : showNavIcons ? html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            ` : nothing}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  renderAutoProgress(step, stepIndex) {
+    if (!step.autoAdvance) return nothing;
+    return keyed(stepIndex, html`
+      <div
+        class="tour-auto-progress"
+        style="animation: autoAdvanceFill ${step.autoAdvance}ms linear forwards;"
+        aria-hidden="true"
+      ></div>
+    `);
+  }
+  renderCenteredStep(step, stepIndex, totalSteps) {
+    const stepLabel = `Step ${stepIndex + 1} of ${totalSteps}: ${step.title}`;
+    return html`
+      <!-- Screen reader announcement -->
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        ${stepLabel}
+      </div>
+
+      <div
+        class="tour-backdrop ${this.visible ? "visible" : ""}"
+        part="backdrop"
+        @click=${this.handleBackdropClick}
+      ></div>
+
+      <div
+        class="tour-center-card ${this.visible ? "visible" : ""}"
+        part="center-card"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${step.title}"
+        aria-describedby="tour-desc-center"
+        tabindex="-1"
+      >
+        <div class="tour-center-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+            <line x1="12" y1="17" x2="12.01" y2="17"></line>
+          </svg>
+        </div>
+
+        <h3 class="tour-title">${step.title}</h3>
+        <div class="tour-message" id="tour-desc-center">${step.message}</div>
+
+        ${this.renderProgressDots(stepIndex, totalSteps)}
+        ${this.renderFooter(stepIndex, totalSteps, "Let's go!", "Start the tour", false)}
+        ${this.renderAutoProgress(step, stepIndex)}
+      </div>
+    `;
+  }
+};
+TorchlitOverlay.styles = css`
+    :host {
+      display: block;
+    }
+
+    /* ── Visually hidden (sr-only) ─────────────────── */
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* ── Backdrop ──────────────────────────────────── */
+
+    .tour-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 9998;
+      pointer-events: auto;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .tour-backdrop.visible {
+      opacity: 1;
+    }
+
+    /* ── Spotlight (box-shadow cutout) ─────────────── */
+
+    .tour-spotlight {
+      position: fixed;
+      z-index: 9999;
+      border-radius: var(--tour-spotlight-radius, var(--radius-lg, 0.75rem));
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
+      transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+    }
+
+    /* Subtle pulsing ring around spotlight */
+    .tour-spotlight::after {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border-radius: inherit;
+      border: 2px solid var(--tour-primary, var(--primary, #F26122));
+      opacity: 0.5;
+      animation: spotlightPulse 2s ease-in-out infinite;
+    }
+
+    @keyframes spotlightPulse {
+      0%, 100% { opacity: 0.3; transform: scale(1); }
+      50% { opacity: 0.7; transform: scale(1.01); }
+    }
+
+    /* ── Tooltip ───────────────────────────────────── */
+
+    .tour-tooltip {
+      position: fixed;
+      z-index: 10000;
+      box-sizing: border-box;
+      width: 320px;
+      background: var(--tour-card, var(--card, #fff));
+      border: 1px solid var(--tour-border, var(--border, #e5e5e5));
+      border-radius: var(--tour-tooltip-radius, var(--radius-lg, 0.75rem));
+      box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2),
+                  0 8px 16px -4px rgba(0, 0, 0, 0.1);
+      padding: 1.25rem;
+      pointer-events: auto;
+      opacity: 0;
+      transform: translateY(8px) scale(0.96);
+      transition: opacity 0.25s ease, transform 0.25s ease,
+                  top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .tour-tooltip:focus {
+      outline: none;
+    }
+
+    .tour-tooltip.visible {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    /* Arrow — position along edge is set via inline --arrow-offset */
+    .tour-arrow {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      background: var(--tour-card, var(--card, #fff));
+      border: 1px solid var(--tour-border, var(--border, #e5e5e5));
+      transform: rotate(45deg);
+    }
+
+    /* tooltip is above target → arrow at bottom of tooltip pointing down */
+    .tour-arrow.arrow-top {
+      bottom: -7px;
+      left: var(--arrow-offset, 50%);
+      margin-left: -6px;
+      border-top: none;
+      border-left: none;
+    }
+
+    /* tooltip is below target → arrow at top of tooltip pointing up */
+    .tour-arrow.arrow-bottom {
+      top: -7px;
+      left: var(--arrow-offset, 50%);
+      margin-left: -6px;
+      border-bottom: none;
+      border-right: none;
+    }
+
+    /* tooltip is right of target → arrow on left edge pointing left */
+    .tour-arrow.arrow-left {
+      right: -7px;
+      top: var(--arrow-offset, 50%);
+      margin-top: -6px;
+      border-bottom: none;
+      border-left: none;
+    }
+
+    /* tooltip is left of target → arrow on right edge pointing right */
+    .tour-arrow.arrow-right {
+      left: -7px;
+      top: var(--arrow-offset, 50%);
+      margin-top: -6px;
+      border-top: none;
+      border-right: none;
+    }
+
+    /* ── Tooltip content ──────────────────────────── */
+
+    .tour-step-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--tour-primary, var(--primary, #F26122));
+      margin-bottom: 0.5rem;
+    }
+
+    .tour-title {
+      margin: 0 0 0.375rem;
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--tour-foreground, var(--foreground, #1a1a1a));
+      line-height: 1.3;
+    }
+
+    .tour-message {
+      margin: 0 0 1rem;
+      font-size: 0.8125rem;
+      color: var(--tour-muted-foreground, var(--muted-foreground, #737373));
+      line-height: 1.55;
+    }
+
+    /* ── Progress dots ────────────────────────────── */
+
+    .tour-progress {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      margin-bottom: 1rem;
+    }
+
+    .tour-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--tour-muted, var(--muted, #e5e5e5));
+      transition: background 0.2s, transform 0.2s;
+    }
+
+    .tour-dot.active {
+      background: var(--tour-primary, var(--primary, #F26122));
+      transform: scale(1.3);
+    }
+
+    .tour-dot.completed {
+      background: var(--tour-primary, var(--primary, #F26122));
+      opacity: 0.5;
+    }
+
+    /* ── Auto-advance progress bar ────────────────── */
+
+    .tour-auto-progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      max-width: 100%;
+      height: 3px;
+      background: var(--tour-primary, var(--primary, #F26122));
+      opacity: 0.7;
+      border-radius: 0 0 var(--tour-tooltip-radius, var(--radius-lg, 0.75rem)) var(--tour-tooltip-radius, var(--radius-lg, 0.75rem));
+    }
+
+    @keyframes autoAdvanceFill {
+      from { width: 0%; }
+      to { width: 100%; }
+    }
+
+    /* ── Footer buttons ───────────────────────────── */
+
+    .tour-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tour-skip {
+      font-size: 0.75rem;
+      color: var(--tour-muted-foreground, var(--muted-foreground, #737373));
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0.25rem 0;
+      transition: color 0.15s;
+    }
+
+    .tour-skip:hover {
+      color: var(--tour-foreground, var(--foreground, #1a1a1a));
+    }
+
+    .tour-nav {
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    .tour-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.4rem 0.875rem;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      border-radius: var(--tour-btn-radius, var(--radius-md, 0.5rem));
+      border: 1px solid var(--tour-border, var(--border, #e5e5e5));
+      background: var(--tour-background, var(--background, #fff));
+      color: var(--tour-foreground, var(--foreground, #1a1a1a));
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .tour-btn:hover {
+      background: var(--tour-muted, var(--muted, #f5f5f5));
+    }
+
+    .tour-btn:focus-visible {
+      outline: 2px solid var(--tour-primary, var(--primary, #F26122));
+      outline-offset: 2px;
+    }
+
+    .tour-btn.primary {
+      background: var(--tour-primary, var(--primary, #F26122));
+      color: var(--tour-primary-foreground, var(--primary-foreground, #fff));
+      border-color: var(--tour-primary, var(--primary, #F26122));
+    }
+
+    .tour-btn.primary:hover {
+      opacity: 0.9;
+    }
+
+    .tour-btn svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    /* ── Welcome / no-target step ─────────────────── */
+
+    .tour-center-card {
+      position: fixed;
+      z-index: 10000;
+      box-sizing: border-box;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.96);
+      width: 400px;
+      max-width: calc(100vw - 2rem);
+      background: var(--tour-card, var(--card, #fff));
+      border: 1px solid var(--tour-border, var(--border, #e5e5e5));
+      border-radius: var(--tour-card-radius, var(--radius-xl, 1rem));
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      padding: 2rem;
+      text-align: center;
+      pointer-events: auto;
+      opacity: 0;
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .tour-center-card:focus {
+      outline: none;
+    }
+
+    .tour-center-card.visible {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    .tour-center-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 1rem;
+      background: var(--tour-primary, var(--primary, #F26122));
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--tour-primary-foreground, var(--primary-foreground, #fff));
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], TorchlitOverlay.prototype, "service", 2);
+__decorateClass([
+  state()
+], TorchlitOverlay.prototype, "snapshot", 2);
+__decorateClass([
+  state()
+], TorchlitOverlay.prototype, "visible", 2);
+TorchlitOverlay = __decorateClass([
+  customElement("torchlit-overlay")
+], TorchlitOverlay);
+export {
+  TorchlitOverlay as T,
+  deepQuery as d
+};
+//# sourceMappingURL=tour-overlay-CBkFKv12.js.map