@fayz-ai/ui 0.21.0 → 0.23.0

package/dist/index.js

@@ -1,23 +1,24 @@
-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 { Input, DatePicker } from './chunk-XEUIYSW2.js';
+export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, DateRangeChip, DotBadge, DraftCommitBar, FilterCheckBox, FilterCheckList, FilterCheckRow, FilterChip, FilterSection, Input, ListView, Markdown, MarkdownEditor, MiniCalendar, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, MultiSelect, PhoneField, PhoneLink, 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, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toLocalISODate, toast, useRowSelection } from './chunk-XEUIYSW2.js';
+export { AppShellSkeleton, ContentSplit, ContentSplitTrigger, PageTrail, Takeover, navigateToCrumb, usePageTrail, usePageTrailParent, useTakeoverClose } from './chunk-L4TXDKMN.js';
+export { BackStyleProvider, HeaderTabs, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageRail, PageTabs, PageTransition, RailNavItem, SegmentedControl, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SubpageHeader, useBackStyle, useModuleLayout, useNavTransition } from './chunk-UP7WVKSU.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 { 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';
+import { ChartWidget, Sparkline, DashboardGrid } from './chunk-XKFYX3DG.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-XKFYX3DG.js';
+import { Skeleton, useToolbarSurface, useToolbarPanelClose, Popover, PopoverTrigger, ToolbarButton, PopoverContent, PageToolbar, Dropdown, DropdownTrigger, DropdownContent, DropdownItem, RangeControl, DropdownSeparator, Card, Hint, CardContent, Checkbox } from './chunk-HO2P2XB4.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, Hint, PageActionBar, PageToolbar, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RangeControl, Skeleton, TableSkeleton, ToolbarAction, ToolbarButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WIDE_QUERY, useIsWide, useToolbarPanelClose, useToolbarSurface } from './chunk-HO2P2XB4.js';
+export { AppShell, PageHeader, PageHeaderCrumb, PageHeaderOutlet, PageTitlePortal, SaveBar, SaveBarProvider, ShellSearch, Sidebar, Topbar, bottomNavReachesAll, useBackHandler, useHasPageActions, useHasPageHeaderBack, useHasPageHeaderHost, useHasPageHeaderOutlet, useLayoutStore, useModuleHeaderActionsSlot, useModuleHeaderSlot, usePageHeader, usePageHeaderClaimed, usePageHeaderHost, useRailRow, useRegisterPageActions, useSaveBar } from './chunk-RRNMNFLF.js';
 import { errorMessage } from './chunk-OB2ULDBD.js';
 export { Wizard, WizardField, errorMessage, useWizard } from './chunk-OB2ULDBD.js';
 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-OWN3GFDG.js';
 import * as React2 from 'react';
+import React2__default from 'react';
 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 { Construction, DatabaseZap, AlertCircle, Search, ChevronRight, SlidersHorizontal, 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';
@@ -223,17 +224,18 @@ function formatBucket(value, grain, locale = "pt-BR") {
   if (value == null) return "\u2014";
   const d = new Date(String(value));
   if (Number.isNaN(d.getTime())) return String(value);
+  const utc = { timeZone: "UTC" };
   switch (grain) {
     case "hour":
       return d.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
     case "month":
-      return d.toLocaleDateString(locale, { month: "short", year: "2-digit" });
+      return d.toLocaleDateString(locale, { ...utc, month: "short", year: "2-digit" });
     case "quarter":
-      return `Q${Math.floor(d.getMonth() / 3) + 1} ${d.getFullYear()}`;
+      return `Q${Math.floor(d.getUTCMonth() / 3) + 1} ${d.getUTCFullYear()}`;
     case "year":
-      return String(d.getFullYear());
+      return String(d.getUTCFullYear());
     default:
-      return d.toLocaleDateString(locale, { day: "2-digit", month: "short" });
+      return d.toLocaleDateString(locale, { ...utc, day: "2-digit", month: "short" });
   }
 }
 function toBreakdown(rows, categoryKey, measureKey, format, currency, limit) {
@@ -536,8 +538,454 @@ function useAnalyticsCardRows(card) {
     return rows.slice(0, limit);
   }, [provider, state, card]);
 }
+var STATEMENT_ROW_CAP = 5e3;
+function useAnalyticsAllRows(card, enabled = true) {
+  const fetchRows = useAnalyticsCardRows(card);
+  const { state } = useAnalyticsContext();
+  const [rows, setRows] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(enabled);
+  const [error, setError] = React2.useState(null);
+  const key = JSON.stringify([
+    card.id,
+    state.dateRange,
+    state.filters,
+    state.search,
+    state.sortBy,
+    state.sortDir
+  ]);
+  React2.useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let live = true;
+    setLoading(true);
+    setError(null);
+    fetchRows(STATEMENT_ROW_CAP).then((r) => {
+      if (live) {
+        setRows(r);
+        setLoading(false);
+      }
+    }).catch((e) => {
+      if (live) {
+        setError(errorMessage(e));
+        setLoading(false);
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, enabled]);
+  return { rows, loading, error };
+}
 var EXPORT_PAGE_SIZE = 1e3;
 var EXPORT_ROW_CAP = 2e4;
+
+// src/analytics/statement.ts
+function compareCodes(a, b) {
+  const pa = a.split(".");
+  const pb = b.split(".");
+  for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
+    const sa = pa[i];
+    const sb = pb[i];
+    if (sa === void 0) return -1;
+    if (sb === void 0) return 1;
+    const na = Number(sa);
+    const nb = Number(sb);
+    if (Number.isFinite(na) && Number.isFinite(nb)) {
+      if (na !== nb) return na - nb;
+    } else if (sa !== sb) {
+      return sa < sb ? -1 : 1;
+    }
+  }
+  return 0;
+}
+function parentCode(code) {
+  const i = code.lastIndexOf(".");
+  return i < 0 ? "" : code.slice(0, i);
+}
+var UNCLASSIFIED = "\0sem-classificacao";
+function emptyNode(code, label, synthetic) {
+  return {
+    key: code || label,
+    code,
+    label,
+    depth: code ? code.split(".").length - 1 : 0,
+    synthetic,
+    own: {},
+    rollup: {},
+    total: 0,
+    children: []
+  };
+}
+function add(bag, period, value) {
+  bag[period] = (bag[period] ?? 0) + value;
+}
+function rollup(node, periods) {
+  node.children.sort((a, b) => compareCodes(a.code, b.code));
+  node.rollup = { ...node.own };
+  for (const child of node.children) {
+    rollup(child, periods);
+    for (const p of periods) {
+      if (child.rollup[p]) add(node.rollup, p, child.rollup[p]);
+    }
+  }
+  node.total = periods.reduce((acc, p) => acc + (node.rollup[p] ?? 0), 0);
+}
+function buildStatement(rows, def) {
+  const periodSet = /* @__PURE__ */ new Set();
+  const bySection = /* @__PURE__ */ new Map();
+  for (const s of def.sections) bySection.set(s.value, /* @__PURE__ */ new Map());
+  for (const row of rows) {
+    const section = String(row[def.sectionKey] ?? "");
+    const bucket = bySection.get(section);
+    if (!bucket) continue;
+    const period = String(row[def.periodKey] ?? "");
+    const estrutura = !period;
+    if (!estrutura) periodSet.add(period);
+    const value = Number(row[def.valueKey] ?? 0);
+    if (!Number.isFinite(value)) continue;
+    const code = String(row[def.codeKey] ?? "").trim();
+    const label = String(row[def.labelKey] ?? "").trim();
+    if (estrutura) {
+      if (!code) continue;
+      let node2 = bucket.get(code);
+      if (!node2) {
+        node2 = emptyNode(code, label || code, false);
+        bucket.set(code, node2);
+      } else {
+        node2.synthetic = false;
+        if (label) node2.label = label;
+      }
+      continue;
+    }
+    if (!code) {
+      const spec = def.sections.find((sec) => sec.value === section);
+      if (!spec?.unclassifiedLabel) continue;
+      let node2 = bucket.get(UNCLASSIFIED);
+      if (!node2) {
+        node2 = emptyNode("", spec.unclassifiedLabel, false);
+        node2.key = `${section}${UNCLASSIFIED}`;
+        bucket.set(UNCLASSIFIED, node2);
+      }
+      add(node2.own, period, value);
+      continue;
+    }
+    let node = bucket.get(code);
+    if (!node) {
+      node = emptyNode(code, label || code, false);
+      bucket.set(code, node);
+    } else if (node.synthetic) {
+      node.synthetic = false;
+      if (label) node.label = label;
+    }
+    add(node.own, period, value);
+  }
+  const periods = [...periodSet].sort();
+  const lines = [];
+  const sectionTotals = /* @__PURE__ */ new Map();
+  for (const spec of def.sections) {
+    const bucket = bySection.get(spec.value);
+    for (const code of [...bucket.keys()]) {
+      if (code === UNCLASSIFIED) continue;
+      let parent = parentCode(code);
+      while (parent && !bucket.has(parent)) {
+        bucket.set(parent, emptyNode(parent, parent, true));
+        parent = parentCode(parent);
+      }
+    }
+    const roots = [];
+    for (const [code, node] of bucket) {
+      if (code === UNCLASSIFIED) continue;
+      const parent = parentCode(code);
+      if (parent && bucket.has(parent)) bucket.get(parent).children.push(node);
+      else roots.push(node);
+    }
+    const totals = {};
+    for (const node of roots) {
+      rollup(node, periods);
+      for (const p of periods) if (node.rollup[p]) add(totals, p, node.rollup[p]);
+    }
+    const orphan = bucket.get(UNCLASSIFIED);
+    if (orphan) {
+      rollup(orphan, periods);
+      for (const p of periods) if (orphan.rollup[p]) add(totals, p, orphan.rollup[p]);
+    }
+    roots.sort((a, b) => compareCodes(a.code, b.code));
+    const nodes = orphan ? [...roots, orphan] : roots;
+    const total = periods.reduce((acc, p) => acc + (totals[p] ?? 0), 0);
+    sectionTotals.set(spec.value, { totals, total });
+    lines.push({ kind: "section", section: spec.value, label: spec.label, nodes, totals, total });
+  }
+  const out = [];
+  for (const line of def.lines) {
+    if (line.kind === "section") {
+      const block = lines.find((l) => l.kind === "section" && l.section === line.section);
+      if (block) out.push(block);
+      continue;
+    }
+    const totals = {};
+    for (const [section, sign] of Object.entries(line.of)) {
+      const s = sectionTotals.get(section);
+      if (!s) continue;
+      for (const p of periods) if (s.totals[p]) add(totals, p, s.totals[p] * sign);
+    }
+    out.push({
+      kind: "total",
+      label: line.label,
+      emphasis: line.emphasis,
+      totals,
+      total: periods.reduce((acc, p) => acc + (totals[p] ?? 0), 0)
+    });
+  }
+  return { periods, lines: out };
+}
+function flattenNodes(nodes, open, out = []) {
+  for (const node of nodes) {
+    out.push(node);
+    if (node.children.length && open(node)) flattenNodes(node.children, open, out);
+  }
+  return out;
+}
+function defaultOpenKeys(lines, depth) {
+  const open = /* @__PURE__ */ new Set();
+  const walk = (nodes) => {
+    for (const n of nodes) {
+      if (n.depth < depth) open.add(n.key);
+      walk(n.children);
+    }
+  };
+  for (const line of lines) if (line.kind === "section") walk(line.nodes);
+  return open;
+}
+var EMPTY = "\u2014";
+function cell(value, currency) {
+  if (value === void 0) return EMPTY;
+  return formatAnalyticsValue(value, "currency", currency);
+}
+function Row({
+  label,
+  code,
+  depth,
+  values,
+  total,
+  periods,
+  currency,
+  expandable,
+  open,
+  onToggle,
+  tone,
+  synthetic
+}) {
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      onClick: expandable ? onToggle : void 0,
+      className: cn(
+        "border-b border-border/50 last:border-b-0",
+        tone === "strong" && "bg-muted/60 font-semibold",
+        tone === "rule" && "border-t-2 border-foreground/70 bg-muted/40 font-semibold",
+        tone === "section" && "bg-muted/30 font-medium",
+        !tone && "hover:bg-muted/30",
+        expandable && "cursor-pointer select-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "row",
+            className: "sticky left-0 z-10 w-full bg-inherit px-3 py-2 text-left font-inherit",
+            style: { paddingLeft: `${12 + depth * 16}px` },
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+              expandable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onToggle?.();
+                  },
+                  "aria-expanded": open,
+                  className: "-ml-1 rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ChevronRight,
+                      {
+                        className: cn("h-3.5 w-3.5 transition-transform", open && "rotate-90"),
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                      open ? "Recolher" : "Expandir",
+                      " ",
+                      label
+                    ] })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "inline-block w-[18px]", "aria-hidden": true }),
+              code ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground", children: code }) : null,
+              label && label !== code ? /* @__PURE__ */ jsx("span", { className: cn("truncate", synthetic && "text-muted-foreground"), title: label, children: label }) : null
+            ] })
+          }
+        ),
+        periods.map((p) => /* @__PURE__ */ jsx("td", { className: "w-px whitespace-nowrap px-3 py-2 text-right tabular-nums", children: cell(values[p], currency) }, p)),
+        /* @__PURE__ */ jsx("td", { className: "w-px whitespace-nowrap border-l border-border px-3 py-2 text-right font-medium tabular-nums", children: cell(total || void 0, currency) })
+      ]
+    }
+  );
+}
+function StatementSkeleton({ rows, dense }) {
+  const cols = 4;
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b bg-muted/50 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto flex gap-3", children: Array.from({ length: cols }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }, i)) })
+    ] }),
+    Array.from({ length: rows }).map((_, i) => {
+      const total = i === 0 || i === Math.floor(rows / 2);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-3 border-b border-border/50 px-3 last:border-b-0",
+            dense ? "py-1.5" : "py-2.5",
+            total && "bg-muted/40"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                className: cn("h-3.5", total ? "w-48" : "w-36"),
+                style: { marginLeft: total ? 0 : `${i % 3 * 16}px` }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "ml-auto flex gap-3", children: Array.from({ length: cols }).map((_2, c) => /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-16" }, c)) })
+          ]
+        },
+        i
+      );
+    })
+  ] });
+}
+function StatementTable({
+  rows,
+  def,
+  currency,
+  formatPeriod,
+  totalLabel = "Total",
+  accountLabel = "Conta",
+  emptyMessage = "Sem lan\xE7amentos no per\xEDodo.",
+  className,
+  dense,
+  loading,
+  skeletonRows
+}) {
+  const statement = React2__default.useMemo(() => buildStatement(rows, def), [rows, def]);
+  const [open, setOpen] = React2__default.useState(() => /* @__PURE__ */ new Set());
+  const [touched, setTouched] = React2__default.useState(false);
+  React2__default.useEffect(() => {
+    if (touched) return;
+    setOpen(defaultOpenKeys(statement.lines, def.defaultDepth ?? 1));
+  }, [statement, def.defaultDepth, touched]);
+  const toggle = React2__default.useCallback((key) => {
+    setTouched(true);
+    setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const setAll = React2__default.useCallback((expand) => {
+    setTouched(true);
+    if (!expand) {
+      setOpen(/* @__PURE__ */ new Set());
+      return;
+    }
+    const all = /* @__PURE__ */ new Set();
+    const walk = (nodes) => {
+      for (const n of nodes) {
+        all.add(n.key);
+        walk(n.children);
+      }
+    };
+    for (const line of statement.lines) if (line.kind === "section") walk(line.nodes);
+    setOpen(all);
+  }, [statement]);
+  const { periods, lines } = statement;
+  if (loading) {
+    return /* @__PURE__ */ jsx(StatementSkeleton, { rows: skeletonRows ?? (dense ? 5 : 10), dense });
+  }
+  if (periods.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground", children: emptyMessage });
+  }
+  const isOpen = (n) => open.has(n.key);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    !dense ? /* @__PURE__ */ jsxs("div", { className: "no-print flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAll(true),
+          className: "rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-muted",
+          children: "Expandir tudo"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAll(false),
+          className: "rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-muted",
+          children: "Recolher tudo"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "print-flow overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: cn("w-full border-collapse", dense ? "text-xs" : "text-sm"), children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "sticky left-0 z-10 w-full bg-muted/50 px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground", children: accountLabel }),
+        periods.map((p) => /* @__PURE__ */ jsx("th", { scope: "col", className: "w-px whitespace-nowrap px-3 py-2 text-right text-xs font-medium uppercase tracking-wide text-muted-foreground", children: formatPeriod ? formatPeriod(p) : p }, p)),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "w-px whitespace-nowrap border-l border-border px-3 py-2 text-right text-xs font-medium uppercase tracking-wide text-muted-foreground", children: totalLabel })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => {
+        if (line.kind === "total") {
+          return /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: line.label,
+              depth: 0,
+              values: line.totals,
+              total: line.total,
+              periods,
+              currency,
+              tone: line.emphasis ?? "strong"
+            },
+            `total-${i}-${line.label}`
+          );
+        }
+        const visible = flattenNodes(line.nodes, isOpen);
+        return /* @__PURE__ */ jsx(React2__default.Fragment, { children: visible.map((node) => /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: node.label,
+            code: node.code || void 0,
+            depth: node.depth,
+            values: node.rollup,
+            total: node.total,
+            periods,
+            currency,
+            expandable: node.children.length > 0,
+            open: isOpen(node),
+            onToggle: () => toggle(node.key),
+            synthetic: node.synthetic
+          },
+          node.key
+        )) }, `section-${line.section}`);
+      }) })
+    ] }) })
+  ] });
+}
 var CHART_TYPES = { line: "line", bar: "bar", area: "area", donut: "pie" };
 function CardChrome({
   card,
@@ -657,7 +1105,7 @@ function AnalyticsCard({ card, className, hideOpen }) {
         /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Not connected yet" })
       ] });
     }
-    if (loading && !result) {
+    if (loading) {
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24" }),
         /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
@@ -717,6 +1165,19 @@ function AnalyticsCard({ card, className, hideOpen }) {
       }
       case "table":
         return /* @__PURE__ */ jsx(MiniTable, { rows, card, currency, limit: card.viz.limit ?? 5 });
+      case "statement": {
+        if (!card.viz.statement) return /* @__PURE__ */ jsx(EmptyState, {});
+        return /* @__PURE__ */ jsx(
+          StatementTable,
+          {
+            rows,
+            def: { ...card.viz.statement, defaultDepth: 0 },
+            currency,
+            formatPeriod: (p) => formatBucket(p, "month"),
+            dense: true
+          }
+        );
+      }
       case "funnel": {
         const measure = measures[0];
         if (!measure || !category) return /* @__PURE__ */ jsx(EmptyState, {});
@@ -876,22 +1337,25 @@ function FilterValues({
     return /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: t("analytics.filters.noOptions") });
   }
   return /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-0.5 overflow-y-auto", children: options.map((o) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted", children: [
-    /* @__PURE__ */ jsx(
-      "input",
+    multi ? /* @__PURE__ */ jsx(
+      Checkbox,
       {
-        type: multi ? "checkbox" : "radio",
-        name: filter.key,
         checked: selected.has(o.value),
+        "aria-label": o.label,
         onChange: () => {
-          if (!multi) {
-            onChange(filter.key, selected.has(o.value) ? void 0 : o.value);
-            return;
-          }
           const next = new Set(selected);
           if (next.has(o.value)) next.delete(o.value);
           else next.add(o.value);
           onChange(filter.key, [...next]);
-        },
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        name: filter.key,
+        checked: selected.has(o.value),
+        onChange: () => onChange(filter.key, selected.has(o.value) ? void 0 : o.value),
         className: "h-3.5 w-3.5"
       }
     ),
@@ -901,13 +1365,16 @@ function FilterValues({
 function AnalyticsFilterPicker({ filters }) {
   const t = useTranslation();
   const { state, setFilters, clearFilters } = useAnalyticsContext();
+  const surface = useToolbarSurface();
+  const inline = surface === "panel";
+  const closePanel = useToolbarPanelClose();
   const [open, setOpen] = React2.useState(false);
   const [search, setSearch] = React2.useState("");
   const [openGroup, setOpenGroup] = React2.useState(null);
   const [draft, setDraft] = React2.useState(state.filters);
   React2.useEffect(() => {
-    if (open) setDraft(state.filters);
-  }, [open, state.filters]);
+    if (open || inline) setDraft(state.filters);
+  }, [open, inline, state.filters]);
   const groups = React2.useMemo(() => {
     const q = search.trim().toLowerCase();
     const matching = q ? filters.filter((f) => f.label.toLowerCase().includes(q)) : filters;
@@ -920,39 +1387,36 @@ function AnalyticsFilterPicker({ filters }) {
   }, [filters, search, t]);
   const activeCount = Object.keys(state.filters).length;
   if (filters.length === 0) return null;
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(ToolbarButton, { icon: SlidersHorizontal, caret: false, children: [
-      t("analytics.filters"),
-      activeCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground", children: activeCount }) : null
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: inline ? "pb-2" : "border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: t("analytics.filters.search"),
+          className: "h-8 pl-8 text-sm"
+        }
+      )
     ] }) }),
-    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-80 p-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            placeholder: t("analytics.filters.search"),
-            className: "h-8 pl-8 text-sm"
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto p-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: t("analytics.filters.none") }) : groups.map(([group, groupFilters]) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: inline ? "min-h-0 flex-1 overflow-y-auto" : "max-h-80 overflow-y-auto p-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: t("analytics.filters.none") }) : groups.map(([group, groupFilters]) => {
+      const expanded = inline || openGroup === group;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        inline ? /* @__PURE__ */ jsx("p", { className: "px-1 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: group }) : /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => setOpenGroup((g) => g === group ? null : group),
-            "aria-expanded": openGroup === group,
+            "aria-expanded": expanded,
             className: "flex w-full items-center justify-between rounded-md px-2 py-2 text-sm hover:bg-muted",
             children: [
               /* @__PURE__ */ jsx("span", { className: "font-medium", children: group }),
-              /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-3.5 w-3.5 text-muted-foreground transition-transform", openGroup === group && "rotate-90") })
+              /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-3.5 w-3.5 text-muted-foreground transition-transform", expanded && "rotate-90") })
             ]
           }
         ),
-        openGroup === group ? /* @__PURE__ */ jsx("div", { className: "space-y-3 px-2 pb-3 pt-1", children: groupFilters.map((f) => /* @__PURE__ */ jsxs("div", { children: [
+        expanded ? /* @__PURE__ */ jsx("div", { className: inline ? "space-y-4 px-1 pb-2" : "space-y-3 px-2 pb-3 pt-1", children: groupFilters.map((f) => /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: f.label }),
           /* @__PURE__ */ jsx(
             FilterValues,
@@ -968,35 +1432,79 @@ function AnalyticsFilterPicker({ filters }) {
             }
           )
         ] }, f.key)) }) : null
-      ] }, group)) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t p-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: () => {
-              setDraft({});
-              clearFilters();
-              setOpen(false);
-            },
-            children: t("analytics.filters.clear")
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => {
-          setFilters(draft);
-          setOpen(false);
-        }, children: t("analytics.filters.apply") })
-      ] })
+      ] }, group);
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center justify-between gap-2 border-t",
+      inline ? "mt-2 pt-3" : "p-2"
+    ), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            setDraft({});
+            clearFilters();
+            setOpen(false);
+            closePanel();
+          },
+          children: t("analytics.filters.clear")
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => {
+        setFilters(draft);
+        setOpen(false);
+        closePanel();
+      }, children: t("analytics.filters.apply") })
     ] })
   ] });
+  if (inline) return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-col", children: panel });
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(ToolbarButton, { icon: SlidersHorizontal, caret: false, children: [
+      t("analytics.filters"),
+      activeCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground", children: activeCount }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-80 p-0", children: panel })
+  ] });
 }
 function AnalyticsRangeControl() {
   const t = useTranslation();
+  const surface = useToolbarSurface();
   const locale = getCurrentLocale();
   const { state, preset, setPreset, setDateRange } = useAnalyticsContext();
   const custom = preset === "custom";
   const span = formatSpan(state.dateRange.from, state.dateRange.to, locale);
+  if (surface === "panel") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("analytics.range.from") }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: state.dateRange.from,
+            onChange: (from) => setDateRange({
+              from,
+              to: from > state.dateRange.to ? from : state.dateRange.to
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("analytics.range.to") }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: state.dateRange.to,
+            onChange: (to) => setDateRange({
+              from: to < state.dateRange.from ? to : state.dateRange.from,
+              to
+            })
+          }
+        )
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     RangeControl,
     {
@@ -1087,24 +1595,122 @@ function ActiveFilterChip({ label, value, filterKey }) {
   const t = useTranslation();
   const { setFilter } = useAnalyticsContext();
   const text = Array.isArray(value) ? value.length === 1 ? String(value[0]) : t("analytics.filters.selected", { count: value.length }) : String(value);
-  return /* @__PURE__ */ jsxs("span", { className: "inline-flex h-[26px] shrink-0 items-center gap-1 rounded-full border border-primary/30 bg-primary/10 py-1 pl-2.5 pr-1 text-xs font-medium text-primary", children: [
-    /* @__PURE__ */ jsxs("span", { className: "opacity-70", children: [
-      label,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: text }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setFilter(filterKey, void 0),
-        "aria-label": `${t("analytics.filters.remove")}: ${label}`,
-        className: "rounded-full p-0.5 transition-colors hover:bg-primary/20",
-        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-      }
-    )
-  ] });
+  return (
+    // `min-w-0` no lugar de `shrink-0`: na faixa estreita do celular a pastilha
+    // inteira não cabia, e o que sobrava fora da tela era justamente o × — um
+    // filtro visível que não se consegue tirar é pior do que um escondido.
+    // Encolhendo, quem encurta é o VALOR (truncate), e o botão de remover é
+    // `shrink-0`, então sobrevive a qualquer largura.
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex h-[26px] min-w-0 items-center gap-1 rounded-full border border-primary/30 bg-primary/10 py-1 pl-2.5 pr-1 text-xs font-medium text-primary", children: [
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 opacity-70", children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate", children: text }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setFilter(filterKey, void 0),
+          "aria-label": `${t("analytics.filters.remove")}: ${label}`,
+          className: "shrink-0 rounded-full p-0.5 transition-colors hover:bg-primary/20",
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+        }
+      )
+    ] })
+  );
+}
+var DATE_RANGE_PRESETS = [
+  "today",
+  "yesterday",
+  "last_7_days",
+  "last_30_days",
+  "last_90_days",
+  "this_month",
+  "last_month",
+  "this_year"
+];
+function formatSpan2(from, to, locale) {
+  const fmt = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "short" });
+  const a = fmt.format(/* @__PURE__ */ new Date(`${from}T12:00:00`));
+  const b = fmt.format(/* @__PURE__ */ new Date(`${to}T12:00:00`));
+  return a === b ? a : `${a} \u2013 ${b}`;
+}
+function DateRangeControl({
+  value,
+  onChange,
+  preset = "custom",
+  onPresetChange,
+  presets = DATE_RANGE_PRESETS
+}) {
+  const t = useTranslation();
+  const locale = getCurrentLocale();
+  const custom = preset === "custom";
+  const pick = (p) => {
+    onPresetChange?.(p);
+    onChange(resolveRangePreset(p));
+  };
+  return /* @__PURE__ */ jsx(
+    RangeControl,
+    {
+      options: presets.map((p) => ({ value: p, label: t(`analytics.range.${p}`) })),
+      value: preset,
+      onChange: (p) => pick(p),
+      label: custom ? t("analytics.range.custom") : void 0,
+      span: custom ? void 0 : formatSpan2(value.from, value.to, locale),
+      extra: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownItem, { onSelect: () => {
+          onPresetChange?.("custom");
+          onChange({ ...value });
+        }, children: [
+          t("analytics.range.custom"),
+          custom ? /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" }) : null
+        ] })
+      ] }),
+      children: custom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            variant: "toolbar",
+            value: value.from,
+            onChange: (from) => onChange({ from, to: from > value.to ? from : value.to })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            variant: "toolbar",
+            value: value.to,
+            onChange: (to) => onChange({ from: to < value.from ? to : value.from, to })
+          }
+        )
+      ] }) : null
+    }
+  );
 }
+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 +1722,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 +1746,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 +1862,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 +1890,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 +1958,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 +1973,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 +1995,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 +2051,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 +2194,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, DATE_RANGE_PRESETS, DateRangeControl, PracticeOverlay, STATEMENT_ROW_CAP, StatementTable, TourSpotlight, autoGrain, buildStatement, collectFilters, compareCodes, comparisonRange, createBatchingProvider, currentStop, defaultOpenKeys, deltaPercent, fireConfetti, flattenNodes, formatAnalyticsValue, formatBucket, formatCompact, formatDuration, getTourNavigator, isEngineMissing, nextPracticeStep, num, parentCode, parseDay, rangeLengthDays, resolveRangePreset, resolveRatios, resolveRowRatios, setTourNavigator, toBreakdown, toChartData, toDayString, toSpark, tourAnchor, trendOf, useAnalyticsAllRows, useAnalyticsCard, useAnalyticsCardRows, useAnalyticsContext, useAnalyticsContextOptional, usePracticeStore, useTourStore, vizCategory, vizMeasures };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map