@pablo2410/shared-ui 0.24.0 → 0.25.0

package/dist/tour/index.js

@@ -1,609 +1,63 @@
-// src/tour/TourShell.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import {
-  X,
-  ChevronLeft,
-  ChevronRight,
-  ArrowRight,
-  ExternalLink
-} from "lucide-react";
-
-// src/tour/useSpotlight.ts
-import { useEffect, 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);
-  useEffect(() => {
-    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 { Fragment, jsx, jsxs } 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 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;
-  useEffect2(() => {
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onDismiss();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onDismiss]);
-  useEffect2(() => {
-    panelRef.current?.focus();
-  }, [step.id]);
-  useEffect2(() => {
-    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__ */ jsxs(Fragment, { children: [
-      ["top", "bottom", "left", "right"].map((side) => {
-        const segment = frame[side];
-        if (segment.width <= 0 || segment.height <= 0) return null;
-        return /* @__PURE__ */ jsx(
-          "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__ */ jsx(
-        "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__ */ jsxs(
-        "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__ */ jsx(TourShellHeader, { step, orb, onDismiss }),
-            /* @__PURE__ */ jsx(TourShellStepDots, { total, index, skin }),
-            /* @__PURE__ */ jsx("div", { className: "overflow-y-auto px-4 py-3 space-y-3", children: /* @__PURE__ */ jsx(
-              TourShellBody,
-              {
-                step,
-                narration,
-                narrationPending,
-                skin,
-                children
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              TourShellFooter,
-              {
-                isFirst,
-                isLast,
-                onNext,
-                onBack,
-                onDismiss,
-                skin
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: skin.overlayBg },
-      onClick: (e) => {
-        if (e.target === e.currentTarget) onDismiss();
-      },
-      children: /* @__PURE__ */ jsxs(
-        "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__ */ jsx(TourShellHeader, { step, orb, onDismiss }),
-            /* @__PURE__ */ jsx(TourShellStepDots, { total, index, skin }),
-            /* @__PURE__ */ jsx("div", { className: "overflow-y-auto px-5 py-4 space-y-4", children: /* @__PURE__ */ jsx(
-              TourShellBody,
-              {
-                step,
-                narration,
-                narrationPending,
-                skin,
-                children
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              TourShellFooter,
-              {
-                isFirst,
-                isLast,
-                onNext,
-                onBack,
-                onDismiss,
-                skin
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function TourShellHeader({
-  step,
-  orb,
-  onDismiss
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex items-center justify-between gap-3 px-5 py-4 shrink-0",
-      style: {
-        background: "linear-gradient(135deg, #2a1450 0%, #1a0e33 100%)"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
-          orb,
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-white truncate", children: step.label })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onDismiss,
-            className: "p-1 rounded hover:bg-white/10 transition-colors shrink-0",
-            title: "Skip tour",
-            children: /* @__PURE__ */ jsx(X, { size: 16, className: "text-white/70" })
-          }
-        )
-      ]
-    }
-  );
-}
-function TourShellStepDots({
-  total,
-  index,
-  skin
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex items-center gap-1.5 px-5 py-3 shrink-0",
-      style: { borderBottom: skin.panelBorder },
-      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
-        "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
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "text-[13px] leading-relaxed transition-opacity",
-        style: {
-          color: skin.bodyText,
-          opacity: narrationPending ? 0.7 : 1
-        },
-        children: narration
-      }
-    ),
-    step.features && step.features.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: step.features.map((f, i) => /* @__PURE__ */ jsxs("li", { className: "text-[12.5px] leading-relaxed", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: skin.accent }, children: f.name }),
-      /* @__PURE__ */ jsxs("span", { style: { color: skin.softText }, children: [
-        " \u2014 ",
-        f.detail
-      ] })
-    ] }, i)) }) : step.highlights && step.highlights.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: step.highlights.map((h, i) => /* @__PURE__ */ jsxs(
-      "li",
-      {
-        className: "text-[12.5px] leading-relaxed pl-3 relative",
-        style: { color: skin.softText },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "absolute left-0",
-              style: { color: skin.mutedText },
-              children: "\u2022"
-            }
-          ),
-          h
-        ]
-      },
-      i
-    )) }),
-    step.action && /* @__PURE__ */ jsxs(
-      "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 px-3.5 py-2 rounded-lg text-[13px] font-semibold transition-opacity hover:opacity-90",
-        style: { background: `${skin.accent}20`, color: skin.accent },
-        children: [
-          step.action.label,
-          step.action.external ? /* @__PURE__ */ jsx(ExternalLink, { size: 13 }) : /* @__PURE__ */ jsx(ArrowRight, { size: 13 })
-        ]
-      }
-    ),
-    children
-  ] });
-}
-function TourShellFooter({
-  isFirst,
-  isLast,
-  onNext,
-  onBack,
-  onDismiss,
-  skin
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex items-center justify-between gap-2 px-5 py-3.5 shrink-0",
-      style: { borderTop: skin.panelBorder },
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onDismiss,
-            className: "text-[12px] font-medium transition-colors hover:underline",
-            style: { color: skin.mutedText },
-            children: "Skip tour"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          !isFirst && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: onBack,
-              className: "flex items-center gap-1 px-3 py-1.5 rounded-md text-[12.5px] font-medium transition-colors",
-              style: { color: skin.bodyText, border: skin.panelBorder },
-              children: [
-                /* @__PURE__ */ jsx(ChevronLeft, { size: 13 }),
-                "Back"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: onNext,
-              className: "flex items-center gap-1 px-3.5 py-1.5 rounded-md text-[12.5px] font-bold text-white transition-opacity hover:opacity-90",
-              style: {
-                background: "linear-gradient(135deg, #8C34E9 0%, #5B1FA6 100%)"
-              },
-              children: [
-                isLast ? "Done" : "Next",
-                !isLast && /* @__PURE__ */ jsx(ChevronRight, { size: 13 })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-
-// src/tour/useTour.ts
-import { useCallback, useState as useState2 } 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] = useState2(
-    () => 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
-  };
-}
+  InvalidTourDefinitionError,
+  NARRATION_PROMPT,
+  ONBOARDING_NARRATION_SERVICE,
+  OpiTourHost,
+  SERVICE_HUB_TOUR_ID,
+  TakeTheTourButton,
+  TourProgressError,
+  TourProvider,
+  TourShell,
+  buildNarrationInput,
+  computePanelPosition,
+  computeSpotlightFrame,
+  createPortalNarrator,
+  createPortalTourProgressTransport,
+  createTourProgressController,
+  createTourStore,
+  decideAutoOpen,
+  defaultTourStore,
+  shouldAutoOpen,
+  useActiveTour,
+  useRegisterTour,
+  useSpotlight,
+  useTour,
+  useTourLauncher,
+  useTourNarrator,
+  useTourProgress,
+  useTourState,
+  validateTourDefinition
+} from "../chunk-T3W42HMO.js";
+import "../chunk-7LI4Y6WT.js";
+import "../chunk-JT3XLKKD.js";
 export {
+  InvalidTourDefinitionError,
+  NARRATION_PROMPT,
+  ONBOARDING_NARRATION_SERVICE,
+  OpiTourHost,
+  SERVICE_HUB_TOUR_ID,
+  TakeTheTourButton,
+  TourProgressError,
+  TourProvider,
   TourShell,
+  buildNarrationInput,
   computePanelPosition,
   computeSpotlightFrame,
+  createPortalNarrator,
+  createPortalTourProgressTransport,
+  createTourProgressController,
+  createTourStore,
+  decideAutoOpen,
+  defaultTourStore,
+  shouldAutoOpen,
+  useActiveTour,
+  useRegisterTour,
   useSpotlight,
-  useTour
+  useTour,
+  useTourLauncher,
+  useTourNarrator,
+  useTourProgress,
+  useTourState,
+  validateTourDefinition
 };
 //# sourceMappingURL=index.js.map