torchlit 0.1.0

package/dist/tour-overlay.js

@@ -0,0 +1,577 @@
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+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.handleResize = () => {
+      if (this.snapshot && this.service) {
+        this.snapshot = this.service.getSnapshot();
+      }
+    };
+    this.handleKeydown = (e) => {
+      if (!this.snapshot || !this.service) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.service.skipTour();
+      } else if (e.key === "ArrowRight" || e.key === "Enter") {
+        e.preventDefault();
+        this.service.nextStep();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this.service.prevStep();
+      }
+    };
+    this.handleBackdropClick = () => {
+      this.service?.skipTour();
+    };
+  }
+  /* ── Lifecycle ──────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.service) {
+      this.attachService();
+    }
+    window.addEventListener("resize", this.handleResize);
+    window.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unsubscribe?.();
+    window.removeEventListener("resize", this.handleResize);
+    window.removeEventListener("keydown", this.handleKeydown);
+  }
+  updated(changed) {
+    if (changed.has("service") && this.service) {
+      this.unsubscribe?.();
+      this.attachService();
+    }
+  }
+  attachService() {
+    this.unsubscribe = this.service.subscribe((snap) => this.handleTourChange(snap));
+  }
+  /* ── Tour state handler ─────────────────────────── */
+  async handleTourChange(snapshot) {
+    if (!snapshot) {
+      this.visible = false;
+      setTimeout(() => {
+        this.snapshot = null;
+      }, 300);
+      return;
+    }
+    if (snapshot.step.beforeShow) {
+      try {
+        await snapshot.step.beforeShow();
+      } catch (err) {
+        console.error("[torchlit] beforeShow hook failed:", err);
+      }
+    }
+    if (snapshot.step.route) {
+      this.dispatchEvent(new CustomEvent("tour-route-change", {
+        detail: { route: snapshot.step.route },
+        bubbles: true,
+        composed: true
+      }));
+      await new Promise((r) => setTimeout(r, 350));
+      this.snapshot = this.service.getSnapshot();
+    } else {
+      this.snapshot = snapshot;
+    }
+    this.scrollTargetIntoView();
+    requestAnimationFrame(() => {
+      this.visible = true;
+    });
+  }
+  scrollTargetIntoView() {
+    if (this.snapshot?.targetElement) {
+      this.snapshot.targetElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+      setTimeout(() => {
+        if (this.service) {
+          this.snapshot = this.service.getSnapshot();
+        }
+      }, 400);
+    }
+  }
+  /* ── Tooltip positioning ────────────────────────── */
+  getTooltipPosition(rect, placement) {
+    const PADDING = this.service?.spotlightPadding ?? 10;
+    const GAP = 16;
+    const TOOLTIP_W = 320;
+    switch (placement) {
+      case "right":
+        return {
+          top: rect.top + rect.height / 2 - 80,
+          left: rect.right + PADDING + GAP
+        };
+      case "left":
+        return {
+          top: rect.top + rect.height / 2 - 80,
+          left: rect.left - PADDING - GAP - TOOLTIP_W
+        };
+      case "bottom":
+        return {
+          top: rect.bottom + PADDING + GAP,
+          left: rect.left + rect.width / 2 - TOOLTIP_W / 2
+        };
+      case "top":
+        return {
+          top: rect.top - PADDING - GAP - 180,
+          left: rect.left + rect.width / 2 - TOOLTIP_W / 2
+        };
+      default:
+        return { top: rect.bottom + GAP, left: rect.left };
+    }
+  }
+  clampToViewport(pos) {
+    const MARGIN = 16;
+    const TOOLTIP_W = 320;
+    return {
+      top: Math.max(MARGIN, Math.min(pos.top, window.innerHeight - 250)),
+      left: Math.max(MARGIN, Math.min(pos.left, window.innerWidth - TOOLTIP_W - MARGIN))
+    };
+  }
+  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";
+    }
+  }
+  /* ── 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 spotlightStyle = `
+      top: ${targetRect.top - PADDING}px;
+      left: ${targetRect.left - PADDING}px;
+      width: ${targetRect.width + PADDING * 2}px;
+      height: ${targetRect.height + PADDING * 2}px;
+    `;
+    const tooltipPos = this.clampToViewport(
+      this.getTooltipPosition(targetRect, step.placement)
+    );
+    const tooltipStyle = `top: ${tooltipPos.top}px; left: ${tooltipPos.left}px;`;
+    return html`
+      <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}>
+        <div class="tour-arrow ${this.getArrowClass(step.placement)}"></div>
+
+        <div class="tour-step-badge">
+          <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>
+        <p class="tour-message">${step.message}</p>
+
+        ${this.renderProgressDots(stepIndex, totalSteps)}
+
+        <div class="tour-footer">
+          <button class="tour-skip" @click=${() => this.service.skipTour()}>
+            Skip tour
+          </button>
+          <div class="tour-nav">
+            ${stepIndex > 0 ? html`
+              <button class="tour-btn" @click=${() => this.service.prevStep()}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+                Back
+              </button>
+            ` : ""}
+            <button class="tour-btn primary" @click=${() => this.service.nextStep()}>
+              ${stepIndex === totalSteps - 1 ? "Finish" : "Next"}
+              ${stepIndex < totalSteps - 1 ? html`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              ` : html`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              `}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderProgressDots(current, total) {
+    if (total <= 1) return html``;
+    return html`
+      <div class="tour-progress">
+        ${Array.from({ length: total }, (_, i) => html`
+          <div class="tour-dot ${i === current ? "active" : i < current ? "completed" : ""}"></div>
+        `)}
+      </div>
+    `;
+  }
+  renderCenteredStep(step, stepIndex, totalSteps) {
+    return html`
+      <div
+        class="tour-backdrop ${this.visible ? "visible" : ""}"
+        part="backdrop"
+        @click=${this.handleBackdropClick}
+      ></div>
+
+      <div class="tour-center-card ${this.visible ? "visible" : ""}" part="center-card">
+        <div class="tour-center-icon">
+          <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>
+        <p class="tour-message">${step.message}</p>
+
+        ${this.renderProgressDots(stepIndex, totalSteps)}
+
+        <div class="tour-footer">
+          <button class="tour-skip" @click=${() => this.service.skipTour()}>
+            Skip tour
+          </button>
+          <div class="tour-nav">
+            ${stepIndex > 0 ? html`
+              <button class="tour-btn" @click=${() => this.service.prevStep()}>Back</button>
+            ` : ""}
+            <button class="tour-btn primary" @click=${() => this.service.nextStep()}>
+              ${stepIndex === totalSteps - 1 ? "Let's go!" : "Next"}
+              ${stepIndex < totalSteps - 1 ? html`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              ` : ""}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+TorchlitOverlay.styles = css`
+    :host {
+      display: block;
+    }
+
+    /* ── 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, oklch(0.65 0.17 220)));
+      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;
+      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.visible {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    /* Arrow */
+    .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);
+    }
+
+    .tour-arrow.arrow-top {
+      bottom: -7px;
+      left: 50%;
+      margin-left: -6px;
+      border-top: none;
+      border-left: none;
+    }
+
+    .tour-arrow.arrow-bottom {
+      top: -7px;
+      left: 50%;
+      margin-left: -6px;
+      border-bottom: none;
+      border-right: none;
+    }
+
+    .tour-arrow.arrow-left {
+      right: -7px;
+      top: 50%;
+      margin-top: -6px;
+      border-bottom: none;
+      border-left: none;
+    }
+
+    .tour-arrow.arrow-right {
+      left: -7px;
+      top: 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, oklch(0.65 0.17 220)));
+      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, oklch(0.65 0.17 220)));
+      transform: scale(1.3);
+    }
+
+    .tour-dot.completed {
+      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));
+      opacity: 0.5;
+    }
+
+    /* ── 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.primary {
+      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));
+      color: var(--tour-primary-foreground, var(--primary-foreground, #fff));
+      border-color: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));
+    }
+
+    .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;
+      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.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, oklch(0.65 0.17 220)));
+      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
+};
+//# sourceMappingURL=tour-overlay.js.map

package/dist/tour-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-overlay.js","sources":["../src/tour-overlay.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TourService } from './tour-service.js';\nimport type { TourSnapshot, TourPlacement } from './types.js';\n\n/**\n * `<torchlit-overlay>` — Full-screen overlay that renders a spotlight cutout\n * around the current tour target, a tooltip with title / message / progress,\n * and navigation controls.\n *\n * Wire it to a `TourService` instance via the `service` property:\n *\n * ```html\n * <torchlit-overlay></torchlit-overlay>\n * ```\n * ```js\n * document.querySelector('torchlit-overlay').service = myTourService;\n * ```\n *\n * @fires tour-route-change - When a step has a `route` property, dispatched\n *   with `{ route: string }` so the host app can switch views.\n *\n * @csspart backdrop - The semi-transparent overlay behind the spotlight.\n * @csspart spotlight - The cutout highlight around the target element.\n * @csspart tooltip - The floating tooltip card.\n * @csspart center-card - The centered card shown when there is no target.\n */\n@customElement('torchlit-overlay')\nexport class TorchlitOverlay extends LitElement {\n  /* ── Styles ─────────────────────────────────────── */\n\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    /* ── Backdrop ──────────────────────────────────── */\n\n    .tour-backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: 9998;\n      pointer-events: auto;\n      opacity: 0;\n      transition: opacity 0.3s ease;\n    }\n\n    .tour-backdrop.visible {\n      opacity: 1;\n    }\n\n    /* ── Spotlight (box-shadow cutout) ─────────────── */\n\n    .tour-spotlight {\n      position: fixed;\n      z-index: 9999;\n      border-radius: var(--tour-spotlight-radius, var(--radius-lg, 0.75rem));\n      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);\n      transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                  left 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                  width 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                  height 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      pointer-events: none;\n    }\n\n    /* Subtle pulsing ring around spotlight */\n    .tour-spotlight::after {\n      content: '';\n      position: absolute;\n      inset: -4px;\n      border-radius: inherit;\n      border: 2px solid var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      opacity: 0.5;\n      animation: spotlightPulse 2s ease-in-out infinite;\n    }\n\n    @keyframes spotlightPulse {\n      0%, 100% { opacity: 0.3; transform: scale(1); }\n      50% { opacity: 0.7; transform: scale(1.01); }\n    }\n\n    /* ── Tooltip ───────────────────────────────────── */\n\n    .tour-tooltip {\n      position: fixed;\n      z-index: 10000;\n      width: 320px;\n      background: var(--tour-card, var(--card, #fff));\n      border: 1px solid var(--tour-border, var(--border, #e5e5e5));\n      border-radius: var(--tour-tooltip-radius, var(--radius-lg, 0.75rem));\n      box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2),\n                  0 8px 16px -4px rgba(0, 0, 0, 0.1);\n      padding: 1.25rem;\n      pointer-events: auto;\n      opacity: 0;\n      transform: translateY(8px) scale(0.96);\n      transition: opacity 0.25s ease, transform 0.25s ease,\n                  top 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n                  left 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .tour-tooltip.visible {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n\n    /* Arrow */\n    .tour-arrow {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      background: var(--tour-card, var(--card, #fff));\n      border: 1px solid var(--tour-border, var(--border, #e5e5e5));\n      transform: rotate(45deg);\n    }\n\n    .tour-arrow.arrow-top {\n      bottom: -7px;\n      left: 50%;\n      margin-left: -6px;\n      border-top: none;\n      border-left: none;\n    }\n\n    .tour-arrow.arrow-bottom {\n      top: -7px;\n      left: 50%;\n      margin-left: -6px;\n      border-bottom: none;\n      border-right: none;\n    }\n\n    .tour-arrow.arrow-left {\n      right: -7px;\n      top: 50%;\n      margin-top: -6px;\n      border-bottom: none;\n      border-left: none;\n    }\n\n    .tour-arrow.arrow-right {\n      left: -7px;\n      top: 50%;\n      margin-top: -6px;\n      border-top: none;\n      border-right: none;\n    }\n\n    /* ── Tooltip content ──────────────────────────── */\n\n    .tour-step-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      font-size: 0.6875rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      margin-bottom: 0.5rem;\n    }\n\n    .tour-title {\n      margin: 0 0 0.375rem;\n      font-size: 1rem;\n      font-weight: 600;\n      color: var(--tour-foreground, var(--foreground, #1a1a1a));\n      line-height: 1.3;\n    }\n\n    .tour-message {\n      margin: 0 0 1rem;\n      font-size: 0.8125rem;\n      color: var(--tour-muted-foreground, var(--muted-foreground, #737373));\n      line-height: 1.55;\n    }\n\n    /* ── Progress dots ────────────────────────────── */\n\n    .tour-progress {\n      display: flex;\n      align-items: center;\n      gap: 0.375rem;\n      margin-bottom: 1rem;\n    }\n\n    .tour-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--tour-muted, var(--muted, #e5e5e5));\n      transition: background 0.2s, transform 0.2s;\n    }\n\n    .tour-dot.active {\n      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      transform: scale(1.3);\n    }\n\n    .tour-dot.completed {\n      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      opacity: 0.5;\n    }\n\n    /* ── Footer buttons ───────────────────────────── */\n\n    .tour-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .tour-skip {\n      font-size: 0.75rem;\n      color: var(--tour-muted-foreground, var(--muted-foreground, #737373));\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 0.25rem 0;\n      transition: color 0.15s;\n    }\n\n    .tour-skip:hover {\n      color: var(--tour-foreground, var(--foreground, #1a1a1a));\n    }\n\n    .tour-nav {\n      display: flex;\n      gap: 0.5rem;\n    }\n\n    .tour-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.375rem;\n      padding: 0.4rem 0.875rem;\n      font-size: 0.8125rem;\n      font-weight: 500;\n      border-radius: var(--tour-btn-radius, var(--radius-md, 0.5rem));\n      border: 1px solid var(--tour-border, var(--border, #e5e5e5));\n      background: var(--tour-background, var(--background, #fff));\n      color: var(--tour-foreground, var(--foreground, #1a1a1a));\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .tour-btn:hover {\n      background: var(--tour-muted, var(--muted, #f5f5f5));\n    }\n\n    .tour-btn.primary {\n      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      color: var(--tour-primary-foreground, var(--primary-foreground, #fff));\n      border-color: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n    }\n\n    .tour-btn.primary:hover {\n      opacity: 0.9;\n    }\n\n    .tour-btn svg {\n      width: 14px;\n      height: 14px;\n    }\n\n    /* ── Welcome / no-target step ─────────────────── */\n\n    .tour-center-card {\n      position: fixed;\n      z-index: 10000;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) scale(0.96);\n      width: 400px;\n      max-width: calc(100vw - 2rem);\n      background: var(--tour-card, var(--card, #fff));\n      border: 1px solid var(--tour-border, var(--border, #e5e5e5));\n      border-radius: var(--tour-card-radius, var(--radius-xl, 1rem));\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n      padding: 2rem;\n      text-align: center;\n      pointer-events: auto;\n      opacity: 0;\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n\n    .tour-center-card.visible {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n\n    .tour-center-icon {\n      width: 48px;\n      height: 48px;\n      margin: 0 auto 1rem;\n      background: var(--tour-primary, var(--primary, oklch(0.65 0.17 220)));\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--tour-primary-foreground, var(--primary-foreground, #fff));\n    }\n  `;\n\n  /* ── Properties ──────────────────────────────────── */\n\n  /**\n   * The `TourService` instance this overlay subscribes to.\n   * Must be set before the overlay will render anything.\n   */\n  @property({ attribute: false })\n  service!: TourService;\n\n  @state() private snapshot: TourSnapshot | null = null;\n  @state() private visible = false;\n\n  private unsubscribe?: () => void;\n\n  /* ── Lifecycle ──────────────────────────────────── */\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.service) {\n      this.attachService();\n    }\n    window.addEventListener('resize', this.handleResize);\n    window.addEventListener('keydown', this.handleKeydown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unsubscribe?.();\n    window.removeEventListener('resize', this.handleResize);\n    window.removeEventListener('keydown', this.handleKeydown);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('service') && this.service) {\n      this.unsubscribe?.();\n      this.attachService();\n    }\n  }\n\n  private attachService() {\n    this.unsubscribe = this.service.subscribe(snap => this.handleTourChange(snap));\n  }\n\n  /* ── Tour state handler ─────────────────────────── */\n\n  private async handleTourChange(snapshot: TourSnapshot | null) {\n    if (!snapshot) {\n      // Tour ended — fade out\n      this.visible = false;\n      setTimeout(() => { this.snapshot = null; }, 300);\n      return;\n    }\n\n    // Run beforeShow hook if present\n    if (snapshot.step.beforeShow) {\n      try {\n        await snapshot.step.beforeShow();\n      } catch (err) {\n        console.error('[torchlit] beforeShow hook failed:', err);\n      }\n    }\n\n    // Emit route-change event if the step has a route\n    if (snapshot.step.route) {\n      this.dispatchEvent(new CustomEvent('tour-route-change', {\n        detail: { route: snapshot.step.route },\n        bubbles: true,\n        composed: true,\n      }));\n      // Give the view transition time to render, then re-resolve the target\n      await new Promise(r => setTimeout(r, 350));\n      this.snapshot = this.service.getSnapshot();\n    } else {\n      this.snapshot = snapshot;\n    }\n\n    this.scrollTargetIntoView();\n    requestAnimationFrame(() => { this.visible = true; });\n  }\n\n  private scrollTargetIntoView() {\n    if (this.snapshot?.targetElement) {\n      this.snapshot.targetElement.scrollIntoView({\n        behavior: 'smooth',\n        block: 'center',\n        inline: 'nearest',\n      });\n      // Recalculate rect after scroll settles\n      setTimeout(() => {\n        if (this.service) {\n          this.snapshot = this.service.getSnapshot();\n        }\n      }, 400);\n    }\n  }\n\n  /* ── Event handlers ─────────────────────────────── */\n\n  private handleResize = () => {\n    if (this.snapshot && this.service) {\n      this.snapshot = this.service.getSnapshot();\n    }\n  };\n\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (!this.snapshot || !this.service) return;\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.service.skipTour();\n    } else if (e.key === 'ArrowRight' || e.key === 'Enter') {\n      e.preventDefault();\n      this.service.nextStep();\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this.service.prevStep();\n    }\n  };\n\n  private handleBackdropClick = () => {\n    this.service?.skipTour();\n  };\n\n  /* ── Tooltip positioning ────────────────────────── */\n\n  private getTooltipPosition(rect: DOMRect, placement: TourPlacement): { top: number; left: number } {\n    const PADDING = this.service?.spotlightPadding ?? 10;\n    const GAP = 16;\n    const TOOLTIP_W = 320;\n\n    switch (placement) {\n      case 'right':\n        return {\n          top: rect.top + rect.height / 2 - 80,\n          left: rect.right + PADDING + GAP,\n        };\n      case 'left':\n        return {\n          top: rect.top + rect.height / 2 - 80,\n          left: rect.left - PADDING - GAP - TOOLTIP_W,\n        };\n      case 'bottom':\n        return {\n          top: rect.bottom + PADDING + GAP,\n          left: rect.left + rect.width / 2 - TOOLTIP_W / 2,\n        };\n      case 'top':\n        return {\n          top: rect.top - PADDING - GAP - 180,\n          left: rect.left + rect.width / 2 - TOOLTIP_W / 2,\n        };\n      default:\n        return { top: rect.bottom + GAP, left: rect.left };\n    }\n  }\n\n  private clampToViewport(pos: { top: number; left: number }): { top: number; left: number } {\n    const MARGIN = 16;\n    const TOOLTIP_W = 320;\n    return {\n      top: Math.max(MARGIN, Math.min(pos.top, window.innerHeight - 250)),\n      left: Math.max(MARGIN, Math.min(pos.left, window.innerWidth - TOOLTIP_W - MARGIN)),\n    };\n  }\n\n  private getArrowClass(placement: TourPlacement): string {\n    switch (placement) {\n      case 'right': return 'arrow-right';\n      case 'left':  return 'arrow-left';\n      case 'bottom': return 'arrow-bottom';\n      case 'top':   return 'arrow-top';\n      default:      return 'arrow-bottom';\n    }\n  }\n\n  /* ── Render ─────────────────────────────────────── */\n\n  override render() {\n    if (!this.snapshot) return html``;\n\n    const { step, stepIndex, totalSteps, targetRect } = this.snapshot;\n\n    // No target found — show centered card\n    if (!targetRect) {\n      return this.renderCenteredStep(step, stepIndex, totalSteps);\n    }\n\n    const PADDING = this.service?.spotlightPadding ?? 10;\n    const spotlightStyle = `\n      top: ${targetRect.top - PADDING}px;\n      left: ${targetRect.left - PADDING}px;\n      width: ${targetRect.width + PADDING * 2}px;\n      height: ${targetRect.height + PADDING * 2}px;\n    `;\n\n    const tooltipPos = this.clampToViewport(\n      this.getTooltipPosition(targetRect, step.placement),\n    );\n    const tooltipStyle = `top: ${tooltipPos.top}px; left: ${tooltipPos.left}px;`;\n\n    return html`\n      <div\n        class=\"tour-backdrop ${this.visible ? 'visible' : ''}\"\n        part=\"backdrop\"\n        @click=${this.handleBackdropClick}\n      ></div>\n\n      <div class=\"tour-spotlight\" part=\"spotlight\" style=${spotlightStyle}></div>\n\n      <div class=\"tour-tooltip ${this.visible ? 'visible' : ''}\" part=\"tooltip\" style=${tooltipStyle}>\n        <div class=\"tour-arrow ${this.getArrowClass(step.placement)}\"></div>\n\n        <div class=\"tour-step-badge\">\n          <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n            <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n          </svg>\n          Step ${stepIndex + 1} of ${totalSteps}\n        </div>\n\n        <h3 class=\"tour-title\">${step.title}</h3>\n        <p class=\"tour-message\">${step.message}</p>\n\n        ${this.renderProgressDots(stepIndex, totalSteps)}\n\n        <div class=\"tour-footer\">\n          <button class=\"tour-skip\" @click=${() => this.service.skipTour()}>\n            Skip tour\n          </button>\n          <div class=\"tour-nav\">\n            ${stepIndex > 0 ? html`\n              <button class=\"tour-btn\" @click=${() => this.service.prevStep()}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"15 18 9 12 15 6\"></polyline>\n                </svg>\n                Back\n              </button>\n            ` : ''}\n            <button class=\"tour-btn primary\" @click=${() => this.service.nextStep()}>\n              ${stepIndex === totalSteps - 1 ? 'Finish' : 'Next'}\n              ${stepIndex < totalSteps - 1 ? html`\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"9 18 15 12 9 6\"></polyline>\n                </svg>\n              ` : html`\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              `}\n            </button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderProgressDots(current: number, total: number) {\n    if (total <= 1) return html``;\n    return html`\n      <div class=\"tour-progress\">\n        ${Array.from({ length: total }, (_, i) => html`\n          <div class=\"tour-dot ${i === current ? 'active' : i < current ? 'completed' : ''}\"></div>\n        `)}\n      </div>\n    `;\n  }\n\n  private renderCenteredStep(step: { title: string; message: string }, stepIndex: number, totalSteps: number) {\n    return html`\n      <div\n        class=\"tour-backdrop ${this.visible ? 'visible' : ''}\"\n        part=\"backdrop\"\n        @click=${this.handleBackdropClick}\n      ></div>\n\n      <div class=\"tour-center-card ${this.visible ? 'visible' : ''}\" part=\"center-card\">\n        <div class=\"tour-center-icon\">\n          <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path>\n            <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n          </svg>\n        </div>\n\n        <h3 class=\"tour-title\">${step.title}</h3>\n        <p class=\"tour-message\">${step.message}</p>\n\n        ${this.renderProgressDots(stepIndex, totalSteps)}\n\n        <div class=\"tour-footer\">\n          <button class=\"tour-skip\" @click=${() => this.service.skipTour()}>\n            Skip tour\n          </button>\n          <div class=\"tour-nav\">\n            ${stepIndex > 0 ? html`\n              <button class=\"tour-btn\" @click=${() => this.service.prevStep()}>Back</button>\n            ` : ''}\n            <button class=\"tour-btn primary\" @click=${() => this.service.nextStep()}>\n              ${stepIndex === totalSteps - 1 ? \"Let's go!\" : 'Next'}\n              ${stepIndex < totalSteps - 1 ? html`\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"9 18 15 12 9 6\"></polyline>\n                </svg>\n              ` : ''}\n            </button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'torchlit-overlay': TorchlitOverlay;\n  }\n}\n"],"names":[],"mappings":"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"}