@pablo2410/shared-ui 0.21.0 → 0.22.1

package/dist/tour/index.js

@@ -1,5 +1,5 @@
 // src/tour/TourShell.tsx
-import { useEffect, useRef } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import {
   X,
   ChevronLeft,
@@ -7,283 +7,15 @@ import {
   ArrowRight,
   ExternalLink
 } from "lucide-react";
-import { 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"
-};
-function TourShell({
-  step,
-  index,
-  total,
-  isFirst,
-  isLast,
-  onNext,
-  onBack,
-  onDismiss,
-  narration,
-  narrationPending,
-  children,
-  skin = defaultSkin,
-  orb
-}) {
-  const panelRef = useRef(null);
-  useEffect(() => {
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onDismiss();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onDismiss]);
-  useEffect(() => {
-    panelRef.current?.focus();
-  }, [step.id]);
-  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__ */ 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" })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__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
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto px-5 py-4 space-y-4", children: [
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: "text-[13px] leading-relaxed transition-opacity",
-                  style: {
-                    color: skin.bodyText,
-                    opacity: narrationPending ? 0.7 : 1
-                  },
-                  children: narration
-                }
-              ),
-              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
-            ] }),
-            /* @__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 } 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] = useState(
-    () => 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/useSpotlight.ts
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useRef, useState } from "react";
 var RESIZE_DEBOUNCE_MS = 100;
 function useSpotlight(selector) {
-  const [rect, setRect] = useState2(null);
-  const [found, setFound] = useState2(false);
-  const scrolledForSelector = useRef2(null);
-  useEffect2(() => {
+  const [rect, setRect] = useState(null);
+  const [found, setFound] = useState(false);
+  const scrolledForSelector = useRef(null);
+  useEffect(() => {
     if (!selector) {
       setRect(null);
       setFound(false);
@@ -433,6 +165,440 @@ function fits(pos, panelSize, viewport) {
 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
+  };
+}
 export {
   TourShell,
   computePanelPosition,