@squadbase/vantage 0.7.1-dev1.cee9cbf → 0.7.1-dev1.db30901

package/dist/{chunk-YJQCB3UP.js → chunk-SC7K2RD6.js}

@@ -1,7 +1,7 @@
 import { ChartFrameContext, useChartSurface, resolveChartColors, resolveFillColors, EChart, CHART_OTHER_COLOR } from './chunk-EG4PX726.js';
 import { Sparkline } from './chunk-P2KIHF65.js';
 import { formatDateRange, EMPTY_VALUE, toValueFormatter, formatDate, formatValue, formatPoints, formatKind, formatDelta, MINUS_SIGN, DEFAULT_LOCALE, formatDatesInText } from './chunk-XRKSIC5Z.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, Empty, Checkbox, Card, CardHeader, CardDescription, CardTitle, CardAction, CardFooter } from './chunk-MQUIAP66.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, Empty, Checkbox, Card, CardHeader, CardDescription, CardTitle, CardAction, CardFooter } from './chunk-5HBUBVQ3.js';
 import { useLocale, uiLanguage, Button, weekStartsOn, resolveLocale, defaultFiscalYearStartMonth, FALLBACK_LOCALE } from './chunk-ROHNXP7J.js';
 import { cn } from './chunk-U736PVHY.js';
 import { forwardRef, useState, useEffect, createContext, useId, useMemo, useRef, useCallback, Fragment as Fragment$1, useContext, useInsertionEffect, useLayoutEffect } from 'react';
@@ -12,7 +12,7 @@ import { use, registerMap } from 'echarts/core';
 import { GraphicComponent, VisualMapComponent, GeoComponent } from 'echarts/components';
 import { ScatterChart as ScatterChart$1, HeatmapChart, MapChart, TreemapChart } from 'echarts/charts';
 import 'echarts';
-import { subMonths, subDays, endOfDay, startOfDay, startOfWeek, subWeeks, endOfWeek, startOfMonth, endOfMonth, isSameDay, addMonths, differenceInCalendarDays, parseISO } from 'date-fns';
+import { subMonths, subDays, endOfDay, startOfDay, startOfWeek, subWeeks, endOfWeek, startOfMonth, endOfMonth, isSameDay, subYears, differenceInCalendarDays, addMonths, parseISO } from 'date-fns';
 import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { ja } from 'date-fns/locale';
 
@@ -627,7 +627,7 @@ var DashboardCardFooter = forwardRef(
     {
       ref,
       "data-slot": "dashboard-card-footer",
-      className: cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className),
+      className: cn("-mx-1 -mb-1 flex min-w-0 items-center justify-between gap-3 border-t px-4 py-2.5 text-xs text-muted-foreground tabular-nums group-data-[size=sm]:px-3", className),
       ...props
     }
   )
@@ -653,6 +653,7 @@ function DashboardCardSkeleton({ className }) {
 function DashboardCardPreset({
   title,
   description,
+  headline,
   actions,
   footer,
   children,
@@ -664,15 +665,21 @@ function DashboardCardPreset({
   ...props
 }) {
   const sample = useSampleMark();
-  const hasHeader = title || description || actions || sample;
-  return /* @__PURE__ */ jsx(DashboardCard, { className, subgrid, ...props, children: /* @__PURE__ */ jsxs(SampleClaim, { children: [
+  const hasTitle = Boolean(title || description);
+  const floatingMark = sample && !hasTitle && !headline && !actions;
+  const hasHeader = hasTitle || headline || actions || sample && !floatingMark;
+  return /* @__PURE__ */ jsx(DashboardCard, { className: cn(floatingMark && "relative", className), subgrid, ...props, children: /* @__PURE__ */ jsxs(SampleClaim, { children: [
+    floatingMark && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label, className: "absolute top-2 right-2 z-10" }),
     hasHeader && /* @__PURE__ */ jsxs(DashboardCardHeader, { className: cn(subgrid && "row-start-1", headerClassName), children: [
-      (title || description) && /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
+      (hasTitle || sample) && /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+          title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
+          sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label })
+        ] }),
         description && /* @__PURE__ */ jsx(DashboardCardDescription, { children: description })
       ] }),
-      (actions || sample) && /* @__PURE__ */ jsxs(DashboardCardAction, { className: cn(sample && actions && "flex items-center gap-2"), children: [
-        sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label }),
+      (headline || actions) && /* @__PURE__ */ jsxs(DashboardCardAction, { className: "flex items-center gap-2", children: [
+        headline && /* @__PURE__ */ jsx("div", { "data-slot": "dashboard-card-headline", className: "text-sm tabular-nums text-muted-foreground", children: headline }),
         actions
       ] })
     ] }),
@@ -1630,6 +1637,9 @@ function legendLines(items, plotWidth, reserve = 0) {
   return Math.min(3, Math.max(1, Math.ceil(width / budget)));
 }
 var ACTIONS_RESERVE = 80;
+var BAR_MAX_WIDTH = 40;
+var BAR_RADIUS = 3;
+var STACK_GAP = 1.5;
 var TIME_LABEL_WIDTH = 80;
 var HIGHLIGHT_LABEL_WIDTH = 96;
 var TARGET_NEAR_SHARE = 0.12;
@@ -1760,6 +1770,7 @@ function buildCartesianOption(cfg) {
     const compared = cartesianSeriesValues(data, [categories[compIdx]], "default")[0];
     return categories.map((_, i) => i === compIdx ? compared : main[mainIdx.indexOf(i)]);
   })();
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0));
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : void 0;
   const labels = data.map((row) => String(row[index] ?? ""));
   const rawIndex = data.map((row) => row[index]);
@@ -1875,14 +1886,16 @@ function buildCartesianOption(cfg) {
     const seriesData = pad(values[c]);
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0];
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded;
+      const radius = stacked ? BAR_RADIUS : rounded;
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {};
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar",
         name: category,
         stack: stacked ? "total" : void 0,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: void 0,
         data: seriesData.map((value, i) => {
@@ -2137,6 +2150,14 @@ function buildCartesianOption(cfg) {
       }
     });
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false }
+    });
+  }
   if (forecast2) {
     const forecastSpan = plotWidth && labels.length > 1 ? Math.max(1, plotWidth - (showYAxis ? yAxisWidth ?? Y_AXIS_ESTIMATE : 0) - LINE_RIGHT_MARGIN) / (labels.length - 1) * (labels.length - 1 - lastActual) + LINE_RIGHT_MARGIN : null;
     markLines.push({
@@ -2268,6 +2289,8 @@ function buildCartesianOption(cfg) {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : void 0,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -2356,7 +2379,7 @@ function buildCartesianOption(cfg) {
       show: showLegend,
       top: 0,
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
-      ...plotWidth !== void 0 && plotWidth < NARROW_PLOT_WIDTH ? { left: 0, right: 0 } : { right: reserveActions ? ACTIONS_RESERVE : 0 },
+      ...plotWidth !== void 0 && plotWidth < NARROW_PLOT_WIDTH ? { left: 0, right: 0 } : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 },
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -4386,8 +4409,8 @@ function buildScatterOption(config) {
     legend: {
       show: showLegend,
       ...legendBelow ? { bottom: 0 } : { top: 0 },
-      // With a heading the legend reads from the left, after it; otherwise it sits at the right edge.
-      ...headingWidth > 0 ? { left: headingWidth } : legendBelow ? { left: 0 } : { right: config.reserveActions ? 72 : 0 },
+      // With a heading the legend reads from the left, after it; otherwise it sits at the left edge (as in every chart).
+      ...headingWidth > 0 ? { left: headingWidth } : { left: 0, ...legendBelow ? {} : { right: config.reserveActions ? 72 : 0 } },
       type: "plain",
       icon: "circle",
       itemWidth: 8,
@@ -4631,7 +4654,7 @@ var TEXT11 = {
   ja: { legend: "\u51E1\u4F8B" },
   en: { legend: "Legend" }
 };
-var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", ariaLabel, className }, ref) {
+var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", hidden = [], onHiddenChange, ariaLabel, className }, ref) {
   const t = TEXT11[uiLanguage(useLocale())];
   if (categories.length === 0) return null;
   const swatches = legendColors(categories, colors);
@@ -4643,10 +4666,23 @@ var Legend = forwardRef(function Legend2({ categories, colors, labels, layout =
       "data-layout": layout,
       "aria-label": ariaLabel ?? t.legend,
       className: cn("m-0 flex list-none gap-x-4 gap-y-1 p-0 text-xs", layout === "vertical" ? "flex-col" : "flex-row flex-wrap", className),
-      children: categories.map((category, i) => /* @__PURE__ */ jsxs("li", { "data-slot": "legend-item", className: "flex min-w-0 items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-2.5 shrink-0 rounded-[2px]", style: { background: swatches[i] } }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: labelOf(category, labels) })
-      ] }, category))
+      children: categories.map((category, i) => {
+        const off = hidden.includes(category);
+        const chip = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-2.5 shrink-0 rounded-[2px]", off && "opacity-30"), style: { background: swatches[i] } }),
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate text-muted-foreground", off && "line-through opacity-60"), children: labelOf(category, labels) })
+        ] });
+        return /* @__PURE__ */ jsx("li", { "data-slot": "legend-item", "data-hidden": off || void 0, className: "flex min-w-0 items-center gap-1.5", children: onHiddenChange ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !off,
+            onClick: () => onHiddenChange(off ? hidden.filter((c) => c !== category) : [...hidden, category]),
+            className: "flex min-w-0 cursor-pointer items-center gap-1.5 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: chip
+          }
+        ) : chip }, category);
+      })
     }
   );
 });
@@ -5446,7 +5482,7 @@ function buildPairedOption(cfg) {
   const right = 16;
   const option = {
     ...barOpt,
-    legend: { ...barOpt.legend, show: showLegend, data: legendNames, right: cfg.reserveActions ? 80 : 0 },
+    legend: { ...barOpt.legend, show: showLegend, data: legendNames, left: 0, right: cfg.reserveActions ? 80 : 0 },
     grid: [
       { top, height: upper, left: gridLeft, right, containLabel: true },
       { top: top + upper + PANEL_GAP, bottom: 4, left: gridLeft, right, containLabel: true }
@@ -6214,11 +6250,11 @@ var legacyColorTones = {
   blue: "info"
 };
 var toneStyles = {
-  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" }
+  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" }
 };
 var resolveTone = (color) => {
   if (color === void 0) return "neutral";
@@ -6236,7 +6272,7 @@ var StatusBadge = forwardRef(function StatusBadge2({ status, label: label2, colo
       ref,
       "data-slot": "status-badge",
       variant: "outline",
-      className: cn("gap-1.5 rounded-md", style.border, style.bg, style.text, className),
+      className: cn("gap-1.5 rounded-md border-transparent", style.bg, style.text, className),
       "aria-label": displayLabel,
       children: [
         /* @__PURE__ */ jsx("span", { className: cn("inline-block size-1.5 rounded-full", style.dot), "aria-hidden": "true" }),
@@ -9229,6 +9265,7 @@ var FilterBarContext = createContext(null);
 var TEXT25 = {
   ja: {
     filters: "\u30D5\u30A3\u30EB\u30BF\u30FC",
+    addFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u8FFD\u52A0",
     selected: (count) => ` (${count}\u4EF6\u9078\u629E\u4E2D)`,
     remove: (filter, option) => `${filter}: ${option} \u3092\u524A\u9664`,
     clear: "\u30AF\u30EA\u30A2",
@@ -9236,6 +9273,7 @@ var TEXT25 = {
   },
   en: {
     filters: "Filters",
+    addFilter: "Add filter",
     selected: (count) => ` (${count} selected)`,
     remove: (filter, option) => `Remove ${filter}: ${option}`,
     clear: "Clear",
@@ -9509,6 +9547,11 @@ function fiscalPeriodRange(date, {
   const periodStart = addMonths(startOfMonth(subMonths(date, into)), offset * length);
   return { from: periodStart, to: endOfMonth(addMonths(periodStart, length - 1)) };
 }
+function comparisonRange({ from, to }, kind) {
+  if (kind === "previous-year") return { from: subYears(from, 1), to: subYears(to, 1) };
+  const days = differenceInCalendarDays(to, from) + 1;
+  return { from: subDays(from, days), to: subDays(from, 1) };
+}
 var PRESET_LABELS = {
   ja: {
     today: "\u4ECA\u65E5",
@@ -9546,8 +9589,16 @@ var PRESET_LABELS = {
   }
 };
 var TEXT26 = {
-  ja: { placeholder: "\u671F\u9593\u3092\u9078\u629E", rangeSeparator: " - " },
-  en: { placeholder: "Pick a date range", rangeSeparator: " \u2013 " }
+  ja: {
+    placeholder: "\u671F\u9593\u3092\u9078\u629E",
+    rangeSeparator: " - ",
+    comparison: { "previous-period": "\u524D\u671F\u9593", "previous-year": "\u524D\u5E74\u540C\u671F" }
+  },
+  en: {
+    placeholder: "Pick a date range",
+    rangeSeparator: " \u2013 ",
+    comparison: { "previous-period": "vs. previous period", "previous-year": "vs. same period last year" }
+  }
 };
 var calendarLocale = (locale) => uiLanguage(locale) === "ja" ? ja : void 0;
 function createDatePresets({
@@ -9636,6 +9687,7 @@ var DateRangePicker = forwardRef(
     showPresets = true,
     locale: localeProp,
     fiscalYearStartMonth,
+    comparison,
     maxDate,
     minDate,
     placeholder,
@@ -9671,6 +9723,10 @@ var DateRangePicker = forwardRef(
     };
     const selectedPreset = findMatchingPreset(presets, value);
     const presetLabel = selectedPreset?.label;
+    const comparisonText = comparison && value?.from && value.to ? (() => {
+      const c = comparisonRange({ from: value.from, to: value.to }, comparison);
+      return `${t.comparison[comparison]} ${formatDate(c.from, "date", locale)}${t.rangeSeparator}${formatDate(c.to, "date", locale)}`;
+    })() : void 0;
     const endMonth = value?.to ?? value?.from;
     const defaultMonth = endMonth ? isMobile ? endMonth : subMonths(endMonth, 1) : void 0;
     const calendarSelected = value?.from ? { from: value.from, to: value.to ?? void 0 } : void 0;
@@ -9697,7 +9753,8 @@ var DateRangePicker = forwardRef(
             presetLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { children: presetLabel }),
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: formatDateRange2() })
-            ] }) : /* @__PURE__ */ jsx("span", { children: formatDateRange2() })
+            ] }) : /* @__PURE__ */ jsx("span", { children: formatDateRange2() }),
+            comparisonText && /* @__PURE__ */ jsx("span", { "data-slot": "date-range-picker-comparison", className: "text-muted-foreground", children: comparisonText })
           ]
         }
       ),
@@ -10144,7 +10201,7 @@ var deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
+        badge: "h-5 rounded-md px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5"
       },
       sentiment: {
@@ -10154,9 +10211,9 @@ var deltaVariants = cva(
       }
     },
     compoundVariants: [
-      { 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" }
+      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
+      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
+      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" }
     ],
     defaultVariants: {
       variant: "badge",
@@ -10189,6 +10246,7 @@ function deltaAriaLabel(result, locale, change = "relative", format, digits) {
   if (amount === null) return t.none(label2);
   return t.change(label2, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up");
 }
+var SENTIMENT_TEXT = { positive: "text-positive", negative: "text-negative", neutral: "text-neutral" };
 var Delta = forwardRef(
   ({
     value,
@@ -10218,7 +10276,7 @@ var Delta = forwardRef(
     const comparable = result.direction !== "none";
     const Icon = result.direction === "up" ? ArrowUp : result.direction === "down" ? ArrowDown : ArrowRight;
     const text = formatChange(result, display, locale, format, changeDigits);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
@@ -10228,16 +10286,31 @@ var Delta = forwardRef(
         "data-sentiment": result.sentiment,
         "aria-label": deltaAriaLabel(result, locale, display, format, changeDigits),
         className: cn(
-          deltaVariants({ variant, sentiment: result.sentiment }),
+          variant === "badge" ? "inline-flex w-fit shrink-0 items-center gap-1.5 font-medium whitespace-nowrap tabular-nums" : deltaVariants({ variant, sentiment: result.sentiment }),
+          // The chip carries the colour of the change; the root repeats it for the "—" case and for `className` consumers.
+          variant === "badge" && SENTIMENT_TEXT[result.sentiment],
           !comparable && "text-muted-foreground",
           className
         ),
         ...props,
-        children: [
+        children: variant === "badge" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "delta-chip",
+              className: cn(deltaVariants({ variant, sentiment: result.sentiment }), !comparable && "text-muted-foreground"),
+              children: [
+                comparable && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text ?? DELTA_NOT_COMPARABLE })
+              ]
+            }
+          ),
+          showLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-xs font-normal text-muted-foreground", children: result.label })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           comparable && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text ?? DELTA_NOT_COMPARABLE }),
           showLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-normal text-muted-foreground", children: result.label })
-        ]
+        ] })
       }
     );
   }
@@ -10413,7 +10486,7 @@ function KpiCard({
   const targetBar = hasTarget && !neutral && !byPoints && !lower;
   if (summary !== void 0) warnShallowSummary(summary, t);
   const cardClass = cn("row-span-2 grid content-start gap-y-0 grid-rows-subgrid", className);
-  const valueSize = small ? "text-xl @[218px]/card:text-2xl" : "text-2xl @[218px]/card:text-4xl";
+  const valueSize = small ? "text-xl @[218px]/card:text-2xl" : "text-2xl @[218px]/card:text-[26px]";
   if (isLoading) {
     return /* @__PURE__ */ jsxs(
       Card,
@@ -10518,7 +10591,8 @@ function KpiCard({
       format,
       change: display,
       digits,
-      locale
+      locale,
+      className: "min-w-0 shrink whitespace-normal"
     },
     i
   ));
@@ -10526,16 +10600,20 @@ function KpiCard({
   const longValue = valueText.length > LONG_VALUE_CHARS;
   return /* @__PURE__ */ jsxs(Card, { "data-slot": "kpi-card", size, className: cardClass, ...props, children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: HEADER_CLASS, children: [
-      /* @__PURE__ */ jsx(CardDescription, { "data-slot": "kpi-card-label", title: label2, className: "col-start-1 min-w-0 truncate text-[13px] leading-snug font-medium text-muted-foreground", children: label2 }),
+      /* @__PURE__ */ jsxs(CardDescription, { "data-slot": "kpi-card-label", title: label2, className: "col-start-1 flex min-w-0 items-center gap-2 text-[13px] leading-snug font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label2 }),
+        sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label, className: "shrink-0" })
+      ] }),
       /* @__PURE__ */ jsxs(
         CardTitle,
         {
           "data-slot": "kpi-card-value",
           title: valueText,
           className: cn(
-            "col-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 leading-none font-semibold tracking-tight tabular-nums",
+            "col-start-1 flex min-w-0 items-center gap-x-2 gap-y-1 leading-none font-medium tracking-tight tabular-nums",
             // Fixed size: the step follows the card width only, never the length of the value.
-            valueSize
+            valueSize,
+            (longValue || isProvisional) && "flex-wrap"
           ),
           children: [
             /* @__PURE__ */ jsx("span", { "data-slot": "kpi-card-value-text", className: longValue ? "min-w-0 break-words" : "whitespace-nowrap", children: longValue ? digitGroups(valueText).map((group, i) => /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
@@ -10543,11 +10621,11 @@ function KpiCard({
               /* @__PURE__ */ jsx("wbr", {})
             ] }, i)) : valueText }),
             isProvisional && /* @__PURE__ */ jsx(Badge, { "data-slot": "kpi-card-provisional", variant: "outline", className: "align-middle", children: provisionalLabel }),
-            sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label })
+            comparison && !stacked && !longValue && deltas
           ]
         }
       ),
-      comparison && (stacked ? /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-comparisons", className: "flex flex-wrap items-center gap-1", children: deltas }) : /* @__PURE__ */ jsx(CardAction, { className: longValue ? DELTA_UNDER_PLACEMENT : DELTA_PLACEMENT, children: deltas })),
+      comparison && (stacked ? /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-comparisons", className: "flex flex-wrap items-center gap-1", children: deltas }) : longValue && /* @__PURE__ */ jsx(CardAction, { className: DELTA_UNDER_PLACEMENT, children: deltas })),
       hasPrevious && comparison && /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-previous", className: "col-span-full text-sm text-muted-foreground tabular-nums", children: result?.previous != null ? t.previous(baseline ?? "", fmt(result.previous)) : t.noPrevious(baseline ?? "") }),
       bar && progress && /* @__PURE__ */ jsxs("div", { "data-slot": "kpi-card-target-progress", className: "col-span-full mt-1 flex min-w-0 flex-col gap-1.5", children: [
         /* @__PURE__ */ jsxs(
@@ -10760,5 +10838,5 @@ function DraftChartPreview({ children }) {
 }
 
 export { AppShell, AreaChart, AttentionList, BarChart, BarList, BoxPlotChart, COMPARISON_LABELS, CategoryBar, ChartFrame, ComboChart, 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, DraftChart, FilledMap, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, ForecastChart, FunnelSteps, Heatmap, HistogramChart, KpiCard, Legend, LineChart, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, PairedChart, PivotTable, Placeholder, ProgressCircle, RECORD_MIN_POINTS, SampleBadge, SampleClaim, SampleData, ScatterChart, SearchableSelect, SectionHeader, SegmentedControl, StatusBadge, SymbolMap, Tracker, Treemap, TrendIndicator, UpdatedAt, WaterfallChart, comparisonBaseline, comparisonLabel, computeComparison, computeTargetProgress, defaultChangeDisplay, defaultPresets, deltaVariants, detectRecord, fillKpiTemplate, flattenOptions, formatChange, formatChangeAmount, formatRelativeTime, funnelStepsVariants, inferPeriodGrain, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, tableToCsv, toCsv, toneForValue, useDataTable, useSampleMark };
-//# sourceMappingURL=chunk-YJQCB3UP.js.map
-//# sourceMappingURL=chunk-YJQCB3UP.js.map
+//# sourceMappingURL=chunk-SC7K2RD6.js.map
+//# sourceMappingURL=chunk-SC7K2RD6.js.map