@fayz-ai/ui 0.16.0 → 0.18.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { Popover, PopoverTrigger, PopoverContent, Input, Hint, DatePicker } from './chunk-SDPYDWWV.js';
-export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PageActionBar, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, StatTiles, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toast, useRowSelection } from './chunk-SDPYDWWV.js';
-export { AppShellSkeleton, ContentSplit, ContentSplitTrigger, PageTrail, navigateToCrumb, usePageTrail, usePageTrailParent } from './chunk-6BJTH3L6.js';
-export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, 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-PZU7XC2M.js';
+import { Popover, PopoverTrigger, PopoverContent, Input, Hint, DatePicker } from './chunk-Z2ITFPGL.js';
+export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PageActionBar, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, StatTiles, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toast, useRowSelection } from './chunk-Z2ITFPGL.js';
+export { AppShellSkeleton, ContentSplit, ContentSplitTrigger, PageTrail, navigateToCrumb, usePageTrail, usePageTrailParent } from './chunk-DFOAKWYB.js';
+export { AppShell, BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeader, PageHeaderActions, PageHeaderCrumb, PageRail, PageTabs, PageTransition, RailNavItem, SaveBar, SaveBarProvider, 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-OBIU37AX.js';
 export { ThemeProvider, createFayzTheme, createTheme, darkTheme, fayzThemePresets, lightTheme, useTheme, useThemeStore } from './chunk-VDAYIQX4.js';
-import { ChartWidget, Sparkline, DashboardGrid } from './chunk-5VF45NLE.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-5VF45NLE.js';
+import { ChartWidget, Sparkline, DashboardGrid } from './chunk-ZLPYNHXH.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-ZLPYNHXH.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';
@@ -18,6 +18,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Construction, DatabaseZap, AlertCircle, SlidersHorizontal, Search, ChevronRight, GitCompareArrows, Check, X, TrendingUp, TrendingDown, Info, ArrowUpRight } from 'lucide-react';
 import { useTranslation, getCurrentLocale } from '@fayz-ai/core';
+import { createPortal } from 'react-dom';
+import { create } from 'zustand';
 
 var Avatar = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
@@ -1117,7 +1119,253 @@ function ActiveFilterChip({ label, value, filterKey }) {
     )
   ] });
 }
+var navigator;
+function setTourNavigator(fn) {
+  navigator = fn;
+}
+function getTourNavigator() {
+  return navigator;
+}
+var useTourStore = create((set, get) => ({
+  tour: null,
+  index: 0,
+  lastOutcome: null,
+  start: (tour) => {
+    if (!tour.stops.length) return;
+    set({ tour, index: 0, lastOutcome: null });
+  },
+  next: () => {
+    const { tour, index } = get();
+    if (!tour) return;
+    if (index >= tour.stops.length - 1) {
+      get().stop(true);
+      return;
+    }
+    set({ index: index + 1 });
+  },
+  prev: () => set((s) => ({ index: Math.max(0, s.index - 1) })),
+  goTo: (index) => set((s) => s.tour ? { index: Math.min(Math.max(0, index), s.tour.stops.length - 1) } : s),
+  stop: (completed = false) => set((s) => ({
+    tour: null,
+    index: 0,
+    lastOutcome: s.tour ? { tourId: s.tour.id, completed } : s.lastOutcome
+  }))
+}));
+function currentStop(state) {
+  return state.tour?.stops[state.index];
+}
+var DEFAULT_LABELS = {
+  next: "Pr\xF3ximo",
+  waiting: "Fa\xE7a agora \u2014 eu espero",
+  back: "Voltar",
+  done: "Entendi",
+  skip: "Pular",
+  stepOf: "{current} de {total}",
+  notFound: "Essa parte n\xE3o est\xE1 nesta tela \u2014 siga em frente que eu te mostro depois."
+};
+var PAD = 8;
+var ANCHOR_TIMEOUT_MS = 4e3;
+var BUBBLE_WIDTH = 300;
+var GAP = 14;
+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 };
+}
+function TourSpotlight({ labels, className }) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const tour = useTourStore((s) => s.tour);
+  const index = useTourStore((s) => s.index);
+  const next = useTourStore((s) => s.next);
+  const prev = useTourStore((s) => s.prev);
+  const stop = useTourStore((s) => s.stop);
+  const stopDef = tour?.stops[index];
+  const [rect, setRect] = React2.useState(null);
+  const [missing, setMissing] = React2.useState(false);
+  React2.useEffect(() => {
+    if (!stopDef) return;
+    setRect(null);
+    setMissing(false);
+    if (stopDef.route) getTourNavigator()?.(stopDef.route);
+    let raf = 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));
+        return;
+      }
+      if (Date.now() > deadline) {
+        setMissing(true);
+        return;
+      }
+      raf = requestAnimationFrame(hunt);
+    };
+    raf = requestAnimationFrame(hunt);
+    return () => cancelAnimationFrame(raf);
+  }, [stopDef?.anchor, stopDef?.route, tour?.id]);
+  React2.useEffect(() => {
+    if (!stopDef || missing) return;
+    const anchor = stopDef.anchor;
+    const handover = Boolean(stopDef.waitForUser);
+    let frame = 0;
+    let absent = 0;
+    const sync = () => {
+      const el = document.querySelector(`[data-tour~="${CSS.escape(anchor)}"]`);
+      if (el) {
+        absent = 0;
+        setRect(readRect(el));
+        return;
+      }
+      if (!handover) return;
+      absent += 1;
+      if (absent >= 3) stop(false);
+    };
+    const onFrame = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(sync);
+    };
+    window.addEventListener("scroll", onFrame, true);
+    window.addEventListener("resize", onFrame);
+    const interval = window.setInterval(sync, 400);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearInterval(interval);
+      window.removeEventListener("scroll", onFrame, true);
+      window.removeEventListener("resize", onFrame);
+    };
+  }, [stopDef?.anchor, stopDef?.waitForUser, missing, stop]);
+  React2.useEffect(() => {
+    if (!tour) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") stop(false);
+      if (e.key === "ArrowRight" && !tour.stops[index]?.waitForUser) next();
+      if (e.key === "ArrowLeft") prev();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [tour, index, next, prev, stop]);
+  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) }),
+    /* @__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 }) {
+  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 }
+    }
+  );
+}
+function placeBubble(rect, placement) {
+  if (typeof window === "undefined" || !rect) {
+    return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+  }
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const belowRoom = vh - (rect.top + rect.height);
+  const rightRoom = vw - (rect.left + rect.width);
+  let side = placement && placement !== "auto" ? placement : belowRoom > 220 ? "bottom" : rect.top > 220 ? "top" : rightRoom > 340 ? "right" : "left";
+  if (side === "bottom" && belowRoom < 180) side = "top";
+  if (side === "top" && rect.top < 180) side = "bottom";
+  const clampX = (x) => Math.min(Math.max(12, x), Math.max(12, vw - BUBBLE_WIDTH - 12));
+  const clampY = (y) => Math.min(Math.max(12, y), Math.max(12, vh - 190));
+  switch (side) {
+    case "top":
+      return { left: clampX(rect.left + rect.width / 2 - BUBBLE_WIDTH / 2), bottom: Math.max(12, vh - rect.top + GAP) };
+    case "left":
+      return { left: Math.max(12, rect.left - BUBBLE_WIDTH - GAP), top: clampY(rect.top) };
+    case "right":
+      return { left: clampX(rect.left + rect.width + GAP), top: clampY(rect.top) };
+    default:
+      return { left: clampX(rect.left + rect.width / 2 - BUBBLE_WIDTH / 2), top: clampY(rect.top + rect.height + GAP) };
+  }
+}
+
+// src/tour/types.ts
+function tourAnchor(anchor) {
+  return { "data-tour": anchor };
+}
 
-export { AnalyticsCard, AnalyticsContextProvider, AnalyticsControls, AnalyticsFilterPicker, AnalyticsGrid, Avatar, AvatarFallback, AvatarImage, BATCH_WINDOW_MS, autoGrain, collectFilters, comparisonRange, createBatchingProvider, deltaPercent, errorMessage, formatAnalyticsValue, formatBucket, formatCompact, formatDuration, isEngineMissing, num, parseDay, rangeLengthDays, resolveRangePreset, resolveRatios, resolveRowRatios, toBreakdown, toChartData, toDayString, toSpark, trendOf, useAnalyticsCard, useAnalyticsCardRows, useAnalyticsContext, useAnalyticsContextOptional, vizCategory, vizMeasures };
+export { AnalyticsCard, AnalyticsContextProvider, AnalyticsControls, AnalyticsFilterPicker, AnalyticsGrid, Avatar, AvatarFallback, AvatarImage, BATCH_WINDOW_MS, TourSpotlight, autoGrain, collectFilters, comparisonRange, createBatchingProvider, currentStop, deltaPercent, errorMessage, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map