@pablo2410/shared-ui 0.24.0 → 0.25.1

package/dist/chunk-LUQAR6NB.js

@@ -0,0 +1,1206 @@
+import {
+  portalUrl
+} from "./chunk-7LI4Y6WT.js";
+import {
+  cn
+} from "./chunk-JT3XLKKD.js";
+
+// src/tour/tourStore.ts
+var MAX_STEP_ID_LENGTH = 120;
+var MAX_TOUR_ID_LENGTH = 60;
+var TOUR_ID_PATTERN = /^[a-z0-9][a-z0-9-]*$/;
+var STEP_KINDS = ["intro", "service", "outro"];
+var InvalidTourDefinitionError = class extends Error {
+  problems;
+  constructor(tourId, problems) {
+    super(`Invalid tour definition "${tourId}": ${problems.join("; ")}`);
+    this.name = "InvalidTourDefinitionError";
+    this.problems = problems;
+  }
+};
+function validateTourDefinition(def) {
+  const problems = [];
+  if (typeof def.id !== "string" || def.id.length === 0) {
+    problems.push("id is required");
+  } else {
+    if (def.id.length > MAX_TOUR_ID_LENGTH) {
+      problems.push(`id is longer than ${MAX_TOUR_ID_LENGTH} characters`);
+    }
+    if (!TOUR_ID_PATTERN.test(def.id)) {
+      problems.push("id must be lowercase letters, digits and hyphens");
+    }
+  }
+  if (!Array.isArray(def.steps) || def.steps.length === 0) {
+    problems.push("at least one step is required");
+    return problems;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  def.steps.forEach((step, i) => {
+    const at = `step ${i + 1}`;
+    if (!step.id) {
+      problems.push(`${at} has no id`);
+    } else {
+      if (step.id.length > MAX_STEP_ID_LENGTH) {
+        problems.push(
+          `${at} id is longer than ${MAX_STEP_ID_LENGTH} characters`
+        );
+      }
+      if (seen.has(step.id)) problems.push(`duplicate step id "${step.id}"`);
+      seen.add(step.id);
+    }
+    if (!STEP_KINDS.includes(step.kind)) {
+      problems.push(`${at} has an unknown kind "${String(step.kind)}"`);
+    }
+    if (!step.label) problems.push(`${at} has no label`);
+    if (!step.fallbackText) problems.push(`${at} has no fallbackText`);
+    if (step.spotlight && !step.spotlight.selector) {
+      problems.push(`${at} has a spotlight with no selector`);
+    }
+  });
+  return problems;
+}
+function createTourStore() {
+  const tours = /* @__PURE__ */ new Map();
+  let session = null;
+  let state = { active: null, session: null };
+  const listeners = /* @__PURE__ */ new Set();
+  const recompute = () => {
+    const last = [...tours.values()].pop() ?? null;
+    if (state.active && last?.id !== state.active.id) session = null;
+    if (last !== state.active || session !== state.session) {
+      state = { active: last, session };
+    }
+    listeners.forEach((l) => l());
+  };
+  return {
+    register(def) {
+      const problems = validateTourDefinition(def);
+      if (problems.length > 0) {
+        throw new InvalidTourDefinitionError(def?.id ?? "(no id)", problems);
+      }
+      tours.delete(def.id);
+      tours.set(def.id, def);
+      recompute();
+      return () => {
+        if (tours.get(def.id) === def) {
+          tours.delete(def.id);
+          recompute();
+        }
+      };
+    },
+    open(next = { restart: true }) {
+      if (!state.active) return;
+      session = next;
+      recompute();
+    },
+    close() {
+      if (session === null) return;
+      session = null;
+      recompute();
+    },
+    getState: () => state,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var defaultTourStore = createTourStore();
+
+// src/tour/tourProgress.ts
+var SERVICE_HUB_TOUR_ID = "service-hub";
+var TourProgressError = class extends Error {
+  status;
+  constructor(message, status) {
+    super(message);
+    this.name = "TourProgressError";
+    this.status = status;
+  }
+};
+var UNSEEN = () => ({
+  status: "unseen",
+  lastStepId: null,
+  updatedAt: (/* @__PURE__ */ new Date(0)).toISOString()
+});
+function unwrapTrpc(body) {
+  const data = body?.result?.data;
+  if (data === void 0 || data.json === void 0) {
+    throw new TourProgressError("Unexpected response from Portal");
+  }
+  return data.json;
+}
+var STATUSES = [
+  "unseen",
+  "in-progress",
+  "done",
+  "dismissed"
+];
+function createPortalTourProgressTransport(opts = {}) {
+  const doFetch = opts.fetchImpl ?? ((input, init) => fetch(input, init));
+  const base = () => (opts.baseUrl ?? portalUrl("")).replace(/\/$/, "");
+  let perTourSupported;
+  const read = async (tourId) => {
+    const input = encodeURIComponent(JSON.stringify({ json: { tourId } }));
+    const res = await doFetch(
+      `${base()}/api/trpc/onboarding.userTourState?input=${input}`,
+      { method: "GET", credentials: "include" }
+    );
+    if (!res.ok) {
+      throw new TourProgressError(
+        `Couldn't read tour progress (${res.status})`,
+        res.status
+      );
+    }
+    const json = unwrapTrpc(await res.json());
+    perTourSupported = json.tourId === tourId;
+    if (tourId !== SERVICE_HUB_TOUR_ID && !perTourSupported) {
+      throw new TourProgressError(
+        "Portal does not store per-tour progress yet"
+      );
+    }
+    return {
+      status: STATUSES.includes(json.status) ? json.status : "unseen",
+      lastStepId: json.lastStepId ?? null,
+      updatedAt: json.updatedAt ?? UNSEEN().updatedAt
+    };
+  };
+  return {
+    read,
+    async write(tourId, update) {
+      if (tourId !== SERVICE_HUB_TOUR_ID) {
+        if (perTourSupported === void 0) await read(tourId);
+        if (!perTourSupported) return;
+      }
+      const res = await doFetch(
+        `${base()}/api/trpc/onboarding.setUserTourState`,
+        {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ json: { tourId, ...update } })
+        }
+      );
+      if (!res.ok) {
+        throw new TourProgressError(
+          `Couldn't save tour progress (${res.status})`,
+          res.status
+        );
+      }
+    }
+  };
+}
+function createTourProgressController(transport, tourId) {
+  let snapshot = {
+    phase: "loading",
+    progress: UNSEEN(),
+    error: null
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  let writeChain = Promise.resolve();
+  let recordedLocally = false;
+  const set = (next) => {
+    snapshot = next;
+    listeners.forEach((l) => l());
+  };
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    async load() {
+      try {
+        const progress = await transport.read(tourId);
+        if (recordedLocally) return;
+        set({ phase: "ready", progress, error: null });
+      } catch (err) {
+        if (recordedLocally) return;
+        set({
+          phase: "error",
+          progress: UNSEEN(),
+          error: err instanceof Error ? err : new Error(String(err))
+        });
+      }
+    },
+    record(update) {
+      recordedLocally = true;
+      set({
+        phase: snapshot.phase === "loading" ? "ready" : snapshot.phase,
+        progress: { ...update, updatedAt: (/* @__PURE__ */ new Date()).toISOString() },
+        error: snapshot.error
+      });
+      writeChain = writeChain.then(() => transport.write(tourId, update)).catch((err) => {
+        set({
+          ...snapshot,
+          error: err instanceof Error ? err : new Error(String(err))
+        });
+      });
+      return writeChain;
+    }
+  };
+}
+function shouldAutoOpen(status) {
+  return status === "unseen" || status === "in-progress";
+}
+function decideAutoOpen(autoStart, snapshot) {
+  return autoStart === true && snapshot.phase === "ready" && shouldAutoOpen(snapshot.progress.status);
+}
+
+// src/tour/tourNarration.ts
+var ONBOARDING_NARRATION_SERVICE = "onboarding";
+var NARRATION_PROMPT = "Narrate this onboarding step for me in 2-3 sentences.";
+function buildNarrationInput(step) {
+  return {
+    service: ONBOARDING_NARRATION_SERVICE,
+    insights: {
+      hook: step.fallbackText,
+      highlights: step.highlights,
+      features: step.features
+    },
+    messages: [{ role: "user", content: NARRATION_PROMPT }]
+  };
+}
+function createPortalNarrator(opts = {}) {
+  const doFetch = opts.fetchImpl ?? ((input, init) => fetch(input, init));
+  return async (step) => {
+    const base = (opts.baseUrl ?? portalUrl("")).replace(/\/$/, "");
+    const res = await doFetch(`${base}/api/trpc/ai.askOpi`, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ json: buildNarrationInput(step) })
+    });
+    if (!res.ok) throw new Error(`Opi narration failed (${res.status})`);
+    const body = await res.json();
+    const content = body.result?.data?.json?.content;
+    if (typeof content !== "string" || content.trim() === "") {
+      throw new Error("Opi narration returned no text");
+    }
+    return content;
+  };
+}
+
+// src/tour/TourProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useSyncExternalStore
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultTransport;
+var defaultNarrator;
+var TourContext = createContext({});
+function useTourContext() {
+  const ctx = useContext(TourContext);
+  return {
+    store: ctx.store ?? defaultTourStore,
+    // The default transport is shared app-wide: it remembers whether Portal
+    // supports per-tour storage after the first read.
+    transport: ctx.transport ?? (defaultTransport ??= createPortalTourProgressTransport()),
+    narrator: ctx.narrator ?? (defaultNarrator ??= createPortalNarrator())
+  };
+}
+function TourProvider({
+  store,
+  transport,
+  narrator,
+  children
+}) {
+  const value = useMemo(
+    () => ({ store, transport, narrator }),
+    [store, transport, narrator]
+  );
+  return /* @__PURE__ */ jsx(TourContext.Provider, { value, children });
+}
+function useRegisterTour(def) {
+  const { store } = useTourContext();
+  useEffect(() => {
+    if (!def) return;
+    try {
+      return store.register(def);
+    } catch (err) {
+      if (err instanceof InvalidTourDefinitionError) {
+        console.error(err.message);
+        return;
+      }
+      throw err;
+    }
+  }, [store, def]);
+}
+function useTourState() {
+  const { store } = useTourContext();
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+function useActiveTour() {
+  return useTourState().active;
+}
+function useTourLauncher() {
+  const { store } = useTourContext();
+  const available = useTourState().active !== null;
+  return {
+    start: () => store.open({ restart: true }),
+    open: (session) => store.open(session),
+    close: () => store.close(),
+    available
+  };
+}
+function useTourProgress(tourId) {
+  const { transport } = useTourContext();
+  const controller = useMemo(
+    () => createTourProgressController(transport, tourId),
+    [transport, tourId]
+  );
+  useEffect(() => {
+    void controller.load();
+  }, [controller]);
+  const snapshot = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  return { ...snapshot, record: controller.record };
+}
+function useTourNarrator() {
+  return useTourContext().narrator;
+}
+
+// src/tour/TakeTheTourButton.tsx
+import { Sparkles } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TakeTheTourButton({
+  label = "Take the tour",
+  className
+}) {
+  const { available, start } = useTourLauncher();
+  if (!available) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: start,
+      title: label,
+      "aria-label": label,
+      className: cn(
+        "flex items-center gap-1 px-2 py-1 rounded-md text-[10px]",
+        "text-[#8890A0] hover:text-[#E2E8F0] hover:bg-[#1E2738] transition-colors cursor-pointer",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#8C34E9]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Sparkles, { className: "h-3 w-3 text-[#8C34E9]" }),
+        /* @__PURE__ */ jsx2("span", { className: "shell-hidden shell-sm:inline", children: label })
+      ]
+    }
+  );
+}
+
+// src/tour/useSpotlight.ts
+import { useEffect as useEffect2, useRef, useState } from "react";
+var RESIZE_DEBOUNCE_MS = 100;
+function useSpotlight(selector) {
+  const [rect, setRect] = useState(null);
+  const [found, setFound] = useState(false);
+  const scrolledForSelector = useRef(null);
+  useEffect2(() => {
+    if (!selector) {
+      setRect(null);
+      setFound(false);
+      return;
+    }
+    let resizeTimer;
+    let cancelled = false;
+    const measure = () => {
+      if (cancelled) return;
+      const el = document.querySelector(
+        `[data-tour-target="${selector}"]`
+      );
+      if (!el) {
+        setRect(null);
+        setFound(false);
+        return;
+      }
+      const domRect = el.getBoundingClientRect();
+      setRect({
+        top: domRect.top,
+        left: domRect.left,
+        width: domRect.width,
+        height: domRect.height
+      });
+      setFound(true);
+      if (scrolledForSelector.current !== selector) {
+        scrolledForSelector.current = selector;
+        el.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    };
+    measure();
+    const initialFrame = requestAnimationFrame(measure);
+    const onResize = () => {
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(measure, RESIZE_DEBOUNCE_MS);
+    };
+    const onScroll = () => measure();
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, { capture: true });
+    const observer = new MutationObserver(measure);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(initialFrame);
+      if (resizeTimer) clearTimeout(resizeTimer);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      observer?.disconnect();
+    };
+  }, [selector]);
+  return { rect, found };
+}
+
+// src/tour/spotlightMath.ts
+function computeSpotlightFrame(target, viewport) {
+  const targetBottom = target.top + target.height;
+  const targetRight = target.left + target.width;
+  return {
+    // Full-width strip above the target.
+    top: {
+      top: 0,
+      left: 0,
+      width: viewport.width,
+      height: Math.max(0, target.top)
+    },
+    // Full-width strip below the target.
+    bottom: {
+      top: targetBottom,
+      left: 0,
+      width: viewport.width,
+      height: Math.max(0, viewport.height - targetBottom)
+    },
+    // Strip to the left of the target, spanning only the target's own row
+    // (the top/bottom strips already cover the rest of those rows).
+    left: {
+      top: target.top,
+      left: 0,
+      width: Math.max(0, target.left),
+      height: target.height
+    },
+    // Strip to the right of the target, same row-only span as `left`.
+    right: {
+      top: target.top,
+      left: targetRight,
+      width: Math.max(0, viewport.width - targetRight),
+      height: target.height
+    }
+  };
+}
+var FALLBACK_ORDER = {
+  bottom: ["bottom", "top", "right", "left"],
+  top: ["top", "bottom", "right", "left"],
+  right: ["right", "left", "bottom", "top"],
+  left: ["left", "right", "bottom", "top"]
+};
+var AUTO_ORDER = FALLBACK_ORDER.bottom;
+var PANEL_GAP = 12;
+function computePanelPosition(target, panelSize, viewport, placement = "auto") {
+  const order = placement === "auto" ? AUTO_ORDER : FALLBACK_ORDER[placement];
+  for (const candidate of order) {
+    const pos2 = placeAt(candidate, target, panelSize);
+    if (fits(pos2, panelSize, viewport)) {
+      return { ...pos2, placement: candidate };
+    }
+  }
+  const fallback = order[0];
+  const pos = placeAt(fallback, target, panelSize);
+  return {
+    top: clamp(pos.top, 0, Math.max(0, viewport.height - panelSize.height)),
+    left: clamp(pos.left, 0, Math.max(0, viewport.width - panelSize.width)),
+    placement: fallback
+  };
+}
+function placeAt(side, target, panelSize) {
+  const targetCenterX = target.left + target.width / 2;
+  const targetCenterY = target.top + target.height / 2;
+  switch (side) {
+    case "bottom":
+      return {
+        top: target.top + target.height + PANEL_GAP,
+        left: targetCenterX - panelSize.width / 2
+      };
+    case "top":
+      return {
+        top: target.top - panelSize.height - PANEL_GAP,
+        left: targetCenterX - panelSize.width / 2
+      };
+    case "right":
+      return {
+        top: targetCenterY - panelSize.height / 2,
+        left: target.left + target.width + PANEL_GAP
+      };
+    case "left":
+      return {
+        top: targetCenterY - panelSize.height / 2,
+        left: target.left - panelSize.width - PANEL_GAP
+      };
+  }
+}
+function fits(pos, panelSize, viewport) {
+  return pos.top >= 0 && pos.left >= 0 && pos.top + panelSize.height <= viewport.height && pos.left + panelSize.width <= viewport.width;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/tour/TourShell.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import {
+  X,
+  ChevronLeft,
+  ChevronRight,
+  ArrowRight,
+  ExternalLink
+} from "lucide-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultSkin = {
+  accent: "#8C34E9",
+  overlayBg: "rgba(10,14,26,0.72)",
+  panelBg: "#0e1624",
+  panelBorder: "1px solid #1e2738",
+  mutedText: "#596475",
+  bodyText: "#c0c6d0",
+  softText: "#8890a0"
+};
+var SPOTLIGHT_PANEL_SIZE = { width: 320, height: 280 };
+function useHover() {
+  const [hovered, setHovered] = useState2(false);
+  return [
+    hovered,
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    }
+  ];
+}
+function TourShell({
+  step,
+  index,
+  total,
+  isFirst,
+  isLast,
+  onNext,
+  onBack,
+  onDismiss,
+  narration,
+  narrationPending,
+  children,
+  skin = defaultSkin,
+  orb,
+  onSpotlightTargetActivated
+}) {
+  const panelRef = useRef2(null);
+  const { rect, found } = useSpotlight(step.spotlight?.selector ?? null);
+  const isSpotlight = Boolean(step.spotlight) && found && rect !== null;
+  useEffect3(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onDismiss();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onDismiss]);
+  useEffect3(() => {
+    panelRef.current?.focus();
+  }, [step.id]);
+  useEffect3(() => {
+    if (!isSpotlight || !onSpotlightTargetActivated || !step.spotlight) return;
+    const selector = step.spotlight.selector;
+    const onClickCapture = (e) => {
+      const target = e.target;
+      if (target?.closest(`[data-tour-target="${selector}"]`)) {
+        onSpotlightTargetActivated();
+      }
+    };
+    document.addEventListener("click", onClickCapture, { capture: true });
+    return () => document.removeEventListener("click", onClickCapture, {
+      capture: true
+    });
+  }, [isSpotlight, onSpotlightTargetActivated, step.spotlight]);
+  if (isSpotlight && rect) {
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    const frame = computeSpotlightFrame(rect, viewport);
+    const panelPos = computePanelPosition(
+      rect,
+      SPOTLIGHT_PANEL_SIZE,
+      viewport,
+      step.spotlight?.placement ?? "auto"
+    );
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      ["top", "bottom", "left", "right"].map((side) => {
+        const segment = frame[side];
+        if (segment.width <= 0 || segment.height <= 0) return null;
+        return /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "fixed z-50",
+            style: {
+              top: segment.top,
+              left: segment.left,
+              width: segment.width,
+              height: segment.height,
+              background: skin.overlayBg
+            },
+            onClick: onDismiss
+          },
+          side
+        );
+      }),
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "fixed z-50 rounded-xl pointer-events-none transition-all",
+          style: {
+            top: rect.top - 4,
+            left: rect.left - 4,
+            width: rect.width + 8,
+            height: rect.height + 8,
+            boxShadow: `0 0 0 2px ${skin.accent}, 0 0 24px 4px ${skin.accent}66`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: panelRef,
+          tabIndex: -1,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": step.label,
+          className: "fixed z-50 rounded-xl overflow-hidden flex flex-col outline-none",
+          style: {
+            top: panelPos.top,
+            left: panelPos.left,
+            width: SPOTLIGHT_PANEL_SIZE.width,
+            maxHeight: SPOTLIGHT_PANEL_SIZE.height,
+            background: skin.panelBg,
+            border: skin.panelBorder
+          },
+          children: [
+            /* @__PURE__ */ jsx3(TourShellHeader, { step, orb, onDismiss }),
+            /* @__PURE__ */ jsx3(TourShellStepDots, { total, index, skin }),
+            /* @__PURE__ */ jsx3("div", { className: "overflow-y-auto", style: { padding: "12px 16px" }, children: /* @__PURE__ */ jsx3(
+              TourShellBody,
+              {
+                gap: 12,
+                step,
+                narration,
+                narrationPending,
+                skin,
+                children
+              }
+            ) }),
+            /* @__PURE__ */ jsx3(
+              TourShellFooter,
+              {
+                isFirst,
+                isLast,
+                onNext,
+                onBack,
+                onDismiss,
+                skin
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center",
+      style: { background: skin.overlayBg, padding: 16 },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onDismiss();
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: panelRef,
+          tabIndex: -1,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": step.label,
+          className: "w-full max-w-md rounded-xl overflow-hidden flex flex-col max-h-[85vh] outline-none",
+          style: { background: skin.panelBg, border: skin.panelBorder },
+          children: [
+            /* @__PURE__ */ jsx3(TourShellHeader, { step, orb, onDismiss }),
+            /* @__PURE__ */ jsx3(TourShellStepDots, { total, index, skin }),
+            /* @__PURE__ */ jsx3("div", { className: "overflow-y-auto", style: { padding: "16px 20px" }, children: /* @__PURE__ */ jsx3(
+              TourShellBody,
+              {
+                gap: 16,
+                step,
+                narration,
+                narrationPending,
+                skin,
+                children
+              }
+            ) }),
+            /* @__PURE__ */ jsx3(
+              TourShellFooter,
+              {
+                isFirst,
+                isLast,
+                onNext,
+                onBack,
+                onDismiss,
+                skin
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function TourShellHeader({
+  step,
+  orb,
+  onDismiss
+}) {
+  const [closeHovered, closeHover] = useHover();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex items-center justify-between gap-3 shrink-0",
+      style: {
+        background: "linear-gradient(135deg, #2a1450 0%, #1a0e33 100%)",
+        padding: "16px 20px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          orb,
+          /* @__PURE__ */ jsx3("span", { className: "text-sm font-bold text-white truncate", children: step.label })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: onDismiss,
+            ...closeHover,
+            className: "transition-colors shrink-0",
+            style: {
+              padding: 4,
+              borderRadius: 4,
+              background: closeHovered ? "rgba(255,255,255,0.1)" : "transparent"
+            },
+            title: "Skip tour",
+            children: /* @__PURE__ */ jsx3(X, { size: 16, className: "text-white/70" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TourShellStepDots({
+  total,
+  index,
+  skin
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "flex items-center gap-1.5 shrink-0",
+      style: { borderBottom: skin.panelBorder, padding: "12px 20px" },
+      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "h-1.5 rounded-full transition-all",
+          style: {
+            width: i === index ? 20 : 8,
+            background: i === index ? skin.accent : skin.mutedText,
+            opacity: i === index ? 1 : 0.4
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+function TourShellBody({
+  step,
+  narration,
+  narrationPending,
+  skin,
+  children,
+  gap
+}) {
+  const features = step.features ?? [];
+  const highlights = step.highlights ?? [];
+  const hasList = features.length > 0 || highlights.length > 0;
+  const hasAction = Boolean(step.action);
+  const hasChildren = Boolean(children);
+  const gapIf = (hasNext) => hasNext ? gap : 0;
+  const itemGap = (i, count, px) => i < count - 1 ? px : 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "p",
+      {
+        className: "text-[13px] leading-relaxed transition-opacity",
+        style: {
+          color: skin.bodyText,
+          opacity: narrationPending ? 0.7 : 1,
+          marginBottom: gapIf(hasList || hasAction || hasChildren)
+        },
+        children: narration
+      }
+    ),
+    features.length > 0 ? /* @__PURE__ */ jsx3("ul", { style: { marginBottom: gapIf(hasAction || hasChildren) }, children: features.map((f, i) => /* @__PURE__ */ jsxs2(
+      "li",
+      {
+        className: "text-[12.5px] leading-relaxed",
+        style: { marginBottom: itemGap(i, features.length, 8) },
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-semibold", style: { color: skin.accent }, children: f.name }),
+          /* @__PURE__ */ jsxs2("span", { style: { color: skin.softText }, children: [
+            " \u2014 ",
+            f.detail
+          ] })
+        ]
+      },
+      i
+    )) }) : highlights.length > 0 && /* @__PURE__ */ jsx3("ul", { style: { marginBottom: gapIf(hasAction || hasChildren) }, children: highlights.map((h, i) => /* @__PURE__ */ jsxs2(
+      "li",
+      {
+        className: "text-[12.5px] leading-relaxed relative",
+        style: {
+          color: skin.softText,
+          paddingLeft: 12,
+          marginBottom: itemGap(i, highlights.length, 6)
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: "absolute left-0",
+              style: { color: skin.mutedText },
+              children: "\u2022"
+            }
+          ),
+          h
+        ]
+      },
+      i
+    )) }),
+    step.action && /* @__PURE__ */ jsxs2(
+      "a",
+      {
+        href: step.action.href,
+        target: step.action.external ? "_blank" : void 0,
+        rel: step.action.external ? "noopener noreferrer" : void 0,
+        className: "inline-flex items-center gap-1.5 rounded-lg text-[13px] font-semibold transition-opacity hover:opacity-90",
+        style: {
+          background: `${skin.accent}20`,
+          color: skin.accent,
+          padding: "8px 14px",
+          marginBottom: gapIf(hasChildren)
+        },
+        children: [
+          step.action.label,
+          step.action.external ? /* @__PURE__ */ jsx3(ExternalLink, { size: 13 }) : /* @__PURE__ */ jsx3(ArrowRight, { size: 13 })
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function TourShellFooter({
+  isFirst,
+  isLast,
+  onNext,
+  onBack,
+  onDismiss,
+  skin
+}) {
+  const [nextHovered, nextHover] = useHover();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex items-center justify-between gap-2 shrink-0",
+      style: { borderTop: skin.panelBorder, padding: "14px 20px" },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "transition-colors hover:underline",
+            style: { color: skin.mutedText, fontSize: 12, fontWeight: 500 },
+            children: "Skip tour"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          !isFirst && /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: onBack,
+              className: "flex items-center gap-1 transition-colors",
+              style: {
+                color: skin.bodyText,
+                border: skin.panelBorder,
+                padding: "6px 12px",
+                borderRadius: 6,
+                fontSize: 12.5,
+                fontWeight: 500
+              },
+              children: [
+                /* @__PURE__ */ jsx3(ChevronLeft, { size: 13 }),
+                "Back"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: onNext,
+              ...nextHover,
+              className: "flex items-center gap-1 transition-opacity",
+              style: {
+                background: "linear-gradient(135deg, #8C34E9 0%, #5B1FA6 100%)",
+                color: "#fff",
+                padding: "6px 14px",
+                borderRadius: 6,
+                fontSize: 12.5,
+                fontWeight: 700,
+                opacity: nextHovered ? 0.9 : 1
+              },
+              children: [
+                isLast ? "Done" : "Next",
+                !isLast && /* @__PURE__ */ jsx3(ChevronRight, { size: 13 })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/tour/useTour.ts
+import { useCallback, useState as useState3 } from "react";
+
+// src/tour/tourMachine.ts
+function resolveInitialIndex(steps, initialStepId) {
+  if (!initialStepId) return 0;
+  const found = steps.findIndex((s) => s.id === initialStepId);
+  return found === -1 ? 0 : found;
+}
+function nextIndex(steps, current) {
+  if (current >= steps.length - 1) {
+    return { index: current, completed: true };
+  }
+  return { index: current + 1, completed: false };
+}
+function backIndex(current) {
+  return Math.max(0, current - 1);
+}
+function gotoIndex(steps, stepId, current) {
+  const target = steps.findIndex((s) => s.id === stepId);
+  return target === -1 ? current : target;
+}
+
+// src/tour/useTour.ts
+function useTour(steps, opts = {}) {
+  if (steps.length === 0) {
+    throw new Error("useTour requires at least one step");
+  }
+  const [index, setIndex] = useState3(
+    () => resolveInitialIndex(steps, opts.initialStepId)
+  );
+  const next = useCallback(() => {
+    const result = nextIndex(steps, index);
+    if (result.completed) {
+      opts.onComplete?.();
+      return;
+    }
+    setIndex(result.index);
+    opts.onStepChange?.(steps[result.index], result.index);
+  }, [index, steps]);
+  const back = useCallback(() => {
+    const target = backIndex(index);
+    if (target === index) return;
+    setIndex(target);
+    opts.onStepChange?.(steps[target], target);
+  }, [index, steps]);
+  const goto = useCallback(
+    (stepId) => {
+      const target = gotoIndex(steps, stepId, index);
+      if (target === index) return;
+      setIndex(target);
+      opts.onStepChange?.(steps[target], target);
+    },
+    [steps, index]
+  );
+  const dismiss = useCallback(() => {
+    opts.onDismiss?.();
+  }, []);
+  return {
+    step: steps[index],
+    index,
+    total: steps.length,
+    isFirst: index === 0,
+    isLast: index === steps.length - 1,
+    next,
+    back,
+    goto,
+    dismiss
+  };
+}
+
+// src/tour/OpiTourHost.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { Sparkles as Sparkles2 } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function OpiTourHost(props) {
+  const { active } = useTourState();
+  if (!active) return null;
+  return /* @__PURE__ */ jsx4(ActiveTourHost, { tour: active, ...props }, active.id);
+}
+function ActiveTourHost({
+  tour,
+  orb,
+  skin
+}) {
+  const { session } = useTourState();
+  const { open } = useTourLauncher();
+  const { phase, progress, record } = useTourProgress(tour.id);
+  const decided = useRef3(false);
+  useEffect4(() => {
+    if (phase === "loading" || decided.current) return;
+    decided.current = true;
+    if (decideAutoOpen(tour.autoStart, { phase, progress })) {
+      open({ restart: false });
+    }
+  }, [phase, progress, tour.autoStart, open]);
+  if (!session || phase === "loading") return null;
+  return /* @__PURE__ */ jsx4(
+    TourRunner,
+    {
+      steps: tour.steps,
+      initialStepId: session.restart ? null : progress.lastStepId,
+      onProgress: record,
+      orb: orb ?? /* @__PURE__ */ jsx4(DefaultOrb, {}),
+      skin
+    }
+  );
+}
+function DefaultOrb() {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+      style: {
+        background: "linear-gradient(135deg, #8C34E9 0%, #5B1FA6 100%)"
+      },
+      children: /* @__PURE__ */ jsx4(Sparkles2, { className: "h-4 w-4 text-white" })
+    }
+  );
+}
+function TourRunner({
+  steps,
+  initialStepId,
+  onProgress,
+  orb,
+  skin
+}) {
+  const { close } = useTourLauncher();
+  const narrate = useTourNarrator();
+  const [narrationByStep, setNarrationByStep] = useState4({});
+  const [pendingStepId, setPendingStepId] = useState4(null);
+  const requested = useRef3(/* @__PURE__ */ new Set());
+  const currentStepId = useRef3(
+    steps.find((s) => s.id === initialStepId)?.id ?? steps[0].id
+  );
+  const requestNarration = (step) => {
+    if (requested.current.has(step.id)) return;
+    requested.current.add(step.id);
+    setPendingStepId(step.id);
+    narrate(step).then((text) => setNarrationByStep((prev) => ({ ...prev, [step.id]: text }))).catch(() => {
+    }).finally(() => setPendingStepId((cur) => cur === step.id ? null : cur));
+  };
+  const tour = useTour(steps, {
+    initialStepId,
+    onStepChange: (step) => {
+      currentStepId.current = step.id;
+      void onProgress({ status: "in-progress", lastStepId: step.id });
+      requestNarration(step);
+    },
+    onComplete: () => {
+      void onProgress({ status: "done", lastStepId: null });
+      close();
+    },
+    onDismiss: () => {
+      void onProgress({
+        status: "dismissed",
+        lastStepId: currentStepId.current
+      });
+      close();
+    }
+  });
+  useEffect4(() => {
+    requestNarration(tour.step);
+  }, []);
+  return /* @__PURE__ */ jsx4(
+    TourShell,
+    {
+      step: tour.step,
+      index: tour.index,
+      total: tour.total,
+      isFirst: tour.isFirst,
+      isLast: tour.isLast,
+      onNext: tour.next,
+      onBack: tour.back,
+      onDismiss: tour.dismiss,
+      narration: narrationByStep[tour.step.id] ?? tour.step.fallbackText,
+      narrationPending: pendingStepId === tour.step.id,
+      orb,
+      skin
+    }
+  );
+}
+
+export {
+  InvalidTourDefinitionError,
+  validateTourDefinition,
+  createTourStore,
+  defaultTourStore,
+  SERVICE_HUB_TOUR_ID,
+  TourProgressError,
+  createPortalTourProgressTransport,
+  createTourProgressController,
+  shouldAutoOpen,
+  decideAutoOpen,
+  ONBOARDING_NARRATION_SERVICE,
+  NARRATION_PROMPT,
+  buildNarrationInput,
+  createPortalNarrator,
+  TourProvider,
+  useRegisterTour,
+  useTourState,
+  useActiveTour,
+  useTourLauncher,
+  useTourProgress,
+  useTourNarrator,
+  TakeTheTourButton,
+  useSpotlight,
+  computeSpotlightFrame,
+  computePanelPosition,
+  TourShell,
+  useTour,
+  OpiTourHost
+};
+//# sourceMappingURL=chunk-LUQAR6NB.js.map