@squadbase/vantage 0.6.2-dev1.5aae04e → 0.6.2-dev1.83509f7

package/dist/{chunk-HKSVYMYJ.js → chunk-MYHFZYS4.js}

@@ -1,4 +1,4 @@
-import { Tooltip, TooltipTrigger, TooltipContent, Badge, SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Skeleton, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Checkbox, Card, CardHeader, CardDescription, CardTitle, CardAction, CardFooter } from './chunk-XPQSTZUU.js';
+import { Tooltip, TooltipTrigger, TooltipContent, Badge, SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Skeleton, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Checkbox, Card, CardHeader, CardDescription, CardTitle, CardAction, CardFooter } from './chunk-7S52M2SL.js';
 import { Button } from './chunk-PDOBHMUQ.js';
 import { cn } from './chunk-U736PVHY.js';
 import { forwardRef, useState, useEffect, createContext, useId, useRef, useMemo, useCallback, useContext, Fragment as Fragment$1 } from 'react';
@@ -288,11 +288,11 @@ var PageShellHeader = forwardRef(
           children,
           updatedAt !== void 0 && updatedAt !== null ? /* @__PURE__ */ jsx("div", { "data-slot": "page-shell-updated-at", className: "ml-auto max-w-full shrink-0 text-right", children: /* @__PURE__ */ jsx(UpdatedAt, { at: updatedAt, variant: updatedAtVariant, timeZone }) }) : null,
           hasChips ? /* @__PURE__ */ jsxs("div", { "data-slot": "page-shell-chips", className: "order-1 flex basis-full flex-wrap gap-1.5", children: [
-            source ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "h-auto max-w-full whitespace-normal", children: [
+            source ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "h-auto max-w-full whitespace-normal text-muted-foreground", children: [
               "\u51FA\u5178\uFF1A",
               source
             ] }) : null,
-            periodText && periodText !== EMPTY_VALUE ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "tabular-nums", children: periodText }) : null
+            periodText && periodText !== EMPTY_VALUE ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "tabular-nums text-muted-foreground", children: periodText }) : null
           ] }) : null,
           hasStatus ? /* @__PURE__ */ jsx("div", { "data-slot": "page-shell-status", className: "order-2 min-w-0 basis-full", children: status }) : null
         ]
@@ -389,11 +389,11 @@ var PageShellSummary = forwardRef(
 );
 PageShellSummary.displayName = "PageShellSummary";
 var summaryCardTones = {
-  positive: "border-positive/30 bg-positive-subtle [&>svg]:text-positive",
-  negative: "border-negative/30 bg-negative-subtle [&>svg]:text-negative",
-  warning: "border-warning/30 bg-warning-subtle [&>svg]:text-warning",
-  info: "border-info/30 bg-info-subtle [&>svg]:text-info",
-  neutral: "border-neutral/30 bg-neutral-subtle [&>svg]:text-neutral",
+  positive: "border-positive/20 dark:border-positive/25 bg-positive-subtle [&>svg]:text-positive",
+  negative: "border-negative/20 dark:border-negative/25 bg-negative-subtle [&>svg]:text-negative",
+  warning: "border-warning/20 dark:border-warning/25 bg-warning-subtle [&>svg]:text-warning",
+  info: "border-info/20 dark:border-info/25 bg-info-subtle [&>svg]:text-info",
+  neutral: "border-neutral/20 dark:border-neutral/25 bg-neutral-subtle [&>svg]:text-neutral",
   violet: "border-chart-4/30 bg-chart-4/5 [&>svg]:text-chart-4",
   pink: "border-chart-5/30 bg-chart-5/5 [&>svg]:text-chart-5"
 };
@@ -667,7 +667,7 @@ function SampleBadge({ label: label2 = DEFAULT_SAMPLE_LABEL, className, ...props
     {
       "data-slot": "sample-badge",
       title: SAMPLE_TITLE,
-      className: cn("border-warning/30 bg-warning-subtle text-warning align-middle", className),
+      className: cn("border-warning/20 dark:border-warning/25 bg-warning-subtle text-warning align-middle", className),
       ...props,
       children: label2
     }
@@ -810,6 +810,15 @@ function DashboardCardPreset({
 var CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))";
 var ChartFrameContext = createContext(false);
 var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+var tokenScopes = /* @__PURE__ */ new WeakMap();
+var OPTION_COLOR_TOKENS = [
+  "--background",
+  "--card",
+  "--muted",
+  "--primary",
+  "--destructive",
+  ...["positive", "negative", "warning", "neutral", "info"].flatMap((tone) => ["", "-fill", "-subtle"].map((suffix) => `--${tone}${suffix}`))
+];
 var normalizeContext;
 var ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i;
 function toCanvasColor(value) {
@@ -837,7 +846,7 @@ function toCanvasColor(value) {
 }
 function readChartTokens(el) {
   if (typeof document === "undefined") return null;
-  const target = document.documentElement;
+  const target = el ?? document.documentElement;
   if (!target) return null;
   const styles = getComputedStyle(target);
   const read = (name) => toCanvasColor(styles.getPropertyValue(name));
@@ -846,8 +855,10 @@ function readChartTokens(el) {
     const color = read(token);
     if (color) series.push(color);
   }
-  return {
+  const tokens = {
     series,
+    colors: Object.fromEntries(OPTION_COLOR_TOKENS.map((name) => [name, styles.getPropertyValue(name).trim()])),
+    surface: readChartSurface(target),
     ...styles.fontFamily ? { fontFamily: styles.fontFamily } : {},
     foreground: read("--foreground"),
     mutedForeground: read("--muted-foreground"),
@@ -855,13 +866,15 @@ function readChartTokens(el) {
     popover: read("--popover"),
     popoverForeground: read("--popover-foreground")
   };
+  tokenScopes.set(tokens, target);
+  return tokens;
 }
 function sameChartTokens(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
-  return a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.fontFamily === b.fontFamily && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
+  return tokenScopes.get(a) === tokenScopes.get(b) && a.surface === b.surface && Object.keys(a.colors ?? {}).length === Object.keys(b.colors ?? {}).length && Object.entries(a.colors ?? {}).every(([name, value]) => b.colors?.[name] === value) && a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.fontFamily === b.fontFamily && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
 }
-function watchChartTokens(onChange) {
+function watchChartTokens(onChange, scope) {
   if (typeof document === "undefined") return () => {
   };
   let frame = 0;
@@ -874,8 +887,9 @@ function watchChartTokens(onChange) {
   };
   const themeObserver = new MutationObserver(schedule);
   const attributeFilter = ["class", "style", "data-theme"];
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter });
-  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter });
+  for (let node = scope ?? document.body ?? document.documentElement; node; node = node.parentElement) {
+    themeObserver.observe(node, { attributes: true, attributeFilter });
+  }
   const styleObserver = new MutationObserver(schedule);
   if (document.head) {
     styleObserver.observe(document.head, {
@@ -944,19 +958,20 @@ function buildChartTheme(tokens) {
     }
   };
 }
-function useChartTokens() {
+function useChartTokens(scope) {
   const [tokens, setTokens] = useState(() => readChartTokens());
   const tokensRef = useRef(tokens);
   useEffect(() => {
+    const target = scope && "current" in scope ? scope.current : scope;
     const sync = () => {
-      const next = readChartTokens();
+      const next = readChartTokens(target);
       if (sameChartTokens(tokensRef.current, next)) return;
       tokensRef.current = next;
       setTokens(next);
     };
     sync();
-    return watchChartTokens(sync);
-  }, []);
+    return watchChartTokens(sync, target);
+  }, [scope]);
   return tokens;
 }
 var SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/;
@@ -969,12 +984,13 @@ function resolveChartColors(colors, tokens) {
     if (token) return tokens?.series[Number(token[1]) - 1] ?? "";
     if (TONE_NAME_RE.test(color.trim())) {
       if (typeof document === "undefined") return "";
-      return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue(`--${color.trim()}`)) ?? "";
+      const target = (tokens && tokenScopes.get(tokens)) ?? document.documentElement;
+      return toCanvasColor(getComputedStyle(target).getPropertyValue(`--${color.trim()}`)) ?? "";
     }
     if (typeof document === "undefined") return color;
     let value = color.trim();
     const cssVar = CSS_VAR_RE.exec(value);
-    const styles = getComputedStyle(document.documentElement);
+    const styles = getComputedStyle((tokens && tokenScopes.get(tokens)) ?? document.documentElement);
     if (cssVar) {
       value = styles.getPropertyValue(cssVar[1]).trim() || (cssVar[2] ?? "").trim();
     } else if (value.includes("var(")) {
@@ -1000,11 +1016,12 @@ function readChartSurface(el) {
       if (color) return color;
     }
   }
-  return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--background"));
+  return toCanvasColor(getComputedStyle(el ?? document.documentElement).getPropertyValue("--background"));
 }
 var WIDTH_BUCKET = 40;
 function useChartSurface(forwarded, tokens) {
   const [node, setNode] = useState(null);
+  const scopedTokens = useChartTokens(node);
   const [surface, setSurface] = useState(void 0);
   const [width, setWidth] = useState(void 0);
   const ref = useCallback(
@@ -1018,7 +1035,7 @@ function useChartSurface(forwarded, tokens) {
   useEffect(() => {
     if (!node) return;
     setSurface(readChartSurface(node) ?? void 0);
-  }, [node, tokens]);
+  }, [node, tokens, scopedTokens]);
   useEffect(() => {
     if (!node || typeof ResizeObserver === "undefined") return;
     const update = (w) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET);
@@ -1027,7 +1044,7 @@ function useChartSurface(forwarded, tokens) {
     observer.observe(node);
     return () => observer.disconnect();
   }, [node]);
-  return { ref, surface, width };
+  return { ref, surface, width, tokens: scopedTokens };
 }
 var DEFAULT_CHART_HEIGHT = 288;
 var DEFAULT_EMPTY_TITLE = "\u8868\u793A\u3067\u304D\u308B\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093";
@@ -1242,6 +1259,88 @@ function echartSetOptionOpts(prev, next) {
   for (const key of [...Object.keys(prev), ...Object.keys(next)]) if (COMPONENT_MAIN_TYPES.has(key)) types.add(key);
   return { notMerge: false, replaceMerge: [...types], lazyUpdate: true };
 }
+var ID_TYPES = [
+  "title",
+  "legend",
+  "grid",
+  "xAxis",
+  "yAxis",
+  "polar",
+  "radiusAxis",
+  "angleAxis",
+  "radar",
+  "dataZoom",
+  "visualMap",
+  "geo",
+  "singleAxis",
+  "calendar"
+];
+var createStableIdState = () => ({ ids: /* @__PURE__ */ new Map(), order: /* @__PURE__ */ new Map() });
+function shapeOf(v) {
+  if (Array.isArray(v)) return "[]";
+  if (!v || typeof v !== "object" || Object.getPrototypeOf(v) !== Object.prototype) return ".";
+  const o = v;
+  return `{${Object.keys(o).filter((k) => o[k] !== void 0).sort().map((k) => k === "type" || k === "id" ? `${k}=${String(o[k])}` : `${k}:${shapeOf(o[k])}`).join(",")}}`;
+}
+function withStableIds(option, state = createStableIdState()) {
+  const out = { ...option };
+  const taken = /* @__PURE__ */ new Set();
+  const list = (v) => Array.isArray(v) ? v : v && typeof v === "object" ? [v] : null;
+  const give = (key, pick) => {
+    const items = list(out[key]);
+    if (!items) return;
+    const used = new Set(items.flatMap((c) => c && c.id != null ? [String(c.id)] : []));
+    const bases = items.map((c, i) => {
+      if (!c || typeof c !== "object" || c.id != null) return null;
+      let base = pick(c, i);
+      for (let n = 2; used.has(base) || taken.has(`${key}\0${base}`); n++) base = `${pick(c, i)}#${n}`;
+      used.add(base);
+      taken.add(`${key}\0${base}`);
+      return base;
+    });
+    const prevOrder = state.order.get(key) ?? [];
+    const cur = bases.filter((b) => b !== null);
+    const inOrder = cur.length === prevOrder.length && cur.every((b, i) => b === prevOrder[i]);
+    state.order.set(key, cur);
+    out[key] = items.map((c, i) => {
+      const base = bases[i];
+      if (base == null) return c;
+      const shape = shapeOf(c);
+      const prev = state.ids.get(base);
+      const version = !prev ? 0 : prev.shape === shape && inOrder ? prev.version : prev.version + 1;
+      state.ids.set(base, { shape, version });
+      return { ...c, id: version ? `${base}~v${version}` : base };
+    });
+  };
+  give("series", (c, i) => `series:${typeof c.name === "string" && c.name ? c.name : i}`);
+  for (const key of ID_TYPES) give(key, (_c, i) => `${key}:${i}`);
+  return out;
+}
+function snapshotOption(v) {
+  if (Array.isArray(v)) return v.map(snapshotOption);
+  if (v && typeof v === "object") {
+    const proto = Object.getPrototypeOf(v);
+    if (proto === Object.prototype || proto === null) {
+      return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, snapshotOption(x)]));
+    }
+  }
+  return v;
+}
+function optionEquals(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  if (Array.isArray(a)) {
+    const bb = b;
+    return a.length === bb.length && a.every((v, i) => optionEquals(v, bb[i]));
+  }
+  if (a instanceof Date || b instanceof Date) return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+  const pa = Object.getPrototypeOf(a);
+  if (pa !== Object.prototype && pa !== null || Object.getPrototypeOf(b) !== pa) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  return ka.length === kb.length && ka.every((k) => Object.hasOwn(b, k) && optionEquals(a[k], b[k]));
+}
 function withGraphicFont(option, fontFamily) {
   const graphic = option.graphic;
   if (!fontFamily || !Array.isArray(graphic)) return option;
@@ -1285,31 +1384,11 @@ var EChart = forwardRef(function EChart2({
   const containerRef = useRef(null);
   const [instance, setInstance] = useState(null);
   const [copied, setCopied] = useState(false);
-  const [tokens, setTokens] = useState(() => readChartTokens());
+  const tokens = useChartTokens(containerRef);
   const reducedMotion = usePrefersReducedMotion();
   const appliedRef = useRef(null);
-  const tokensRef = useRef(tokens);
-  useEffect(() => {
-    if (theme !== void 0) return;
-    const sync = () => {
-      const base = readChartTokens();
-      const font = containerRef.current ? getComputedStyle(containerRef.current).fontFamily : "";
-      const next = base && font ? { ...base, fontFamily: font } : base;
-      if (sameChartTokens(tokensRef.current, next)) return;
-      tokensRef.current = next;
-      setTokens(next);
-    };
-    sync();
-    const stop = watchChartTokens(sync);
-    const ancestors = new MutationObserver(sync);
-    for (let node = containerRef.current?.parentElement; node; node = node.parentElement) {
-      ancestors.observe(node, { attributes: true, attributeFilter: ["class", "style"] });
-    }
-    return () => {
-      stop();
-      ancestors.disconnect();
-    };
-  }, [theme]);
+  const snapshotRef = useRef(null);
+  const idStateRef = useRef(createStableIdState());
   const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
   const resolvedTheme = theme ?? autoTheme;
   useEffect(() => {
@@ -1317,6 +1396,7 @@ var EChart = forwardRef(function EChart2({
     if (!container) return;
     const inst = init(container, resolvedTheme, { renderer: "canvas" });
     appliedRef.current = null;
+    snapshotRef.current = null;
     container.dataset.rendering = "";
     inst.on("finished", () => {
       delete container.dataset.rendering;
@@ -1337,19 +1417,25 @@ var EChart = forwardRef(function EChart2({
     };
   }, [resolvedTheme]);
   useEffect(() => {
-    if (!instance) return;
+    if (!instance || instance.isDisposed()) return;
+    const prepared = withGraphicFont(
+      withMotionPreference(option, reducedMotion),
+      theme === void 0 ? tokens?.fontFamily : void 0
+    );
+    if (snapshotRef.current && optionEquals(snapshotRef.current, prepared)) return;
     if (containerRef.current) containerRef.current.dataset.rendering = "";
-    const next = withGraphicFont(withMotionPreference(option, reducedMotion), theme === void 0 ? tokens?.fontFamily : void 0);
+    const next = withStableIds(prepared, idStateRef.current);
     instance.setOption(next, echartSetOptionOpts(appliedRef.current, next));
     appliedRef.current = next;
+    snapshotRef.current = snapshotOption(prepared);
   }, [instance, option, reducedMotion, theme, tokens?.fontFamily]);
   useEffect(() => {
-    if (!instance) return;
+    if (!instance || instance.isDisposed()) return;
     if (loading) instance.showLoading();
     else instance.hideLoading();
   }, [instance, loading]);
   useEffect(() => {
-    if (!instance || !onEvents) return;
+    if (!instance || instance.isDisposed() || !onEvents) return;
     const entries = Object.entries(onEvents);
     for (const [event, handler] of entries) {
       instance.on(event, handler);
@@ -3252,8 +3338,7 @@ function AreaChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
   const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
@@ -3435,8 +3520,7 @@ function BarChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
   const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
@@ -3620,8 +3704,7 @@ function LineChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
   const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
   const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
@@ -3809,7 +3892,7 @@ function DonutChartImpl({
   const maxSlices = donutOptions?.maxSlices;
   const showLegend = donutOptions?.showLegend ?? true;
   const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format2), [valueFormatterProp, format2]);
-  const tokens = useChartTokens();
+  const { ref: frameRef, tokens } = useChartSurface(ref);
   const slices = useMemo(
     () => donutSlices(data, { index: labelKey, value: valueKey, colors, maxSlices, otherColor: CHART_OTHER_COLOR }),
     [data, labelKey, valueKey, colors, maxSlices]
@@ -3875,7 +3958,7 @@ function DonutChartImpl({
     ChartFrame,
     {
       ...chartRootProps(rest),
-      ref,
+      ref: frameRef,
       title,
       summary: resolvedSummary,
       isLoading: isLoading ?? loading ?? false,
@@ -4191,8 +4274,14 @@ function blockColorToCss(color) {
 }
 var NO_ROWS7 = [];
 var Tracker = forwardRef(function Tracker2({ data = NO_ROWS7, defaultColor, hoverEffect = true, className, ...props }, ref) {
+  const containerRef = useRef(null);
+  const setRef = useCallback((node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") return ref(node);
+    if (ref) ref.current = node;
+  }, [ref]);
   const fallback = defaultColor ? blockColorToCss(defaultColor) : DEFAULT_BLOCK_COLOR;
-  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "tracker", className: cn("flex h-6 w-full gap-0.5", className), ...props, children: data.map((block, i) => {
+  return /* @__PURE__ */ jsx("div", { ref: setRef, "data-slot": "tracker", className: cn("flex h-6 w-full gap-0.5", className), ...props, children: data.map((block, i) => {
     const blockClass = cn(
       "h-full min-w-0 flex-1 rounded-[2px]",
       hoverEffect && "transition-opacity hover:opacity-60 motion-reduce:transition-none"
@@ -4206,7 +4295,7 @@ var Tracker = forwardRef(function Tracker2({ data = NO_ROWS7, defaultColor, hove
           render: /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", role: "img", tabIndex: 0, "aria-label": block.tooltip, className: blockClass, style })
         }
       ),
-      /* @__PURE__ */ jsx(TooltipContent, { children: block.tooltip })
+      /* @__PURE__ */ jsx(TooltipContent, { container: containerRef, children: block.tooltip })
     ] }, block.key ?? i) : /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", className: blockClass, style }, block.key ?? i);
   }) });
 });
@@ -4583,8 +4672,7 @@ function WaterfallChartImpl({
   ...rest
 }, ref) {
   const valueKey = categories[0] ?? "";
-  const tokens = useChartTokens();
-  const { ref: frameRef, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, width: plotWidth, tokens } = useChartSurface(ref);
   const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format2), [valueFormatterProp, format2]);
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatterProp, format2), [valueFormatterProp, format2]);
   const steps = useMemo(() => waterfallSteps(data, { index, value: valueKey, totals, mode }), [data, index, valueKey, totals, mode]);
@@ -4983,8 +5071,7 @@ function ScatterChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, width: plotWidth, tokens } = useChartSurface(ref);
   const formatters = useMemo(
     () => ({
       x: resolveValueFormatter(valueFormatter, xFormat ?? format2),
@@ -5688,8 +5775,7 @@ function HeatmapImpl({
   ariaLabel,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
   const formatter = useMemo(() => resolveValueFormatter(valueFormatter, format2 ?? "number"), [valueFormatter, format2]);
   const model = useMemo(
     () => buildHeatmapModel({ data, x, y, value, xLabels, yLabels, flag, scale, minValue, maxValue }),
@@ -7404,7 +7490,7 @@ var deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-4xl px-2 py-0.5 text-xs font-semibold [&>svg]:size-3",
+        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5"
       },
       sentiment: {
@@ -7414,9 +7500,9 @@ var deltaVariants = cva(
       }
     },
     compoundVariants: [
-      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
-      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
-      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" }
+      { variant: "badge", sentiment: "positive", className: "border-positive/20 bg-positive-subtle dark:border-positive/25" },
+      { variant: "badge", sentiment: "negative", className: "border-negative/20 bg-negative-subtle dark:border-negative/25" },
+      { variant: "badge", sentiment: "neutral", className: "border-neutral/20 bg-neutral-subtle dark:border-neutral/25" }
     ],
     defaultVariants: {
       variant: "badge",
@@ -7809,8 +7895,8 @@ function updatedAtText(updatedAt, display, locale, now, timeZone) {
 var trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
   variants: {
     sentiment: {
-      positive: "text-chart-1",
-      negative: "text-primary",
+      positive: "text-positive",
+      negative: "text-negative",
       neutral: "text-muted-foreground"
     }
   },
@@ -7870,11 +7956,11 @@ var legacyColorTones = {
   blue: "info"
 };
 var toneStyles = {
-  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive" },
-  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative" },
-  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning" },
-  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info" },
-  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral" }
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive", border: "border-positive/20 dark:border-positive/25" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative", border: "border-negative/20 dark:border-negative/25" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning", border: "border-warning/20 dark:border-warning/25" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info", border: "border-info/20 dark:border-info/25" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral", border: "border-neutral/20 dark:border-neutral/25" }
 };
 var resolveTone = (color) => {
   if (color === void 0) return "neutral";
@@ -7891,10 +7977,10 @@ var StatusBadge = forwardRef(function StatusBadge2({ status, label: label2, colo
       ref,
       "data-slot": "status-badge",
       variant: "outline",
-      className: cn("gap-1.5 border-transparent", style.bg, style.text, className),
+      className: cn("gap-1.5 rounded-md", style.border, style.bg, style.text, className),
       "aria-label": displayLabel,
       children: [
-        /* @__PURE__ */ jsx("span", { className: cn("inline-block size-2 rounded-full", style.dot), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn("inline-block size-1.5 rounded-full", style.dot), "aria-hidden": "true" }),
         displayLabel
       ]
     }
@@ -7915,5 +8001,5 @@ var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref)
 Placeholder.displayName = "Placeholder";
 
 export { AppShell, AreaChart, BarChart2 as BarChart, BarList, COMPARISON_LABELS, CategoryBar, ChartFrame, DEFAULT_LOCALE, DEFAULT_SAMPLE_LABEL, DELTA_NOT_COMPARABLE, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTableExport, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, Delta, DonutChart, EChart, EMPTY_VALUE, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, Heatmap, KpiCard, Legend, LineChart2 as LineChart, MINUS_SIGN, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, ProgressCircle, RECORD_MIN_POINTS, SampleBadge, SampleClaim, SampleData, ScatterChart, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, Tracker, TrendIndicator, UpdatedAt, WaterfallChart, comparisonBaseline, comparisonLabel, computeComparison, computeTargetProgress, defaultChangeDisplay, defaultPresets, deltaVariants, detectRecord, fillKpiTemplate, flattenOptions, formatChange, formatChangeAmount, formatDate, formatDateRange, formatDatesInText, formatDelta, formatKind, formatPoints, formatRelativeTime, formatValue, funnelStepsVariants, inferPeriodGrain, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, tableToCsv, toCsv, toValueFormatter, toneForValue, useDataTable, useResolvedChartColors, useSampleMark };
-//# sourceMappingURL=chunk-HKSVYMYJ.js.map
-//# sourceMappingURL=chunk-HKSVYMYJ.js.map
+//# sourceMappingURL=chunk-MYHFZYS4.js.map
+//# sourceMappingURL=chunk-MYHFZYS4.js.map