@squadbase/vantage 0.7.1-dev1.9d223a2 → 0.7.1-dev1.bb6bd72

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

@@ -1,18 +1,18 @@
-import { ChartFrameContext, useChartSurface, resolveChartColors, resolveFillColors, EChart, CHART_OTHER_COLOR } from './chunk-EG4PX726.js';
-import { Sparkline } from './chunk-P2KIHF65.js';
+import { ChartFrameContext, useChartSurface, resolveChartColors, resolveFillColors, EChart, CHART_OTHER_COLOR } from './chunk-GWXKENNH.js';
+import { Sparkline } from './chunk-U6MWBCM6.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, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, 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';
+import { forwardRef, useState, useEffect, createContext, useId, useCallback, useMemo, useRef, Fragment as Fragment$1, useContext, useInsertionEffect, useLayoutEffect } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Search, Columns3, CalendarIcon, ChevronDownIcon, ArrowUp, ArrowDown, ArrowRight, Minus, ChevronRight, ArrowUpDown, XIcon, LoaderIcon, CheckIcon, Download, ChevronDown, X, CircleX, TriangleAlert, CircleCheck } from 'lucide-react';
+import { Search, Columns3, CalendarIcon, ChevronDownIcon, ArrowUp, ArrowDown, ArrowRight, Minus, ChevronRight, ArrowUpDown, XIcon, LoaderIcon, CheckIcon, Download, ChevronDown, Plus, X, CircleX, TriangleAlert, CircleCheck } from 'lucide-react';
 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
       ] })
     ] }),
@@ -706,6 +713,17 @@ var ChartFrame = forwardRef(function ChartFrame2({
   const titleId = title ? `${id}-title` : void 0;
   const summaryId = summary ? `${id}-summary` : void 0;
   const state = isLoading ? "loading" : isEmpty ? "empty" : "ready";
+  const [claims, setClaims] = useState(0);
+  const claim = useCallback(() => {
+    setClaims((n) => n + 1);
+    return () => setClaims((n) => n - 1);
+  }, []);
+  const claimed = claims > 0 && plotRole === "img";
+  const plotOwnsImage = state === "ready" && claimed;
+  const plot = useMemo(
+    () => ({ image: plotRole === "img", claimed, claim, ariaLabel: titleId ? void 0 : ariaLabel, ariaLabelledBy: titleId, ariaDescribedBy: summaryId }),
+    [plotRole, claimed, claim, titleId, ariaLabel, summaryId]
+  );
   return /* @__PURE__ */ jsxs("figure", { "data-slot": "chart-frame", className: cn("m-0 flex w-full min-w-0 flex-col gap-3", className), ...props, children: [
     (title || summary) && /* @__PURE__ */ jsxs("figcaption", { "data-slot": "chart-frame-header", className: "flex flex-col gap-1", children: [
       title && /* @__PURE__ */ jsx("h3", { id: titleId, "data-slot": "chart-frame-title", className: "text-sm leading-snug font-semibold", children: title }),
@@ -717,14 +735,14 @@ var ChartFrame = forwardRef(function ChartFrame2({
         ref,
         "data-slot": "chart-frame-body",
         "data-state": state,
-        role: state === "ready" ? plotRole : "group",
-        "aria-label": titleId ? void 0 : ariaLabel,
-        "aria-labelledby": titleId,
-        "aria-describedby": summaryId,
+        role: plotOwnsImage ? void 0 : state === "ready" ? plotRole : "group",
+        "aria-label": plotOwnsImage || titleId ? void 0 : ariaLabel,
+        "aria-labelledby": plotOwnsImage ? void 0 : titleId,
+        "aria-describedby": plotOwnsImage ? void 0 : summaryId,
         "aria-busy": isLoading || void 0,
         className: "relative w-full min-w-0",
         style: { height: typeof height === "number" ? `${height}px` : height },
-        children: state === "loading" ? /* @__PURE__ */ jsx(ChartSkeleton, { variant, loadingText: t.loading }) : state === "empty" ? /* @__PURE__ */ jsx(ChartEmpty, { ...emptyState, defaultTitle: t.emptyTitle }) : /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: true, children })
+        children: state === "loading" ? /* @__PURE__ */ jsx(ChartSkeleton, { variant, loadingText: t.loading }) : state === "empty" ? /* @__PURE__ */ jsx(ChartEmpty, { ...emptyState, defaultTitle: t.emptyTitle }) : /* @__PURE__ */ jsx(ChartFrameContext.Provider, { value: plot, children })
       }
     ),
     footnote && /* @__PURE__ */ jsx("p", { "data-slot": "chart-frame-footnote", className: "text-xs leading-snug text-muted-foreground", children: footnote }),
@@ -1630,6 +1648,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 +1781,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 +1897,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 +2161,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 +2300,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 +2390,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",
@@ -3539,7 +3573,8 @@ var CategoryBar = forwardRef(function CategoryBar2({ values = NO_ROWS6, colors,
       style: { background: markerColor }
     }
   );
-  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "category-bar", className: cn("w-full", className), ...props, children: [
+  const labelled = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "category-bar", role: labelled ? "group" : void 0, className: cn("w-full", className), ...props, children: [
     showLabels && labels.length > 0 && /* @__PURE__ */ jsx("div", { "data-slot": "category-bar-labels", className: "relative mb-2 h-4 text-xs text-muted-foreground tabular-nums", children: labels.map((label2, i) => /* @__PURE__ */ jsx(
       "span",
       {
@@ -3574,7 +3609,7 @@ var CategoryBar = forwardRef(function CategoryBar2({ values = NO_ROWS6, colors,
           ),
           style: { left: `${markerPosition}%` },
           children: marker.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", { "aria-label": marker.tooltip, className: "block py-1" }), children: markerDot }),
+            /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": marker.tooltip, className: "block cursor-default py-1" }), children: markerDot }),
             /* @__PURE__ */ jsx(TooltipContent, { children: marker.tooltip })
           ] }) : markerDot
         }
@@ -3883,8 +3918,19 @@ var STEP_LABEL_MIN_SLOT = 44;
 function stepLabelWidth(plotWidth, steps) {
   return Math.max(24, stepSlotWidth(plotWidth, steps) - 8);
 }
-function stepLabelLayout(plotWidth, steps) {
-  return stepSlotWidth(plotWidth, steps) >= STEP_LABEL_MIN_SLOT ? { width: stepLabelWidth(plotWidth, steps), rotate: 0 } : { rotate: 45 };
+function longestWordWidth(names) {
+  let widest = 0;
+  for (const name of names) {
+    for (const word of name.split(/\s+/)) {
+      let w = 0;
+      for (const ch of word) w += ch.charCodeAt(0) > 11903 ? 12 : 7;
+      widest = Math.max(widest, w);
+    }
+  }
+  return widest;
+}
+function stepLabelLayout(plotWidth, steps, names = []) {
+  return stepSlotWidth(plotWidth, steps) >= STEP_LABEL_MIN_SLOT && longestWordWidth(names) <= stepLabelWidth(plotWidth, steps) ? { width: stepLabelWidth(plotWidth, steps), rotate: 0 } : { rotate: 45 };
 }
 function waterfallValueLabelPlan(steps, texts, plotWidth) {
   const show = steps.map((s) => s.kind !== "gap");
@@ -4025,7 +4071,7 @@ function buildWaterfallOption(config) {
         interval: 0,
         hideOverlap: false,
         formatter: (value) => labelOf(value, labels),
-        ...config.plotWidth ? { ...stepLabelLayout(config.plotWidth, steps.length), overflow: "break" } : {}
+        ...config.plotWidth ? { ...stepLabelLayout(config.plotWidth, steps.length, steps.map((st) => labelOf(st.name, labels))), overflow: "break" } : {}
       }
     },
     yAxis: {
@@ -4386,8 +4432,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,
@@ -4400,7 +4446,9 @@ function buildScatterOption(config) {
       top: (showLegend && !legendBelow ? 12 + 24 * legendLineCount : 12) + (guides.some((line) => line.axis === "x" && line.label) && (!showLegend || legendBelow) ? 14 : 0),
       right: 24,
       bottom: legendBelow ? 24 + 24 * legendLineCount : 24,
-      left: 24,
+      // The rotated y axis name lies outside `containLabel`'s reach (its right edge is `nameGap` left of the axis line): the
+      // margin holds its height, so the name is never cut at the chart's left edge.
+      left: 36,
       containLabel: true
     },
     ...headingWidth > 0 ? {
@@ -4449,7 +4497,7 @@ function buildScatterOption(config) {
           label: {
             show: keptLabels === null,
             position: "right",
-            distance: 6,
+            distance: 8,
             fontSize: 11,
             color: config.textColors?.label,
             // Plain text: an outline / shadow reads as a halo on a dark surface.
@@ -4457,7 +4505,8 @@ function buildScatterOption(config) {
             textShadowBlur: 0,
             formatter: (p) => p.data?.point?.label ?? ""
           },
-          labelLayout: { hideOverlap: true, moveOverlap: "shiftY" }
+          // A name stays beside its own dot: one that would collide with another is hidden, not pushed onto a neighbouring dot.
+          labelLayout: { hideOverlap: true }
         } : {},
         // The guide lines hang off the first series (a markLine belongs to one).
         ...i === 0 && guides.length > 0 ? {
@@ -4631,7 +4680,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 +4692,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 +5508,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 +6276,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 +6298,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" }),
@@ -8421,6 +8483,8 @@ var TEXT23 = {
     selectRow: "\u884C\u3092\u9078\u629E",
     trend: (points, first, last, min, max) => `${points}\u70B9\u306E\u63A8\u79FB\u3001${first}\u304B\u3089${last}\u3001\u6700\u5C0F${min}\u3001\u6700\u5927${max}`,
     noData: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",
+    search: "\u691C\u7D22",
+    pageSizeLabel: "1\u30DA\u30FC\u30B8\u306E\u8868\u793A\u4EF6\u6570",
     pageSize: (size) => `${size}\u4EF6`,
     range: (total, start, end) => `${total}\u4EF6\u4E2D ${start} - ${end} \u3092\u8868\u793A`,
     first: "\u6700\u521D",
@@ -8437,6 +8501,8 @@ var TEXT23 = {
     selectRow: "Select row",
     trend: (points, first, last, min, max) => `Trend over ${points} points: ${first} to ${last}, min ${min}, max ${max}`,
     noData: "No results.",
+    search: "Search",
+    pageSizeLabel: "Rows per page",
     pageSize: (size) => `${size} / page`,
     range: (total, start, end) => `Showing ${start}\u2013${end} of ${total}`,
     first: "First",
@@ -8699,6 +8765,7 @@ DataTable.displayName = "DataTable";
 var DataTableToolbar = forwardRef(
   ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
     const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } = useDataTable();
+    const t = useText();
     const showSearchEffective = showSearch ?? enableFiltering;
     const hasContent = showSearchEffective || toolbar != null || hasSelection && bulkActions != null;
     if (!hasContent) return null;
@@ -8715,6 +8782,7 @@ var DataTableToolbar = forwardRef(
             /* @__PURE__ */ jsx(
               Input,
               {
+                "aria-label": t.search,
                 value: globalFilter,
                 onChange: (e) => setGlobalFilter(e.target.value),
                 className: "max-w-sm pl-8"
@@ -8898,7 +8966,7 @@ var DataTablePagination = forwardRef(
                 value: String(currentPageSize),
                 onValueChange: (value) => table.setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "min-w-[80px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "min-w-[80px]", "aria-label": t.pageSizeLabel, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: pageSizeItems.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
                 ]
               }
@@ -9229,6 +9297,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 +9305,7 @@ var TEXT25 = {
   },
   en: {
     filters: "Filters",
+    addFilter: "Add filter",
     selected: (count) => ` (${count} selected)`,
     remove: (filter, option) => `Remove ${filter}: ${option}`,
     clear: "Clear",
@@ -9346,6 +9416,50 @@ function FilterBarMultiSelect({
   ] });
 }
 FilterBarMultiSelect.displayName = "FilterBarMultiSelect";
+function FilterBarAddFilter({ filters, className }) {
+  const { value, onChange } = useFilterBar();
+  const t = useText2();
+  const toggle = (filter, option) => {
+    if (filter.type === "multi-select") {
+      const current = value[filter.key] ?? [];
+      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];
+      onChange({ ...value, [filter.key]: next.length > 0 ? next : void 0 });
+    } else {
+      onChange({ ...value, [filter.key]: value[filter.key] === option ? void 0 : option });
+    }
+  };
+  const isChecked = (filter, option) => {
+    const v = value[filter.key];
+    return Array.isArray(v) ? v.includes(option) : v === option;
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn("h-8 gap-1", className) }),
+        "data-slot": "filter-bar-add-filter",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-3.5", "aria-hidden": "true" }),
+          t.addFilter
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-48", children: filters.filter((f) => (f.type === "select" || f.type === "multi-select") && f.options?.length).map((filter) => /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: filter.label }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: filter.options?.map((option) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: isChecked(filter, option.value),
+          disabled: option.disabled,
+          onCheckedChange: () => toggle(filter, option.value),
+          children: option.label
+        },
+        option.value
+      )) })
+    ] }, filter.key)) })
+  ] });
+}
+FilterBarAddFilter.displayName = "FilterBarAddFilter";
 function FilterBarActiveChips({ filters, className }) {
   const { value, onChange } = useFilterBar();
   const t = useText2();
@@ -9509,6 +9623,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 +9665,14 @@ 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",
+    comparison: { "previous-period": "\u524D\u671F\u9593", "previous-year": "\u524D\u5E74\u540C\u671F" }
+  },
+  en: {
+    placeholder: "Pick a date range",
+    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 +9761,7 @@ var DateRangePicker = forwardRef(
     showPresets = true,
     locale: localeProp,
     fiscalYearStartMonth,
+    comparison,
     maxDate,
     minDate,
     placeholder,
@@ -9667,10 +9793,14 @@ var DateRangePicker = forwardRef(
     const formatDateRange2 = () => {
       if (!value?.from) return placeholder ?? t.placeholder;
       if (!value.to) return formatDate(value.from, "date", locale);
-      return `${formatDate(value.from, "date", locale)}${t.rangeSeparator}${formatDate(value.to, "date", locale)}`;
+      return formatDateRange(value.from, value.to, { locale });
     };
     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]} ${formatDateRange(c.from, c.to, { 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 +9827,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 +10275,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 +10285,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 +10320,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 +10350,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 +10360,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 +10560,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 +10665,8 @@ function KpiCard({
       format,
       change: display,
       digits,
-      locale
+      locale,
+      className: "min-w-0 shrink whitespace-normal"
     },
     i
   ));
@@ -10526,16 +10674,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 +10695,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(
@@ -10620,7 +10772,7 @@ function KpiCard({
         {
           data: historyPoints.map((v) => ({ value: v })),
           height: SPARKLINE_HEIGHT,
-          color: "text-chart-1",
+          color: "chart-1",
           highlight: "latest",
           "aria-label": t.history(label2, historyPoints.length)
         }
@@ -10759,6 +10911,6 @@ function DraftChartPreview({ children }) {
   return /* @__PURE__ */ jsx("div", { ref, "data-slot": "draft-chart", style: { display: "contents" }, 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
+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, FilterBarAddFilter, 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-I2GWIPTD.js.map
+//# sourceMappingURL=chunk-I2GWIPTD.js.map