@fayz-ai/ui 0.21.0 → 0.22.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { Popover, PopoverTrigger, PopoverContent, Input, Hint, DatePicker } from './chunk-OYH7CEMB.js';
-export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, DotBadge, DraftCommitBar, FilterCheckBox, FilterCheckList, FilterCheckRow, FilterChip, FilterSection, Hint, Input, ListView, Markdown, MarkdownEditor, MiniCalendar, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, MultiSelect, PageActionBar, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, StatTiles, StockEntryForm, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toLocalISODate, toast, useRowSelection } from './chunk-OYH7CEMB.js';
-export { AppShellSkeleton, ContentSplit, ContentSplitTrigger, PageTrail, Takeover, navigateToCrumb, usePageTrail, usePageTrailParent, useTakeoverClose } from './chunk-P3YTL3MF.js';
-export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, bottomNavReachesAll, useBackHandler, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar } from './chunk-EGHEU3U5.js';
+import { Popover, PopoverTrigger, PopoverContent, Input, Hint, DatePicker } from './chunk-ZSOT7KTE.js';
+export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, DotBadge, DraftCommitBar, FilterCheckBox, FilterCheckList, FilterCheckRow, FilterChip, FilterSection, Hint, Input, ListView, Markdown, MarkdownEditor, MiniCalendar, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, MultiSelect, PageActionBar, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, StatTiles, StockEntryForm, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toLocalISODate, toast, useRowSelection } from './chunk-ZSOT7KTE.js';
+export { AppShellSkeleton, ContentSplit, ContentSplitTrigger, PageTrail, Takeover, navigateToCrumb, usePageTrail, usePageTrailParent, useTakeoverClose } from './chunk-7G3O54CC.js';
+export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SubpageHeader, Topbar, bottomNavReachesAll, useBackHandler, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition, useRailRow, useSaveBar } from './chunk-PQUS22JE.js';
 export { ThemeProvider, createFayzTheme, createTheme, darkTheme, fayzThemePresets, lightTheme, useTheme, useThemeStore } from './chunk-VDAYIQX4.js';
-import { ChartWidget, Sparkline, DashboardGrid } from './chunk-MBGTFL4I.js';
-export { ChartWidget, DEFAULT_RANGE_OPTIONS, DashboardCanvas, DashboardCustomizeMenu, DashboardGrid, DashboardNavigateProvider, DashboardRangeControl, DashboardRangeProvider, GoldCard, KpiCard, OnboardingWidget, SidebarOnboarding, TableWidget, WidgetGrid, defineChartWidget, defineCustomWidget, defineKpiWidget, defineOnboardingWidget, defineTableWidget, formatKpiValue, renderIcon, resolveDashboardLayout, useDashboardNavigate, useDashboardPreferences, useDashboardRange, useOnboardingProgress } from './chunk-MBGTFL4I.js';
+import { ChartWidget, Sparkline, DashboardGrid } from './chunk-SUSW4LSW.js';
+export { ChartWidget, DEFAULT_RANGE_OPTIONS, DashboardCanvas, DashboardCustomizeMenu, DashboardGrid, DashboardNavigateProvider, DashboardRangeControl, DashboardRangeProvider, GoldCard, KpiCard, OnboardingWidget, SidebarOnboarding, TableWidget, WidgetGrid, defineChartWidget, defineCustomWidget, defineKpiWidget, defineOnboardingWidget, defineTableWidget, formatKpiValue, renderIcon, resolveDashboardLayout, useDashboardNavigate, useDashboardPreferences, useDashboardRange, useOnboardingProgress } from './chunk-SUSW4LSW.js';
 import { Skeleton, ToolbarButton, PageToolbar, Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Card, CardContent, RangeControl, DropdownSeparator } from './chunk-E44WOPCR.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, PageToolbar, RangeControl, Skeleton, TableSkeleton, ToolbarAction, ToolbarButton, WIDE_QUERY, useIsWide } from './chunk-E44WOPCR.js';
 export { PageHeaderOutlet, PageTitlePortal, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, useRegisterPageActions } from './chunk-HKGTF2YA.js';
@@ -13,7 +13,7 @@ export { Wizard, WizardField, errorMessage, useWizard } from './chunk-OB2ULDBD.j
 export { ConfirmDialog, ImageDrop, OptionCards, OptionChips, StepProgress, Switch } from './chunk-GLRLWBBF.js';
 import { cn, Button } from './chunk-OKZ6WQB3.js';
 export { Button, buttonVariants, cn } from './chunk-OKZ6WQB3.js';
-export { BRAND_MARKS, ChefControlMark, ICON_MAP, getLucideIcon, registerIcons } from './chunk-AIUHVTVK.js';
+export { BRAND_MARKS, ChefControlMark, ICON_MAP, getLucideIcon, registerIcons } from './chunk-DHNUZF2X.js';
 import * as React2 from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1105,6 +1105,27 @@ function ActiveFilterChip({ label, value, filterKey }) {
     )
   ] });
 }
+var usePracticeStore = create((set, get) => ({
+  title: null,
+  steps: [],
+  done: [],
+  start: (title, steps) => {
+    if (!steps.length) return;
+    set({ title, steps, done: [] });
+  },
+  markDone: (anchor) => {
+    const { steps, done } = get();
+    if (!steps.some((s) => s.anchor === anchor)) return;
+    if (done.includes(anchor)) return;
+    set({ done: [...done, anchor] });
+  },
+  stop: () => set({ title: null, steps: [], done: [] })
+}));
+function nextPracticeStep(steps, done) {
+  return steps.find((s) => !done.includes(s.anchor));
+}
+
+// src/tour/tour.store.ts
 var navigator;
 function setTourNavigator(fn) {
   navigator = fn;
@@ -1116,14 +1137,19 @@ var useTourStore = create((set, get) => ({
   tour: null,
   index: 0,
   lastOutcome: null,
+  lastTour: null,
   start: (tour) => {
     if (!tour.stops.length) return;
-    set({ tour, index: 0, lastOutcome: null });
+    usePracticeStore.getState().stop();
+    set({ tour, index: 0, lastOutcome: null, lastTour: tour });
   },
   next: () => {
     const { tour, index } = get();
     if (!tour) return;
     if (index >= tour.stops.length - 1) {
+      if (tour.practice?.length) {
+        usePracticeStore.getState().start(tour.title ?? "", tour.practice);
+      }
       get().stop(true);
       return;
     }
@@ -1135,11 +1161,105 @@ var useTourStore = create((set, get) => ({
     tour: null,
     index: 0,
     lastOutcome: s.tour ? { tourId: s.tour.id, completed } : s.lastOutcome
-  }))
+  })),
+  restart: () => {
+    const t = get().lastTour;
+    if (t) get().start(t);
+  }
 }));
 function currentStop(state) {
   return state.tour?.stops[state.index];
 }
+
+// src/tour/confetti.ts
+function fireConfetti(opts) {
+  if (typeof document === "undefined") return;
+  if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+  const canvas = document.createElement("canvas");
+  const dpr = window.devicePixelRatio || 1;
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  canvas.width = w * dpr;
+  canvas.height = h * dpr;
+  canvas.style.cssText = `position:fixed;inset:0;width:${w}px;height:${h}px;pointer-events:none;z-index:200`;
+  document.body.appendChild(canvas);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    canvas.remove();
+    return;
+  }
+  ctx.scale(dpr, dpr);
+  const css = getComputedStyle(document.documentElement);
+  const prim = (css.getPropertyValue("--primary") || "35 92% 50%").trim();
+  const colors = [`hsl(${prim})`, "#22c55e", "#f59e0b", "#ec4899", "#3b82f6", "#ffffff"];
+  const n = opts?.count ?? 130;
+  const rnd = (a, b) => a + Math.random() * (b - a);
+  const fromBottom = !!opts?.fromBottom;
+  const ox = opts?.origin?.x ?? w / 2;
+  const oy = opts?.origin?.y ?? h * 0.32;
+  const parts = Array.from({ length: fromBottom ? Math.max(n, 180) : n }, () => {
+    if (fromBottom) {
+      return {
+        x: rnd(0, w),
+        y: h + rnd(0, 40),
+        vx: rnd(-3, 3),
+        vy: -rnd(13, 22),
+        // straight up, hard
+        rot: rnd(0, Math.PI * 2),
+        vr: rnd(-0.3, 0.3),
+        size: rnd(6, 12),
+        color: colors[Math.random() * colors.length | 0],
+        life: 0
+      };
+    }
+    const angle = rnd(-Math.PI, 0);
+    const speed = rnd(6, 15);
+    return {
+      x: ox,
+      y: oy,
+      vx: Math.cos(angle) * speed * rnd(0.6, 1.4),
+      vy: Math.sin(angle) * speed - rnd(2, 6),
+      rot: rnd(0, Math.PI * 2),
+      vr: rnd(-0.3, 0.3),
+      size: rnd(6, 11),
+      color: colors[Math.random() * colors.length | 0],
+      life: 0
+    };
+  });
+  const GRAVITY = 0.32;
+  const DRAG = 0.99;
+  const MAX_LIFE = 140;
+  let raf = 0;
+  const tick = () => {
+    ctx.clearRect(0, 0, w, h);
+    let alive = 0;
+    for (const p of parts) {
+      if (p.life > MAX_LIFE) continue;
+      alive++;
+      p.life++;
+      p.vx *= DRAG;
+      p.vy = p.vy * DRAG + GRAVITY;
+      p.x += p.vx;
+      p.y += p.vy;
+      p.rot += p.vr;
+      const fade = Math.max(0, 1 - p.life / MAX_LIFE);
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rot);
+      ctx.globalAlpha = fade;
+      ctx.fillStyle = p.color;
+      ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6);
+      ctx.restore();
+    }
+    if (alive > 0) {
+      raf = requestAnimationFrame(tick);
+    } else {
+      cancelAnimationFrame(raf);
+      canvas.remove();
+    }
+  };
+  raf = requestAnimationFrame(tick);
+}
 var DEFAULT_LABELS = {
   next: "Pr\xF3ximo",
   waiting: "Fa\xE7a agora \u2014 eu espero",
@@ -1157,6 +1277,27 @@ function readRect(el) {
   const r = el.getBoundingClientRect();
   return { top: r.top - PAD, left: r.left - PAD, width: r.width + PAD * 2, height: r.height + PAD * 2 };
 }
+var CURSOR_TRAVEL_MS = 650;
+function pointFor(rect) {
+  return { x: rect.left + rect.width * 0.62, y: rect.top + rect.height * 0.62 };
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function exemptRightInset() {
+  if (typeof document === "undefined") return 0;
+  let inset = 0;
+  for (const el of Array.from(document.querySelectorAll("[data-tour-exempt]"))) {
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 || r.height === 0) continue;
+    if (r.right < window.innerWidth - 8) continue;
+    if (r.width > window.innerWidth * 0.7) continue;
+    if (r.height < window.innerHeight * 0.5) continue;
+    inset = Math.max(inset, window.innerWidth - r.left);
+  }
+  return Math.round(inset);
+}
 function TourSpotlight({ labels, className }) {
   const l = { ...DEFAULT_LABELS, ...labels };
   const tour = useTourStore((s) => s.tour);
@@ -1164,21 +1305,65 @@ function TourSpotlight({ labels, className }) {
   const next = useTourStore((s) => s.next);
   const prev = useTourStore((s) => s.prev);
   const stop = useTourStore((s) => s.stop);
+  const lastOutcome = useTourStore((s) => s.lastOutcome);
+  const firedFor = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!lastOutcome?.completed) return;
+    if (firedFor.current === lastOutcome.tourId) return;
+    firedFor.current = lastOutcome.tourId;
+    if (usePracticeStore.getState().steps.length > 0) return;
+    const origin = rect ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : void 0;
+    fireConfetti({ origin });
+  }, [lastOutcome]);
   const stopDef = tour?.stops[index];
   const [rect, setRect] = React2.useState(null);
   const [missing, setMissing] = React2.useState(false);
+  const [cursor, setCursor] = React2.useState(null);
+  const [arrived, setArrived] = React2.useState(false);
+  const [engaged, setEngaged] = React2.useState(false);
+  const [rightInset, setRightInset] = React2.useState(0);
+  React2.useEffect(() => {
+    if (!tour) return;
+    const sync = () => setRightInset(exemptRightInset());
+    sync();
+    const interval = window.setInterval(sync, 500);
+    window.addEventListener("resize", sync);
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("resize", sync);
+    };
+  }, [tour?.id]);
   React2.useEffect(() => {
     if (!stopDef) return;
     setRect(null);
     setMissing(false);
+    setArrived(false);
+    setEngaged(false);
     if (stopDef.route) getTourNavigator()?.(stopDef.route);
     let raf = 0;
+    let travel = 0;
     const deadline = Date.now() + ANCHOR_TIMEOUT_MS;
     const hunt = () => {
       const el = document.querySelector(`[data-tour~="${CSS.escape(stopDef.anchor)}"]`);
       if (el) {
         el.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" });
-        setRect(readRect(el));
+        const found = readRect(el);
+        const land = () => {
+          const at = document.querySelector(`[data-tour~="${CSS.escape(stopDef.anchor)}"]`);
+          const settled = at ? readRect(at) : found;
+          setRect(settled);
+          setCursor(pointFor(settled));
+          setArrived(true);
+        };
+        if (prefersReducedMotion()) {
+          land();
+          return;
+        }
+        setCursor((prev2) => prev2 ?? { x: window.innerWidth / 2, y: window.innerHeight / 2 });
+        raf = requestAnimationFrame(() => {
+          raf = requestAnimationFrame(() => setCursor(pointFor(found)));
+        });
+        travel = window.setTimeout(land, CURSOR_TRAVEL_MS + 40);
         return;
       }
       if (Date.now() > deadline) {
@@ -1188,10 +1373,13 @@ function TourSpotlight({ labels, className }) {
       raf = requestAnimationFrame(hunt);
     };
     raf = requestAnimationFrame(hunt);
-    return () => cancelAnimationFrame(raf);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.clearTimeout(travel);
+    };
   }, [stopDef?.anchor, stopDef?.route, tour?.id]);
   React2.useEffect(() => {
-    if (!stopDef || missing) return;
+    if (!stopDef || missing || !arrived) return;
     const anchor = stopDef.anchor;
     const handover = Boolean(stopDef.waitForUser);
     let frame = 0;
@@ -1200,7 +1388,9 @@ function TourSpotlight({ labels, className }) {
       const el = document.querySelector(`[data-tour~="${CSS.escape(anchor)}"]`);
       if (el) {
         absent = 0;
-        setRect(readRect(el));
+        const r = readRect(el);
+        setRect(r);
+        setCursor(pointFor(r));
         return;
       }
       if (!handover) return;
@@ -1220,7 +1410,49 @@ function TourSpotlight({ labels, className }) {
       window.removeEventListener("scroll", onFrame, true);
       window.removeEventListener("resize", onFrame);
     };
-  }, [stopDef?.anchor, stopDef?.waitForUser, missing, stop]);
+  }, [stopDef?.anchor, stopDef?.waitForUser, missing, arrived, stop]);
+  React2.useEffect(() => {
+    if (tour) return;
+    setCursor(null);
+    setArrived(false);
+    setRect(null);
+    setMissing(false);
+  }, [tour]);
+  React2.useEffect(() => {
+    if (!stopDef || missing) return;
+    const anchor = stopDef.anchor;
+    const within = (node) => {
+      const el = document.querySelector(`[data-tour~="${CSS.escape(anchor)}"]`);
+      return !!el && node instanceof Node && el.contains(node);
+    };
+    const editable = (node) => node instanceof Element && !!node.closest('input, textarea, select, [contenteditable="true"]');
+    const onDown = (e) => {
+      if (!within(e.target)) return;
+      if (editable(e.target)) setEngaged(true);
+    };
+    const onFocus = (e) => {
+      if (within(e.target) && editable(e.target)) setEngaged(true);
+    };
+    const onClick = (e) => {
+      if (!within(e.target) || editable(e.target)) return;
+      useTourStore.getState().next();
+    };
+    const onOut = () => {
+      window.setTimeout(() => {
+        if (!within(document.activeElement)) setEngaged(false);
+      }, 0);
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("focusin", onFocus, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("focusout", onOut, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("focusin", onFocus, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("focusout", onOut, true);
+    };
+  }, [stopDef?.anchor, missing]);
   React2.useEffect(() => {
     if (!tour) return;
     const onKey = (e) => {
@@ -1234,99 +1466,125 @@ function TourSpotlight({ labels, className }) {
   if (!tour || !stopDef || typeof document === "undefined") return null;
   const total = tour.stops.length;
   const isLast = index === total - 1;
-  const bubble = placeBubble(rect, stopDef.placement);
-  const body = /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none fixed inset-0 z-[120]", className), role: "dialog", "aria-modal": "false", children: [
-    rect && !missing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Dim, { style: { top: 0, left: 0, width: "100%", height: Math.max(0, rect.top) }, onClick: () => stop(false) }),
-      /* @__PURE__ */ jsx(Dim, { style: { top: rect.top, left: 0, width: Math.max(0, rect.left), height: rect.height }, onClick: () => stop(false) }),
-      /* @__PURE__ */ jsx(
-        Dim,
-        {
-          style: { top: rect.top, left: rect.left + rect.width, right: 0, height: rect.height },
-          onClick: () => stop(false)
-        }
-      ),
-      /* @__PURE__ */ jsx(Dim, { style: { top: rect.top + rect.height, left: 0, width: "100%", bottom: 0 }, onClick: () => stop(false) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": true,
-          className: "fz-spotlight-ring pointer-events-none absolute motion-safe:transition-[top,left,width,height] motion-safe:duration-300",
-          style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(Dim, { style: { inset: 0 }, onClick: () => stop(false) }),
+  const bubble = placeBubble(rect, stopDef.placement, rightInset);
+  const body = (
+    // `right` leaves the exempt column (the assistant narrating this tour)
+    // outside the overlay entirely — bright, readable, clickable.
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "pointer-events-auto absolute w-[300px] max-w-[calc(100vw-24px)] rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-2xl",
-          "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-200"
-        ),
-        style: bubble,
+        className: cn("pointer-events-none fixed inset-y-0 left-0 z-[120]", className),
+        style: { right: rightInset },
+        role: "dialog",
+        "aria-modal": "false",
         children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => stop(false),
-              "aria-label": l.skip,
-              className: "absolute right-2 top-2 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { className: "pr-6 text-sm font-semibold leading-snug", children: stopDef.title }),
-          (missing ? l.notFound : stopDef.body) && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[13px] leading-relaxed text-muted-foreground", children: missing ? l.notFound : stopDef.body }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] tabular-nums text-muted-foreground", children: l.stepOf.replace("{current}", String(index + 1)).replace("{total}", String(total)) }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1" }),
-            stopDef.waitForUser && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-[12px] font-medium text-primary", children: [
-              /* @__PURE__ */ jsxs("span", { className: "relative flex h-1.5 w-1.5", children: [
-                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary/70" }),
-                /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-primary" })
-              ] }),
-              l.waiting
-            ] }),
-            index > 0 && !stopDef.waitForUser && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: prev,
-                className: "rounded-button px-2.5 py-1.5 text-[12.5px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-                children: l.back
-              }
-            ),
-            !stopDef.waitForUser && /* @__PURE__ */ jsx(
-              "button",
+          rect && !missing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Dim, { soft: engaged, style: { top: 0, left: 0, width: "100%", height: Math.max(0, rect.top) } }),
+            /* @__PURE__ */ jsx(Dim, { soft: engaged, style: { top: rect.top, left: 0, width: Math.max(0, rect.left), height: rect.height } }),
+            /* @__PURE__ */ jsx(Dim, { soft: engaged, style: { top: rect.top, left: rect.left + rect.width, right: 0, height: rect.height } }),
+            /* @__PURE__ */ jsx(Dim, { soft: engaged, style: { top: rect.top + rect.height, left: 0, width: "100%", bottom: 0 } }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                type: "button",
-                onClick: next,
-                className: "rounded-button bg-primary px-3 py-1.5 text-[12.5px] font-semibold text-primary-foreground shadow-button-primary transition-colors hover:bg-primary/90",
-                children: isLast ? l.done : l.next
+                "aria-hidden": true,
+                className: "fz-spotlight-ring pointer-events-none absolute motion-safe:transition-[top,left,width,height] motion-safe:duration-300",
+                style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
               }
             )
-          ] })
+          ] }) : /* @__PURE__ */ jsx(Dim, { style: { inset: 0 } }),
+          cursor && !missing && !engaged && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "fz-tour-cursor",
+                !arrived && "fz-tour-cursor-travel",
+                arrived && "fz-tour-cursor-arrived",
+                arrived && stopDef.waitForUser && "fz-tour-cursor-nudge"
+              ),
+              style: { transform: `translate3d(${cursor.x}px, ${cursor.y}px, 0)` },
+              children: /* @__PURE__ */ jsx("svg", { width: "34", height: "34", viewBox: "0 0 24 24", fill: "hsl(var(--primary))", stroke: "white", strokeWidth: "1.4", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5.5 3.2v17.6c0 .45.54.67.85.35l4.4-4.4a.5.5 0 0 1 .36-.15h6.24c.45 0 .67-.54.35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z" }) })
+            }
+          ),
+          (arrived || missing) && !engaged && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-auto absolute w-[300px] max-w-[calc(100vw-24px)] rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-2xl",
+                "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-200"
+              ),
+              style: bubble,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => stop(false),
+                    "aria-label": l.skip,
+                    className: "absolute right-2 top-2 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "pr-6 text-sm font-semibold leading-snug", children: stopDef.title }),
+                (missing ? l.notFound : stopDef.body) && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-[13px] leading-relaxed text-muted-foreground", children: missing ? l.notFound : stopDef.body }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] tabular-nums text-muted-foreground", children: l.stepOf.replace("{current}", String(index + 1)).replace("{total}", String(total)) }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+                  stopDef.waitForUser && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-[12px] font-medium text-primary", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "relative flex h-1.5 w-1.5", children: [
+                      /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary/70" }),
+                      /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-primary" })
+                    ] }),
+                    l.waiting
+                  ] }),
+                  index > 0 && !stopDef.waitForUser && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: prev,
+                      className: "rounded-button px-2.5 py-1.5 text-[12.5px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      children: l.back
+                    }
+                  ),
+                  !stopDef.waitForUser && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: next,
+                      className: "rounded-button bg-primary px-3 py-1.5 text-[12.5px] font-semibold text-primary-foreground shadow-button-primary transition-colors hover:bg-primary/90",
+                      children: isLast ? l.done : l.next
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ]
       }
     )
-  ] });
+  );
   return createPortal(body, document.body);
 }
-function Dim({ style, onClick }) {
+function Dim({ style, soft }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onClick,
-      className: "pointer-events-auto absolute motion-safe:transition-all motion-safe:duration-300",
-      style: { backgroundColor: "rgb(0 0 0 / 0.55)", ...style }
+      className: cn(
+        "absolute motion-safe:transition-all motion-safe:duration-300",
+        // Hard dim still swallows the click (so a stray click cannot press a
+        // covered button) — it just no longer STOPS the tour. Soft is fully
+        // click-through: the person is working inside the hole's overflow.
+        soft ? "pointer-events-none" : "pointer-events-auto"
+      ),
+      style: { backgroundColor: soft ? "rgb(0 0 0 / 0.12)" : "rgb(0 0 0 / 0.55)", ...style }
     }
   );
 }
-function placeBubble(rect, placement) {
+function placeBubble(rect, placement, rightInset = 0) {
   if (typeof window === "undefined" || !rect) {
     return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   }
-  const vw = window.innerWidth;
+  const vw = window.innerWidth - rightInset;
   const vh = window.innerHeight;
   const belowRoom = vh - (rect.top + rect.height);
   const rightRoom = vw - (rect.left + rect.width);
@@ -1351,7 +1609,107 @@ function placeBubble(rect, placement) {
 function tourAnchor(anchor) {
   return { "data-tour": anchor };
 }
+function PracticeOverlay() {
+  const title = usePracticeStore((s) => s.title);
+  const steps = usePracticeStore((s) => s.steps);
+  const done = usePracticeStore((s) => s.done);
+  const markDone = usePracticeStore((s) => s.markDone);
+  const stop = usePracticeStore((s) => s.stop);
+  const active = !!title && steps.length > 0;
+  const next = active ? nextPracticeStep(steps, done) : void 0;
+  const [rects, setRects] = React2.useState({});
+  React2.useEffect(() => {
+    if (!active) return;
+    const measure = () => {
+      const out = {};
+      for (const s of steps) {
+        const el = document.querySelector(`[data-tour~="${CSS.escape(s.anchor)}"]`);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          out[s.anchor] = { top: r.top, left: r.left };
+        } else {
+          out[s.anchor] = null;
+        }
+      }
+      setRects(out);
+    };
+    measure();
+    const interval = window.setInterval(measure, 300);
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [active, steps]);
+  React2.useEffect(() => {
+    if (!active) return;
+    const within = (anchor, node) => {
+      const el = document.querySelector(`[data-tour~="${CSS.escape(anchor)}"]`);
+      return !!el && node instanceof Node && el.contains(node);
+    };
+    const hit = (e) => {
+      for (const s of steps) {
+        if (done.includes(s.anchor)) continue;
+        if (within(s.anchor, e.target)) {
+          markDone(s.anchor);
+          break;
+        }
+      }
+    };
+    document.addEventListener("pointerdown", hit, true);
+    document.addEventListener("input", hit, true);
+    document.addEventListener("change", hit, true);
+    return () => {
+      document.removeEventListener("pointerdown", hit, true);
+      document.removeEventListener("input", hit, true);
+      document.removeEventListener("change", hit, true);
+    };
+  }, [active, steps, done, markDone]);
+  const finaleFired = React2.useRef(false);
+  React2.useEffect(() => {
+    if (!active) {
+      finaleFired.current = false;
+      return;
+    }
+    const finalStep = steps.find((s) => s.final) ?? steps[steps.length - 1];
+    if (finalStep && done.includes(finalStep.anchor) && !finaleFired.current) {
+      finaleFired.current = true;
+      fireConfetti({ fromBottom: true });
+      window.setTimeout(() => stop(), 1400);
+    }
+  }, [active, done, steps, stop]);
+  if (!active || typeof document === "undefined") return null;
+  const body = /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-0 z-[118]", children: steps.map((s, i) => {
+    const rect = rects[s.anchor];
+    if (!rect) return null;
+    const isDone = done.includes(s.anchor);
+    const isNext = next?.anchor === s.anchor;
+    return /* @__PURE__ */ jsx(Footprint, { n: i + 1, label: s.label, top: rect.top, left: rect.left, done: isDone, next: isNext }, s.anchor);
+  }) });
+  return createPortal(body, document.body);
+}
+function Footprint({ n, label, top, left, done, next }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "absolute flex items-center gap-1.5 transition-all duration-300",
+      style: { top: Math.max(4, top - 12), left: Math.max(4, left - 12) },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[12px] font-bold shadow-lg ring-2 ring-background " + (done ? "bg-primary text-primary-foreground" : next ? "fz-practice-pulse bg-primary text-primary-foreground" : "bg-card text-foreground"),
+            children: done ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : n
+          }
+        ),
+        next && !done && /* @__PURE__ */ jsx("span", { className: "rounded-md bg-primary px-2 py-1 text-[11.5px] font-medium text-primary-foreground shadow-lg", children: label })
+      ]
+    }
+  );
+}
 
-export { AnalyticsCard, AnalyticsContextProvider, AnalyticsControls, AnalyticsFilterPicker, AnalyticsGrid, Avatar, AvatarFallback, AvatarImage, BATCH_WINDOW_MS, TourSpotlight, autoGrain, collectFilters, comparisonRange, createBatchingProvider, currentStop, deltaPercent, formatAnalyticsValue, formatBucket, formatCompact, formatDuration, getTourNavigator, isEngineMissing, num, parseDay, rangeLengthDays, resolveRangePreset, resolveRatios, resolveRowRatios, setTourNavigator, toBreakdown, toChartData, toDayString, toSpark, tourAnchor, trendOf, useAnalyticsCard, useAnalyticsCardRows, useAnalyticsContext, useAnalyticsContextOptional, useTourStore, vizCategory, vizMeasures };
+export { AnalyticsCard, AnalyticsContextProvider, AnalyticsControls, AnalyticsFilterPicker, AnalyticsGrid, Avatar, AvatarFallback, AvatarImage, BATCH_WINDOW_MS, PracticeOverlay, TourSpotlight, autoGrain, collectFilters, comparisonRange, createBatchingProvider, currentStop, deltaPercent, fireConfetti, formatAnalyticsValue, formatBucket, formatCompact, formatDuration, getTourNavigator, isEngineMissing, nextPracticeStep, num, parseDay, rangeLengthDays, resolveRangePreset, resolveRatios, resolveRowRatios, setTourNavigator, toBreakdown, toChartData, toDayString, toSpark, tourAnchor, trendOf, useAnalyticsCard, useAnalyticsCardRows, useAnalyticsContext, useAnalyticsContextOptional, usePracticeStore, useTourStore, vizCategory, vizMeasures };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map