@squadbase/vantage 0.6.2-dev1.d7c0911 → 0.6.2-dev1.e85faec

package/dist/{chunk-WRSX2MDK.js → chunk-QOXXOFGL.js}

@@ -1,14 +1,16 @@
-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 { ChartFrameContext, useChartSurface, resolveChartColors, CHART_OTHER_COLOR, EChart, resolveFillColors } from './chunk-JXFCSF3K.js';
+import { Sparkline } from './chunk-2IAPIOPS.js';
+import { formatDateRange, EMPTY_VALUE, DEFAULT_LOCALE, formatDate, toValueFormatter, formatValue, formatPoints, formatKind, formatDelta, MINUS_SIGN, formatDatesInText } from './chunk-57GHR5LN.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';
+import { forwardRef, useState, useEffect, createContext, useId, useMemo, useRef, useCallback, Fragment as Fragment$1, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Check, Copy, Download, Search, Columns3, CalendarIcon, ChevronDownIcon, ArrowUp, ArrowDown, ArrowRight, Minus, ChevronRight, ArrowUpDown, XIcon, LoaderIcon, CheckIcon, ChevronDown, X, CircleX, TriangleAlert, CircleCheck } from 'lucide-react';
-import { use, init } from 'echarts/core';
-import { BarChart, CustomChart, LineChart, PieChart, ScatterChart as ScatterChart$1, HeatmapChart } from 'echarts/charts';
-import { GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TooltipComponent, GraphicComponent, VisualMapComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
+import { Search, Columns3, CalendarIcon, ChevronDownIcon, ArrowUp, ArrowDown, ArrowRight, Minus, ChevronRight, ArrowUpDown, XIcon, LoaderIcon, CheckIcon, Download, ChevronDown, X, CircleX, TriangleAlert, CircleCheck } from 'lucide-react';
+import { use } from 'echarts/core';
+import { GraphicComponent, VisualMapComponent } from 'echarts/components';
+import { ScatterChart as ScatterChart$1, HeatmapChart } from 'echarts/charts';
 import 'echarts';
 import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import { subMonths, subDays, endOfDay, startOfDay, startOfWeek, subWeeks, endOfWeek, startOfMonth, endOfMonth, isSameDay, format, addMonths } from 'date-fns';
@@ -16,164 +18,6 @@ import { ja } from 'date-fns/locale';
 
 // @squadbase/vantage — generated build. Do not edit.
 
-// ../squadkit/registry/lib/format.ts
-var DEFAULT_LOCALE = "ja-JP";
-var EMPTY_VALUE = "\u2014";
-var MINUS_SIGN = "\u2212";
-var PERCENT_DIGITS = 1;
-var DEFAULT_CURRENCY = "JPY";
-var MULTIPLE_SUFFIX = "\xD7";
-var POINTS_SUFFIX = "pt";
-function normalize(format2) {
-  if (format2 === void 0) return { type: "compact" };
-  return typeof format2 === "string" ? { type: format2 } : format2;
-}
-function formatKind(format2) {
-  return normalize(format2).type;
-}
-function digitOptions(digits, defaultMax, significantDigits) {
-  if (significantDigits !== void 0) return { maximumSignificantDigits: significantDigits };
-  if (digits !== void 0) return { minimumFractionDigits: digits, maximumFractionDigits: digits };
-  return defaultMax === void 0 ? {} : { maximumFractionDigits: defaultMax };
-}
-function formatParts(locale, options, value) {
-  if (options.notation === "compact") {
-    const compact = new Intl.NumberFormat(locale, {
-      ...options,
-      useGrouping: "always"
-    }).formatToParts(value);
-    if (!compact.some((p) => p.type === "compact")) return formatParts(locale, { ...options, notation: "standard" }, value);
-    return joinParts(compact);
-  }
-  return joinParts(new Intl.NumberFormat(locale, options).formatToParts(value));
-}
-var joinParts = (parts) => parts.map((p) => p.type === "currency" ? p.value.normalize("NFKC") : p.type === "minusSign" ? MINUS_SIGN : p.value).join("");
-function formatValue(value, format2, locale = DEFAULT_LOCALE, options) {
-  if (value === null || value === void 0 || Number.isNaN(value)) return EMPTY_VALUE;
-  const { type, digits, currency, notation, unit, divisor, durationUnit } = normalize(format2);
-  if (divisor !== void 0 && Number.isFinite(divisor) && divisor !== 0) value = value / divisor;
-  const signDisplay = options?.signDisplay ?? "auto";
-  const sig = options?.significantDigits;
-  const withUnit = (s) => unit ? `${s}${unit}` : s;
-  switch (type) {
-    case "number":
-      return withUnit(formatParts(locale, { ...digitOptions(digits, 2, sig), signDisplay }, value));
-    case "percent":
-      return formatParts(locale, { style: "percent", ...digitOptions(digits ?? PERCENT_DIGITS, void 0, sig), signDisplay }, value);
-    case "currency":
-      return withUnit(
-        formatParts(
-          locale,
-          {
-            style: "currency",
-            currency: currency ?? DEFAULT_CURRENCY,
-            notation: notation ?? "compact",
-            ...digitOptions(digits, notation === "standard" ? void 0 : 1, sig),
-            signDisplay
-          },
-          value
-        )
-      );
-    case "multiple":
-      return `${formatParts(locale, { ...digitOptions(digits, 2, sig), signDisplay }, value)}${unit || MULTIPLE_SUFFIX}`;
-    case "compact":
-      return withUnit(formatParts(locale, { ...digitOptions(digits, 1, sig), signDisplay, notation: "compact" }, value));
-    case "duration":
-      return formatDuration(value, durationUnit ?? "second", locale, digits, signDisplay);
-  }
-}
-var SECONDS_PER = { second: 1, minute: 60, hour: 3600, day: 86400 };
-function durationWords(locale) {
-  return locale.toLowerCase().startsWith("ja") ? { day: "\u65E5", hour: "\u6642\u9593", minute: "\u5206", second: "\u79D2", sep: "" } : { day: "d", hour: "h", minute: "min", second: "s", sep: " " };
-}
-function formatDuration(value, unit, locale, digits, signDisplay) {
-  const w = durationWords(locale);
-  const abs = Math.round(Math.abs(value) * SECONDS_PER[unit]);
-  const join = (...parts) => parts.filter(([n]) => n !== 0).map(([n, u]) => `${n}${w.sep}${u}`).join(w.sep) || `0${w.sep}${parts.at(-1)?.[1] ?? w.second}`;
-  let body;
-  let zero = false;
-  if (abs >= 86400) {
-    const days = new Intl.NumberFormat(locale, { maximumFractionDigits: digits ?? 1, minimumFractionDigits: digits ?? 0 });
-    body = `${days.format(abs / 86400)}${w.sep}${w.day}`;
-  } else if (abs >= 3600) {
-    const minutes = Math.round(abs / 60);
-    body = join([Math.floor(minutes / 60), w.hour], [minutes % 60, w.minute]);
-  } else if (abs >= 60) {
-    body = join([Math.floor(abs / 60), w.minute], [abs % 60, w.second]);
-  } else {
-    zero = abs === 0;
-    body = `${abs}${w.sep}${w.second}`;
-  }
-  const sign = zero ? "" : value < 0 ? MINUS_SIGN : signDisplay === "exceptZero" ? "+" : "";
-  return `${sign}${body}`;
-}
-function formatDelta(value, format2, locale = DEFAULT_LOCALE) {
-  return formatValue(value, format2, locale, { signDisplay: "exceptZero" });
-}
-function formatPoints(difference, locale = DEFAULT_LOCALE, options) {
-  if (difference === null || difference === void 0 || Number.isNaN(difference)) return EMPTY_VALUE;
-  const digits = options?.digits ?? PERCENT_DIGITS;
-  const number = formatParts(
-    locale,
-    { minimumFractionDigits: digits, maximumFractionDigits: digits, signDisplay: options?.signDisplay ?? "exceptZero" },
-    difference * 100
-  );
-  return `${number}${POINTS_SUFFIX}`;
-}
-function toValueFormatter(format2, locale = DEFAULT_LOCALE) {
-  return (value) => formatValue(value, format2, locale);
-}
-var DATE_STYLE_OPTIONS = {
-  date: { year: "numeric", month: "2-digit", day: "2-digit" },
-  datetime: { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" },
-  month: { month: "short" },
-  "year-month": { year: "numeric", month: "long" },
-  year: { year: "numeric" }
-};
-var CALENDAR_DATE = /^\d{4}-\d{2}(-\d{2})?$/;
-function formatDate(value, style = "date", locale = DEFAULT_LOCALE, options) {
-  if (value === null || value === void 0 || value === "") return EMPTY_VALUE;
-  const calendar = typeof value === "string" && CALENDAR_DATE.test(value);
-  const date = value instanceof Date ? value : new Date(value);
-  if (!Number.isFinite(date.getTime())) return EMPTY_VALUE;
-  return new Intl.DateTimeFormat(locale, {
-    ...DATE_STYLE_OPTIONS[style],
-    timeZone: calendar ? "UTC" : options?.timeZone
-  }).format(date);
-}
-function formatDateRange(start, end, options) {
-  const locale = options?.locale ?? DEFAULT_LOCALE;
-  const parse = (value) => {
-    if (value === null || value === void 0 || value === "") return null;
-    const calendar = typeof value === "string" && CALENDAR_DATE.test(value);
-    const date = value instanceof Date ? value : new Date(value);
-    if (!Number.isFinite(date.getTime())) return null;
-    return { date, timeZone: calendar ? "UTC" : options?.timeZone };
-  };
-  const a = parse(start);
-  const b = parse(end);
-  if (!a || !b) return EMPTY_VALUE;
-  const full = (x, withYear) => new Intl.DateTimeFormat(locale, {
-    ...withYear ? { year: "numeric" } : {},
-    month: "numeric",
-    day: "numeric",
-    timeZone: x.timeZone
-  }).format(x.date);
-  const year = (x) => new Intl.DateTimeFormat("en-US", { year: "numeric", timeZone: x.timeZone }).format(x.date);
-  const startText = full(a, true);
-  const sameYear = year(a) === year(b);
-  const endFull = full(b, true);
-  if (startText === endFull) return startText;
-  const separator = locale.toLowerCase().startsWith("ja") ? "\u301C" : " \u2013 ";
-  return `${startText}${separator}${sameYear ? full(b, false) : endFull}`;
-}
-function formatDatesInText(text, locale = DEFAULT_LOCALE) {
-  return text.replace(
-    /(?<![\d-])(\d{4})-(0[1-9]|1[0-2])(-(0[1-9]|[12]\d|3[01]))?(?![\d-])/g,
-    (match, _y, _m, day) => formatDate(match, day ? "date" : "year-month", locale)
-  );
-}
-
 // ../squadkit/registry/lib/relative-time.ts
 var SECOND = 1e3;
 var MINUTE = 60 * SECOND;
@@ -282,17 +126,17 @@ var PageShellHeader = forwardRef(
       {
         ref,
         "data-slot": "page-shell-header",
-        className: cn("flex flex-wrap items-start gap-x-4 gap-y-6 px-6 py-12", className),
+        className: cn("flex flex-wrap items-start gap-x-4 gap-y-4 px-6 pt-8", className),
         ...props,
         children: [
           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
         ]
@@ -319,7 +163,7 @@ var PageShellTitle = forwardRef(
     {
       ref,
       "data-slot": "page-shell-title",
-      className: cn("text-2xl font-bold tracking-tight text-foreground", className),
+      className: cn("text-2xl font-semibold tracking-tight text-foreground", className),
       ...props
     }
   )
@@ -389,11 +233,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"
 };
@@ -451,7 +295,7 @@ var PageShellContent = forwardRef(
     {
       ref,
       "data-slot": "page-shell-content",
-      className: cn("flex-1 p-6", className),
+      className: cn("flex min-w-0 flex-1 flex-col gap-6 p-6", className),
       ...props
     }
   )
@@ -630,8 +474,8 @@ var AppShell = forwardRef((props, ref) => {
 AppShell.displayName = "AppShell";
 var headingStyles = {
   h1: "text-3xl font-bold tracking-tight",
-  h2: "text-xl font-semibold tracking-tight",
-  h3: "text-xl font-semibold",
+  h2: "text-base font-semibold tracking-tight",
+  h3: "text-base font-semibold",
   h4: "text-lg font-semibold"
 };
 var SectionHeader = forwardRef(
@@ -667,7 +511,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
     }
@@ -678,8 +522,8 @@ function SampleData({ label: label2 = DEFAULT_SAMPLE_LABEL, children }) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "sample-data", style: { display: "contents" }, children: /* @__PURE__ */ jsx(SampleContext.Provider, { value: state, children }) });
 }
 var SUBGRID_CLASS = {
-  2: "row-span-2 grid content-start grid-rows-subgrid",
-  3: "row-span-3 grid content-start grid-rows-subgrid"
+  2: "row-span-2 grid min-w-0 grid-cols-1 content-start grid-rows-subgrid",
+  3: "row-span-3 grid min-w-0 grid-cols-1 content-start grid-rows-subgrid"
 };
 var DashboardCard = forwardRef(
   ({ className, subgrid, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
@@ -716,7 +560,7 @@ var DashboardCardTitle = forwardRef(
     {
       ref,
       "data-slot": "dashboard-card-title",
-      className: cn("text-sm leading-none font-semibold tracking-tight", className),
+      className: cn("text-sm leading-snug font-semibold tracking-tight", className),
       ...props
     }
   )
@@ -727,7 +571,7 @@ var DashboardCardDescription = forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     "data-slot": "dashboard-card-description",
-    className: cn("text-xs text-muted-foreground", className),
+    className: cn("text-xs leading-normal text-muted-foreground", className),
     ...props
   }
 ));
@@ -807,223 +651,6 @@ function DashboardCardPreset({
     footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: cn(subgrid === 3 && "row-start-3", footerClassName), children: footer })
   ] }) });
 }
-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 normalizeContext;
-var ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i;
-function toCanvasColor(value) {
-  const raw = value.trim();
-  if (!raw) return null;
-  if (normalizeContext === void 0) {
-    const canvas = document.createElement("canvas");
-    canvas.width = 1;
-    canvas.height = 1;
-    normalizeContext = canvas.getContext("2d", { willReadFrequently: true });
-  }
-  const ctx = normalizeContext;
-  if (!ctx) return raw;
-  ctx.fillStyle = "#000000";
-  ctx.fillStyle = raw;
-  const onBlack = ctx.fillStyle;
-  ctx.fillStyle = "#ffffff";
-  ctx.fillStyle = raw;
-  if (onBlack !== ctx.fillStyle || typeof onBlack !== "string") return null;
-  if (ZRENDER_COLOR_RE.test(onBlack)) return onBlack;
-  ctx.clearRect(0, 0, 1, 1);
-  ctx.fillRect(0, 0, 1, 1);
-  const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data;
-  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
-}
-function readChartTokens(el) {
-  if (typeof document === "undefined") return null;
-  const target = document.documentElement;
-  if (!target) return null;
-  const styles = getComputedStyle(target);
-  const read = (name) => toCanvasColor(styles.getPropertyValue(name));
-  const series = [];
-  for (const token of SERIES_TOKENS) {
-    const color = read(token);
-    if (color) series.push(color);
-  }
-  return {
-    series,
-    foreground: read("--foreground"),
-    mutedForeground: read("--muted-foreground"),
-    border: read("--border"),
-    popover: read("--popover"),
-    popoverForeground: read("--popover-foreground")
-  };
-}
-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.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
-}
-function watchChartTokens(onChange) {
-  if (typeof document === "undefined") return () => {
-  };
-  let frame = 0;
-  const schedule = () => {
-    if (frame) return;
-    frame = requestAnimationFrame(() => {
-      frame = 0;
-      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 });
-  const styleObserver = new MutationObserver(schedule);
-  if (document.head) {
-    styleObserver.observe(document.head, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-      attributes: true,
-      attributeFilter: ["href", "media", "disabled"]
-    });
-  }
-  const onLoad = (event) => {
-    if (event.target instanceof HTMLLinkElement) schedule();
-  };
-  document.addEventListener("load", onLoad, true);
-  const media = window.matchMedia("(prefers-color-scheme: dark)");
-  media.addEventListener("change", schedule);
-  return () => {
-    if (frame) cancelAnimationFrame(frame);
-    themeObserver.disconnect();
-    styleObserver.disconnect();
-    document.removeEventListener("load", onLoad, true);
-    media.removeEventListener("change", schedule);
-  };
-}
-function axisTheme(tokens, splitLine) {
-  const line = tokens.border ?? void 0;
-  return {
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: { show: true, color: tokens.mutedForeground ?? void 0, fontSize: 12 },
-    // Faint horizontal rules only: the border colour at low opacity.
-    splitLine: { show: splitLine, lineStyle: { color: line ? [line] : void 0, opacity: 0.5, width: 1 } },
-    splitArea: { show: false }
-  };
-}
-function buildChartTheme(tokens) {
-  const text = tokens.foreground ?? void 0;
-  const muted = tokens.mutedForeground ?? void 0;
-  const line = tokens.border ?? void 0;
-  return {
-    // Let the page background show through: charts sit on cards, not on a canvas.
-    backgroundColor: "transparent",
-    ...tokens.series.length > 0 ? { color: tokens.series } : {},
-    textStyle: { color: text },
-    title: { textStyle: { color: text }, subtextStyle: { color: muted } },
-    legend: { textStyle: { color: muted } },
-    categoryAxis: axisTheme(tokens, false),
-    valueAxis: axisTheme(tokens, true),
-    logAxis: axisTheme(tokens, true),
-    timeAxis: axisTheme(tokens, true),
-    tooltip: {
-      // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
-      transitionDuration: 0,
-      backgroundColor: tokens.popover ?? void 0,
-      borderColor: line,
-      borderWidth: 1,
-      padding: [8, 12],
-      // Rounded card with a soft shadow; in dark mode the shadow barely shows, so the border carries the edge.
-      extraCssText: "border-radius:8px;box-shadow:var(--shadow-card, 0 4px 12px rgb(0 0 0 / 0.08));",
-      textStyle: { color: tokens.popoverForeground ?? void 0, fontSize: 12 },
-      axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } }
-    }
-  };
-}
-function useChartTokens() {
-  const [tokens, setTokens] = useState(() => readChartTokens());
-  const tokensRef = useRef(tokens);
-  useEffect(() => {
-    const sync = () => {
-      const next = readChartTokens();
-      if (sameChartTokens(tokensRef.current, next)) return;
-      tokensRef.current = next;
-      setTokens(next);
-    };
-    sync();
-    return watchChartTokens(sync);
-  }, []);
-  return tokens;
-}
-var SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/;
-var TONE_NAME_RE = /^(?:positive|warning|negative|neutral|info)(?:-fill)?$/;
-var CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
-var EMBEDDED_VAR_RE = /var\(\s*(--[\w-]+)\s*\)/g;
-function resolveChartColors(colors, tokens) {
-  return colors.map((color) => {
-    const token = SERIES_TOKEN_NAME_RE.exec(color.trim());
-    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()}`)) ?? "";
-    }
-    if (typeof document === "undefined") return color;
-    let value = color.trim();
-    const cssVar = CSS_VAR_RE.exec(value);
-    const styles = getComputedStyle(document.documentElement);
-    if (cssVar) {
-      value = styles.getPropertyValue(cssVar[1]).trim() || (cssVar[2] ?? "").trim();
-    } else if (value.includes("var(")) {
-      value = value.replace(EMBEDDED_VAR_RE, (_, name) => styles.getPropertyValue(name).trim());
-    }
-    return toCanvasColor(value) ?? "";
-  });
-}
-function resolveFillColors(tokens) {
-  const [positive = "", warning = "", negative = "", neutral = ""] = resolveChartColors(
-    ["positive-fill", "warning-fill", "negative-fill", "neutral-fill"],
-    tokens
-  );
-  return { positive, warning, negative, neutral };
-}
-var TRANSPARENT_RE = /^(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\))$/i;
-function readChartSurface(el) {
-  if (typeof document === "undefined") return null;
-  for (let node = el; node; node = node.parentElement) {
-    const bg = getComputedStyle(node).backgroundColor.trim();
-    if (bg && !TRANSPARENT_RE.test(bg)) {
-      const color = toCanvasColor(bg);
-      if (color) return color;
-    }
-  }
-  return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--background"));
-}
-var WIDTH_BUCKET = 40;
-function useChartSurface(forwarded, tokens) {
-  const [node, setNode] = useState(null);
-  const [surface, setSurface] = useState(void 0);
-  const [width, setWidth] = useState(void 0);
-  const ref = useCallback(
-    (el) => {
-      setNode(el);
-      if (typeof forwarded === "function") forwarded(el);
-      else if (forwarded) forwarded.current = el;
-    },
-    [forwarded]
-  );
-  useEffect(() => {
-    if (!node) return;
-    setSurface(readChartSurface(node) ?? void 0);
-  }, [node, tokens]);
-  useEffect(() => {
-    if (!node || typeof ResizeObserver === "undefined") return;
-    const update = (w) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET);
-    update(node.getBoundingClientRect().width);
-    const observer = new ResizeObserver((entries) => update(entries[0]?.contentRect.width ?? 0));
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [node]);
-  return { ref, surface, width };
-}
 var DEFAULT_CHART_HEIGHT = 288;
 var DEFAULT_EMPTY_TITLE = "\u8868\u793A\u3067\u304D\u308B\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093";
 var ChartFrame = forwardRef(function ChartFrame2({
@@ -1047,8 +674,8 @@ var ChartFrame = forwardRef(function ChartFrame2({
   const state = isLoading ? "loading" : isEmpty ? "empty" : "ready";
   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-none font-medium", children: title }),
-      summary && /* @__PURE__ */ jsx("p", { id: summaryId, "data-slot": "chart-frame-summary", className: "text-sm text-muted-foreground", children: summary })
+      title && /* @__PURE__ */ jsx("h3", { id: titleId, "data-slot": "chart-frame-title", className: "text-sm leading-snug font-semibold", children: title }),
+      summary && /* @__PURE__ */ jsx("p", { id: summaryId, "data-slot": "chart-frame-summary", className: "text-sm leading-relaxed text-muted-foreground", children: summary })
     ] }),
     /* @__PURE__ */ jsx(
       "div",
@@ -1107,336 +734,6 @@ function ChartEmpty({ title, description, action }) {
     }
   );
 }
-use([
-  BarChart,
-  CustomChart,
-  LineChart,
-  PieChart,
-  GridComponent,
-  LegendComponent,
-  MarkAreaComponent,
-  MarkLineComponent,
-  MarkPointComponent,
-  TooltipComponent,
-  CanvasRenderer
-]);
-var HEADER_PAD_X = 16;
-var HEADER_PAD_TOP = 16;
-var HEADER_PAD_BOTTOM = 12;
-var HEADER_LINE_HEIGHT = 20;
-var HEADER_GAP = 4;
-var HEADER_FONT_SIZE = 14;
-function wrapChartText(text, maxWidth, measure) {
-  const lines = [];
-  let line = "";
-  for (const ch of text) {
-    if (ch === "\n") {
-      lines.push(line);
-      line = "";
-      continue;
-    }
-    if (line !== "" && measure(line + ch) > maxWidth) {
-      lines.push(line);
-      line = ch.trim() === "" ? "" : ch;
-    } else {
-      line += ch;
-    }
-  }
-  if (line !== "" || lines.length === 0) lines.push(line);
-  return lines.filter((l, i) => l !== "" || i < lines.length - 1);
-}
-function chartExportHeaderLayout(header, width, measure) {
-  const title = header?.title?.trim();
-  const summary = header?.summary?.trim();
-  if (!title && !summary) return { lines: [], height: 0 };
-  const room = Math.max(40, width - HEADER_PAD_X * 2);
-  const lines = [
-    ...title ? wrapChartText(title, room, (t) => measure(t, "title")).map((text) => ({ text, kind: "title" })) : [],
-    ...summary ? wrapChartText(summary, room, (t) => measure(t, "summary")).map((text) => ({ text, kind: "summary" })) : []
-  ];
-  const gap = title && summary ? HEADER_GAP : 0;
-  return { lines, height: HEADER_PAD_TOP + lines.length * HEADER_LINE_HEIGHT + gap + HEADER_PAD_BOTTOM };
-}
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = () => reject(new Error("PNG \u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F"));
-    image.src = src;
-  });
-}
-async function pngWithHeader(dataUrl, header, look, pixelRatio) {
-  const image = await loadImage(dataUrl);
-  const width = image.width / pixelRatio;
-  const plotHeight = image.height / pixelRatio;
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return dataUrl;
-  const font = (kind) => `${kind === "title" ? 500 : 400} ${HEADER_FONT_SIZE}px ${look.fontFamily}`;
-  ctx.font = font("title");
-  const layout = chartExportHeaderLayout(header, width, (text, kind) => {
-    ctx.font = font(kind);
-    return ctx.measureText(text).width;
-  });
-  if (layout.height === 0) return dataUrl;
-  canvas.width = Math.round(image.width);
-  canvas.height = Math.round((layout.height + plotHeight) * pixelRatio);
-  ctx.scale(pixelRatio, pixelRatio);
-  ctx.fillStyle = look.background;
-  ctx.fillRect(0, 0, width, layout.height + plotHeight);
-  ctx.textBaseline = "middle";
-  let y = HEADER_PAD_TOP;
-  let previous = null;
-  for (const line of layout.lines) {
-    if (previous === "title" && line.kind === "summary") y += HEADER_GAP;
-    ctx.font = font(line.kind);
-    ctx.fillStyle = line.kind === "title" ? look.color : look.mutedColor;
-    ctx.fillText(line.text, HEADER_PAD_X, y + HEADER_LINE_HEIGHT / 2);
-    y += HEADER_LINE_HEIGHT;
-    previous = line.kind;
-  }
-  ctx.drawImage(image, 0, layout.height, width, plotHeight);
-  return canvas.toDataURL("image/png");
-}
-function useResolvedChartColors(colors) {
-  const tokens = useChartTokens();
-  const key = colors.join("\0");
-  return useMemo(() => resolveChartColors(colors, tokens), [key, tokens]);
-}
-var COMPONENT_MAIN_TYPES = /* @__PURE__ */ new Set([
-  "title",
-  "legend",
-  "grid",
-  "xAxis",
-  "yAxis",
-  "polar",
-  "radiusAxis",
-  "angleAxis",
-  "radar",
-  "dataZoom",
-  "visualMap",
-  "tooltip",
-  "axisPointer",
-  "toolbox",
-  "brush",
-  "geo",
-  "parallel",
-  "parallelAxis",
-  "singleAxis",
-  "graphic",
-  "calendar",
-  "dataset",
-  "series",
-  "matrix",
-  "thumbnail"
-]);
-function echartSetOptionOpts(prev, next) {
-  const special = (o) => "timeline" in o || "baseOption" in o || "options" in o || "media" in o;
-  if (!prev || special(prev) || special(next)) return { notMerge: true, lazyUpdate: true };
-  const types = /* @__PURE__ */ new Set();
-  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 };
-}
-function withMotionPreference(option, reducedMotion) {
-  return { ...option, animation: reducedMotion ? false : option.animation ?? true };
-}
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-function usePrefersReducedMotion() {
-  const [reduced, setReduced] = useState(
-    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION_QUERY).matches
-  );
-  useEffect(() => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const media = window.matchMedia(REDUCED_MOTION_QUERY);
-    const sync = () => setReduced(media.matches);
-    sync();
-    media.addEventListener("change", sync);
-    return () => media.removeEventListener("change", sync);
-  }, []);
-  return reduced;
-}
-var EChart = forwardRef(function EChart2({
-  option,
-  height,
-  loading = false,
-  theme,
-  onEvents,
-  ariaLabel,
-  className,
-  actions = false,
-  fileName = "chart.png",
-  exportHeader
-}, ref) {
-  const containerRef = useRef(null);
-  const [instance, setInstance] = useState(null);
-  const [copied, setCopied] = useState(false);
-  const [tokens, setTokens] = useState(() => readChartTokens());
-  const reducedMotion = usePrefersReducedMotion();
-  const appliedRef = useRef(null);
-  const tokensRef = useRef(tokens);
-  useEffect(() => {
-    if (theme !== void 0) return;
-    const sync = () => {
-      const next = readChartTokens();
-      if (sameChartTokens(tokensRef.current, next)) return;
-      tokensRef.current = next;
-      setTokens(next);
-    };
-    sync();
-    return watchChartTokens(sync);
-  }, [theme]);
-  const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
-  const resolvedTheme = theme ?? autoTheme;
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const inst = init(container, resolvedTheme, { renderer: "canvas" });
-    appliedRef.current = null;
-    container.dataset.rendering = "";
-    inst.on("finished", () => {
-      delete container.dataset.rendering;
-    });
-    setInstance(inst);
-    let frame = 0;
-    const observer = new ResizeObserver(() => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        if (!inst.isDisposed()) inst.resize();
-      });
-    });
-    observer.observe(container);
-    return () => {
-      observer.disconnect();
-      cancelAnimationFrame(frame);
-      inst.dispose();
-    };
-  }, [resolvedTheme]);
-  useEffect(() => {
-    if (!instance) return;
-    if (containerRef.current) containerRef.current.dataset.rendering = "";
-    const next = withMotionPreference(option, reducedMotion);
-    instance.setOption(next, echartSetOptionOpts(appliedRef.current, next));
-    appliedRef.current = next;
-  }, [instance, option, reducedMotion]);
-  useEffect(() => {
-    if (!instance) return;
-    if (loading) instance.showLoading();
-    else instance.hideLoading();
-  }, [instance, loading]);
-  useEffect(() => {
-    if (!instance || !onEvents) return;
-    const entries = Object.entries(onEvents);
-    for (const [event, handler] of entries) {
-      instance.on(event, handler);
-    }
-    return () => {
-      if (instance.isDisposed()) return;
-      for (const [event, handler] of entries) {
-        instance.off(event, handler);
-      }
-    };
-  }, [instance, onEvents]);
-  const includeTitle = typeof actions === "object" ? actions.includeTitle ?? true : true;
-  const getPngDataUrl = useCallback(async () => {
-    if (!instance) return null;
-    let backgroundColor = "#ffffff";
-    for (let el = containerRef.current; el; el = el.parentElement) {
-      const bg = getComputedStyle(el).backgroundColor;
-      if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
-        backgroundColor = bg;
-        break;
-      }
-    }
-    const pixelRatio = 2;
-    const dataUrl = instance.getDataURL({ type: "png", pixelRatio, backgroundColor });
-    if (!includeTitle || !exportHeader || !(exportHeader.title || exportHeader.summary) || !containerRef.current) return dataUrl;
-    try {
-      const style = getComputedStyle(containerRef.current);
-      return await pngWithHeader(
-        dataUrl,
-        exportHeader,
-        { background: backgroundColor, color: style.color, mutedColor: tokens?.mutedForeground ?? style.color, fontFamily: style.fontFamily },
-        pixelRatio
-      );
-    } catch {
-      return dataUrl;
-    }
-  }, [instance, includeTitle, exportHeader, tokens]);
-  const handleCopy = useCallback(async () => {
-    const dataUrl = await getPngDataUrl();
-    if (!dataUrl) return;
-    try {
-      const blob = await (await fetch(dataUrl)).blob();
-      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-    }
-  }, [getPngDataUrl]);
-  const handleDownload = useCallback(async () => {
-    const dataUrl = await getPngDataUrl();
-    if (!dataUrl) return;
-    const link = document.createElement("a");
-    link.href = dataUrl;
-    link.download = fileName;
-    link.click();
-  }, [getPngDataUrl, fileName]);
-  const inFrame = useContext(ChartFrameContext);
-  const styleHeight = height == null ? void 0 : typeof height === "number" ? `${height}px` : height;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-slot": "echart",
-      className: cn("group relative w-full", height == null && "h-[400px]", className),
-      style: styleHeight != null ? { height: styleHeight } : void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            "data-slot": "echart-canvas",
-            className: "h-full w-full",
-            role: inFrame ? void 0 : "img",
-            "aria-label": inFrame ? void 0 : ariaLabel ?? "\u30C1\u30E3\u30FC\u30C8"
-          }
-        ),
-        actions && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-slot": "echart-actions",
-            className: "absolute top-2 right-2 z-10 flex gap-1 pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
-            children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleCopy,
-                  "aria-label": copied ? "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F" : "PNG \u3092\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC",
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleDownload,
-                  "aria-label": "PNG \u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9",
-                  children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-});
-EChart.displayName = "EChart";
 
 // ../squadkit/registry/lib/chart-utils.ts
 var ROOT_PROP_KEYS = /* @__PURE__ */ new Set(["id", "style", "role", "tabIndex", "lang", "hidden"]);
@@ -1939,6 +1236,8 @@ function timeFormat(locale, options) {
 }
 var toDate = (t) => new Date(t.year, t.month - 1, t.day);
 var TIME_AXIS_MAX_LABELS = 6;
+var NARROW_PLOT_WIDTH = 400;
+var NARROW_TIME_AXIS_MAX_LABELS = 4;
 var TIME_AXIS_STEPS = {
   year: [1, 2, 5, 10, 20, 50, 100],
   month: [1, 2, 3, 4, 6, 12, 24, 36, 60, 120],
@@ -2175,7 +1474,8 @@ var LEGEND_LINE_HEIGHT = 24;
 var LEGEND_LINE_BUDGET = 320;
 function legendLines(items, plotWidth, reserve = 0) {
   const width = items.reduce((sum, name) => sum + [...name].length * 12 + 8 + 5 + 16, 0);
-  const budget = Math.max(80, (plotWidth ? Math.min(LEGEND_LINE_BUDGET, plotWidth) : LEGEND_LINE_BUDGET) - reserve);
+  const narrow = plotWidth !== void 0 && plotWidth < NARROW_PLOT_WIDTH;
+  const budget = Math.max(80, (plotWidth ? narrow ? plotWidth : Math.min(LEGEND_LINE_BUDGET, plotWidth) : LEGEND_LINE_BUDGET) - (narrow ? 0 : reserve));
   return Math.min(3, Math.max(1, Math.ceil(width / budget)));
 }
 var ACTIONS_RESERVE = 80;
@@ -2331,7 +1631,13 @@ function buildCartesianOption(cfg) {
   const last = labels.length - 1;
   const timeStep = startEndOnly ? null : timeAxisLabelStep(
     rawIndex,
-    plotWidth ? Math.max(2, Math.min(TIME_AXIS_MAX_LABELS, Math.floor(plotWidth / TIME_LABEL_WIDTH))) : void 0
+    plotWidth ? Math.max(
+      2,
+      Math.min(
+        plotWidth < NARROW_PLOT_WIDTH ? NARROW_TIME_AXIS_MAX_LABELS : TIME_AXIS_MAX_LABELS,
+        Math.floor(plotWidth / TIME_LABEL_WIDTH)
+      )
+    ) : void 0
   );
   const plainStep = (() => {
     if (kind !== "line" || startEndOnly || timeStep !== null || !plotWidth || labels.length < 3) return 1;
@@ -2351,7 +1657,8 @@ function buildCartesianOption(cfg) {
   const shareHighlight = percent && kind === "area";
   const picked = highlight !== "auto" || mainIdx.length === 0 || percent && !shareHighlight ? [] : shareHighlight ? categories.length <= 2 ? pickShareHighlightPoints(values[0] ?? []) : [] : stackTotals ? pickHighlightPoints(stackTotals) : mainIdx.length <= 2 ? pickHighlightPoints(values[highlightSeries] ?? []) : [];
   const pointGap = plotWidth && labels.length > 1 ? plotWidth / (kind === "bar" ? labels.length : labels.length - 1) : null;
-  const highlightPoints = picked.length === 2 && pointGap !== null && Math.abs(picked[1].index - picked[0].index) * pointGap < HIGHLIGHT_LABEL_WIDTH ? [picked[1]] : picked;
+  const latestOnly = cfg.highlight === void 0 && !shareHighlight && picked.length === 2;
+  const highlightPoints = latestOnly ? [picked[1]] : picked.length === 2 && pointGap !== null && Math.abs(picked[1].index - picked[0].index) * pointGap < HIGHLIGHT_LABEL_WIDTH ? [picked[1]] : picked;
   const boundaryIndex = kind !== "bar" && !percent && cfg.forecast && cfg.forecast.data.length > 0 ? lastActual : -1;
   const edgeAlign = (i) => horizontalBars || labels.length < 2 ? void 0 : i === boundaryIndex && i !== last ? { align: "right", offset: [-6, 0] } : i === last ? { align: "right", ...kind === "bar" ? { offset: [8, 0] } : {} } : i === 0 ? { align: "left", ...kind === "bar" ? { offset: [-8, 0] } : {} } : void 0;
   const perBarTarget = kind === "bar" && Boolean(targetKey);
@@ -2500,6 +1807,8 @@ function buildCartesianOption(cfg) {
       // 100% stacked: the top band's upper edge is the 100% line, not a value — drawn, it reads as「this band = 100%」.
       lineStyle: percent && c === categories.length - 1 ? { width: 0, color, opacity: 0 } : { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
       itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
+      // Hovering a series fades the others (not for a stack, where the bands read together).
+      emphasis: stacked ? void 0 : { focus: "series" },
       areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
       markPoint: markPointFor(c, color),
       markLine: void 0,
@@ -2892,7 +2201,8 @@ function buildCartesianOption(cfg) {
     legend: {
       show: showLegend,
       top: 0,
-      right: reserveActions ? ACTIONS_RESERVE : 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 },
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -2942,7 +2252,11 @@ function buildCartesianOption(cfg) {
           };
         };
         const shares = percent ? cartesianSeriesValues(i <= lastActual ? [row] : [], categories, "percent") : null;
-        for (const p of list) {
+        const legendRank = (p) => {
+          const at = categories.indexOf(p.seriesName ?? "");
+          return at === -1 ? categories.length : at;
+        };
+        for (const p of [...list].sort((a, b) => legendRank(a) - legendRank(b))) {
           const color = typeof p.color === "string" ? p.color : "currentColor";
           if (p.seriesId === FORECAST_SERIES_ID) {
             if (i > lastActual) rows.push({ name: p.seriesName ?? forecastLabel, color, value: forecastValues[i] ?? null });
@@ -3210,8 +2524,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]);
@@ -3393,8 +2706,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]);
@@ -3529,8 +2841,8 @@ function BarChartImpl({
     }
   );
 }
-var BarChart2 = forwardRef(BarChartImpl);
-BarChart2.displayName = "BarChart";
+var BarChart = forwardRef(BarChartImpl);
+BarChart.displayName = "BarChart";
 var NO_ROWS3 = [];
 function LineChartImpl({
   data = NO_ROWS3,
@@ -3578,8 +2890,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]);
@@ -3716,8 +3027,8 @@ function LineChartImpl({
     }
   );
 }
-var LineChart2 = forwardRef(LineChartImpl);
-LineChart2.displayName = "LineChart";
+var LineChart = forwardRef(LineChartImpl);
+LineChart.displayName = "LineChart";
 function useElementWidth() {
   const [node, setNode] = useState(null);
   const [width, setWidth] = useState(null);
@@ -3767,7 +3078,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]
@@ -3833,7 +3144,7 @@ function DonutChartImpl({
     ChartFrame,
     {
       ...chartRootProps(rest),
-      ref,
+      ref: frameRef,
       title,
       summary: resolvedSummary,
       isLoading: isLoading ?? loading ?? false,
@@ -4149,8 +3460,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"
@@ -4164,7 +3481,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);
   }) });
 });
@@ -4541,8 +3858,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]);
@@ -4941,8 +4257,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),
@@ -5646,8 +4961,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 }),
@@ -5716,149 +5030,6 @@ function HeatmapLegend({
 }
 var Heatmap = forwardRef(HeatmapImpl);
 Heatmap.displayName = "Heatmap";
-var VB_WIDTH = 100;
-function normalizeData(values, height, vPad = 2) {
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const range = max - min;
-  const drawHeight = height - vPad * 2;
-  if (range === 0) return values.map(() => vPad + drawHeight / 2);
-  return values.map((v) => height - vPad - (v - min) / range * drawHeight);
-}
-function buildLinePath(ys) {
-  if (ys.length === 0) return "";
-  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0;
-  return ys.map((y, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(2)},${y.toFixed(2)}`).join(" ");
-}
-function buildAreaPath(ys, height) {
-  if (ys.length === 0) return "";
-  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0;
-  const lastX = ((ys.length - 1) * step).toFixed(2);
-  return `${buildLinePath(ys)} L${lastX},${height} L0,${height} Z`;
-}
-function sparklineHighlightPoints(values) {
-  if (values.length === 0) return [];
-  const last = values.length - 1;
-  const points = [{ kind: "latest", index: last }];
-  let maxI = 0;
-  let minI = 0;
-  let max = values[0];
-  let min = max;
-  values.forEach((v, i) => {
-    if (v >= max) [max, maxI] = [v, i];
-    if (v <= min) [min, minI] = [v, i];
-  });
-  const latest = values[last];
-  if (max === min) return points;
-  if (max !== latest) points.push({ kind: "max", index: maxI });
-  if (min !== latest) points.push({ kind: "min", index: minI });
-  return points;
-}
-function buildBarRects(ys, height, gap = 1) {
-  const barW = Math.max(1, VB_WIDTH / ys.length - gap);
-  return ys.map((y, i) => ({ x: i * (barW + gap), y, w: barW, h: height - y }));
-}
-var NO_ROWS12 = [];
-var Sparkline = forwardRef(function Sparkline2({
-  data = NO_ROWS12,
-  variant = "line",
-  height = 40,
-  color = "text-chart-1",
-  area = false,
-  animate = false,
-  highlight = "auto",
-  "aria-label": ariaLabel,
-  className,
-  ...props
-}, ref) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    if (animate) setMounted(true);
-  }, [animate]);
-  if (data.length === 0) return null;
-  const values = data.map((d) => d.value);
-  const ys = normalizeData(values, height);
-  const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0;
-  const points = variant !== "line" ? [] : highlight === "auto" ? sparklineHighlightPoints(values) : highlight === "latest" ? [{ kind: "latest", index: values.length - 1 }] : [];
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ref,
-      "data-slot": "sparkline",
-      viewBox: `0 0 ${VB_WIDTH} ${height}`,
-      preserveAspectRatio: "none",
-      width: "100%",
-      height,
-      role: ariaLabel ? "img" : void 0,
-      "aria-label": ariaLabel,
-      "aria-hidden": ariaLabel ? void 0 : true,
-      className: cn("overflow-visible", className),
-      ...props,
-      children: [
-        variant === "line" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          area && /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: buildAreaPath(ys, height),
-              strokeWidth: 0,
-              className: cn("fill-current opacity-15", color)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: buildLinePath(ys),
-              fill: "none",
-              strokeWidth: 1.5,
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              vectorEffect: "non-scaling-stroke",
-              pathLength: animate ? 1 : void 0,
-              strokeDasharray: animate ? 1 : void 0,
-              strokeDashoffset: animate ? mounted ? 0 : 1 : void 0,
-              className: cn("stroke-current", animate && "motion-reduce:transition-none!", color),
-              style: animate ? { transition: "stroke-dashoffset 0.6s ease-in-out" } : void 0
-            }
-          ),
-          points.map((p) => {
-            const x = (p.index * step).toFixed(2);
-            const y = (ys[p.index] ?? 0).toFixed(2);
-            return /* @__PURE__ */ jsx(
-              "path",
-              {
-                "data-slot": "sparkline-point",
-                "data-point": p.kind,
-                d: `M${x},${y} L${x},${y}`,
-                fill: "none",
-                strokeWidth: p.kind === "latest" ? 5 : 4,
-                strokeLinecap: "round",
-                vectorEffect: "non-scaling-stroke",
-                className: cn("stroke-current", p.kind === "latest" ? color : "text-muted-foreground")
-              },
-              p.kind
-            );
-          })
-        ] }),
-        variant === "bar" && buildBarRects(ys, height).map((rect, i) => /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: rect.x,
-            y: animate ? mounted ? rect.y : height : rect.y,
-            width: rect.w,
-            height: animate ? mounted ? rect.h : 0 : rect.h,
-            rx: 0.5,
-            className: cn("fill-current", animate && "motion-reduce:transition-none!", color),
-            style: animate ? {
-              transition: `height 0.4s ease-out ${i * 0.02}s, y 0.4s ease-out ${i * 0.02}s`
-            } : void 0
-          },
-          i
-        ))
-      ]
-    }
-  );
-});
-Sparkline.displayName = "Sparkline";
 function resolveFormat(format2, row) {
   return typeof format2 === "function" ? format2(row) : format2;
 }
@@ -5923,10 +5094,10 @@ function useDataTable() {
   if (!ctx) throw new Error("useDataTable must be used inside <DataTable>");
   return ctx;
 }
-var NO_ROWS13 = [];
+var NO_ROWS12 = [];
 function DataTable({
-  columns = NO_ROWS13,
-  data = NO_ROWS13,
+  columns = NO_ROWS12,
+  data = NO_ROWS12,
   enableSorting = true,
   sorting: sortingProp,
   onSortingChange,
@@ -7362,7 +6533,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: {
@@ -7372,9 +6543,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",
@@ -7395,6 +6566,7 @@ var Delta = forwardRef(
   ({
     value,
     comparison,
+    betterWhen,
     polarity,
     neutralBand,
     format: format2,
@@ -7407,7 +6579,7 @@ var Delta = forwardRef(
     ...props
   }, ref) => {
     if (!comparison) return null;
-    const result = computeComparison(value, comparison, { polarity, neutralBand });
+    const result = computeComparison(value, comparison, { polarity: betterWhen ? betterWhen === "down" ? "lower-is-better" : "higher-is-better" : polarity, neutralBand });
     const display = change ?? defaultChangeDisplay(format2);
     const formatDigits = typeof format2 === "object" && format2 !== null && "digits" in format2 ? format2.digits : void 0;
     const changeDigits = display === "points" ? digits ?? formatDigits : digits;
@@ -7443,6 +6615,9 @@ var SPARKLINE_MIN_POINTS = 6;
 var SPARKLINE_HEIGHT = 32;
 var DELTA_PLACEMENT = "col-start-1 row-span-1 row-start-3 justify-self-start @[288px]/card:col-start-2 @[288px]/card:row-span-2 @[288px]/card:row-start-1 @[288px]/card:justify-self-end";
 var HEADER_CLASS = "@container/card pb-(--card-spacing)";
+var LONG_VALUE_CHARS = 10;
+var DELTA_UNDER_PLACEMENT = "col-start-1 row-span-1 row-start-3 justify-self-start";
+var KPI_FOOTER_CLASS = "flex-col items-start gap-2 rounded-none border-t-0 bg-transparent pt-0 text-sm";
 var PLACEHOLDER = /\{(\w+)\}/g;
 var isJapanese2 = (locale) => locale.toLowerCase().startsWith("ja");
 var isMissing = (v) => v === null || v === void 0 || v === "";
@@ -7479,6 +6654,9 @@ function warnShallowSummary(template) {
     `[KpiCard] summary="${template}" only repeats the delta badge and the previous actual. Say one fact beyond the comparison \u2014 composition, target, record or rate (e.g. "{label}\u306F\u76EE\u6A19\u306E {achievement} \u307E\u3067\u6765\u3066\u3044\u307E\u3059\u3002").`
   );
 }
+function digitGroups(text) {
+  return text.match(/[^,，]*[,，]|[^,，]+$/g) ?? [text];
+}
 function KpiCard({
   label: label2,
   value,
@@ -7487,7 +6665,8 @@ function KpiCard({
   comparison: comparisonProp,
   comparisons,
   provisional,
-  polarity,
+  betterWhen,
+  polarity: polarityProp,
   change,
   neutralBand,
   showPrevious = true,
@@ -7514,6 +6693,7 @@ function KpiCard({
   const isProvisional = provisional !== void 0 && provisional !== false;
   const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : "\u901F\u5831";
   const sample = useSampleMark();
+  const polarity = betterWhen ? betterWhen === "down" ? "lower-is-better" : "higher-is-better" : polarityProp;
   const neutral = polarity === "neutral";
   const hasPrevious = comparison !== void 0 && showPrevious;
   const stacked = allComparisons.length > 1;
@@ -7565,7 +6745,7 @@ function KpiCard({
               /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-3/5" })
             ] }) : null
           ] }),
-          (summary || record || hasTarget && !targetBar || sourceParts.length > 0 || hasUpdated || showSparkline) && /* @__PURE__ */ jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [
+          (summary || record || hasTarget && !targetBar || sourceParts.length > 0 || hasUpdated || showSparkline) && /* @__PURE__ */ jsxs(CardFooter, { className: KPI_FOOTER_CLASS, children: [
             summary && /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-4/5" }),
             record && /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-28 rounded-4xl" }),
             hasTarget && !targetBar && /* @__PURE__ */ jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-3/5" }),
@@ -7646,27 +6826,32 @@ function KpiCard({
     },
     i
   ));
+  const valueText = fmt(value);
+  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] font-medium text-muted-foreground", children: label2 }),
+      /* @__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(
         CardTitle,
         {
           "data-slot": "kpi-card-value",
-          title: fmt(value),
+          title: valueText,
           className: cn(
-            "col-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 font-semibold tracking-tight tabular-nums",
+            "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",
             // Fixed size: the step follows the card width only, never the length of the value.
             valueSize
           ),
           children: [
-            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: fmt(value) }),
+            /* @__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: [
+              group,
+              /* @__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 ? /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-comparisons", className: "flex flex-wrap items-center gap-1", children: deltas }) : /* @__PURE__ */ jsx(CardAction, { className: DELTA_PLACEMENT, children: 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 })),
       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 ? `${baseline} ${fmt(result.previous)}` : `${baseline}\u306E\u5B9F\u7E3E\u306A\u3057` }),
       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(
@@ -7719,8 +6904,8 @@ function KpiCard({
         )
       ] })
     ] }),
-    hasFooter && /* @__PURE__ */ jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [
-      summaryText && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-summary", title: summaryText, className: "line-clamp-2 font-medium tabular-nums", children: summaryText }),
+    hasFooter && /* @__PURE__ */ jsxs(CardFooter, { className: KPI_FOOTER_CLASS, children: [
+      summaryText && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-summary", title: summaryText, className: "line-clamp-2 text-sm leading-relaxed text-muted-foreground tabular-nums", children: summaryText }),
       record && /* @__PURE__ */ jsx(Badge, { "data-slot": "kpi-card-record", variant: "outline", children: record.label }),
       targetText && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-target", className: "text-muted-foreground tabular-nums", children: targetText }),
       sourceParts.length > 0 && /* @__PURE__ */ jsx(
@@ -7728,11 +6913,11 @@ function KpiCard({
         {
           "data-slot": "kpi-card-source",
           title: sourceParts.join("\u30FB"),
-          className: "line-clamp-2 w-full text-xs text-muted-foreground tabular-nums",
+          className: "line-clamp-2 w-full text-xs leading-normal text-muted-foreground tabular-nums",
           children: sourceParts.join("\u30FB")
         }
       ),
-      hasUpdated && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-updated", className: "text-xs text-muted-foreground", children: updatedAtText(updatedAt, updatedAtDisplay, locale, now, timeZone) }),
+      hasUpdated && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-updated", className: "text-xs leading-normal text-muted-foreground", children: updatedAtText(updatedAt, updatedAtDisplay, locale, now, timeZone) }),
       showSparkline && // mt-auto: the footers of a row are as tall as the tallest, so the sparklines share one bottom edge.
       /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-history", className: "mt-auto w-full pt-2 text-chart-1", children: /* @__PURE__ */ jsx(
         Sparkline,
@@ -7756,8 +6941,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"
     }
   },
@@ -7817,11 +7002,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";
@@ -7838,10 +7023,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
       ]
     }
@@ -7861,6 +7046,6 @@ 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-WRSX2MDK.js.map
-//# sourceMappingURL=chunk-WRSX2MDK.js.map
+export { AppShell, AreaChart, BarChart, BarList, COMPARISON_LABELS, CategoryBar, ChartFrame, 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, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, Heatmap, KpiCard, Legend, LineChart, 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, StatusBadge, Tracker, 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-QOXXOFGL.js.map
+//# sourceMappingURL=chunk-QOXXOFGL.js.map