@squadbase/vantage 0.6.2-dev1.9365dcd → 0.6.2-dev1.9d7130b

package/dist/{chunk-HKSVYMYJ.js → chunk-77CISBMG.js}

@@ -1,179 +1,23 @@
-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 { Button } from './chunk-PDOBHMUQ.js';
+import { ChartFrameContext, useChartSurface, resolveChartColors, CHART_OTHER_COLOR, EChart, resolveFillColors } from './chunk-EG4PX726.js';
+import { Sparkline } from './chunk-2IAPIOPS.js';
+import { formatDateRange, EMPTY_VALUE, formatDate, toValueFormatter, formatValue, formatPoints, formatKind, formatDelta, MINUS_SIGN, formatDatesInText, DEFAULT_LOCALE } from './chunk-3RJEOP3J.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-QNOX7WLZ.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, 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';
+import { subMonths, subDays, endOfDay, startOfDay, startOfWeek, subWeeks, endOfWeek, startOfMonth, endOfMonth, isSameDay, addMonths } from 'date-fns';
 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;
@@ -197,36 +41,50 @@ function formatRelativeTime(date, options) {
   const now = nowValue instanceof Date ? nowValue.getTime() : nowValue;
   if (!Number.isFinite(time) || !Number.isFinite(now)) return EMPTY_VALUE;
   const diff = time - now;
-  const rtf = new Intl.RelativeTimeFormat(options?.locale ?? DEFAULT_LOCALE, { numeric: "always" });
+  const rtf = new Intl.RelativeTimeFormat(resolveLocale(options?.locale), { numeric: "always" });
   for (const [unit, size] of UNITS) {
     if (Math.abs(diff) >= size) return rtf.format(Math.trunc(diff / size), unit);
   }
   return rtf.format(Math.trunc(diff / SECOND), "second");
 }
 var REFRESH_MS = 6e4;
+var TEXT = {
+  ja: {
+    justNow: "\u305F\u3063\u305F\u4ECA",
+    relative: (relative2) => `${relative2}\u306B\u66F4\u65B0`,
+    absoluteFirst: (shown, relative2) => `${shown} \u66F4\u65B0\uFF08${relative2}\uFF09`
+  },
+  en: {
+    justNow: "just now",
+    relative: (relative2) => `Updated ${relative2}`,
+    absoluteFirst: (shown, relative2) => `Updated ${shown} (${relative2})`
+  }
+};
 var toMs = (value) => value instanceof Date ? value.getTime() : new Date(value).getTime();
-function relative(at, now) {
-  if (now - at < REFRESH_MS && now - at > -REFRESH_MS) return "\u305F\u3063\u305F\u4ECA";
-  return formatRelativeTime(at, { now });
+function relative(at, now, locale) {
+  if (now - at < REFRESH_MS && now - at > -REFRESH_MS) return TEXT[uiLanguage(locale)].justNow;
+  return formatRelativeTime(at, { now, locale });
 }
-function absolute(at, timeZone) {
+function absolute(at, locale, timeZone) {
   if (!Number.isFinite(at)) return void 0;
-  const zone = new Intl.DateTimeFormat("ja-JP", { timeZone, timeZoneName: "short" }).formatToParts(at).find((part) => part.type === "timeZoneName")?.value;
-  const text = formatDate(at, "datetime", "ja-JP", { timeZone });
+  const zone = new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "short" }).formatToParts(at).find((part) => part.type === "timeZoneName")?.value;
+  const text = formatDate(at, "datetime", locale, { timeZone });
   return zone ? `${text} ${zone}` : text;
 }
-function label(at, now, variant, timeZone) {
+function label(at, now, variant, locale, timeZone) {
   if (!Number.isFinite(at) || !Number.isFinite(now)) return EMPTY_VALUE;
+  const t = TEXT[uiLanguage(locale)];
   if (variant === "relative") {
-    return now - at < REFRESH_MS && now - at > -REFRESH_MS ? "\u305F\u3063\u305F\u4ECA" : `${relative(at, now)}\u306B\u66F4\u65B0`;
+    return now - at < REFRESH_MS && now - at > -REFRESH_MS ? uiLanguage(locale) === "ja" ? t.justNow : t.relative(t.justNow) : t.relative(relative(at, now, locale));
   }
-  const today = formatDate(at, "date", "ja-JP", { timeZone }) === formatDate(now, "date", "ja-JP", { timeZone });
-  const when = formatDate(at, "datetime", "ja-JP", { timeZone });
+  const today = formatDate(at, "date", locale, { timeZone }) === formatDate(now, "date", locale, { timeZone });
+  const when = formatDate(at, "datetime", locale, { timeZone });
   const shown = today ? when.slice(-5) : when;
-  return `${shown} \u66F4\u65B0\uFF08${relative(at, now)}\uFF09`;
+  return t.absoluteFirst(shown, relative(at, now, locale));
 }
 var UpdatedAt = forwardRef(
   ({ at, variant = "relative", timeZone, prefix, now, className }, ref) => {
+    const locale = useLocale();
     const atMs = toMs(at);
     const [current, setCurrent] = useState(null);
     const fixed = now === void 0 ? void 0 : toMs(now);
@@ -239,9 +97,9 @@ var UpdatedAt = forwardRef(
     const clock = fixed ?? current;
     const ready = clock !== null;
     const dateTime = Number.isFinite(atMs) ? new Date(atMs).toISOString() : void 0;
-    const full = ready ? absolute(atMs, timeZone) : void 0;
+    const full = ready ? absolute(atMs, locale, timeZone) : void 0;
     const classes = cn("text-sm text-muted-foreground tabular-nums", className);
-    const text = ready ? `${prefix ?? ""}${label(atMs, clock, variant, timeZone)}` : null;
+    const text = ready ? `${prefix ?? ""}${label(atMs, clock, variant, locale, timeZone)}` : null;
     if (!full) {
       return /* @__PURE__ */ jsx("time", { ref, "data-slot": "updated-at", dateTime, className: classes, suppressHydrationWarning: true, children: text });
     }
@@ -272,9 +130,11 @@ var PageShell = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell", className: cn("flex flex-col", className), ...props })
 );
 PageShell.displayName = "PageShell";
+var SOURCE_PREFIX = { ja: "\u51FA\u5178\uFF1A", en: "Source: " };
 var PageShellHeader = forwardRef(
   ({ className, updatedAt, updatedAtVariant, timeZone, source, period, status, children, ...props }, ref) => {
-    const periodText = period ? formatDateRange(period.start, period.end, { timeZone }) : void 0;
+    const locale = useLocale();
+    const periodText = period ? formatDateRange(period.start, period.end, { timeZone, locale }) : void 0;
     const hasChips = Boolean(source) || periodText !== void 0 && periodText !== EMPTY_VALUE;
     const hasStatus = status !== void 0 && status !== null && status !== false && status !== "";
     return /* @__PURE__ */ jsxs(
@@ -288,11 +148,11 @@ var PageShellHeader = forwardRef(
           children,
           updatedAt !== void 0 && updatedAt !== null ? /* @__PURE__ */ jsx("div", { "data-slot": "page-shell-updated-at", className: "ml-auto max-w-full shrink-0 text-right", children: /* @__PURE__ */ jsx(UpdatedAt, { at: updatedAt, variant: updatedAtVariant, timeZone }) }) : null,
           hasChips ? /* @__PURE__ */ jsxs("div", { "data-slot": "page-shell-chips", className: "order-1 flex basis-full flex-wrap gap-1.5", children: [
-            source ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "h-auto max-w-full whitespace-normal", children: [
-              "\u51FA\u5178\uFF1A",
+            source ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "h-auto max-w-full whitespace-normal text-muted-foreground", children: [
+              SOURCE_PREFIX[uiLanguage(locale)],
               source
             ] }) : null,
-            periodText && periodText !== EMPTY_VALUE ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "tabular-nums", children: periodText }) : null
+            periodText && periodText !== EMPTY_VALUE ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "tabular-nums text-muted-foreground", children: periodText }) : null
           ] }) : null,
           hasStatus ? /* @__PURE__ */ jsx("div", { "data-slot": "page-shell-status", className: "order-2 min-w-0 basis-full", children: status }) : null
         ]
@@ -389,11 +249,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"
 };
@@ -457,6 +317,7 @@ var PageShellContent = forwardRef(
   )
 );
 PageShellContent.displayName = "PageShellContent";
+var PAGE_PLACEHOLDER = { ja: "\u30DA\u30FC\u30B8\u3092\u9078\u629E", en: "Select a page" };
 function flattenItems(item) {
   if (item.children && item.children.length > 0) {
     return item.children.flatMap(flattenItems);
@@ -470,6 +331,7 @@ function NavSelect({
   const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems));
   const currentValue = allItems.find((item) => item.isActive)?.href ?? "";
   const selectItems = allItems.map((item) => ({ value: item.href, label: item.label }));
+  const placeholder = PAGE_PLACEHOLDER[uiLanguage(useLocale())];
   return /* @__PURE__ */ jsxs(
     Select,
     {
@@ -479,7 +341,7 @@ function NavSelect({
         if (href !== null) onNavigate(href);
       },
       children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "\u30DA\u30FC\u30B8\u3092\u9078\u629E" }) }),
+        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
         /* @__PURE__ */ jsx(
           SelectContent,
           {
@@ -652,8 +514,11 @@ var SectionHeader = forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var DEFAULT_SAMPLE_LABEL = "\u898B\u672C\u306E\u5024";
-var SAMPLE_TITLE = "\u5B9F\u30C7\u30FC\u30BF\u306B\u307E\u3060\u3064\u306A\u304C\u3063\u3066\u3044\u306A\u3044\u898B\u672C\u306E\u5024\u3067\u3059";
+var TEXT2 = {
+  ja: { label: "\u898B\u672C\u306E\u5024", title: "\u5B9F\u30C7\u30FC\u30BF\u306B\u307E\u3060\u3064\u306A\u304C\u3063\u3066\u3044\u306A\u3044\u898B\u672C\u306E\u5024\u3067\u3059" },
+  en: { label: "Sample data", title: "Sample values, not connected to real data yet" }
+};
+var DEFAULT_SAMPLE_LABEL = TEXT2.en.label;
 var SampleContext = createContext(null);
 function useSampleMark() {
   return useContext(SampleContext);
@@ -661,20 +526,22 @@ function useSampleMark() {
 function SampleClaim({ children }) {
   return /* @__PURE__ */ jsx(SampleContext.Provider, { value: null, children });
 }
-function SampleBadge({ label: label2 = DEFAULT_SAMPLE_LABEL, className, ...props }) {
+function SampleBadge({ label: label2, className, ...props }) {
+  const t = TEXT2[uiLanguage(useLocale())];
   return /* @__PURE__ */ jsx(
     Badge,
     {
       "data-slot": "sample-badge",
-      title: SAMPLE_TITLE,
-      className: cn("border-warning/30 bg-warning-subtle text-warning align-middle", className),
+      title: t.title,
+      className: cn("border-warning/20 dark:border-warning/25 bg-warning-subtle text-warning align-middle", className),
       ...props,
-      children: label2
+      children: label2 ?? t.label
     }
   );
 }
-function SampleData({ label: label2 = DEFAULT_SAMPLE_LABEL, children }) {
-  const state = useMemo(() => ({ label: label2 }), [label2]);
+function SampleData({ label: label2, children }) {
+  const shown = label2 ?? TEXT2[uiLanguage(useLocale())].label;
+  const state = useMemo(() => ({ label: shown }), [shown]);
   return /* @__PURE__ */ jsx("div", { "data-slot": "sample-data", style: { display: "contents" }, children: /* @__PURE__ */ jsx(SampleContext.Provider, { value: state, children }) });
 }
 var SUBGRID_CLASS = {
@@ -807,230 +674,11 @@ 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,
-    ...styles.fontFamily ? { fontFamily: styles.fontFamily } : {},
-    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.fontFamily === b.fontFamily && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
-}
-function watchChartTokens(onChange) {
-  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, ...tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {} },
-    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,
-        ...tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}
-      },
-      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 TEXT3 = {
+  ja: { emptyTitle: "\u8868\u793A\u3067\u304D\u308B\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093", loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D" },
+  en: { emptyTitle: "No data to display", loading: "Loading" }
+};
 var ChartFrame = forwardRef(function ChartFrame2({
   title,
   summary,
@@ -1047,6 +695,7 @@ var ChartFrame = forwardRef(function ChartFrame2({
   ...props
 }, ref) {
   const id = useId();
+  const t = TEXT3[uiLanguage(useLocale())];
   const titleId = title ? `${id}-title` : void 0;
   const summaryId = summary ? `${id}-summary` : void 0;
   const state = isLoading ? "loading" : isEmpty ? "empty" : "ready";
@@ -1068,7 +717,7 @@ var ChartFrame = forwardRef(function ChartFrame2({
         "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 }) : state === "empty" ? /* @__PURE__ */ jsx(ChartEmpty, { ...emptyState }) : /* @__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: true, children })
       }
     ),
     state === "ready" && dataTable && dataTable.rows.length > 0 && /* @__PURE__ */ jsx(ChartDataTableView, { table: dataTable, fallbackCaption: title ?? ariaLabel })
@@ -1078,14 +727,14 @@ ChartFrame.displayName = "ChartFrame";
 var BAR_HEIGHTS = [58, 74, 46, 88, 64, 80, 52];
 var LIST_WIDTHS = [92, 76, 64, 48, 36];
 var LINE_POINTS = "0,70 16,58 33,62 50,40 66,46 83,28 100,34";
-function ChartSkeleton({ variant }) {
+function ChartSkeleton({ variant, loadingText }) {
   const pulse = "animate-pulse motion-reduce:animate-none";
   return /* @__PURE__ */ jsxs("div", { "data-slot": "chart-skeleton", "data-variant": variant, className: "absolute inset-0 flex flex-col gap-3", children: [
     /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "contents", children: variant === "list" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 flex-col justify-around", pulse), children: LIST_WIDTHS.map((w) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx("div", { className: "h-5 rounded-sm bg-muted", style: { width: `${w}%` } }) }, w)) }) : variant === "donut" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 items-center justify-center", pulse), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 100", className: "h-full max-h-full w-auto text-muted", children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: "currentColor", strokeWidth: "14" }) }) }) : variant === "bar" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 items-end gap-3 px-1", pulse), children: BAR_HEIGHTS.map((h, i) => /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-t-sm bg-muted", style: { height: `${h}%` } }, i)) }) : (
       // A soft muted silhouette only — no stroke, no baseline, nothing that reads as a data line.
       /* @__PURE__ */ jsx("div", { className: cn("relative flex-1", pulse), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full text-muted", children: /* @__PURE__ */ jsx("polygon", { points: `${LINE_POINTS} 100,100 0,100`, fill: "currentColor", opacity: variant === "area" ? 0.8 : 0.5 }) }) })
     ) }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\u8AAD\u307F\u8FBC\u307F\u4E2D" })
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText })
   ] });
 }
 function ChartDataTableView({ table, fallbackCaption }) {
@@ -1098,370 +747,20 @@ function ChartDataTableView({ table, fallbackCaption }) {
     ) }, r)) })
   ] }) });
 }
-function ChartEmpty({ title, description, action }) {
+function ChartEmpty({ title, description, action, defaultTitle }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "chart-empty",
       className: "absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-md border border-dashed border-border p-6 text-center",
       children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-balance", children: title ?? DEFAULT_EMPTY_TITLE }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-balance", children: title ?? defaultTitle }),
         description && /* @__PURE__ */ jsx("p", { className: "max-w-prose text-sm text-balance text-muted-foreground", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-3", children: 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 withGraphicFont(option, fontFamily) {
-  const graphic = option.graphic;
-  if (!fontFamily || !Array.isArray(graphic)) return option;
-  return {
-    ...option,
-    graphic: graphic.map(
-      (g) => g && g.type === "text" && g.style && !g.style.fontFamily ? { ...g, style: { ...g.style, fontFamily } } : g
-    )
-  };
-}
-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 base = readChartTokens();
-      const font = containerRef.current ? getComputedStyle(containerRef.current).fontFamily : "";
-      const next = base && font ? { ...base, fontFamily: font } : base;
-      if (sameChartTokens(tokensRef.current, next)) return;
-      tokensRef.current = next;
-      setTokens(next);
-    };
-    sync();
-    const stop = watchChartTokens(sync);
-    const ancestors = new MutationObserver(sync);
-    for (let node = containerRef.current?.parentElement; node; node = node.parentElement) {
-      ancestors.observe(node, { attributes: true, attributeFilter: ["class", "style"] });
-    }
-    return () => {
-      stop();
-      ancestors.disconnect();
-    };
-  }, [theme]);
-  const 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 = withGraphicFont(withMotionPreference(option, reducedMotion), theme === void 0 ? tokens?.fontFamily : void 0);
-    instance.setOption(next, echartSetOptionOpts(appliedRef.current, next));
-    appliedRef.current = next;
-  }, [instance, option, reducedMotion, theme, tokens?.fontFamily]);
-  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"]);
@@ -1504,37 +803,63 @@ function chartColorAt(colors, i) {
 function tintCss(cssColor, percent) {
   return `color-mix(in oklab, ${cssColor} ${percent}%, transparent)`;
 }
-function resolveValueFormatter(valueFormatter, format2, locale) {
-  return valueFormatter ?? toValueFormatter(format2, locale);
+function resolveValueFormatter(valueFormatter, format, locale) {
+  return valueFormatter ?? toValueFormatter(format, locale);
 }
-function resolveAxisFormatter(valueFormatter, format2, locale = DEFAULT_LOCALE) {
+function resolveAxisFormatter(valueFormatter, format, localeArg) {
   if (valueFormatter) return valueFormatter;
-  const spec = format2 === void 0 ? { type: "compact" } : typeof format2 === "string" ? { type: format2 } : format2;
-  if (spec.type !== "compact" && spec.type !== "number" && spec.type !== "currency") return toValueFormatter(format2, locale);
+  const locale = resolveLocale(localeArg);
+  const spec = format === void 0 ? { type: "compact" } : typeof format === "string" ? { type: format } : format;
+  if (spec.type !== "compact" && spec.type !== "number" && spec.type !== "currency") return toValueFormatter(format, locale);
   const currency = "currency" in spec ? spec.currency : void 0;
   const short = spec.type === "currency" ? { type: "currency", currency, notation: "compact" } : { type: "compact" };
   return (value) => formatValue(value, short, locale);
 }
-var JA_UNITS = [
-  { char: "\u5146", size: 1e12 },
-  { char: "\u5104", size: 1e8 },
-  { char: "\u4E07", size: 1e4 }
-];
-var JA_NUMBER_TOKEN_RE = /\d[\d,]*(?:\.\d+)?(?:兆|億|万)?/;
-function resolveAxisTickFormatter(valueFormatter, format2, locale = DEFAULT_LOCALE) {
-  const base = resolveAxisFormatter(valueFormatter, format2, locale);
-  const spec = format2 === void 0 ? { type: "compact" } : typeof format2 === "string" ? { type: format2 } : format2;
-  const aligns = !valueFormatter && locale.toLowerCase().startsWith("ja") && (spec.type === "compact" || spec.type === "number" || spec.type === "currency");
-  if (!aligns) return () => base;
+var compactUnitCache = /* @__PURE__ */ new Map();
+function compactUnits(locale) {
+  const cached = compactUnitCache.get(locale);
+  if (cached !== void 0) return cached;
+  let units = [];
+  try {
+    const compact = new Intl.NumberFormat(locale, { notation: "compact" });
+    const seen = /* @__PURE__ */ new Set();
+    for (let exp = 3; exp <= 15; exp++) {
+      const parts = compact.formatToParts(10 ** exp);
+      const at = parts.findIndex((p) => p.type === "compact");
+      if (at === -1) continue;
+      if (parts[at - 1]?.type !== "integer" || at !== parts.length - 1) {
+        units = null;
+        break;
+      }
+      const token = parts[at].value;
+      if (seen.has(token)) continue;
+      seen.add(token);
+      units.push({ token, size: 10 ** exp });
+    }
+  } catch {
+    units = null;
+  }
+  const sorted = units && units.length > 0 ? units.sort((a, b) => b.size - a.size) : null;
+  compactUnitCache.set(locale, sorted);
+  return sorted;
+}
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function resolveAxisTickFormatter(valueFormatter, format, localeArg) {
+  const locale = resolveLocale(localeArg);
+  const base = resolveAxisFormatter(valueFormatter, format, locale);
+  const spec = format === void 0 ? { type: "compact" } : typeof format === "string" ? { type: format } : format;
+  const units = !valueFormatter && (spec.type === "compact" || spec.type === "number" || spec.type === "currency") ? compactUnits(locale) : null;
+  if (!units) return () => base;
   const number = new Intl.NumberFormat(locale, { maximumFractionDigits: 3 });
+  const numberToken = new RegExp(`\\d[\\d,]*(?:\\.\\d+)?(?:${units.map((u) => escapeRegExp(u.token)).join("|")})?`);
   return (top) => {
-    const unit = JA_UNITS.find((u) => Math.abs(top) >= u.size);
+    const unit = units.find((u) => Math.abs(top) >= u.size);
     if (!unit) return base;
     return (value) => {
       const text = base(value);
       if (value === 0 || !Number.isFinite(value)) return text;
-      const scaled = `${number.format(Math.abs(value) / unit.size)}${unit.char}`;
-      return text.replace(JA_NUMBER_TOKEN_RE, () => scaled);
+      const scaled = `${number.format(Math.abs(value) / unit.size)}${unit.token}`;
+      return text.replace(numberToken, () => scaled);
     };
   };
 }
@@ -1551,8 +876,15 @@ function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 var MAX_CHART_SERIES = 5;
-var OTHER_SERIES_LABEL = "\u305D\u306E\u4ED6";
-function aggregateTopN(items, n = MAX_CHART_SERIES, otherLabel = OTHER_SERIES_LABEL) {
+var OTHER_SERIES_LABELS = { ja: "\u305D\u306E\u4ED6", en: "Other" };
+function otherSeriesLabel(locale) {
+  return OTHER_SERIES_LABELS[uiLanguage(resolveLocale(locale))];
+}
+var OTHER_NAMES = new Set(Object.values(OTHER_SERIES_LABELS));
+function isOtherName(name) {
+  return typeof name === "string" && OTHER_NAMES.has(name);
+}
+function aggregateTopN(items, n = MAX_CHART_SERIES, otherLabel = otherSeriesLabel()) {
   if (items.length <= n) return { top: [...items], rest: [], other: null };
   const ranked = items.map((item, i) => ({ item, i })).sort((a, b) => b.item.value - a.item.value || a.i - b.i);
   const keep = new Set(ranked.slice(0, n).map((r) => r.i));
@@ -1560,7 +892,7 @@ function aggregateTopN(items, n = MAX_CHART_SERIES, otherLabel = OTHER_SERIES_LA
   const rest = items.filter((_, i) => !keep.has(i));
   return { top, rest, other: { name: otherLabel, value: rest.reduce((sum, item) => sum + item.value, 0) } };
 }
-function aggregateSeries(data, categories, n = MAX_CHART_SERIES, otherLabel = OTHER_SERIES_LABEL) {
+function aggregateSeries(data, categories, n = MAX_CHART_SERIES, otherLabel = otherSeriesLabel()) {
   const totals = categories.map((name) => ({
     name,
     value: data.reduce((sum, row) => sum + (toChartNumber(row[name]) ?? 0), 0)
@@ -1581,12 +913,13 @@ function aggregateSeries(data, categories, n = MAX_CHART_SERIES, otherLabel = OT
     otherCategory: other.name
   };
 }
-function aggregateSeriesKeeping(data, categories, keep, n = MAX_CHART_SERIES) {
-  if (keep === void 0 || !categories.includes(keep)) return aggregateSeries(data, categories, n);
+function aggregateSeriesKeeping(data, categories, keep, n = MAX_CHART_SERIES, otherLabel = otherSeriesLabel()) {
+  if (keep === void 0 || !categories.includes(keep)) return aggregateSeries(data, categories, n, otherLabel);
   const aggregated = aggregateSeries(
     data,
     categories.filter((c) => c !== keep),
-    n
+    n,
+    otherLabel
   );
   return { ...aggregated, categories: [...aggregated.categories, keep] };
 }
@@ -1608,7 +941,7 @@ function seriesColorsFor(categories, colors, otherColor, otherCategory = null, a
   const list = Array.isArray(colors) ? colors : void 0;
   const record = !Array.isArray(colors) && colors ? colors : void 0;
   return categories.map((category, i) => {
-    if (otherCategory !== null && category === otherCategory || category === OTHER_SERIES_LABEL) return otherColor;
+    if (otherCategory !== null && category === otherCategory || isOtherName(category)) return otherColor;
     const fromRecord = record?.[category];
     if (fromRecord) return fromRecord;
     if (list && list.length > 0) {
@@ -1618,7 +951,7 @@ function seriesColorsFor(categories, colors, otherColor, otherCategory = null, a
     return DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length];
   });
 }
-function donutSlices(data, { index, value, colors, maxSlices = MAX_CHART_SERIES, otherColor, otherLabel = OTHER_SERIES_LABEL }) {
+function donutSlices(data, { index, value, colors, maxSlices = MAX_CHART_SERIES, otherColor, otherLabel = otherSeriesLabel() }) {
   const items = data.map((row, i) => {
     const n = toChartNumber(row[value]);
     return { name: String(row[index] ?? ""), value: n !== null && n > 0 ? n : 0, row, i };
@@ -1628,7 +961,8 @@ function donutSlices(data, { index, value, colors, maxSlices = MAX_CHART_SERIES,
   const slices = top.map((item, rank) => ({
     name: item.name,
     value: item.value,
-    color: palette[rank % palette.length],
+    // A row the data itself names「その他」/ "Other" is the same remainder: grey, like the folded slice.
+    color: isOtherName(item.name) ? otherColor : palette[rank % palette.length],
     isOther: false,
     row: item.row
   }));
@@ -1649,7 +983,7 @@ function sortBarListData(data, sortOrder) {
   else if (sortOrder === "descending") rows.sort((a, b) => b.value - a.value);
   return rows;
 }
-function barListRows(data, { index = "name", category = "value", sortOrder = "descending", maxItems = MAX_CHART_SERIES, otherLabel = OTHER_SERIES_LABEL, exclude } = {}) {
+function barListRows(data, { index = "name", category = "value", sortOrder = "descending", maxItems = MAX_CHART_SERIES, otherLabel = otherSeriesLabel(), exclude } = {}) {
   const items = data.map((row) => {
     const cells = row;
     const name = String(cells[index] ?? "");
@@ -1683,7 +1017,7 @@ var BAR_LIST_TINT = 45;
 var BAR_LIST_OTHER_TINT = 30;
 function barListFills(rows, color, otherColor) {
   return rows.map(
-    (row) => row.isOther ? tintCss(otherColor, BAR_LIST_OTHER_TINT) : tintCss(chartColorToCss(row.color ?? color), BAR_LIST_TINT)
+    (row) => row.isOther || isOtherName(row.name) ? tintCss(otherColor, BAR_LIST_OTHER_TINT) : tintCss(chartColorToCss(row.color ?? color), BAR_LIST_TINT)
   );
 }
 function barListShareText(value, total) {
@@ -1780,6 +1114,22 @@ function progressCircleGeometry(value, max, radius, strokeWidth) {
   const circumference = 2 * Math.PI * normalizedRadius;
   return { size: radius * 2, normalizedRadius, circumference, offset: circumference * (1 - ratio), ratio };
 }
+var SUMMARY_TEXT = {
+  ja: {
+    up: "\u3001\u524D\u306E\u70B9\u3088\u308A\u5897\u52A0",
+    down: "\u3001\u524D\u306E\u70B9\u3088\u308A\u6E1B\u5C11",
+    flat: "\u3001\u524D\u306E\u70B9\u3068\u6A2A\u3070\u3044",
+    latest: (label2, value) => `\u6700\u65B0 ${label2} \u306F ${value}`,
+    top: (name, share) => `\u6700\u5927\u306F ${name}(${share})`
+  },
+  en: {
+    up: ", up from the previous point",
+    down: ", down from the previous point",
+    flat: ", flat from the previous point",
+    latest: (label2, value) => `Latest ${label2}: ${value}`,
+    top: (name, share) => `Largest: ${name} (${share})`
+  }
+};
 function buildChartSummary(input) {
   const key = input.categories[0];
   if (key === void 0) return void 0;
@@ -1791,54 +1141,96 @@ function buildChartSummary(input) {
   }
   const latest = points[points.length - 1];
   if (!latest) return void 0;
-  const text = input.valueFormatter ?? toValueFormatter(input.format ?? "compact");
+  const locale = resolveLocale(input.locale);
+  const t = SUMMARY_TEXT[uiLanguage(locale)];
+  const text = input.valueFormatter ?? toValueFormatter(input.format ?? "compact", locale);
   const prev = points[points.length - 2];
-  const direction = !prev ? "" : latest.value > prev.value ? "\u3001\u524D\u306E\u70B9\u3088\u308A\u5897\u52A0" : latest.value < prev.value ? "\u3001\u524D\u306E\u70B9\u3088\u308A\u6E1B\u5C11" : "\u3001\u524D\u306E\u70B9\u3068\u6A2A\u3070\u3044";
+  const direction = !prev ? "" : latest.value > prev.value ? t.up : latest.value < prev.value ? t.down : t.flat;
   const head = input.title ? `${input.title}: ` : "";
-  return `${head}\u6700\u65B0 ${latest.label} \u306F ${text(latest.value)}${direction}`;
+  return `${head}${t.latest(latest.label, text(latest.value))}${direction}`;
 }
-function buildShareSummary(slices, title) {
+function buildShareSummary(slices, title, locale) {
   const total = slices.reduce((sum, s) => sum + s.value, 0);
   const top = slices[0];
   if (!top || total <= 0) return void 0;
   const share = `${Math.round(top.value / total * 1e3) / 10}%`;
-  return `${title ? `${title}: ` : ""}\u6700\u5927\u306F ${top.name}(${share})`;
+  return `${title ? `${title}: ` : ""}${SUMMARY_TEXT[uiLanguage(resolveLocale(locale))].top(top.name, share)}`;
 }
 
 // ../squadkit/registry/lib/comparison.ts
 var COMPARISON_LABELS = {
-  "prior-period": "\u524D\u671F\u6BD4",
-  "prior-year": "\u524D\u5E74\u540C\u671F\u6BD4",
-  target: "\u76EE\u6A19\u6BD4"
+  "prior-period": "vs. prior period",
+  "prior-year": "vs. same period last year",
+  target: "vs. target"
 };
 var BASELINE_NOUNS = {
-  "prior-period": {
-    day: "\u524D\u65E5",
-    week: "\u524D\u9031",
-    month: "\u524D\u6708",
-    quarter: "\u524D\u56DB\u534A\u671F",
-    year: "\u524D\u5E74",
-    unknown: "\u524D\u671F"
+  ja: {
+    "prior-period": {
+      day: "\u524D\u65E5",
+      week: "\u524D\u9031",
+      month: "\u524D\u6708",
+      quarter: "\u524D\u56DB\u534A\u671F",
+      year: "\u524D\u5E74",
+      unknown: "\u524D\u671F"
+    },
+    "prior-year": {
+      day: "\u524D\u5E74\u540C\u65E5",
+      week: "\u524D\u5E74\u540C\u9031",
+      month: "\u524D\u5E74\u540C\u6708",
+      quarter: "\u524D\u5E74\u540C\u671F",
+      year: "\u524D\u5E74",
+      unknown: "\u524D\u5E74\u540C\u671F"
+    },
+    target: "\u76EE\u6A19",
+    custom: "\u6BD4\u8F03\u5BFE\u8C61"
   },
-  "prior-year": {
-    day: "\u524D\u5E74\u540C\u65E5",
-    week: "\u524D\u5E74\u540C\u9031",
-    month: "\u524D\u5E74\u540C\u6708",
-    quarter: "\u524D\u5E74\u540C\u671F",
-    year: "\u524D\u5E74",
-    unknown: "\u524D\u5E74\u540C\u671F"
+  en: {
+    "prior-period": {
+      day: "prior day",
+      week: "prior week",
+      month: "prior month",
+      quarter: "prior quarter",
+      year: "prior year",
+      unknown: "prior period"
+    },
+    "prior-year": {
+      day: "same day last year",
+      week: "same week last year",
+      month: "same month last year",
+      quarter: "same quarter last year",
+      year: "prior year",
+      unknown: "same period last year"
+    },
+    target: "target",
+    custom: "baseline"
   }
 };
-function comparisonBaseline(vs, grain, label2, toDate2) {
+var LABEL_OF = {
+  ja: (baseline) => `${baseline}\u6BD4`,
+  en: (baseline) => `vs. ${baseline}`
+};
+function baselineOfLabel(named, language) {
+  if (named.length > 1 && named.endsWith("\u6BD4")) return named.slice(0, -1);
+  if (language === "en") {
+    const stripped = named.replace(/^vs\.?\s+/i, "");
+    if (stripped) return stripped;
+  }
+  return named;
+}
+function comparisonBaseline(vs, grain, label2, toDate2, locale) {
+  const language = uiLanguage(resolveLocale(locale));
+  const nouns = BASELINE_NOUNS[language];
   const named = label2?.trim();
-  if (named) return named.length > 1 && named.endsWith("\u6BD4") ? named.slice(0, -1) : named;
-  if (vs === "custom") return "\u6BD4\u8F03\u5BFE\u8C61";
-  if (vs === "target") return "\u76EE\u6A19";
-  if (vs === "prior-year" && toDate2) return BASELINE_NOUNS["prior-year"].unknown;
-  return BASELINE_NOUNS[vs][grain ?? "unknown"];
+  if (named) return baselineOfLabel(named, language);
+  if (vs === "custom") return nouns.custom;
+  if (vs === "target") return nouns.target;
+  if (vs === "prior-year" && toDate2) return nouns["prior-year"].unknown;
+  return nouns[vs][grain ?? "unknown"];
 }
-function comparisonLabel(vs, grain, label2, toDate2) {
-  return label2?.trim() ? label2 : `${comparisonBaseline(vs, grain, void 0, toDate2)}\u6BD4`;
+function comparisonLabel(vs, grain, label2, toDate2, locale) {
+  if (label2?.trim()) return label2;
+  const resolved = resolveLocale(locale);
+  return LABEL_OF[uiLanguage(resolved)](comparisonBaseline(vs, grain, void 0, toDate2, resolved));
 }
 var toNumber = (v) => v === null || v === void 0 || Number.isNaN(v) ? null : v;
 function computeComparison(current, comparison, options) {
@@ -1846,7 +1238,7 @@ function computeComparison(current, comparison, options) {
   const neutralBand = options?.neutralBand ?? 0.01;
   const cur = toNumber(current);
   const prev = toNumber(comparison.previous);
-  const label2 = comparisonLabel(comparison.vs, comparison.grain, comparison.label, comparison.toDate);
+  const label2 = comparisonLabel(comparison.vs, comparison.grain, comparison.label, comparison.toDate, options?.locale);
   const difference = cur !== null && prev !== null ? cur - prev : null;
   const ratio = difference !== null && prev !== null && prev !== 0 ? difference / Math.abs(prev) : null;
   let direction;
@@ -1859,20 +1251,20 @@ function computeComparison(current, comparison, options) {
   else if (direction === "down") sentiment = polarity === "higher-is-better" ? "negative" : "positive";
   return { current: cur, previous: prev, difference, ratio, direction, sentiment, label: label2, vs: comparison.vs };
 }
-function defaultChangeDisplay(format2) {
-  return formatKind(format2) === "percent" ? "points" : "relative";
+function defaultChangeDisplay(format) {
+  return formatKind(format) === "percent" ? "points" : "relative";
 }
-function formatChange(result, display = "relative", locale = DEFAULT_LOCALE, format2, digits) {
+function formatChange(result, display = "relative", locale, format, digits) {
   if (result.direction === "none") return null;
-  if (display === "difference") return result.difference === null ? null : formatDelta(result.difference, format2, locale);
+  if (display === "difference") return result.difference === null ? null : formatDelta(result.difference, format, locale);
   if (display === "points")
     return result.difference === null ? null : formatPoints(result.difference, locale, digits === void 0 ? void 0 : { digits });
   return result.ratio === null ? null : formatDelta(result.ratio, digits === void 0 ? "percent" : { type: "percent", digits }, locale);
 }
-function formatChangeAmount(result, display = "relative", locale = DEFAULT_LOCALE, format2, digits) {
+function formatChangeAmount(result, display = "relative", locale, format, digits) {
   if (result.direction === "none") return null;
   if (display === "difference")
-    return result.difference === null ? null : formatValue(Math.abs(result.difference), format2, locale);
+    return result.difference === null ? null : formatValue(Math.abs(result.difference), format, locale);
   if (display === "points")
     return result.difference === null ? null : formatPoints(result.difference, locale, { signDisplay: "never", ...digits === void 0 ? {} : { digits } });
   return result.ratio === null ? null : formatValue(Math.abs(result.ratio), digits === void 0 ? "percent" : { type: "percent", digits }, locale);
@@ -1891,6 +1283,29 @@ function toneForValue(value, thresholds) {
 }
 
 // ../squadkit/registry/lib/chart-options.ts
+var CHART_TEXT = {
+  ja: {
+    target: "\u76EE\u6A19",
+    forecast: "\u4E88\u6E2C",
+    total: "\u5408\u8A08",
+    provisional: "\u901F\u5831",
+    noComparison: "\u6BD4\u8F03\u306A\u3057",
+    share: (share) => `\uFF08${share}\uFF09`,
+    targetRate: (rate) => `\uFF08\u9054\u6210\u7387 ${rate}\uFF09`,
+    provisionalTitle: (title, label2) => `${title}(${label2})`
+  },
+  en: {
+    target: "Target",
+    forecast: "Forecast",
+    total: "Total",
+    provisional: "Preliminary",
+    noComparison: "No comparison",
+    share: (share) => ` (${share})`,
+    targetRate: (rate) => ` (${rate} achieved)`,
+    provisionalTitle: (title, label2) => `${title} (${label2})`
+  }
+};
+var chartText = (locale) => CHART_TEXT[uiLanguage(resolveLocale(locale))];
 function chartMotion(reducedMotion) {
   if (reducedMotion) return { animation: false };
   return { animation: true, animationDuration: 0, animationDurationUpdate: 300, animationEasingUpdate: "cubicOut" };
@@ -1955,12 +1370,12 @@ function parseTimeIndex(values) {
 var timeFormatCache = /* @__PURE__ */ new Map();
 function timeFormat(locale, options) {
   const key = `${locale}|${JSON.stringify(options)}`;
-  let format2 = timeFormatCache.get(key);
-  if (!format2) {
-    format2 = new Intl.DateTimeFormat(locale, options);
-    timeFormatCache.set(key, format2);
+  let format = timeFormatCache.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, options);
+    timeFormatCache.set(key, format);
   }
-  return format2;
+  return format;
 }
 var toDate = (t) => new Date(t.year, t.month - 1, t.day);
 var TIME_AXIS_MAX_LABELS = 6;
@@ -1979,9 +1394,10 @@ function timeAxisLabelStep(values, maxLabels = TIME_AXIS_MAX_LABELS) {
   const steps = TIME_AXIS_STEPS[parsed.granularity];
   return steps.find((step) => Math.ceil(count / step) <= max) ?? Math.ceil(count / max);
 }
-function timeAxisLabels(values, locale = DEFAULT_LOCALE, shown = () => true) {
+function timeAxisLabels(values, localeArg, shown = () => true) {
   const parsed = parseTimeIndex(values);
   if (!parsed) return null;
+  const locale = resolveLocale(localeArg);
   const { granularity, times } = parsed;
   let prevYear = null;
   return times.map((t, i) => {
@@ -1993,9 +1409,10 @@ function timeAxisLabels(values, locale = DEFAULT_LOCALE, shown = () => true) {
     return timeFormat(locale, options).format(toDate(t));
   });
 }
-function timeTooltipLabels(values, locale = DEFAULT_LOCALE) {
+function timeTooltipLabels(values, localeArg) {
   const parsed = parseTimeIndex(values);
   if (!parsed) return null;
+  const locale = resolveLocale(localeArg);
   const options = parsed.granularity === "year" ? { year: "numeric" } : parsed.granularity === "month" ? { year: "numeric", month: "long" } : { year: "numeric", month: "long", day: "numeric" };
   return parsed.times.map((t, i) => t === null ? String(values[i] ?? "") : timeFormat(locale, options).format(toDate(t)));
 }
@@ -2072,16 +1489,16 @@ function escapeHtml(value) {
 }
 var shareFormat = new Intl.NumberFormat(DEFAULT_LOCALE, { maximumFractionDigits: 1 });
 var formatShare = (share) => `${shareFormat.format(share)}%`;
-function tooltipHtml(title, rows, valueFormatter, notes = []) {
+function tooltipHtml(title, rows, valueFormatter, notes = [], locale) {
+  const t = chartText(locale);
   const lines = rows.map(
-    (row) => `<div style="display:flex;align-items:center;gap:8px;line-height:20px"><span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${escapeHtml(row.color)}"></span><span style="flex:1;opacity:.8">${escapeHtml(row.name)}</span><span style="font-weight:600;font-variant-numeric:tabular-nums;margin-left:12px">${row.value === null ? EMPTY_VALUE : escapeHtml(valueFormatter(row.value))}${row.share === void 0 ? "" : `<span style="opacity:.6;margin-left:4px">\uFF08${escapeHtml(formatShare(row.share))}\uFF09</span>`}</span></div>` + (row.note === void 0 ? "" : `<div style="padding-left:16px;line-height:18px;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums">${escapeHtml(row.note)}</div>`)
+    (row) => `<div style="display:flex;align-items:center;gap:8px;line-height:20px"><span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${escapeHtml(row.color)}"></span><span style="flex:1;opacity:.8">${escapeHtml(row.name)}</span><span style="font-weight:600;font-variant-numeric:tabular-nums;margin-left:12px">${row.value === null ? EMPTY_VALUE : escapeHtml(valueFormatter(row.value))}${row.share === void 0 ? "" : `<span style="opacity:.6;margin-left:4px">${escapeHtml(t.share(formatShare(row.share)))}</span>`}</span></div>` + (row.note === void 0 ? "" : `<div style="padding-left:16px;line-height:18px;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums">${escapeHtml(row.note)}</div>`)
   );
   const noteLines = notes.map(
     (note) => `<div style="margin-top:4px;line-height:18px;font-size:12px;opacity:.7">${escapeHtml(note)}</div>`
   );
   return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(title)}</div>${lines.join("")}${noteLines.join("")}`;
 }
-var BAR_TARGET_LABEL = "\u76EE\u6A19";
 var TARGET_MARKER_OVERHANG = 4;
 function targetMarkerRenderer(horizontalBars, barCategoryGap, color) {
   return (_params, api) => {
@@ -2107,10 +1524,10 @@ function achievementRate(value, target) {
   if (value === null || value === void 0 || target === null || target === void 0 || !(target > 0)) return null;
   return value / target * 100;
 }
-function barTargetNote(label2, value, target, valueFormatter) {
+function barTargetNote(label2, value, target, valueFormatter, locale) {
   if (target === null) return null;
   const rate = achievementRate(value, target);
-  return `${label2} ${valueFormatter(target)}${rate === null ? "" : `\uFF08\u9054\u6210\u7387 ${formatShare(rate)}\uFF09`}`;
+  return `${label2} ${valueFormatter(target)}${rate === null ? "" : chartText(locale).targetRate(formatShare(rate))}`;
 }
 function barHalfWidth(barCategoryGap) {
   const gap = typeof barCategoryGap === "string" && /^\d+(\.\d+)?%$/.test(barCategoryGap.trim()) ? parseFloat(barCategoryGap) / 100 : 0.2;
@@ -2158,9 +1575,8 @@ var OVERLAY_SERIES_ID = "__overlay";
 var TARGET_MARKER_SERIES_ID = "__target-marker";
 var TARGET_LEGEND_SERIES_ID = "__target-legend";
 var TARGET_LEGEND_ICON = "path://M0,0 L100,0 L100,24 L0,24 Z";
-var DEFAULT_FORECAST_LABEL = "\u4E88\u6E2C";
-function forecastBoundaryText(label2 = DEFAULT_FORECAST_LABEL) {
-  return `${label2} \u2192`;
+function forecastBoundaryText(label2, locale) {
+  return `${label2 ?? chartText(locale).forecast} \u2192`;
 }
 var COMPARISON_LINE_WIDTH = 1.5;
 var COMPARISON_OPACITY = 0.6;
@@ -2186,7 +1602,6 @@ function isDarkSurface(color) {
   });
   return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.4;
 }
-var STACK_TOTAL_LABEL = "\u5408\u8A08";
 function stackTotalsOf(values) {
   const length = Math.max(0, ...values.map((v) => v.length));
   return Array.from({ length }, (_, i) => {
@@ -2252,13 +1667,15 @@ function indexGrain(values) {
   const parsed = parseTimeIndex(values);
   return parsed ? parsed.granularity : null;
 }
-function comparisonNote(current, previous, comparison, grain, format2, locale = DEFAULT_LOCALE) {
+function comparisonNote(current, previous, comparison, grain, format, localeArg) {
+  const locale = resolveLocale(localeArg);
   const result = computeComparison(
     current,
-    comparison.vs === "custom" ? { previous, vs: "custom", label: comparison.label ?? "", grain } : { previous, vs: comparison.vs, label: comparison.label, grain }
+    comparison.vs === "custom" ? { previous, vs: "custom", label: comparison.label ?? "", grain } : { previous, vs: comparison.vs, label: comparison.label, grain },
+    { locale }
   );
-  const text = formatChange(result, defaultChangeDisplay(format2), locale, format2);
-  if (text === null) return `\u6BD4\u8F03\u306A\u3057 ${result.label}`;
+  const text = formatChange(result, defaultChangeDisplay(format), locale, format);
+  if (text === null) return `${chartText(locale).noComparison} ${result.label}`;
   const arrow = result.direction === "up" ? "\u2191" : result.direction === "down" ? "\u2193" : "\u2192";
   return `${arrow} ${text.replace(/^-/, "\u2212")} ${result.label}`;
 }
@@ -2283,7 +1700,6 @@ function buildCartesianOption(cfg) {
     toneColors,
     valueFormatter,
     axisFormatter = valueFormatter,
-    locale = DEFAULT_LOCALE,
     type = "default",
     layout = "horizontal",
     curveType = "linear",
@@ -2320,7 +1736,9 @@ function buildCartesianOption(cfg) {
     chartOptions,
     reserveActions = false
   } = cfg;
-  const provisionalLabel = cfg.provisionalLabel ?? DEFAULT_PROVISIONAL_LABEL;
+  const locale = resolveLocale(cfg.locale);
+  const text = chartText(locale);
+  const provisionalLabel = cfg.provisionalLabel ?? text.provisional;
   const stacked = kind !== "line" && type !== "default";
   const percent = kind !== "line" && type === "percent";
   const horizontalBars = kind === "bar" && layout === "vertical";
@@ -2391,8 +1809,8 @@ function buildCartesianOption(cfg) {
   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);
   const hasTarget = !perBarTarget && target !== void 0 && Number.isFinite(target);
-  const targetText = hasTarget ? targetLabel ?? `\u76EE\u6A19 ${axisFormatter(target)}` : "";
-  const highlightText = (value) => shareHighlight ? `${Math.round(value)}%` : `${stackTotals ? `${STACK_TOTAL_LABEL} ` : ""}${axisFormatter(value)}`;
+  const targetText = hasTarget ? targetLabel ?? `${text.target} ${axisFormatter(target)}` : "";
+  const highlightText = (value) => shareHighlight ? `${Math.round(value)}%` : `${stackTotals ? `${text.total} ` : ""}${axisFormatter(value)}`;
   const nearTargetLabel = (p, side) => {
     if (!hasTarget || !plotWidth || kind === "bar" || labels.length < 2) return false;
     if (side === "under" ? p.value > target : p.value <= target) return false;
@@ -2409,7 +1827,7 @@ function buildCartesianOption(cfg) {
   const below = (p) => !shareHighlight && !hideTargetLabel && nearTargetLabel(p, "under");
   const targetLabelBelow = !shareHighlight && !hideTargetLabel && highlightPoints.some((p) => nearTargetLabel(p, "over"));
   const barTargets = perBarTarget && targetKey && !percent && (stacked || categories.length === 1) ? barTargetValues(data, targetKey) : null;
-  const barTargetName = targetLabel ?? BAR_TARGET_LABEL;
+  const barTargetName = targetLabel ?? text.target;
   const barTargetColor = labelColor ?? guideColor;
   const markPointFor = (c, color) => c === highlightSeries && highlightPoints.length > 0 ? {
     silent: true,
@@ -2588,7 +2006,7 @@ function buildCartesianOption(cfg) {
       data: []
     });
   }
-  const forecastLabel = forecast?.label ?? DEFAULT_FORECAST_LABEL;
+  const forecastLabel = forecast?.label ?? text.forecast;
   const forecastBandAlpha = isDarkSurface(labelBackground) ? FORECAST_BAND_ALPHA_DARK : FORECAST_BAND_ALPHA_LIGHT;
   const forecastValues = [];
   if (forecast) {
@@ -2865,8 +2283,8 @@ function buildCartesianOption(cfg) {
     const top = percent ? 100 : maxValue ?? Math.max(0, ...(stacked ? stackTotalsOf(values) : values.flat()).map((v) => v ?? 0));
     const categoryColumn = showYAxis ? (yAxisWidth ?? Math.min(160, Math.max(0, ...labels.map(estimateTextWidth)))) + 8 : 0;
     const plot = plotWidth - categoryColumn - (highlightPoints.length > 0 ? 64 : 16) - 4;
-    const text = percent ? (v) => `${v}%` : (v) => axisFormatter(v);
-    return valueAxisSplitNumber(plot, [text(0), text(top)]);
+    const text2 = percent ? (v) => `${v}%` : (v) => axisFormatter(v);
+    return valueAxisSplitNumber(plot, [text2(0), text2(top)]);
   })();
   const limits = valueAxisLimits({ minValue, maxValue }, kind !== "line");
   const splitNumber = horizontalBars ? valueSplitNumber : valueAxisSplitCount(plotHeight);
@@ -3004,7 +2422,7 @@ function buildCartesianOption(cfg) {
           });
         }
         if (stackTotals && i <= lastActual && rows.length > 1) {
-          rows.push({ name: STACK_TOTAL_LABEL, color: "transparent", value: stackTotals[i] ?? null });
+          rows.push({ name: text.total, color: "transparent", value: stackTotals[i] ?? null });
         }
         const provisional = provStart !== -1 && i >= provStart && i <= lastActual;
         if (provisional) {
@@ -3019,19 +2437,19 @@ function buildCartesianOption(cfg) {
               ...noteFor(at)
             });
           });
-          if (stackTotals && rows.length > 1) rows.push({ name: STACK_TOTAL_LABEL, color: "transparent", value: stackTotals[i] ?? null });
+          if (stackTotals && rows.length > 1) rows.push({ name: text.total, color: "transparent", value: stackTotals[i] ?? null });
         }
         const title = tooltipTitles[i] ?? labels[i] ?? "";
         const lines = [];
         if (barTargets && i <= lastActual) {
           const total = stackTotals ? stackTotals[i] ?? null : values[0]?.[i] ?? null;
-          const note = barTargetNote(barTargetName, total, barTargets[i] ?? null, valueFormatter);
+          const note = barTargetNote(barTargetName, total, barTargets[i] ?? null, valueFormatter, locale);
           if (note) lines.push(note);
         }
         for (const note of notes) {
           if (note.to === void 0 ? note.from === i : note.from <= i && i <= note.to) lines.push(note.label);
         }
-        return tooltipHtml(provisional ? `${title}(${provisionalLabel})` : title, rows, valueFormatter, lines);
+        return tooltipHtml(provisional ? text.provisionalTitle(title, provisionalLabel) : title, rows, valueFormatter, lines, locale);
       }
     },
     xAxis: horizontalBars ? valueAxis : categoryAxis,
@@ -3060,7 +2478,6 @@ function donutTopText(slices, labels) {
   return top ? { label: labelOf(top.name, labels), amount: donutShareText(top.value, total) } : null;
 }
 var DONUT_OUTSIDE_LABELS = 2;
-var DEFAULT_TOTAL_LABEL = "\u5408\u8A08";
 var sliceValue = (value) => Number.isFinite(value) && value > 0 ? value : 0;
 function donutShareText(value, total) {
   const v = sliceValue(value);
@@ -3072,7 +2489,8 @@ function donutLegendItems(slices) {
   const total = slices.reduce((sum, s) => sum + sliceValue(s.value), 0);
   return slices.map((s, slice) => ({ name: s.name, value: sliceValue(s.value), share: donutShareText(s.value, total), isOther: Boolean(s.isOther), slice })).sort((a, b) => Number(a.isOther) - Number(b.isOther) || b.value - a.value || a.slice - b.slice);
 }
-function donutCenterText(total, valueFormatter, { totalLabel = DEFAULT_TOTAL_LABEL, unit } = {}) {
+function donutCenterText(total, valueFormatter, { totalLabel, unit, locale } = {}) {
+  totalLabel ??= chartText(locale).total;
   const amount = valueFormatter(total);
   return { label: totalLabel, value: unit ? `${amount} ${unit}` : amount, amount, ...unit ? { unit } : {} };
 }
@@ -3192,7 +2610,6 @@ function labelRows(data, index, labels) {
 function hasLabel(labels, key) {
   return Boolean(labels) && Object.prototype.hasOwnProperty.call(labels, key);
 }
-var DEFAULT_PROVISIONAL_LABEL = "\u901F\u5831";
 function provisionalStart(indexValues, from) {
   if (from === void 0 || from === null) return -1;
   const key = String(from);
@@ -3205,6 +2622,10 @@ function splitProvisional(values, start) {
     provisional: values.map((v, i) => i >= Math.max(0, start - 1) ? v : null)
   };
 }
+var TEXT4 = {
+  ja: { item: "\u9805\u76EE", chart: (categories) => `${categories.join("\u30FB")}\u306E\u9762\u30B0\u30E9\u30D5` },
+  en: { item: "Item", chart: (categories) => `Area chart of ${categories.join(", ")}` }
+};
 var NO_ROWS = [];
 function AreaChartImpl({
   data = NO_ROWS,
@@ -3213,7 +2634,7 @@ function AreaChartImpl({
   colors,
   labels,
   valueFormatter,
-  format: format2,
+  format,
   title,
   summary,
   actions,
@@ -3252,14 +2673,18 @@ function AreaChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
-  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT4[uiLanguage(locale)];
+  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
   const comparisonCategory = comparison && categories.includes(comparison.category) ? comparison.category : void 0;
   const comparisonConfig = comparisonCategory === void 0 ? void 0 : comparison;
-  const series = useMemo(() => aggregateSeriesKeeping(data, categories, comparisonCategory), [data, categories, comparisonCategory]);
+  const series = useMemo(
+    () => aggregateSeriesKeeping(data, categories, comparisonCategory, void 0, otherSeriesLabel(locale)),
+    [data, categories, comparisonCategory, locale]
+  );
   const palette = useMemo(
     () => resolveChartColors(
       seriesColorsWithComparison(series.categories, colors, CHART_OTHER_COLOR, series.otherCategory, categories, comparisonCategory),
@@ -3306,7 +2731,7 @@ function AreaChartImpl({
       annotations,
       forecast,
       comparison: comparisonConfig,
-      comparisonFormat: format2,
+      comparisonFormat: format,
       provisionalFrom,
       provisionalLabel,
       reserveActions: Boolean(actions),
@@ -3315,7 +2740,8 @@ function AreaChartImpl({
       labelColor: tokens?.foreground ?? void 0,
       plotWidth,
       plotHeight: typeof height === "number" ? height : void 0,
-      chartOptions
+      chartOptions,
+      locale
     }),
     [
       series,
@@ -3351,23 +2777,24 @@ function AreaChartImpl({
       annotations,
       forecast,
       comparisonConfig,
-      format2,
+      format,
       height,
       tokens,
       surface,
       plotWidth,
-      chartOptions
+      chartOptions,
+      locale
     ]
   );
   const dataTable = useMemo(() => {
-    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, "\u9805\u76EE");
-    const times = timeTooltipLabels(series.data.map((row) => row[index]));
+    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, t.item);
+    const times = timeTooltipLabels(series.data.map((row) => row[index]), locale);
     return times ? { ...table, rows: table.rows.map((row, i) => [times[i] ?? row[0] ?? "", ...row.slice(1)]) } : table;
-  }, [series, index, tooltipFormatter, labels]);
-  const label2 = ariaLabel ?? `${categories.join("\u30FB")}\u306E\u9762\u30B0\u30E9\u30D5`;
+  }, [series, index, tooltipFormatter, labels, t, locale]);
+  const label2 = ariaLabel ?? t.chart(categories);
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format: format2, valueFormatter }) : summary,
-    [summary, data, index, categories, title, format2, valueFormatter]
+    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format, valueFormatter, locale }) : summary,
+    [summary, data, index, categories, title, format, valueFormatter, locale]
   );
   return /* @__PURE__ */ jsx(
     ChartFrame,
@@ -3390,6 +2817,10 @@ function AreaChartImpl({
 }
 var AreaChart = forwardRef(AreaChartImpl);
 AreaChart.displayName = "AreaChart";
+var TEXT5 = {
+  ja: { item: "\u9805\u76EE", chart: (categories) => `${categories.join("\u30FB")}\u306E\u68D2\u30B0\u30E9\u30D5` },
+  en: { item: "Item", chart: (categories) => `Bar chart of ${categories.join(", ")}` }
+};
 var NO_ROWS2 = [];
 function BarChartImpl({
   data = NO_ROWS2,
@@ -3398,7 +2829,7 @@ function BarChartImpl({
   colors,
   labels,
   valueFormatter,
-  format: format2,
+  format,
   title,
   summary,
   actions,
@@ -3435,12 +2866,13 @@ function BarChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
-  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const series = useMemo(() => aggregateSeries(data, categories), [data, categories]);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT5[uiLanguage(locale)];
+  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const series = useMemo(() => aggregateSeries(data, categories, void 0, otherSeriesLabel(locale)), [data, categories, locale]);
   const palette = useMemo(
     () => resolveChartColors(
       // Meaning colours on bars are AREA colours (`warning` -> `--warning-fill`), the same as the thresholds' and a legend's.
@@ -3498,7 +2930,8 @@ function BarChartImpl({
       labelColor: tokens?.foreground ?? void 0,
       plotWidth,
       plotHeight: typeof height === "number" ? height : void 0,
-      chartOptions
+      chartOptions,
+      locale
     }),
     [
       series,
@@ -3539,18 +2972,19 @@ function BarChartImpl({
       tokens,
       surface,
       plotWidth,
-      chartOptions
+      chartOptions,
+      locale
     ]
   );
   const dataTable = useMemo(() => {
-    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, "\u9805\u76EE");
-    const times = timeTooltipLabels(series.data.map((row) => row[index]));
+    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, t.item);
+    const times = timeTooltipLabels(series.data.map((row) => row[index]), locale);
     return times ? { ...table, rows: table.rows.map((row, i) => [times[i] ?? row[0] ?? "", ...row.slice(1)]) } : table;
-  }, [series, index, tooltipFormatter, labels]);
-  const label2 = ariaLabel ?? `${categories.join("\u30FB")}\u306E\u68D2\u30B0\u30E9\u30D5`;
+  }, [series, index, tooltipFormatter, labels, t, locale]);
+  const label2 = ariaLabel ?? t.chart(categories);
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format: format2, valueFormatter }) : summary,
-    [summary, data, index, categories, title, format2, valueFormatter]
+    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format, valueFormatter, locale }) : summary,
+    [summary, data, index, categories, title, format, valueFormatter, locale]
   );
   return /* @__PURE__ */ jsx(
     ChartFrame,
@@ -3571,8 +3005,12 @@ function BarChartImpl({
     }
   );
 }
-var BarChart2 = forwardRef(BarChartImpl);
-BarChart2.displayName = "BarChart";
+var BarChart = forwardRef(BarChartImpl);
+BarChart.displayName = "BarChart";
+var TEXT6 = {
+  ja: { item: "\u9805\u76EE", chart: (categories) => `${categories.join("\u30FB")}\u306E\u6298\u308C\u7DDA\u30B0\u30E9\u30D5` },
+  en: { item: "Item", chart: (categories) => `Line chart of ${categories.join(", ")}` }
+};
 var NO_ROWS3 = [];
 function LineChartImpl({
   data = NO_ROWS3,
@@ -3581,7 +3019,7 @@ function LineChartImpl({
   colors,
   labels,
   valueFormatter,
-  format: format2,
+  format,
   title,
   summary,
   actions,
@@ -3620,14 +3058,18 @@ function LineChartImpl({
   className,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
-  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format2), [valueFormatter, format2]);
-  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format2), [valueFormatter, format2]);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT6[uiLanguage(locale)];
+  const tooltipFormatter = useMemo(() => resolveValueFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
+  const axisTicks = useMemo(() => resolveAxisTickFormatter(valueFormatter, format, locale), [valueFormatter, format, locale]);
   const comparisonCategory = comparison && categories.includes(comparison.category) ? comparison.category : void 0;
   const comparisonConfig = comparisonCategory === void 0 ? void 0 : comparison;
-  const series = useMemo(() => aggregateSeriesKeeping(data, categories, comparisonCategory), [data, categories, comparisonCategory]);
+  const series = useMemo(
+    () => aggregateSeriesKeeping(data, categories, comparisonCategory, void 0, otherSeriesLabel(locale)),
+    [data, categories, comparisonCategory, locale]
+  );
   const palette = useMemo(
     () => resolveChartColors(
       seriesColorsWithComparison(series.categories, colors, CHART_OTHER_COLOR, series.otherCategory, categories, comparisonCategory),
@@ -3675,7 +3117,7 @@ function LineChartImpl({
       annotations,
       forecast,
       comparison: comparisonConfig,
-      comparisonFormat: format2,
+      comparisonFormat: format,
       provisionalFrom,
       provisionalLabel,
       reserveActions: Boolean(actions),
@@ -3684,7 +3126,8 @@ function LineChartImpl({
       labelColor: tokens?.foreground ?? void 0,
       plotWidth,
       plotHeight: typeof height === "number" ? height : void 0,
-      chartOptions
+      chartOptions,
+      locale
     }),
     [
       series,
@@ -3721,23 +3164,24 @@ function LineChartImpl({
       annotations,
       forecast,
       comparisonConfig,
-      format2,
+      format,
       height,
       tokens,
       surface,
       plotWidth,
-      chartOptions
+      chartOptions,
+      locale
     ]
   );
   const dataTable = useMemo(() => {
-    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, "\u9805\u76EE");
-    const times = timeTooltipLabels(series.data.map((row) => row[index]));
+    const table = chartDataTable(labelRows(series.data, index, labels), index, series.categories, tooltipFormatter, labels, t.item);
+    const times = timeTooltipLabels(series.data.map((row) => row[index]), locale);
     return times ? { ...table, rows: table.rows.map((row, i) => [times[i] ?? row[0] ?? "", ...row.slice(1)]) } : table;
-  }, [series, index, tooltipFormatter, labels]);
-  const label2 = ariaLabel ?? `${categories.join("\u30FB")}\u306E\u6298\u308C\u7DDA\u30B0\u30E9\u30D5`;
+  }, [series, index, tooltipFormatter, labels, t, locale]);
+  const label2 = ariaLabel ?? t.chart(categories);
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format: format2, valueFormatter }) : summary,
-    [summary, data, index, categories, title, format2, valueFormatter]
+    () => summary === "auto" ? buildChartSummary({ data, index, categories, title, format, valueFormatter, locale }) : summary,
+    [summary, data, index, categories, title, format, valueFormatter, locale]
   );
   return /* @__PURE__ */ jsx(
     ChartFrame,
@@ -3758,8 +3202,12 @@ function LineChartImpl({
     }
   );
 }
-var LineChart2 = forwardRef(LineChartImpl);
-LineChart2.displayName = "LineChart";
+var LineChart = forwardRef(LineChartImpl);
+LineChart.displayName = "LineChart";
+var TEXT7 = {
+  ja: { item: "\u9805\u76EE", value: "\u5024", chart: (shares) => `\u69CB\u6210\u6BD4\u306E\u30C9\u30FC\u30CA\u30C4\u30B0\u30E9\u30D5\uFF08${shares.join("\u3001")}\uFF09` },
+  en: { item: "Item", value: "Value", chart: (shares) => `Donut chart of shares (${shares.join(", ")})` }
+};
 function useElementWidth() {
   const [node, setNode] = useState(null);
   const [width, setWidth] = useState(null);
@@ -3779,7 +3227,7 @@ function DonutChartImpl({
   categories,
   colors,
   labels,
-  format: format2,
+  format,
   valueFormatter: valueFormatterProp,
   title,
   summary,
@@ -3808,11 +3256,13 @@ function DonutChartImpl({
   const center = resolveDonutCenter(donutOptions?.centerLabel, { showLabel: donutOptions?.showLabel ?? showLabel, label: label2 });
   const maxSlices = donutOptions?.maxSlices;
   const showLegend = donutOptions?.showLegend ?? true;
-  const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format2), [valueFormatterProp, format2]);
-  const tokens = useChartTokens();
+  const locale = useLocale();
+  const t = TEXT7[uiLanguage(locale)];
+  const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format, locale), [valueFormatterProp, format, locale]);
+  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]
+    () => donutSlices(data, { index: labelKey, value: valueKey, colors, maxSlices, otherColor: CHART_OTHER_COLOR, otherLabel: otherSeriesLabel(locale) }),
+    [data, labelKey, valueKey, colors, maxSlices, locale]
   );
   const palette = useMemo(() => resolveChartColors(slices.map((s) => chartFillName(s.color)), tokens), [slices, tokens]);
   const rows = useMemo(() => slices.map((s) => s.row), [slices]);
@@ -3849,13 +3299,13 @@ function DonutChartImpl({
   let centerLabel = null;
   if (center.kind === "custom") centerLabel = center.node;
   else if (center.kind === "total") {
-    const text = donutCenterText(total, valueFormatter, { totalLabel: donutOptions?.totalLabel, unit: donutOptions?.unit });
+    const text = donutCenterText(total, valueFormatter, { totalLabel: donutOptions?.totalLabel, unit: donutOptions?.unit, locale });
     centerLabel = caption(text.label, text.amount, text.unit);
   } else if (center.kind === "top") {
     const top = donutTopText(slices, labels);
     centerLabel = top && caption(top.label, top.amount);
   }
-  const a11yLabel = ariaLabel ?? `\u69CB\u6210\u6BD4\u306E\u30C9\u30FC\u30CA\u30C4\u30B0\u30E9\u30D5\uFF08${legend.map((item) => `${labelOf(item.name, labels)} ${item.share}`).join("\u3001")}\uFF09`;
+  const a11yLabel = ariaLabel ?? t.chart(legend.map((item) => `${labelOf(item.name, labels)} ${item.share}`));
   const dataTable = useMemo(
     () => chartDataTable(
       // Fixed keys, so `labels` (which renames the rows) cannot collide with the column names.
@@ -3863,19 +3313,19 @@ function DonutChartImpl({
       "name",
       ["value"],
       valueFormatter,
-      { name: labels?.[labelKey] ?? "\u9805\u76EE", value: labels?.[valueKey] ?? "\u5024" }
+      { name: labels?.[labelKey] ?? t.item, value: labels?.[valueKey] ?? t.value }
     ),
-    [rows, labelKey, valueKey, valueFormatter, labels]
+    [rows, labelKey, valueKey, valueFormatter, labels, t]
   );
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildShareSummary(slices, title) : summary,
-    [summary, slices, title]
+    () => summary === "auto" ? buildShareSummary(slices, title, locale) : summary,
+    [summary, slices, title, locale]
   );
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
       ...chartRootProps(rest),
-      ref,
+      ref: frameRef,
       title,
       summary: resolvedSummary,
       isLoading: isLoading ?? loading ?? false,
@@ -3924,6 +3374,10 @@ function DonutChartImpl({
 }
 var DonutChart = forwardRef(DonutChartImpl);
 DonutChart.displayName = "DonutChart";
+var TEXT8 = {
+  ja: { item: "\u9805\u76EE", value: "\u5024" },
+  en: { item: "Item", value: "Value" }
+};
 var listHeight = (n) => n * 32 + Math.max(0, n - 1) * 6;
 var isExternal = (href) => /^https?:\/\//.test(href);
 var NO_ROWS5 = [];
@@ -3935,7 +3389,7 @@ function BarListImpl({
   labels,
   thresholds,
   highlight,
-  format: format2,
+  format,
   valueFormatter,
   formatValue: formatValue2,
   title,
@@ -3957,16 +3411,18 @@ function BarListImpl({
     const frame = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(frame);
   }, [showAnimation]);
+  const locale = useLocale();
+  const t = TEXT8[uiLanguage(locale)];
   const maxItems = barListOptions?.maxItems ?? MAX_CHART_SERIES;
   const token = Array.isArray(colors) ? colors[0] : colors;
   const barColor = token ?? color ?? "chart-1";
-  const formatter = resolveValueFormatter(valueFormatter ?? formatValue2, format2);
+  const formatter = resolveValueFormatter(valueFormatter ?? formatValue2, format, locale);
   const baseRows = barListRows(data, {
     index,
     category: categories?.[0],
     sortOrder: barListOptions?.sortOrder ?? sortOrder ?? "descending",
     maxItems,
-    otherLabel: barListOptions?.otherLabel,
+    otherLabel: barListOptions?.otherLabel ?? otherSeriesLabel(locale),
     exclude: barListOptions?.exclude
   });
   const rows = baseRows.map((row) => {
@@ -3985,7 +3441,7 @@ function BarListImpl({
     "name",
     ["value"],
     formatter,
-    { name: index && labels?.[index] || "\u9805\u76EE", value: categories?.[0] && labels?.[categories[0]] || "\u5024" }
+    { name: index && labels?.[index] || t.item, value: categories?.[0] && labels?.[categories[0]] || t.value }
   );
   const list = /* @__PURE__ */ jsxs("div", { "data-slot": "bar-list", className: "flex justify-between gap-6 text-sm", ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1 space-y-1.5", children: rows.map((row, i) => {
@@ -4059,9 +3515,10 @@ function BarListImpl({
 var BarList = forwardRef(BarListImpl);
 BarList.displayName = "BarList";
 var NO_ROWS6 = [];
-var CategoryBar = forwardRef(function CategoryBar2({ values = NO_ROWS6, colors, marker, showLabels = true, format: format2, valueFormatter: valueFormatterProp, className, ...props }, forwardedRef) {
+var CategoryBar = forwardRef(function CategoryBar2({ values = NO_ROWS6, colors, marker, showLabels = true, format, valueFormatter: valueFormatterProp, className, ...props }, forwardedRef) {
   const { ref, width } = useChartSurface(forwardedRef, null);
-  const valueFormatter = useMemo(() => resolveAxisFormatter(valueFormatterProp, format2), [valueFormatterProp, format2]);
+  const locale = useLocale();
+  const valueFormatter = useMemo(() => resolveAxisFormatter(valueFormatterProp, format, locale), [valueFormatterProp, format, locale]);
   const segments = categoryBarSegments(values);
   const markerPosition = marker ? categoryBarMarkerPosition(marker.value, values) : 0;
   const allLabels = showLabels ? categoryBarLabels(values, void 0, marker ? markerPosition : void 0) : [];
@@ -4191,8 +3648,14 @@ function blockColorToCss(color) {
 }
 var NO_ROWS7 = [];
 var Tracker = forwardRef(function Tracker2({ data = NO_ROWS7, defaultColor, hoverEffect = true, className, ...props }, ref) {
+  const containerRef = useRef(null);
+  const setRef = useCallback((node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") return ref(node);
+    if (ref) ref.current = node;
+  }, [ref]);
   const fallback = defaultColor ? blockColorToCss(defaultColor) : DEFAULT_BLOCK_COLOR;
-  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "tracker", className: cn("flex h-6 w-full gap-0.5", className), ...props, children: data.map((block, i) => {
+  return /* @__PURE__ */ jsx("div", { ref: setRef, "data-slot": "tracker", className: cn("flex h-6 w-full gap-0.5", className), ...props, children: data.map((block, i) => {
     const blockClass = cn(
       "h-full min-w-0 flex-1 rounded-[2px]",
       hoverEffect && "transition-opacity hover:opacity-60 motion-reduce:transition-none"
@@ -4206,12 +3669,51 @@ 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);
   }) });
 });
 Tracker.displayName = "Tracker";
 use([GraphicComponent]);
+var TEXT9 = {
+  ja: {
+    net: "\u7D14\u5897",
+    total: "\u5408\u8A08",
+    change: "\u5897\u6E1B",
+    cumulative: "\u7D2F\u8A08",
+    cumulativeChange: "\u7D2F\u8A08\u5897\u6E1B",
+    item: "\u9805\u76EE",
+    start: "\u958B\u59CB",
+    end: "\u7D42\u4E86",
+    fromTo: (from, to, net) => `${from} \u2192 ${to}\uFF08${net}\uFF09`,
+    from: (from, net) => `${from} \u304B\u3089 ${net}`,
+    to: (to, net) => `${to}\uFF08${net}\uFF09`,
+    netOnly: (net) => `\u5897\u6E1B\u306E\u5408\u8A08 ${net}`,
+    increase: (name, value) => `\u6700\u5927\u306E\u5897\u52A0\u306F ${name}\uFF08${value}\uFF09`,
+    decrease: (name, value) => `\u6700\u5927\u306E\u6E1B\u5C11\u306F ${name}\uFF08${value}\uFF09`,
+    sentenceJoin: "\u3002",
+    chart: (label2) => `${label2}\u306E\u30A6\u30A9\u30FC\u30BF\u30FC\u30D5\u30A9\u30FC\u30EB\u30C1\u30E3\u30FC\u30C8`
+  },
+  en: {
+    net: "Net change",
+    total: "Total",
+    change: "Change",
+    cumulative: "Cumulative",
+    cumulativeChange: "Cumulative change",
+    item: "Item",
+    start: "Start",
+    end: "End",
+    fromTo: (from, to, net) => `${from} \u2192 ${to} (${net})`,
+    from: (from, net) => `${net} from ${from}`,
+    to: (to, net) => `${to} (${net})`,
+    netOnly: (net) => `Net change ${net}`,
+    increase: (name, value) => `Largest increase: ${name} (${value})`,
+    decrease: (name, value) => `Largest decrease: ${name} (${value})`,
+    sentenceJoin: ". ",
+    chart: (label2) => `Waterfall chart of ${label2}`
+  }
+};
+var textOf = (locale) => TEXT9[uiLanguage(resolveLocale(locale))];
 function waterfallSteps(data, config) {
   const totals = new Set(config.totals ?? []);
   const delta = config.mode === "delta";
@@ -4230,11 +3732,13 @@ function waterfallSteps(data, config) {
     return { name, kind: n > 0 ? "increase" : n < 0 ? "decrease" : "flat", value: n, start, end: running, row };
   });
   if (delta && steps.some((s) => s.kind !== "gap")) {
-    steps.push({ name: DELTA_TOTAL_NAME, kind: "total", value: running, start: 0, end: running, row: {} });
+    steps.push({ name: deltaTotalName(config.locale), kind: "total", value: running, start: 0, end: running, row: {} });
   }
   return steps;
 }
-var DELTA_TOTAL_NAME = "\u7D14\u5897";
+function deltaTotalName(locale) {
+  return textOf(locale).net;
+}
 function waterfallDeltaEnds(data, config) {
   const totals = new Set(config.totals ?? []);
   const kinds = data.map((row) => totals.has(String(row[config.index] ?? "")));
@@ -4250,16 +3754,17 @@ function waterfallDeltaEnds(data, config) {
   const closing = closingRow && closingRow.value === null && opening?.value != null ? { ...closingRow, value: opening.value + net } : closingRow;
   return { opening, closing, net };
 }
-function waterfallDeltaNote(ends, formatter, labels) {
+function waterfallDeltaNote(ends, formatter, labels, locale) {
+  const t = textOf(locale);
   const net = signedText(ends.net, formatter);
   const { opening, closing } = ends;
   const side = (e) => e && e.value !== null ? `${labelOf(e.name, labels)} ${formatter(e.value)}` : null;
   const from = side(opening);
   const to = side(closing);
-  if (from && to) return `${from} \u2192 ${to}\uFF08${net}\uFF09`;
-  if (from) return `${from} \u304B\u3089 ${net}`;
-  if (to) return `${to}\uFF08${net}\uFF09`;
-  return `\u5897\u6E1B\u306E\u5408\u8A08 ${net}`;
+  if (from && to) return t.fromTo(from, to, net);
+  if (from) return t.from(from, net);
+  if (to) return t.to(to, net);
+  return t.netOnly(net);
 }
 function waterfallStack(steps) {
   const base = [];
@@ -4311,7 +3816,8 @@ function waterfallStepText(step, formatter, delta = false) {
   if (step.value === null) return EMPTY_VALUE;
   return step.kind === "total" && !delta ? formatter(step.value) : signedText(step.value, formatter);
 }
-function buildWaterfallSummary(steps, formatter, title, labels, delta) {
+function buildWaterfallSummary(steps, formatter, title, labels, delta, locale) {
+  const t = textOf(locale);
   const real = steps.filter((s) => s.kind !== "gap");
   const first = real[0];
   const last = real[real.length - 1];
@@ -4319,7 +3825,7 @@ function buildWaterfallSummary(steps, formatter, title, labels, delta) {
   const name = (s) => labelOf(s.name, labels);
   const head = title ? `${title}: ` : "";
   const parts = [
-    delta ? waterfallDeltaNote(delta, formatter, labels) : real.length === 1 ? `${name(first)} ${formatter(first.end)}` : `${name(first)} ${formatter(first.end)} \u2192 ${name(last)} ${formatter(last.end)}`
+    delta ? waterfallDeltaNote(delta, formatter, labels, locale) : real.length === 1 ? `${name(first)} ${formatter(first.end)}` : `${name(first)} ${formatter(first.end)} \u2192 ${name(last)} ${formatter(last.end)}`
   ];
   let up;
   let down;
@@ -4327,21 +3833,22 @@ function buildWaterfallSummary(steps, formatter, title, labels, delta) {
     if (s.kind === "increase" && (!up || s.value > up.value)) up = s;
     if (s.kind === "decrease" && (!down || s.value < down.value)) down = s;
   }
-  if (up) parts.push(`\u6700\u5927\u306E\u5897\u52A0\u306F ${name(up)}\uFF08${signedText(up.value, formatter)}\uFF09`);
-  if (down) parts.push(`\u6700\u5927\u306E\u6E1B\u5C11\u306F ${name(down)}\uFF08${signedText(down.value, formatter)}\uFF09`);
-  return `${head}${parts.join("\u3002")}`;
+  if (up) parts.push(t.increase(name(up), signedText(up.value, formatter)));
+  if (down) parts.push(t.decrease(name(down), signedText(down.value, formatter)));
+  return `${head}${parts.join(t.sentenceJoin)}`;
 }
-function waterfallDataTable(steps, names, formatter, labels, delta) {
+function waterfallDataTable(steps, names, formatter, labels, delta, locale) {
+  const t = textOf(locale);
   const label2 = (key) => labelOf(key, labels);
   const rows = steps.map((s) => [
     label2(s.name),
-    s.kind === "total" ? delta ? DELTA_TOTAL_NAME : "\u5408\u8A08" : s.value === null ? EMPTY_VALUE : signedText(s.value, formatter),
+    s.kind === "total" ? delta ? t.net : t.total : s.value === null ? EMPTY_VALUE : signedText(s.value, formatter),
     s.kind === "gap" ? EMPTY_VALUE : delta ? signedText(s.end, formatter) : formatter(s.end)
   ]);
   const end = (e, role) => e && e.value !== null ? [[label2(e.name), role, formatter(e.value)]] : [];
   return {
-    columns: [labels?.[names.index] ?? "\u9805\u76EE", "\u5897\u6E1B", delta ? "\u7D2F\u8A08\u5897\u6E1B" : "\u7D2F\u8A08"],
-    rows: delta ? [...end(delta.opening, "\u958B\u59CB"), ...rows, ...end(delta.closing, "\u7D42\u4E86")] : rows
+    columns: [labels?.[names.index] ?? t.item, t.change, delta ? t.cumulativeChange : t.cumulative],
+    rows: delta ? [...end(delta.opening, t.start), ...rows, ...end(delta.closing, t.end)] : rows
   };
 }
 var WATERFALL_BAR_SHARE = 0.45;
@@ -4423,6 +3930,7 @@ function waterfallConnectorRenderer(color) {
 var ROW_STYLE = "display:flex;align-items:center;gap:8px;line-height:20px";
 function buildWaterfallOption(config) {
   const { steps, colors, polarity, labels, valueFormatter, showValues = true, showTooltip = true } = config;
+  const t = textOf(config.locale);
   const delta = config.mode === "delta";
   const axisFormatter = config.axisFormatter ?? valueFormatter;
   const noteWidth = config.plotWidth ? Math.max(120, config.plotWidth - 16) : void 0;
@@ -4493,7 +4001,7 @@ function buildWaterfallOption(config) {
         if (!step) return "";
         const color = escapeHtml(colorOf(step) ?? "currentColor");
         const line = (name, text) => `<div style="${ROW_STYLE}"><span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${color}"></span><span style="flex:1;opacity:.8">${escapeHtml(name)}</span><span style="font-weight:500;font-variant-numeric:tabular-nums;margin-left:12px">${escapeHtml(text)}</span></div>`;
-        const rows = step.kind === "total" ? line(delta ? DELTA_TOTAL_NAME : "\u5408\u8A08", delta ? signedText(step.end, valueFormatter) : valueFormatter(step.end)) : line("\u5897\u6E1B", waterfallStepText(step, valueFormatter)) + (step.kind === "gap" ? "" : delta ? line("\u7D2F\u8A08\u5897\u6E1B", signedText(step.end, valueFormatter)) : line("\u7D2F\u8A08", valueFormatter(step.end)));
+        const rows = step.kind === "total" ? line(delta ? t.net : t.total, delta ? signedText(step.end, valueFormatter) : valueFormatter(step.end)) : line(t.change, waterfallStepText(step, valueFormatter)) + (step.kind === "gap" ? "" : delta ? line(t.cumulativeChange, signedText(step.end, valueFormatter)) : line(t.cumulative, valueFormatter(step.end)));
         return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(labelOf(step.name, labels))}</div>${rows}`;
       }
     },
@@ -4563,7 +4071,7 @@ function WaterfallChartImpl({
   mode = "total",
   polarity = "higher-is-better",
   labels,
-  format: format2,
+  format,
   valueFormatter: valueFormatterProp,
   showValues = true,
   showTooltip = true,
@@ -4583,13 +4091,16 @@ function WaterfallChartImpl({
   ...rest
 }, ref) {
   const valueKey = categories[0] ?? "";
-  const tokens = useChartTokens();
-  const { ref: frameRef, width: plotWidth } = useChartSurface(ref, tokens);
-  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]);
+  const { ref: frameRef, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format, locale), [valueFormatterProp, format, locale]);
+  const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatterProp, format, locale), [valueFormatterProp, format, locale]);
+  const steps = useMemo(
+    () => waterfallSteps(data, { index, value: valueKey, totals, mode, locale }),
+    [data, index, valueKey, totals, mode, locale]
+  );
   const ends = useMemo(() => mode === "delta" ? waterfallDeltaEnds(data, { index, value: valueKey, totals }) : void 0, [data, index, valueKey, totals, mode]);
-  const deltaNote = useMemo(() => ends ? waterfallDeltaNote(ends, valueFormatter, labels) : void 0, [ends, valueFormatter, labels]);
+  const deltaNote = useMemo(() => ends ? waterfallDeltaNote(ends, valueFormatter, labels, locale) : void 0, [ends, valueFormatter, labels, locale]);
   const colors = useMemo(() => {
     const fills = resolveFillColors(tokens);
     const [total = ""] = resolveChartColors(["chart-1"], tokens);
@@ -4619,19 +4130,21 @@ function WaterfallChartImpl({
       chartOptions,
       minValue,
       maxValue,
-      yAxisWidth
+      yAxisWidth,
+      locale
     }),
-    [steps, colors, polarity, labels, valueFormatter, axisFormatter, showValues, showTooltip, tokens, mode, deltaNote, plotWidth, chartOptions, minValue, maxValue, yAxisWidth]
+    [steps, colors, polarity, labels, valueFormatter, axisFormatter, showValues, showTooltip, tokens, mode, deltaNote, plotWidth, chartOptions, minValue, maxValue, yAxisWidth, locale]
   );
   const dataTable = useMemo(
-    () => waterfallDataTable(steps, { index}, valueFormatter, labels, ends),
-    [steps, index, valueKey, valueFormatter, labels, ends]
+    () => waterfallDataTable(steps, { index}, valueFormatter, labels, ends, locale),
+    [steps, index, valueKey, valueFormatter, labels, ends, locale]
   );
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildWaterfallSummary(steps, valueFormatter, title, labels, ends) : summary,
-    [summary, steps, valueFormatter, title, labels, ends]
+    () => summary === "auto" ? buildWaterfallSummary(steps, valueFormatter, title, labels, ends, locale) : summary,
+    [summary, steps, valueFormatter, title, labels, ends, locale]
   );
-  const label2 = ariaLabel ?? `${labelOf(valueKey, labels) || "\u5897\u6E1B"}\u306E\u30A6\u30A9\u30FC\u30BF\u30FC\u30D5\u30A9\u30FC\u30EB\u30C1\u30E3\u30FC\u30C8`;
+  const t = textOf(locale);
+  const label2 = ariaLabel ?? t.chart(labelOf(valueKey, labels) || t.change.toLowerCase());
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
@@ -4673,7 +4186,38 @@ function scatterPoints(data, config) {
   }
   return points;
 }
-function scatterSeries(points, max = MAX_CHART_SERIES) {
+var TEXT10 = {
+  ja: {
+    who: (name, value) => `${name}\uFF08${value}\uFF09`,
+    summary: (count, y, who) => `${count}\u70B9\u3002${y}\u304C\u6700\u5927\u306A\u306E\u306F ${who}`,
+    name: "\u540D\u524D",
+    series: "\u7CFB\u5217",
+    x: "\u6A2A\u8EF8",
+    y: "\u7E26\u8EF8",
+    size: "\u5927\u304D\u3055",
+    pair: (y, x) => `${y}\xD7${x}`,
+    first: (pair, count) => `${pair}\uFF08\u5148\u982D ${count} \u70B9\uFF09`,
+    guide: (label2, axis, value) => `${label2}\uFF08${axis} ${value}\uFF09`,
+    caption: (base, guides) => `${base}\u3002\u57FA\u6E96\u7DDA: ${guides.join("\u3001")}`,
+    chart: (y, x) => `${y}\xD7${x}\u306E\u6563\u5E03\u56F3`
+  },
+  en: {
+    who: (name, value) => `${name} (${value})`,
+    summary: (count, y, who) => `${count === 1 ? "1 point" : `${count} points`}. Highest ${y}: ${who}`,
+    name: "Name",
+    series: "Series",
+    x: "X",
+    y: "Y",
+    size: "Size",
+    pair: (y, x) => `${y} \xD7 ${x}`,
+    first: (pair, count) => `${pair} (first ${count} points)`,
+    guide: (label2, axis, value) => `${label2} (${axis} ${value})`,
+    caption: (base, guides) => `${base}. Reference lines: ${guides.join(", ")}`,
+    chart: (y, x) => `Scatter plot of ${y} \xD7 ${x}`
+  }
+};
+var textOf2 = (locale) => TEXT10[uiLanguage(resolveLocale(locale))];
+function scatterSeries(points, max = MAX_CHART_SERIES, otherLabel = otherSeriesLabel()) {
   const order = [];
   const counts = /* @__PURE__ */ new Map();
   for (const p of points) {
@@ -4686,7 +4230,7 @@ function scatterSeries(points, max = MAX_CHART_SERIES) {
   const ranked = order.map((name, at) => ({ name, at, n: counts.get(name) ?? 0 })).sort((a, b) => b.n - a.n || a.at - b.at);
   const kept = new Set(ranked.slice(0, Math.max(1, max)).map((r) => r.name));
   const result = order.filter((name) => kept.has(name)).map((name) => ({ name, isOther: false, points: points.filter((p) => p.series === name) }));
-  result.push({ name: OTHER_SERIES_LABEL, isOther: true, points: points.filter((p) => !kept.has(p.series)) });
+  result.push({ name: otherLabel, isOther: true, points: points.filter((p) => !kept.has(p.series)) });
   return result;
 }
 var SCATTER_FADED_OPACITY = 0.2;
@@ -4700,24 +4244,26 @@ function scatterBubbleSize(value, max) {
 function pointTitle(point, labels) {
   return labelOf(point.name || point.series, labels);
 }
-function buildScatterSummary(points, yName, yFormatter, title, labels) {
+function buildScatterSummary(points, yName, yFormatter, title, labels, locale) {
   if (points.length === 0) return void 0;
+  const t = textOf2(locale);
   let best = points[0];
   for (const p of points) if (p.y > best.y) best = p;
   const head = title ? `${title}: ` : "";
-  const who = best.name ? `${labelOf(best.name, labels)}\uFF08${yFormatter(best.y)}\uFF09` : yFormatter(best.y);
-  return `${head}${points.length}\u70B9\u3002${labelOf(yName, labels)}\u304C\u6700\u5927\u306A\u306E\u306F ${who}`;
+  const who = best.name ? t.who(labelOf(best.name, labels), yFormatter(best.y)) : yFormatter(best.y);
+  return `${head}${t.summary(points.length, labelOf(yName, labels), who)}`;
 }
 var SCATTER_TABLE_MAX_ROWS = 100;
 function scatterDataTable(points, config) {
+  const t = textOf2(config.locale);
   const label2 = (key) => labelOf(key, config.labels);
   const column = (key, fallback) => config.labels?.[key] ?? fallback;
   const columns = [
-    ...config.index ? [column(config.index, "\u540D\u524D")] : [],
-    ...config.series ? [column(config.series, "\u7CFB\u5217")] : [],
-    column(config.x, "\u6A2A\u8EF8"),
-    column(config.y, "\u7E26\u8EF8"),
-    ...config.size ? [column(config.size, "\u5927\u304D\u3055")] : []
+    ...config.index ? [column(config.index, t.name)] : [],
+    ...config.series ? [column(config.series, t.series)] : [],
+    column(config.x, t.x),
+    column(config.y, t.y),
+    ...config.size ? [column(config.size, t.size)] : []
   ];
   const shown = points.slice(0, SCATTER_TABLE_MAX_ROWS);
   const rows = shown.map((p, i) => {
@@ -4730,14 +4276,15 @@ function scatterDataTable(points, config) {
     ];
     return config.index ? cells : [String(i + 1), ...cells];
   });
-  const base = points.length > shown.length ? `${label2(config.y)}\xD7${label2(config.x)}\uFF08\u5148\u982D ${shown.length} \u70B9\uFF09` : `${label2(config.y)}\xD7${label2(config.x)}`;
+  const pair = t.pair(label2(config.y), label2(config.x));
+  const base = points.length > shown.length ? t.first(pair, shown.length) : pair;
   const guides = (config.referenceLines ?? []).map((line) => {
     const key = line.axis === "x" ? config.x : config.y;
     const text = config.formatters[line.axis](line.value);
-    return line.label ? `${line.label}\uFF08${label2(key)} ${text}\uFF09` : `${label2(key)} ${text}`;
+    return line.label ? t.guide(line.label, label2(key), text) : `${label2(key)} ${text}`;
   });
   return {
-    caption: guides.length > 0 ? `${base}\u3002\u57FA\u6E96\u7DDA: ${guides.join("\u3001")}` : base,
+    caption: guides.length > 0 ? t.caption(base, guides) : base,
     columns: config.index ? columns : ["#", ...columns],
     rows
   };
@@ -4959,7 +4506,7 @@ function ScatterChartImpl({
   referenceLines,
   colors,
   labels,
-  format: format2,
+  format,
   xFormat,
   yFormat,
   sizeFormat,
@@ -4983,28 +4530,28 @@ 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 locale = useLocale();
   const formatters = useMemo(
     () => ({
-      x: resolveValueFormatter(valueFormatter, xFormat ?? format2),
-      y: resolveValueFormatter(valueFormatter, yFormat ?? format2),
-      size: resolveValueFormatter(valueFormatter, sizeFormat ?? format2)
+      x: resolveValueFormatter(valueFormatter, xFormat ?? format, locale),
+      y: resolveValueFormatter(valueFormatter, yFormat ?? format, locale),
+      size: resolveValueFormatter(valueFormatter, sizeFormat ?? format, locale)
     }),
-    [valueFormatter, xFormat, yFormat, sizeFormat, format2]
+    [valueFormatter, xFormat, yFormat, sizeFormat, format, locale]
   );
   const axisFormatters = useMemo(
     () => ({
-      x: resolveAxisFormatter(valueFormatter, xFormat ?? format2),
-      y: resolveAxisFormatter(valueFormatter, yFormat ?? format2)
+      x: resolveAxisFormatter(valueFormatter, xFormat ?? format, locale),
+      y: resolveAxisFormatter(valueFormatter, yFormat ?? format, locale)
     }),
-    [valueFormatter, xFormat, yFormat, format2]
+    [valueFormatter, xFormat, yFormat, format, locale]
   );
   const points = useMemo(
     () => scatterPoints(data, { x, y, size, index, series: seriesKey, labelKey }),
     [data, x, y, size, index, seriesKey, labelKey]
   );
-  const series = useMemo(() => scatterSeries(points), [points]);
+  const series = useMemo(() => scatterSeries(points, void 0, otherSeriesLabel(locale)), [points, locale]);
   const palette = useMemo(
     () => resolveChartColors(scatterSeriesColors(series, colors).map(chartFillName), tokens),
     [series, colors, tokens]
@@ -5040,14 +4587,14 @@ function ScatterChartImpl({
     [series, palette, x, y, size, seriesKey, seriesLabel, highlightList, referenceLines, labelKey, tokens, labels, formatters, axisFormatters, fitToData, showLegend, showTooltip, actions, plotWidth, chartOptions, minValue, maxValue, xMinValue, xMaxValue]
   );
   const dataTable = useMemo(
-    () => scatterDataTable(points, { x, y, size, index: index ?? labelKey, series: seriesKey, formatters, labels, referenceLines }),
-    [points, x, y, size, index, labelKey, seriesKey, formatters, labels, referenceLines]
+    () => scatterDataTable(points, { x, y, size, index: index ?? labelKey, series: seriesKey, formatters, labels, referenceLines, locale }),
+    [points, x, y, size, index, labelKey, seriesKey, formatters, labels, referenceLines, locale]
   );
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildScatterSummary(points, y, formatters.y, title, labels) : summary,
-    [summary, points, y, formatters, title, labels]
+    () => summary === "auto" ? buildScatterSummary(points, y, formatters.y, title, labels, locale) : summary,
+    [summary, points, y, formatters, title, labels, locale]
   );
-  const label2 = ariaLabel ?? `${labelOf(y, labels)}\xD7${labelOf(x, labels)}\u306E\u6563\u5E03\u56F3`;
+  const label2 = ariaLabel ?? textOf2(locale).chart(labelOf(y, labels), labelOf(x, labels));
   return /* @__PURE__ */ jsx(
     ChartFrame,
     {
@@ -5072,7 +4619,12 @@ ScatterChart.displayName = "ScatterChart";
 function legendColors(categories, colors) {
   return seriesColorsFor(categories, colors, CHART_OTHER_COLOR).map((color) => chartFillToCss(color));
 }
-var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", ariaLabel = "\u51E1\u4F8B", className }, ref) {
+var TEXT11 = {
+  ja: { legend: "\u51E1\u4F8B" },
+  en: { legend: "Legend" }
+};
+var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", ariaLabel, className }, ref) {
+  const t = TEXT11[uiLanguage(useLocale())];
   if (categories.length === 0) return null;
   const swatches = legendColors(categories, colors);
   return /* @__PURE__ */ jsx(
@@ -5081,7 +4633,7 @@ var Legend = forwardRef(function Legend2({ categories, colors, labels, layout =
       ref,
       "data-slot": "legend",
       "data-layout": layout,
-      "aria-label": ariaLabel,
+      "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] } }),
@@ -5179,9 +4731,27 @@ var funnelConversionVariants = cva("flex items-center text-muted-foreground", {
     direction: "vertical"
   }
 });
-function resolveFunnelFormatter(valueFormatter, formatValue2, format2) {
-  return resolveValueFormatter(valueFormatter ?? formatValue2, format2);
+function resolveFunnelFormatter(valueFormatter, formatValue2, format, locale) {
+  return resolveValueFormatter(valueFormatter ?? formatValue2, format, locale);
 }
+var TEXT12 = {
+  ja: {
+    step: "\u30B9\u30C6\u30C3\u30D7",
+    value: "\u5024",
+    previous: "\u524D\u671F",
+    previousHeader: "\u524D\u671F",
+    change: (label2, points) => `(${label2}\u6BD4 ${points})`,
+    funnel: "\u30D5\u30A1\u30CD\u30EB"
+  },
+  en: {
+    step: "Step",
+    value: "Value",
+    previous: "prior period",
+    previousHeader: "Prior period",
+    change: (label2, points) => `(vs. ${label2} ${points})`,
+    funnel: "Funnel"
+  }
+};
 function lowestConversionStep(values) {
   if (values.length < 3) return -1;
   let lowest = -1;
@@ -5263,7 +4833,9 @@ function FunnelStepsImpl({
 }, ref) {
   const [mounted, setMounted] = useState(false);
   const isHorizontal = direction === "horizontal";
-  const format2 = resolveFunnelFormatter(valueFormatter, formatValue2, valueFormat);
+  const locale = useLocale();
+  const t = TEXT12[uiLanguage(locale)];
+  const format = resolveFunnelFormatter(valueFormatter, formatValue2, valueFormat, locale);
   useEffect(() => {
     if (animate) setMounted(true);
   }, [animate]);
@@ -5275,15 +4847,19 @@ function FunnelStepsImpl({
   const maxValue = steps.length > 0 ? steps[0].value : 0;
   const values = steps.map((s) => s.value);
   const previous = comparison?.values;
-  const comparisonLabel2 = comparison?.label ?? "\u524D\u671F";
+  const comparisonLabel2 = comparison?.label ?? t.previous;
   const showRates = showConversion || previous !== void 0;
   const focus = !showRates ? -1 : previous ? worstChangeStep(values, previous) : lowestConversionStep(values);
   const dataTable = chartDataTable(
     steps.map((step, i) => ({ label: step.label, value: step.value, previous: previous?.[i] ?? null })),
     "label",
     previous ? ["value", "previous"] : ["value"],
-    format2,
-    { label: labels?.[index] ?? "\u30B9\u30C6\u30C3\u30D7", value: categories?.[0] && labels?.[categories[0]] || "\u5024", previous: comparisonLabel2 }
+    format,
+    {
+      label: labels?.[index] ?? t.step,
+      value: categories?.[0] && labels?.[categories[0]] || t.value,
+      previous: comparison?.label ?? t.previousHeader
+    }
   );
   const list = /* @__PURE__ */ jsx("div", { "data-slot": "funnel-steps", role: "list", className: funnelStepsVariants({ size, direction }), ...props, children: steps.map((step, index2) => {
     const percentage = maxValue > 0 ? step.value / maxValue * 100 : 0;
@@ -5309,7 +4885,7 @@ function FunnelStepsImpl({
         {
           role: "listitem",
           className: "flex min-w-0 flex-1 flex-col items-center gap-1",
-          "aria-label": `${step.label}: ${format2(step.value)}`,
+          "aria-label": `${step.label}: ${format(step.value)}`,
           children: [
             /* @__PURE__ */ jsx(
               "span",
@@ -5319,7 +4895,7 @@ function FunnelStepsImpl({
                   "text-muted-foreground tabular-nums",
                   size === "sm" ? "text-xs" : "text-sm"
                 ),
-                children: format2(step.value)
+                children: format(step.value)
               }
             ),
             /* @__PURE__ */ jsx("div", { className: funnelBarContainerHorizontalVariants({ size }), children: /* @__PURE__ */ jsx(
@@ -5351,10 +4927,10 @@ function FunnelStepsImpl({
             )
           ]
         }
-      ) : /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-label": `${step.label}: ${format2(step.value)}`, children: [
+      ) : /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-label": `${step.label}: ${format(step.value)}`, children: [
         /* @__PURE__ */ jsxs("div", { className: funnelLabelVariants({ size }), children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: step.label }),
-          /* @__PURE__ */ jsx("span", { "data-slot": "funnel-value", className: "tabular-nums", children: format2(step.value) })
+          /* @__PURE__ */ jsx("span", { "data-slot": "funnel-value", className: "tabular-nums", children: format(step.value) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden rounded-sm bg-muted", children: /* @__PURE__ */ jsx(
           "div",
@@ -5378,13 +4954,7 @@ function FunnelStepsImpl({
           children: [
             "\u2192 ",
             computeConversionRate(steps[index2 + 1].value, step.value),
-            previous && /* @__PURE__ */ jsxs("span", { "data-slot": "funnel-change", className: "ml-1 tabular-nums", children: [
-              "(",
-              comparisonLabel2,
-              "\u6BD4 ",
-              formatPoints(conversionChange(values, previous, index2 + 1)),
-              ")"
-            ] })
+            previous && /* @__PURE__ */ jsx("span", { "data-slot": "funnel-change", className: "ml-1 tabular-nums", children: t.change(comparisonLabel2, formatPoints(conversionChange(values, previous, index2 + 1), locale)) })
           ]
         }
       ) })
@@ -5401,7 +4971,7 @@ function FunnelStepsImpl({
       emptyState,
       height: ready ? "auto" : FRAME_HEIGHT[size ?? "md"],
       variant: "list",
-      ariaLabel: ariaLabel ?? "\u30D5\u30A1\u30CD\u30EB",
+      ariaLabel: ariaLabel ?? t.funnel,
       plotRole: "group",
       dataTable,
       className,
@@ -5518,8 +5088,26 @@ function heatmapCellFontSize(plotWidth, columns, rowNames, texts) {
   if (text + HEATMAP_CELL_PADDING <= cell) return 12;
   return text * 10 / 12 + HEATMAP_CELL_PADDING <= cell ? 10 : null;
 }
+var TEXT13 = {
+  ja: {
+    join: "\u30FB",
+    flagged: "\u8981\u6CE8\u610F",
+    item: "\u9805\u76EE",
+    top: (y, x, value) => `\u6700\u5927\u306F ${y} ${x} \u306E ${value}`,
+    chart: (y, x) => `${y}\xD7${x}\u306E\u30D2\u30FC\u30C8\u30DE\u30C3\u30D7`
+  },
+  en: {
+    join: ", ",
+    flagged: "Needs attention",
+    item: "Item",
+    top: (y, x, value) => `Highest: ${y} ${x} (${value})`,
+    chart: (y, x) => `Heatmap of ${y} \xD7 ${x}`
+  }
+};
+var textOf3 = (locale) => TEXT13[uiLanguage(resolveLocale(locale))];
 function buildHeatmapOption(config) {
   const { model, labels, valueFormatter } = config;
+  const t = textOf3(config.locale);
   const label2 = (key) => labels?.[key] ?? key;
   const present = model.cells.filter((c) => c.value !== null);
   const missing = model.cells.filter((c) => c.value === null);
@@ -5533,9 +5121,9 @@ function buildHeatmapOption(config) {
     const extras = (config.details ?? []).map((key) => {
       const n = cell.row ? toChartNumber(cell.row[key]) : null;
       return `${escapeHtml2(label2(key))} ${n === null ? EMPTY_VALUE : escapeHtml2(valueFormatter(n))}`;
-    }).join("\u30FB");
-    const flag = cell.flagged ? "\u30FB\u8981\u6CE8\u610F" : "";
-    return `${head} ${main}${extras ? `\u30FB${extras}` : ""}${flag}`;
+    }).join(t.join);
+    const flag = cell.flagged ? `${t.join}${t.flagged}` : "";
+    return `${head} ${main}${extras ? `${t.join}${extras}` : ""}${flag}`;
   };
   const cellFont = config.plotWidth ? heatmapCellFontSize(
     config.plotWidth,
@@ -5633,7 +5221,7 @@ function mergeDeep(a, b) {
   }
   return out;
 }
-function heatmapDataTable(model, names, formatter, labels) {
+function heatmapDataTable(model, names, formatter, labels, locale) {
   const label2 = (key) => labels?.[key] ?? key;
   const rows = model.ys.map((yk, yi) => [
     label2(yk),
@@ -5642,15 +5230,15 @@ function heatmapDataTable(model, names, formatter, labels) {
       return v === null || v === void 0 ? EMPTY_VALUE : formatter(v);
     })
   ]);
-  return { caption: `${label2(names.y)}\xD7${label2(names.x)}`, columns: [labels?.[names.y] ?? "\u9805\u76EE", ...model.xs.map(label2)], rows };
+  return { caption: `${label2(names.y)}\xD7${label2(names.x)}`, columns: [labels?.[names.y] ?? textOf3(locale).item, ...model.xs.map(label2)], rows };
 }
-function buildHeatmapSummary(model, formatter, title, labels) {
+function buildHeatmapSummary(model, formatter, title, labels, locale) {
   let best;
   for (const cell of model.cells) if (cell.value !== null && (!best || cell.value > best.value)) best = cell;
   if (!best) return void 0;
   const label2 = (key) => labels?.[key] ?? key;
   const head = title ? `${title}: ` : "";
-  return `${head}\u6700\u5927\u306F ${label2(model.ys[best.yi])} ${label2(model.xs[best.xi])} \u306E ${formatter(best.value)}`;
+  return `${head}${textOf3(locale).top(label2(model.ys[best.yi]), label2(model.xs[best.xi]), formatter(best.value))}`;
 }
 function colorsFor(tokens, tone) {
   const [color = "", flag = "", muted = ""] = resolveChartColors([tone, "negative", "var(--muted-foreground)"], tokens);
@@ -5665,7 +5253,7 @@ function HeatmapImpl({
   xLabels,
   yLabels,
   labels,
-  format: format2,
+  format,
   valueFormatter,
   tone = "chart-1",
   scale,
@@ -5688,9 +5276,9 @@ function HeatmapImpl({
   ariaLabel,
   ...rest
 }, ref) {
-  const tokens = useChartTokens();
-  const { ref: frameRef, surface, width: plotWidth } = useChartSurface(ref, tokens);
-  const formatter = useMemo(() => resolveValueFormatter(valueFormatter, format2 ?? "number"), [valueFormatter, format2]);
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const formatter = useMemo(() => resolveValueFormatter(valueFormatter, format ?? "number", locale), [valueFormatter, format, locale]);
   const model = useMemo(
     () => buildHeatmapModel({ data, x, y, value, xLabels, yLabels, flag, scale, minValue, maxValue }),
     [data, x, y, value, xLabels, yLabels, flag, scale?.min, scale?.max, minValue, maxValue]
@@ -5711,16 +5299,17 @@ function HeatmapImpl({
       showValues,
       showTooltip,
       plotWidth,
-      chartOptions
+      chartOptions,
+      locale
     }),
-    [model, x, y, value, colors, surface, tokens, labels, formatter, details, showValues, showTooltip, plotWidth, chartOptions]
+    [model, x, y, value, colors, surface, tokens, labels, formatter, details, showValues, showTooltip, plotWidth, chartOptions, locale]
   );
-  const dataTable = useMemo(() => heatmapDataTable(model, { x, y }, formatter, labels), [model, x, y, formatter, labels]);
+  const dataTable = useMemo(() => heatmapDataTable(model, { x, y }, formatter, labels, locale), [model, x, y, formatter, labels, locale]);
   const resolvedSummary = useMemo(
-    () => summary === "auto" ? buildHeatmapSummary(model, formatter, title, labels) : summary,
-    [summary, model, formatter, title, labels]
+    () => summary === "auto" ? buildHeatmapSummary(model, formatter, title, labels, locale) : summary,
+    [summary, model, formatter, title, labels, locale]
   );
-  const label2 = ariaLabel ?? `${labels?.[y] ?? y}\xD7${labels?.[x] ?? x}\u306E\u30D2\u30FC\u30C8\u30DE\u30C3\u30D7`;
+  const label2 = ariaLabel ?? textOf3(locale).chart(labels?.[y] ?? y, labels?.[x] ?? x);
   const legend = showLegend ? /* @__PURE__ */ jsx(HeatmapLegend, { model, formatter, tone }) : null;
   return /* @__PURE__ */ jsx(
     ChartFrame,
@@ -5758,174 +5347,68 @@ 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;
+var TEXT14 = {
+  ja: {
+    tones: { positive: "\u826F\u597D", warning: "\u6CE8\u610F", negative: "\u8981\u5BFE\u5FDC", neutral: "\u4E2D\u7ACB" },
+    toneNote: (label2) => `\uFF08${label2}\uFF09`,
+    selectAll: "\u5168\u3066\u9078\u629E",
+    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",
+    pageSize: (size) => `${size}\u4EF6`,
+    range: (total, start, end) => `${total}\u4EF6\u4E2D ${start} - ${end} \u3092\u8868\u793A`,
+    first: "\u6700\u521D",
+    previous: "\u524D\u3078",
+    next: "\u6B21\u3078",
+    last: "\u6700\u5F8C",
+    columns: "\u8868\u793A\u3059\u308B\u5217",
+    exportCsv: "CSV \u3092\u66F8\u304D\u51FA\u3059"
+  },
+  en: {
+    tones: { positive: "Good", warning: "Caution", negative: "Needs action", neutral: "Neutral" },
+    toneNote: (label2) => ` (${label2})`,
+    selectAll: "Select all",
+    selectRow: "Select row",
+    trend: (points, first, last, min, max) => `Trend over ${points} points: ${first} to ${last}, min ${min}, max ${max}`,
+    noData: "No results.",
+    pageSize: (size) => `${size} / page`,
+    range: (total, start, end) => `Showing ${start}\u2013${end} of ${total}`,
+    first: "First",
+    previous: "Previous",
+    next: "Next",
+    last: "Last",
+    columns: "Columns",
+    exportCsv: "Export CSV"
+  }
+};
+var useText = () => TEXT14[uiLanguage(useLocale())];
+function resolveFormat(format, row) {
+  return typeof format === "function" ? format(row) : format;
 }
 function isMissingCell(value) {
   return value === null || value === void 0 || value === "" || typeof value === "number" && Number.isNaN(value);
 }
-function formatCellText(value, row, meta) {
+function formatCellText(value, row, meta, locale) {
   if (isMissingCell(value)) return meta.nullLabel ?? EMPTY_VALUE;
   if (meta.dateFormat && (value instanceof Date || typeof value === "string" || typeof value === "number")) {
-    const text = formatDate(value, meta.dateFormat, void 0, { timeZone: meta.timeZone });
+    const text = formatDate(value, meta.dateFormat, locale, { timeZone: meta.timeZone });
     return text === EMPTY_VALUE ? String(value) : text;
   }
   if (typeof value !== "number") return String(value);
-  return formatValue(value, resolveFormat(meta.format, row));
+  return formatValue(value, resolveFormat(meta.format, row), locale);
 }
 var THRESHOLD_TONE_STYLES = {
-  positive: { Icon: CircleCheck, text: "text-positive", label: "\u826F\u597D" },
-  warning: { Icon: TriangleAlert, text: "text-warning", label: "\u6CE8\u610F" },
-  negative: { Icon: CircleX, text: "text-negative", label: "\u8981\u5BFE\u5FDC" },
-  neutral: { Icon: Minus, text: "text-neutral", label: "\u4E2D\u7ACB" }
+  positive: { Icon: CircleCheck, text: "text-positive" },
+  warning: { Icon: TriangleAlert, text: "text-warning" },
+  negative: { Icon: CircleX, text: "text-negative" },
+  neutral: { Icon: Minus, text: "text-neutral" }
 };
 function ThresholdCell({ value, text, thresholds }) {
+  const t = useText();
   const tone = typeof value === "number" ? toneForValue(value, thresholds) : void 0;
   if (!tone) return /* @__PURE__ */ jsx("div", { className: "text-right tabular-nums", children: text });
-  const { Icon, text: toneClass, label: label2 } = THRESHOLD_TONE_STYLES[tone];
+  const { Icon, text: toneClass } = THRESHOLD_TONE_STYLES[tone];
+  const label2 = t.tones[tone];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5935,11 +5418,7 @@ function ThresholdCell({ value, text, thresholds }) {
       children: [
         /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { children: text }),
-        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-          "\uFF08",
-          label2,
-          "\uFF09"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.toneNote(label2) })
       ]
     }
   );
@@ -5965,10 +5444,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,
@@ -5994,6 +5473,8 @@ function DataTable({
   className,
   children
 }) {
+  const locale = useLocale();
+  const t = TEXT14[uiLanguage(locale)];
   const [sorting, setSorting] = useControlledState(sortingProp, [], onSortingChange);
   const [columnFilters, setColumnFilters] = useControlledState(
     columnFiltersProp,
@@ -6032,7 +5513,7 @@ function DataTable({
         ...column,
         cell: ({ row, getValue }) => {
           const value = getValue();
-          const text = formatCellText(value, row.original, meta2 ?? {});
+          const text = formatCellText(value, row.original, meta2 ?? {}, locale);
           if (thresholds) return /* @__PURE__ */ jsx(ThresholdCell, { value, text, thresholds });
           if (aligned) return /* @__PURE__ */ jsx("div", { className: "text-right tabular-nums", children: text });
           if (meta2?.dateFormat) return /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: text });
@@ -6049,7 +5530,7 @@ function DataTable({
           checked: table2.getIsAllPageRowsSelected(),
           indeterminate: table2.getIsSomePageRowsSelected(),
           onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(checked),
-          "aria-label": "\u5168\u3066\u9078\u629E"
+          "aria-label": t.selectAll
         }
       ),
       cell: ({ row }) => /* @__PURE__ */ jsx(
@@ -6057,14 +5538,14 @@ function DataTable({
         {
           checked: row.getIsSelected(),
           onCheckedChange: (checked) => row.toggleSelected(checked),
-          "aria-label": "\u884C\u3092\u9078\u629E"
+          "aria-label": t.selectRow
         }
       ),
       enableSorting: false,
       enableHiding: false
     };
     return [selectionColumn, ...formatted];
-  }, [columns, enableRowSelection]);
+  }, [columns, enableRowSelection, locale, t]);
   const autoResetPage = enablePagination && pageCount === void 0 && rowCount === void 0;
   const resetKey = useRef(null);
   useEffect(() => {
@@ -6230,6 +5711,7 @@ function SortIcon({ sorted }) {
 var DataTableContent = forwardRef(
   ({ className, ...props }, ref) => {
     const { table, visibleColumnCount, isLoading, enablePagination } = useDataTable();
+    const t = useText();
     const { comparisonOf, comparisonIds } = pairComparisons(table.getVisibleLeafColumns());
     return /* @__PURE__ */ jsx(
       "div",
@@ -6310,7 +5792,7 @@ var DataTableContent = forwardRef(
             {
               colSpan: visibleColumnCount,
               className: "h-24 text-center text-muted-foreground",
-              children: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093"
+              children: t.noData
             }
           ) }) })
         ] })
@@ -6322,6 +5804,7 @@ DataTableContent.displayName = "DataTableContent";
 var DataTablePagination = forwardRef(
   ({ pageSizeOptions = [10, 20, 50], className, ...props }, ref) => {
     const { table, isLoading } = useDataTable();
+    const t = useText();
     const totalRows = table.options.rowCount !== void 0 ? table.getRowCount() : table.getFilteredRowModel().rows.length;
     const currentPageSize = table.getState().pagination.pageSize;
     const currentPageIndex = table.getState().pagination.pageIndex;
@@ -6329,7 +5812,7 @@ var DataTablePagination = forwardRef(
     const rangeEnd = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
     const pageSizeItems = pageSizeOptions.map((size) => ({
       value: String(size),
-      label: `${size}\u4EF6`
+      label: t.pageSize(size)
     }));
     return /* @__PURE__ */ jsxs(
       "div",
@@ -6341,14 +5824,7 @@ var DataTablePagination = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              totalRows,
-              "\u4EF6\u4E2D ",
-              rangeStart,
-              " - ",
-              rangeEnd,
-              " \u3092\u8868\u793A"
-            ] }),
+            /* @__PURE__ */ jsx("span", { children: t.range(totalRows, rangeStart, rangeEnd) }),
             /* @__PURE__ */ jsxs(
               Select,
               {
@@ -6356,7 +5832,7 @@ var DataTablePagination = forwardRef(
                 value: String(currentPageSize),
                 onValueChange: (value) => table.setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-[80px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "min-w-[80px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: pageSizeItems.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
                 ]
               }
@@ -6370,7 +5846,7 @@ var DataTablePagination = forwardRef(
                 size: "sm",
                 onClick: () => table.firstPage(),
                 disabled: isLoading || !table.getCanPreviousPage(),
-                children: "\u6700\u521D"
+                children: t.first
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6380,7 +5856,7 @@ var DataTablePagination = forwardRef(
                 size: "sm",
                 onClick: () => table.previousPage(),
                 disabled: isLoading || !table.getCanPreviousPage(),
-                children: "\u524D\u3078"
+                children: t.previous
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6390,7 +5866,7 @@ var DataTablePagination = forwardRef(
                 size: "sm",
                 onClick: () => table.nextPage(),
                 disabled: isLoading || !table.getCanNextPage(),
-                children: "\u6B21\u3078"
+                children: t.next
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6400,7 +5876,7 @@ var DataTablePagination = forwardRef(
                 size: "sm",
                 onClick: () => table.lastPage(),
                 disabled: isLoading || !table.getCanNextPage(),
-                children: "\u6700\u5F8C"
+                children: t.last
               }
             )
           ] })
@@ -6412,6 +5888,7 @@ var DataTablePagination = forwardRef(
 DataTablePagination.displayName = "DataTablePagination";
 var DataTableColumnVisibility = forwardRef(({ columnLabels, className }, ref) => {
   const { table } = useDataTable();
+  const t = useText();
   const hideableColumns = table.getAllColumns().filter((column) => column.getCanHide());
   if (hideableColumns.length === 0) return null;
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -6421,7 +5898,7 @@ var DataTableColumnVisibility = forwardRef(({ columnLabels, className }, ref) =>
         ref,
         render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn(className) }),
         "data-slot": "data-table-column-visibility",
-        "aria-label": "\u8868\u793A\u3059\u308B\u5217",
+        "aria-label": t.columns,
         children: /* @__PURE__ */ jsx(Columns3, { className: "size-4", "aria-hidden": "true" })
       }
     ),
@@ -6456,7 +5933,8 @@ function toCsv(header, rows, options = {}) {
   ];
   return (bom ? "\uFEFF" : "") + lines.join("\r\n");
 }
-function tableToCsv(table, { values = "display", scope = "filtered" } = {}) {
+function tableToCsv(table, { values = "display", scope = "filtered", locale: localeArg } = {}) {
+  const locale = resolveLocale(localeArg);
   const columns = table.getVisibleLeafColumns().filter((column) => column.id !== "_select");
   const rows = scope === "page" ? table.getRowModel().rows : table.getSortedRowModel().rows;
   const header = columns.map(
@@ -6466,7 +5944,7 @@ function tableToCsv(table, { values = "display", scope = "filtered" } = {}) {
     (row) => columns.map((column) => {
       const value = row.getValue(column.id);
       const meta = column.columnDef.meta;
-      if (values === "display" && (meta?.format || meta?.dateFormat)) return formatCellText(value, row.original, meta);
+      if (values === "display" && (meta?.format || meta?.dateFormat)) return formatCellText(value, row.original, meta, locale);
       if (value === null || value === void 0) return "";
       if (typeof value === "number" || typeof value === "string") return value;
       if (value instanceof Date) return value.toISOString();
@@ -6479,12 +5957,13 @@ function DataTableExport({
   fileName = "export.csv",
   values = "display",
   scope = "filtered",
-  children = "CSV \u3092\u66F8\u304D\u51FA\u3059",
+  children,
   className
 }) {
   const { table, isLoading } = useDataTable();
+  const locale = useLocale();
   const onClick = () => {
-    const csv = tableToCsv(table, { values, scope });
+    const csv = tableToCsv(table, { values, scope, locale });
     const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
     const a = document.createElement("a");
     a.href = url;
@@ -6504,7 +5983,7 @@ function DataTableExport({
       disabled: isLoading,
       children: [
         /* @__PURE__ */ jsx(Download, { className: "size-4", "aria-hidden": "true" }),
-        children
+        children ?? TEXT14[uiLanguage(locale)].exportCsv
       ]
     }
   );
@@ -6539,24 +6018,44 @@ function DataTablePreset({
 }
 DataTablePreset.displayName = "DataTablePreset";
 var FilterBarContext = createContext(null);
+var TEXT15 = {
+  ja: {
+    filters: "\u30D5\u30A3\u30EB\u30BF\u30FC",
+    selected: (count) => ` (${count}\u4EF6\u9078\u629E\u4E2D)`,
+    remove: (filter, option) => `${filter}: ${option} \u3092\u524A\u9664`,
+    clear: "\u30AF\u30EA\u30A2",
+    clearAll: "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2"
+  },
+  en: {
+    filters: "Filters",
+    selected: (count) => ` (${count} selected)`,
+    remove: (filter, option) => `Remove ${filter}: ${option}`,
+    clear: "Clear",
+    clearAll: "Clear all filters"
+  }
+};
+var useText2 = () => TEXT15[uiLanguage(useLocale())];
 function useFilterBar() {
   const ctx = useContext(FilterBarContext);
   if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>");
   return ctx;
 }
 var FilterBar = forwardRef(
-  ({ value, onChange, onClear, className, children, ...props }, ref) => /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { value, onChange, onClear }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "search",
-      "aria-label": "\u30D5\u30A3\u30EB\u30BF\u30FC",
-      "data-slot": "filter-bar",
-      className: cn("flex flex-wrap items-center gap-2", className),
-      ...props,
-      children
-    }
-  ) })
+  ({ value, onChange, onClear, className, children, ...props }, ref) => {
+    const t = useText2();
+    return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { value, onChange, onClear }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "search",
+        "aria-label": t.filters,
+        "data-slot": "filter-bar",
+        className: cn("flex flex-wrap items-center gap-2", className),
+        ...props,
+        children
+      }
+    ) });
+  }
 );
 FilterBar.displayName = "FilterBar";
 var ALL_VALUE = "__squadkit_all__";
@@ -6598,6 +6097,7 @@ function FilterBarMultiSelect({
   className
 }) {
   const { value, onChange } = useFilterBar();
+  const t = useText2();
   const selected = value[filterKey] ?? [];
   const handleToggle = (option) => {
     const next = selected.includes(option) ? selected.filter((v) => v !== option) : [...selected, option];
@@ -6608,7 +6108,7 @@ function FilterBarMultiSelect({
       PopoverTrigger,
       {
         render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn("h-8 gap-1", className) }),
-        "aria-label": `${placeholder ?? label2}${selected.length > 0 ? ` (${selected.length}\u4EF6\u9078\u629E\u4E2D)` : ""}`,
+        "aria-label": `${placeholder ?? label2}${selected.length > 0 ? t.selected(selected.length) : ""}`,
         "data-slot": "filter-bar-multi-select",
         children: [
           placeholder ?? label2,
@@ -6640,6 +6140,7 @@ function FilterBarMultiSelect({
 FilterBarMultiSelect.displayName = "FilterBarMultiSelect";
 function FilterBarActiveChips({ filters, className }) {
   const { value, onChange } = useFilterBar();
+  const t = useText2();
   const getActiveChips = () => {
     const chips = [];
     const pushRaw = (key, v) => {
@@ -6710,7 +6211,7 @@ function FilterBarActiveChips({ filters, className }) {
             type: "button",
             className: "ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20",
             onClick: () => handleRemoveFilter(chip.key, chip.optionValue),
-            "aria-label": `${chip.filterLabel}: ${chip.optionLabel} \u3092\u524A\u9664`,
+            "aria-label": t.remove(chip.filterLabel, chip.optionLabel),
             children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
           }
         )
@@ -6720,8 +6221,9 @@ function FilterBarActiveChips({ filters, className }) {
   )) });
 }
 FilterBarActiveChips.displayName = "FilterBarActiveChips";
-function FilterBarClearButton({ label: label2 = "\u30AF\u30EA\u30A2", className }) {
+function FilterBarClearButton({ label: label2, className }) {
   const { value, onClear } = useFilterBar();
+  const t = useText2();
   const hasActiveFilters = Object.values(value).some(
     (v) => Array.isArray(v) ? v.length > 0 : v !== void 0 && v !== ""
   );
@@ -6733,9 +6235,9 @@ function FilterBarClearButton({ label: label2 = "\u30AF\u30EA\u30A2", className
       size: "sm",
       className: cn("h-7 px-2 text-xs", className),
       onClick: onClear,
-      "aria-label": "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+      "aria-label": t.clearAll,
       "data-slot": "filter-bar-clear-button",
-      children: label2
+      children: label2 ?? t.clear
     }
   );
 }
@@ -6783,13 +6285,16 @@ function FilterBarPreset({
   ] });
 }
 FilterBarPreset.displayName = "FilterBarPreset";
-var DEFAULT_FISCAL_YEAR_START_MONTH = 4;
-var DEFAULT_DATE_PICKER_LOCALE = "en-US";
-function normalizeFiscalYearStartMonth(month) {
-  return typeof month === "number" && Number.isInteger(month) && month >= 1 && month <= 12 ? month : DEFAULT_FISCAL_YEAR_START_MONTH;
-}
-function fiscalPeriodRange(date, { unit, fiscalYearStartMonth, offset = 0 }) {
-  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth);
+function normalizeFiscalYearStartMonth(month, locale) {
+  return typeof month === "number" && Number.isInteger(month) && month >= 1 && month <= 12 ? month : defaultFiscalYearStartMonth(locale);
+}
+function fiscalPeriodRange(date, {
+  unit,
+  fiscalYearStartMonth,
+  offset = 0,
+  locale
+}) {
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth, locale);
   const length = unit === "year" ? 12 : 3;
   const sinceYearStart = (date.getMonth() - (startMonth - 1) + 12) % 12;
   const into = unit === "year" ? sinceYearStart : sinceYearStart % 3;
@@ -6832,16 +6337,20 @@ var PRESET_LABELS = {
     lastFiscalYear: "Last fiscal year"
   }
 };
-var isJapanese = (locale) => locale.toLowerCase().startsWith("ja");
-var WEEK_OPTIONS = { weekStartsOn: 1 };
-var calendarLocale = (locale) => isJapanese(locale) ? ja : void 0;
+var TEXT16 = {
+  ja: { placeholder: "\u671F\u9593\u3092\u9078\u629E", rangeSeparator: " - " },
+  en: { placeholder: "Pick a date range", rangeSeparator: " \u2013 " }
+};
+var calendarLocale = (locale) => uiLanguage(locale) === "ja" ? ja : void 0;
 function createDatePresets({
-  locale = DEFAULT_DATE_PICKER_LOCALE,
-  fiscalYearStartMonth = DEFAULT_FISCAL_YEAR_START_MONTH,
+  locale: localeArg,
+  fiscalYearStartMonth,
   now = () => /* @__PURE__ */ new Date()
 } = {}) {
-  const t = PRESET_LABELS[isJapanese(locale) ? "ja" : "en"];
-  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth);
+  const locale = resolveLocale(localeArg);
+  const t = PRESET_LABELS[uiLanguage(locale)];
+  const startMonth = normalizeFiscalYearStartMonth(fiscalYearStartMonth, locale);
+  const WEEK_OPTIONS = { weekStartsOn: weekStartsOn(locale) };
   const lastDays = (days) => () => {
     const today = now();
     return { from: startOfDay(subDays(today, days - 1)), to: endOfDay(today) };
@@ -6910,24 +6419,26 @@ function findMatchingPreset(presets, value) {
     return range.from != null && range.to != null && isSameDay(range.from, from) && isSameDay(range.to, to);
   });
 }
-var defaultPresets = createDatePresets();
+var defaultPresets = createDatePresets({ locale: FALLBACK_LOCALE });
 var DateRangePicker = forwardRef(
   function DateRangePicker2({
     value,
     onChange,
     presets: presetsProp,
     showPresets = true,
-    locale = DEFAULT_DATE_PICKER_LOCALE,
-    fiscalYearStartMonth = DEFAULT_FISCAL_YEAR_START_MONTH,
+    locale: localeProp,
+    fiscalYearStartMonth,
     maxDate,
     minDate,
-    placeholder = "\u671F\u9593\u3092\u9078\u629E",
+    placeholder,
     disabled = false,
     className,
     align = "start"
   }, ref) {
     const [open, setOpen] = useState(false);
     const isMobile = useIsMobile();
+    const locale = useLocale(localeProp);
+    const t = TEXT16[uiLanguage(locale)];
     const presets = useMemo(
       () => presetsProp ?? createDatePresets({ locale, fiscalYearStartMonth }),
       [presetsProp, locale, fiscalYearStartMonth]
@@ -6946,9 +6457,9 @@ var DateRangePicker = forwardRef(
       [onChange]
     );
     const formatDateRange2 = () => {
-      if (!value?.from) return placeholder;
-      if (!value.to) return format(value.from, "yyyy/MM/dd");
-      return `${format(value.from, "yyyy/MM/dd")} - ${format(value.to, "yyyy/MM/dd")}`;
+      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)}`;
     };
     const selectedPreset = findMatchingPreset(presets, value);
     const presetLabel = selectedPreset?.label;
@@ -7009,7 +6520,7 @@ var DateRangePicker = forwardRef(
                 mode: "range",
                 defaultMonth,
                 locale: calendarLocale(locale),
-                weekStartsOn: isJapanese(locale) ? 1 : void 0,
+                weekStartsOn: weekStartsOn(locale),
                 numberOfMonths: isMobile ? 1 : 2,
                 selected: calendarSelected,
                 onSelect: handleCalendarSelect,
@@ -7144,6 +6655,10 @@ function RemoveButton({ label: label2, onRemove, iconClassName }) {
     }
   );
 }
+var TEXT17 = {
+  ja: { placeholder: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044", search: "\u691C\u7D22...", empty: "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F", clear: "\u30AF\u30EA\u30A2" },
+  en: { placeholder: "Select an option", search: "Search...", empty: "No results found.", clear: "Clear" }
+};
 var NO_OPTIONS2 = [];
 var SearchableSelect = forwardRef(
   function SearchableSelect2({
@@ -7151,15 +6666,16 @@ var SearchableSelect = forwardRef(
     value,
     onChange,
     onSearch,
-    placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
-    searchPlaceholder = "\u691C\u7D22...",
-    emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+    placeholder,
+    searchPlaceholder,
+    emptyText,
     isLoading = false,
     disabled = false,
     clearable = true,
     className
   }, ref) {
     const [open, setOpen] = useState(false);
+    const t = TEXT17[uiLanguage(useLocale())];
     const allOptions = useMemo(() => flattenOptions(options), [options]);
     const selectedOption = useMemo(
       () => allOptions.find((opt) => opt.value === value),
@@ -7188,9 +6704,9 @@ var SearchableSelect = forwardRef(
           role: "combobox",
           "aria-expanded": open,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder ?? t.placeholder }),
             /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
-              clearable && value && /* @__PURE__ */ jsx(RemoveButton, { label: "\u30AF\u30EA\u30A2", onRemove: () => onChange?.(void 0) }),
+              clearable && value && /* @__PURE__ */ jsx(RemoveButton, { label: t.clear, onRemove: () => onChange?.(void 0) }),
               /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
             ] })
           ]
@@ -7204,14 +6720,30 @@ var SearchableSelect = forwardRef(
           onSelect: handleSelect,
           onSearch,
           isLoading,
-          searchPlaceholder,
-          emptyText
+          searchPlaceholder: searchPlaceholder ?? t.search,
+          emptyText: emptyText ?? t.empty
         }
       ) })
     ] }) });
   }
 );
 SearchableSelect.displayName = "SearchableSelect";
+var TEXT18 = {
+  ja: {
+    placeholder: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+    search: "\u691C\u7D22...",
+    empty: "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+    remove: (label2) => `${label2}\u3092\u524A\u9664`,
+    more: (count) => `+${count}\u4EF6`
+  },
+  en: {
+    placeholder: "Select options",
+    search: "Search...",
+    empty: "No results found.",
+    remove: (label2) => `Remove ${label2}`,
+    more: (count) => `+${count} more`
+  }
+};
 var NO_OPTIONS3 = [];
 var NO_VALUES = [];
 var MultiSelect = forwardRef(function MultiSelect2({
@@ -7220,15 +6752,16 @@ var MultiSelect = forwardRef(function MultiSelect2({
   onChange,
   onSearch,
   maxCount = 3,
-  placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
-  searchPlaceholder = "\u691C\u7D22...",
-  emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
+  placeholder,
+  searchPlaceholder,
+  emptyText,
   isLoading = false,
   disabled = false,
   className
 }, ref) {
   const [open, setOpen] = useState(false);
   const listId = useId();
+  const t = TEXT18[uiLanguage(useLocale())];
   const allOptions = useMemo(() => flattenOptions(options), [options]);
   const selectedOptions = useMemo(
     () => allOptions.filter((opt) => value.includes(opt.value)),
@@ -7256,23 +6789,19 @@ var MultiSelect = forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder ?? t.placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             visibleBadges.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 pr-1", children: [
               /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: option.label }),
               /* @__PURE__ */ jsx(
                 RemoveButton,
                 {
-                  label: `${option.label}\u3092\u524A\u9664`,
+                  label: t.remove(option.label),
                   onRemove: () => onChange?.(value.filter((v) => v !== option.value)),
                   iconClassName: "size-3"
                 }
               )
             ] }, option.value)),
-            overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0", children: [
-              "+",
-              overflowCount,
-              "\u4EF6"
-            ] })
+            overflowCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0", children: t.more(overflowCount) })
           ] }) }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
         ]
@@ -7286,8 +6815,8 @@ var MultiSelect = forwardRef(function MultiSelect2({
         onSelect: handleSelect,
         onSearch,
         isLoading,
-        searchPlaceholder,
-        emptyText
+        searchPlaceholder: searchPlaceholder ?? t.search,
+        emptyText: emptyText ?? t.empty
       }
     ) })
   ] }) });
@@ -7376,14 +6905,17 @@ function inferPeriodGrain(period) {
   return void 0;
 }
 var RECORD_MIN_POINTS = 6;
-var GRAIN_UNITS = {
-  day: "\u65E5",
-  week: "\u9031",
-  month: "\u304B\u6708",
-  quarter: "\u56DB\u534A\u671F",
-  year: "\u5E74"
+var RECORD_TEXT = {
+  ja: (span, grain, lower) => {
+    const units = { day: "\u65E5", week: "\u9031", month: "\u304B\u6708", quarter: "\u56DB\u534A\u671F", year: "\u5E74" };
+    return `\u904E\u53BB ${span} ${units[grain]}\u3067${lower ? "\u6700\u4F4E" : "\u6700\u9AD8"}`;
+  },
+  en: (span, grain, lower) => {
+    const units = { day: "days", week: "weeks", month: "months", quarter: "quarters", year: "years" };
+    return `${lower ? "Lowest" : "Highest"} in ${span} ${units[grain]}`;
+  }
 };
-function detectRecord(history, grain = "month", polarity = "higher-is-better") {
+function detectRecord(history, grain = "month", polarity = "higher-is-better", locale) {
   if (!history) return null;
   const points = history.filter(isFiniteNumber);
   if (points.length < RECORD_MIN_POINTS) return null;
@@ -7396,7 +6928,7 @@ function detectRecord(history, grain = "month", polarity = "higher-is-better") {
     span,
     grain,
     kind: lower ? "lowest" : "highest",
-    label: `\u904E\u53BB ${span} ${GRAIN_UNITS[grain]}\u3067${lower ? "\u6700\u4F4E" : "\u6700\u9AD8"}`
+    label: RECORD_TEXT[uiLanguage(resolveLocale(locale))](span, grain, lower)
   };
 }
 var deltaVariants = cva(
@@ -7404,7 +6936,7 @@ var deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-4xl px-2 py-0.5 text-xs font-semibold [&>svg]:size-3",
+        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5"
       },
       sentiment: {
@@ -7414,9 +6946,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",
@@ -7425,37 +6957,59 @@ var deltaVariants = cva(
   }
 );
 var DELTA_NOT_COMPARABLE = EMPTY_VALUE;
-function deltaAriaLabel(result, locale = DEFAULT_LOCALE, change = "relative", format2, digits) {
+var ARIA_TEXT = {
+  ja: {
+    none: (label2) => `${label2} \u6BD4\u8F03\u3067\u304D\u307E\u305B\u3093`,
+    flat: (label2) => `${label2} \u6A2A\u3070\u3044`,
+    points: " \u30DD\u30A4\u30F3\u30C8",
+    change: (label2, amount, up) => `${label2} ${amount} ${up ? "\u5897\u52A0" : "\u6E1B\u5C11"}`
+  },
+  en: {
+    none: (label2) => `${label2}: not comparable`,
+    flat: (label2) => `Flat ${label2}`,
+    points: " points",
+    change: (label2, amount, up) => `${up ? "Up" : "Down"} ${amount} ${label2}`
+  }
+};
+function deltaAriaLabel(result, locale, change = "relative", format, digits) {
+  const resolved = resolveLocale(locale);
+  const t = ARIA_TEXT[uiLanguage(resolved)];
   const { label: label2, direction, ratio } = result;
-  if (direction === "none" || ratio === null) return `${label2} \u6BD4\u8F03\u3067\u304D\u307E\u305B\u3093`;
-  if (direction === "flat") return `${label2} \u6A2A\u3070\u3044`;
-  const amount = formatChangeAmount(result, change, locale, format2, digits);
-  if (amount === null) return `${label2} \u6BD4\u8F03\u3067\u304D\u307E\u305B\u3093`;
-  return `${label2} ${change === "points" ? amount.replace(/pt$/, " \u30DD\u30A4\u30F3\u30C8") : amount} ${direction === "up" ? "\u5897\u52A0" : "\u6E1B\u5C11"}`;
+  if (direction === "none" || ratio === null) return t.none(label2);
+  if (direction === "flat") return t.flat(label2);
+  const amount = formatChangeAmount(result, change, resolved, format, digits);
+  if (amount === null) return t.none(label2);
+  return t.change(label2, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up");
 }
 var Delta = forwardRef(
   ({
     value,
     comparison,
+    betterWhen,
     polarity,
     neutralBand,
-    format: format2,
+    format,
     change,
     digits,
-    locale = DEFAULT_LOCALE,
+    locale: localeProp,
     showLabel = true,
     variant = "badge",
     className,
     ...props
   }, ref) => {
+    const locale = useLocale(localeProp);
     if (!comparison) return null;
-    const result = computeComparison(value, comparison, { polarity, neutralBand });
-    const display = change ?? defaultChangeDisplay(format2);
-    const formatDigits = typeof format2 === "object" && format2 !== null && "digits" in format2 ? format2.digits : void 0;
+    const result = computeComparison(value, comparison, {
+      polarity: betterWhen ? betterWhen === "down" ? "lower-is-better" : "higher-is-better" : polarity,
+      neutralBand,
+      locale
+    });
+    const display = change ?? defaultChangeDisplay(format);
+    const formatDigits = typeof format === "object" && format !== null && "digits" in format ? format.digits : void 0;
     const changeDigits = display === "points" ? digits ?? formatDigits : digits;
     const comparable = result.direction !== "none";
     const Icon = result.direction === "up" ? ArrowUp : result.direction === "down" ? ArrowDown : ArrowRight;
-    const text = formatChange(result, display, locale, format2, changeDigits);
+    const text = formatChange(result, display, locale, format, changeDigits);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -7464,7 +7018,7 @@ var Delta = forwardRef(
         "data-slot": "delta",
         "data-direction": result.direction,
         "data-sentiment": result.sentiment,
-        "aria-label": deltaAriaLabel(result, locale, display, format2, changeDigits),
+        "aria-label": deltaAriaLabel(result, locale, display, format, changeDigits),
         className: cn(
           deltaVariants({ variant, sentiment: result.sentiment }),
           !comparable && "text-muted-foreground",
@@ -7489,7 +7043,69 @@ 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 TEXT19 = {
+  ja: {
+    target: "\u76EE\u6A19",
+    provisional: "\u901F\u5831",
+    joiner: "\u30FB",
+    countFrom: (count) => `${count}\u4EF6\u304B\u3089\u96C6\u8A08`,
+    excluded: (count) => `${count}\u4EF6\u3092\u9664\u5916`,
+    noBaseline: (baseline) => `${baseline}\u306E\u5B9F\u7E3E\u304C\u306A\u3044\u305F\u3081\u3001\u6BD4\u8F03\u3067\u304D\u307E\u305B\u3093\u3002`,
+    previous: (baseline, value) => `${baseline} ${value}`,
+    noPrevious: (baseline) => `${baseline}\u306E\u5B9F\u7E3E\u306A\u3057`,
+    barLead: (tl, pct) => `${tl}\u306E ${pct}`,
+    pace: (pct) => `\u3053\u306E\u30DA\u30FC\u30B9\u306A\u3089 ${pct}`,
+    provisionalSuffix: "\uFF08\u78BA\u5B9A\u524D\uFF09",
+    provisionalReached: (tl, target) => `${tl} ${target} \u306B\u5230\u9054\uFF08\u78BA\u5B9A\u524D\uFF09`,
+    provisionalSoFar: (tl, target, pct) => `${tl} ${target} \u306B\u5BFE\u3057\u3066\u73FE\u6642\u70B9 ${pct}\uFF08\u78BA\u5B9A\u524D\uFF09`,
+    provisionalToGo: (tl, target, distance) => `${tl} ${target} \u307E\u3067\u3042\u3068 ${distance}\uFF08\u78BA\u5B9A\u524D\uFF09`,
+    provisionalToGoRate: (tl, distance, pct) => `${tl}\u307E\u3067\u3042\u3068 ${distance}\uFF08\u73FE\u6642\u70B9 ${pct}\u30FB\u78BA\u5B9A\u524D\uFF09`,
+    met: (tl, target) => `${tl} ${target} \u3092\u9054\u6210`,
+    toGo: (tl, target, distance) => `${tl} ${target} \u307E\u3067\u3042\u3068 ${distance}`,
+    reached: (tl, target) => `${tl} ${target} \u306B\u5230\u9054`,
+    reachedRate: (tl, target, pct) => `${tl} ${target} \u306B\u5230\u9054\uFF08${pct} \u9054\u6210\uFF09`,
+    toGoRate: (tl, distance, pct) => `${tl}\u307E\u3067\u3042\u3068 ${distance}\uFF08${pct} \u9054\u6210\uFF09`,
+    progressLabel: (tl) => `${tl}\u306B\u5BFE\u3059\u308B\u9032\u6357`,
+    progressValue: (tl, target, value, pct) => `${tl} ${target} \u306B\u5BFE\u3057\u3066 ${value}\uFF08${pct}\uFF09`,
+    history: (label2, points) => `${label2}\u306E\u63A8\u79FB\uFF08\u76F4\u8FD1 ${points} \u70B9\uFF09`,
+    updatedRelative: (relative2) => `${relative2}\u306B\u66F4\u65B0`,
+    updatedAbsolute: (absolute2) => `${absolute2} \u306B\u66F4\u65B0`,
+    updatedBoth: (absolute2, relative2) => `${absolute2} \u306B\u66F4\u65B0\uFF08${relative2}\uFF09`,
+    summaryExample: "{label}\u306F\u76EE\u6A19\u306E {achievement} \u307E\u3067\u6765\u3066\u3044\u307E\u3059\u3002"
+  },
+  en: {
+    target: "Target",
+    provisional: "Preliminary",
+    joiner: " \xB7 ",
+    countFrom: (count) => `Based on ${count} records`,
+    excluded: (count) => `${count} excluded`,
+    noBaseline: (baseline) => `No ${baseline} data to compare against.`,
+    previous: (baseline, value) => `${capitalize(baseline)}: ${value}`,
+    noPrevious: (baseline) => `No ${baseline} data`,
+    barLead: (tl, pct) => `${tl}: ${pct}`,
+    pace: (pct) => `On pace for ${pct}`,
+    provisionalSuffix: " (preliminary)",
+    provisionalReached: (tl, target) => `${tl} ${target}: reached (preliminary)`,
+    provisionalSoFar: (tl, target, pct) => `${tl} ${target}: ${pct} so far (preliminary)`,
+    provisionalToGo: (tl, target, distance) => `${tl} ${target}: ${distance} to go (preliminary)`,
+    provisionalToGoRate: (tl, distance, pct) => `${tl}: ${distance} to go (${pct} so far, preliminary)`,
+    met: (tl, target) => `${tl} ${target}: met`,
+    toGo: (tl, target, distance) => `${tl} ${target}: ${distance} to go`,
+    reached: (tl, target) => `${tl} ${target}: reached`,
+    reachedRate: (tl, target, pct) => `${tl} ${target}: reached (${pct} achieved)`,
+    toGoRate: (tl, distance, pct) => `${tl}: ${distance} to go (${pct} achieved)`,
+    progressLabel: (tl) => `Progress toward ${tl}`,
+    progressValue: (tl, target, value, pct) => `${value} of ${tl} ${target} (${pct})`,
+    history: (label2, points) => `${label2} trend (last ${points} points)`,
+    updatedRelative: (relative2) => `Updated ${relative2}`,
+    updatedAbsolute: (absolute2) => `Updated ${absolute2}`,
+    updatedBoth: (absolute2, relative2) => `Updated ${absolute2} (${relative2})`,
+    summaryExample: "{label} is at {achievement} of target."
+  }
+};
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
 var isMissing = (v) => v === null || v === void 0 || v === "";
 function fillKpiTemplate(template, values, fallback) {
   let missing = false;
@@ -7517,11 +7133,11 @@ function isProduction() {
     return true;
   }
 }
-function warnShallowSummary(template) {
+function warnShallowSummary(template, t) {
   if (shallowSummaryWarned || isProduction() || !isShallowSummary(template)) return;
   shallowSummaryWarned = true;
   console.warn(
-    `[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").`
+    `[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. "${t.summaryExample}").`
   );
 }
 function digitGroups(text) {
@@ -7530,18 +7146,19 @@ function digitGroups(text) {
 function KpiCard({
   label: label2,
   value,
-  format: format2,
-  locale = DEFAULT_LOCALE,
+  format,
+  locale: localeProp,
   comparison: comparisonProp,
   comparisons,
   provisional,
-  polarity,
+  betterWhen,
+  polarity: polarityProp,
   change,
   neutralBand,
   showPrevious = true,
   summary,
   target,
-  targetLabel = "\u76EE\u6A19",
+  targetLabel,
   targetDisplay,
   period,
   history,
@@ -7557,21 +7174,24 @@ function KpiCard({
   className,
   ...props
 }) {
+  const locale = useLocale(localeProp);
+  const t = TEXT19[uiLanguage(locale)];
   const allComparisons = [...comparisonProp ? [comparisonProp] : [], ...comparisons ?? []];
   const comparison = allComparisons[0];
   const isProvisional = provisional !== void 0 && provisional !== false;
-  const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : "\u901F\u5831";
+  const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : t.provisional;
   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;
   const hasTarget = target !== void 0;
   const grain = comparison?.grain ?? historyGrain ?? inferPeriodGrain(period);
-  const record = isProvisional || neutral ? null : detectRecord(history, historyGrain ?? grain, polarity);
+  const record = isProvisional || neutral ? null : detectRecord(history, historyGrain ?? grain, polarity, locale);
   const sourceParts = source ? [
     source.period !== void 0 ? formatDatesInText(source.period, locale) : void 0,
-    source.count !== void 0 ? `${formatValue(source.count, "number", locale)}\u4EF6\u304B\u3089\u96C6\u8A08` : void 0,
-    source.excluded !== void 0 && Number.isFinite(source.excluded) && source.excluded > 0 ? isJapanese2(locale) ? `${formatValue(source.excluded, "number", locale)}\u4EF6\u3092\u9664\u5916` : `${formatValue(source.excluded, "number", locale)} excluded` : void 0,
+    source.count !== void 0 ? t.countFrom(formatValue(source.count, "number", locale)) : void 0,
+    source.excluded !== void 0 && Number.isFinite(source.excluded) && source.excluded > 0 ? t.excluded(formatValue(source.excluded, "number", locale)) : void 0,
     source.name,
     source.note
   ].filter((p) => typeof p === "string" && p !== "") : [];
@@ -7579,11 +7199,11 @@ function KpiCard({
   const historyPoints = (history ?? []).filter((v) => typeof v === "number" && Number.isFinite(v));
   const small = size === "sm";
   const showSparkline = !small && showHistory && historyPoints.length >= SPARKLINE_MIN_POINTS;
-  const isRate = formatKind(format2) === "percent";
+  const isRate = formatKind(format) === "percent";
   const byPoints = (targetDisplay ?? (isRate ? "points" : "achievement")) === "points";
   const lower = polarity === "lower-is-better";
   const targetBar = hasTarget && !neutral && !byPoints && !lower;
-  if (summary !== void 0) warnShallowSummary(summary);
+  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";
   if (isLoading) {
@@ -7625,15 +7245,15 @@ function KpiCard({
       }
     );
   }
-  const fmt = (v) => formatValue(v, format2, locale);
+  const fmt = (v) => formatValue(v, format, locale);
   const fmtDistance = (v) => isRate ? formatPoints(v, locale, { signDisplay: "never" }) : fmt(v);
   const pct = (v) => formatValue(v, { type: "percent", digits: 0 }, locale);
-  const tl = targetLabel;
-  const display = change ?? defaultChangeDisplay(format2);
-  const digits = display === "points" && typeof format2 === "object" && format2 !== null && "digits" in format2 ? format2.digits : void 0;
+  const tl = targetLabel ?? t.target;
+  const display = change ?? defaultChangeDisplay(format);
+  const digits = display === "points" && typeof format === "object" && format !== null && "digits" in format ? format.digits : void 0;
   const graded = comparison ? { ...comparison, grain } : void 0;
-  const result = graded ? computeComparison(value, graded, { polarity, neutralBand }) : null;
-  const baseline = graded ? comparisonBaseline(graded.vs, grain, graded.label, graded.toDate) : null;
+  const result = graded ? computeComparison(value, graded, { polarity, neutralBand, locale }) : null;
+  const baseline = graded ? comparisonBaseline(graded.vs, grain, graded.label, graded.toDate, locale) : null;
   const progress = hasTarget && !neutral ? computeTargetProgress(value, target, { period, now, polarity }) : null;
   const projectedValue = !isRate && !byPoints && progress?.projected != null && progress.elapsed ? value / progress.elapsed : null;
   const summaryText = summary ? fillKpiTemplate(
@@ -7641,14 +7261,14 @@ function KpiCard({
     {
       value: fmt(value),
       label: label2,
-      delta: result ? formatChange(result, display, locale, format2, digits) : null,
-      difference: result?.difference != null ? isRate ? formatPoints(result.difference, locale) : formatDelta(result.difference, format2, locale) : null,
+      delta: result ? formatChange(result, display, locale, format, digits) : null,
+      difference: result?.difference != null ? isRate ? formatPoints(result.difference, locale) : formatDelta(result.difference, format, locale) : null,
       previous: result?.previous != null ? fmt(result.previous) : null,
       target: hasTarget ? fmt(target) : null,
       achievement: progress ? byPoints ? formatPoints(value - target, locale) : pct(progress.achievement) : null,
       remaining: progress ? fmtDistance(progress.remaining) : null
     },
-    result && result.direction === "none" && baseline ? `${baseline}\u306E\u5B9F\u7E3E\u304C\u306A\u3044\u305F\u3081\u3001\u6BD4\u8F03\u3067\u304D\u307E\u305B\u3093\u3002` : null
+    result && result.direction === "none" && baseline ? t.noBaseline(baseline) : null
   ) : null;
   const bar = targetBar && progress ? progressBar() : null;
   function progressBar() {
@@ -7656,9 +7276,9 @@ function KpiCard({
     const projected = projectedValue !== null && projectedValue > actual ? projectedValue : actual;
     const scale = Math.max(target, actual, projected);
     const at = (v) => scale > 0 ? v / scale * 100 : 0;
-    const parts = [`${tl}\u306E ${pct(progress.achievement)}`];
+    const parts = [t.barLead(tl, pct(progress.achievement))];
     if (projectedValue !== null && progress.projected != null)
-      parts.push(`\u3053\u306E\u30DA\u30FC\u30B9\u306A\u3089 ${formatValue(progress.projected, { type: "percent", digits: 0 }, locale)}`);
+      parts.push(t.pace(formatValue(progress.projected, { type: "percent", digits: 0 }, locale)));
     return {
       actualAt: at(actual),
       projectedAt: at(projected),
@@ -7671,13 +7291,13 @@ function KpiCard({
   if (hasTarget && !bar) {
     if (!progress) targetText = `${tl} ${fmt(target)}`;
     else if (isProvisional)
-      targetText = progress.achieved ? byPoints ? `${tl} ${fmt(target)} \u306B\u5230\u9054\uFF08\u78BA\u5B9A\u524D\uFF09` : `${tl} ${fmt(target)} \u306B\u5BFE\u3057\u3066\u73FE\u6642\u70B9 ${pct(progress.achievement)}\uFF08\u78BA\u5B9A\u524D\uFF09` : byPoints ? `${tl} ${fmt(target)} \u307E\u3067\u3042\u3068 ${fmtDistance(progress.remaining)}\uFF08\u78BA\u5B9A\u524D\uFF09` : `${tl}\u307E\u3067\u3042\u3068 ${fmtDistance(progress.remaining)}\uFF08\u73FE\u6642\u70B9 ${pct(progress.achievement)}\u30FB\u78BA\u5B9A\u524D\uFF09`;
+      targetText = progress.achieved ? byPoints ? t.provisionalReached(tl, fmt(target)) : t.provisionalSoFar(tl, fmt(target), pct(progress.achievement)) : byPoints ? t.provisionalToGo(tl, fmt(target), fmtDistance(progress.remaining)) : t.provisionalToGoRate(tl, fmtDistance(progress.remaining), pct(progress.achievement));
     else if (lower)
-      targetText = progress.achieved ? `${tl} ${fmt(target)} \u3092\u9054\u6210` : `${tl} ${fmt(target)} \u307E\u3067\u3042\u3068 ${fmtDistance(progress.remaining)}`;
+      targetText = progress.achieved ? t.met(tl, fmt(target)) : t.toGo(tl, fmt(target), fmtDistance(progress.remaining));
     else if (byPoints)
-      targetText = progress.achieved ? `${tl} ${fmt(target)} \u306B\u5230\u9054` : `${tl} ${fmt(target)} \u307E\u3067\u3042\u3068 ${fmtDistance(progress.remaining)}`;
+      targetText = progress.achieved ? t.reached(tl, fmt(target)) : t.toGo(tl, fmt(target), fmtDistance(progress.remaining));
     else
-      targetText = progress.achieved ? `${tl} ${fmt(target)} \u306B\u5230\u9054\uFF08${pct(progress.achievement)} \u9054\u6210\uFF09` : `${tl}\u307E\u3067\u3042\u3068 ${fmtDistance(progress.remaining)}\uFF08${pct(progress.achievement)} \u9054\u6210\uFF09`;
+      targetText = progress.achieved ? t.reachedRate(tl, fmt(target), pct(progress.achievement)) : t.toGoRate(tl, fmtDistance(progress.remaining), pct(progress.achievement));
   }
   const hasFooter = Boolean(summaryText) || record !== null || Boolean(targetText) || sourceParts.length > 0 || hasUpdated || showSparkline;
   const deltas = allComparisons.map((c, i) => /* @__PURE__ */ jsx(
@@ -7687,7 +7307,7 @@ function KpiCard({
       comparison: i === 0 ? graded ?? c : { ...c, grain: c.grain ?? grain },
       polarity,
       neutralBand,
-      format: format2,
+      format,
       change: display,
       digits,
       locale
@@ -7720,18 +7340,18 @@ function KpiCard({
         }
       ),
       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` }),
+      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(
           "div",
           {
             "data-slot": "kpi-card-target-bar",
             role: "progressbar",
-            "aria-label": `${tl}\u306B\u5BFE\u3059\u308B\u9032\u6357`,
+            "aria-label": t.progressLabel(tl),
             "aria-valuemin": 0,
             "aria-valuemax": target,
             "aria-valuenow": Math.min(Math.max(value, 0), target),
-            "aria-valuetext": `${tl} ${fmt(target)} \u306B\u5BFE\u3057\u3066 ${fmt(value)}\uFF08${pct(progress.achievement)}\uFF09`,
+            "aria-valuetext": t.progressValue(tl, fmt(target), fmt(value), pct(progress.achievement)),
             className: "relative h-2 w-full overflow-hidden rounded-full bg-muted",
             children: [
               /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 bg-chart-1", style: { width: `${bar.actualAt}%` } }),
@@ -7758,15 +7378,15 @@ function KpiCard({
           "p",
           {
             "data-slot": "kpi-card-target",
-            title: [bar.lead, bar.pace].filter(Boolean).join("\u30FB"),
+            title: [bar.lead, bar.pace].filter(Boolean).join(t.joiner),
             className: "truncate text-sm text-muted-foreground tabular-nums",
             children: [
               bar.lead,
               bar.pace && /* @__PURE__ */ jsxs(Fragment, { children: [
-                "\u30FB",
+                t.joiner,
                 /* @__PURE__ */ jsx("span", { "data-slot": "kpi-card-projection", "data-estimate": "", children: bar.pace })
               ] }),
-              isProvisional && "\uFF08\u78BA\u5B9A\u524D\uFF09"
+              isProvisional && t.provisionalSuffix
             ]
           }
         )
@@ -7780,12 +7400,12 @@ function KpiCard({
         "p",
         {
           "data-slot": "kpi-card-source",
-          title: sourceParts.join("\u30FB"),
+          title: sourceParts.join(t.joiner),
           className: "line-clamp-2 w-full text-xs leading-normal text-muted-foreground tabular-nums",
-          children: sourceParts.join("\u30FB")
+          children: sourceParts.join(t.joiner)
         }
       ),
-      hasUpdated && /* @__PURE__ */ jsx("p", { "data-slot": "kpi-card-updated", className: "text-xs leading-normal 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, t, 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,
@@ -7794,23 +7414,35 @@ function KpiCard({
           height: SPARKLINE_HEIGHT,
           color: "text-chart-1",
           highlight: "latest",
-          "aria-label": `${label2}\u306E\u63A8\u79FB\uFF08\u76F4\u8FD1 ${historyPoints.length} \u70B9\uFF09`
+          "aria-label": t.history(label2, historyPoints.length)
         }
       ) })
     ] })
   ] });
 }
-function updatedAtText(updatedAt, display, locale, now, timeZone) {
+function updatedAtText(updatedAt, display, locale, t, now, timeZone) {
   const relative2 = formatRelativeTime(updatedAt, { now, locale });
-  if (display === "relative") return `${relative2}\u306B\u66F4\u65B0`;
+  if (display === "relative") return t.updatedRelative(relative2);
   const absolute2 = formatDate(updatedAt, "datetime", locale, { timeZone });
-  return display === "absolute" ? `${absolute2} \u306B\u66F4\u65B0` : `${absolute2} \u306B\u66F4\u65B0\uFF08${relative2}\uFF09`;
+  return display === "absolute" ? t.updatedAbsolute(absolute2) : t.updatedBoth(absolute2, relative2);
 }
+var TEXT20 = {
+  ja: {
+    flat: (value) => `\u5909\u5316\u306A\u3057 ${value}%`,
+    up: (value) => `${value}% \u5897\u52A0`,
+    down: (value) => `${value}% \u6E1B\u5C11`
+  },
+  en: {
+    flat: (value) => `No change ${value}%`,
+    up: (value) => `Up ${value}%`,
+    down: (value) => `Down ${value}%`
+  }
+};
 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"
     }
   },
@@ -7823,7 +7455,8 @@ var TrendIndicator = forwardRef(
     const isGood = direction === "neutral" ? null : direction === "up" === positiveIsGood;
     const sentiment = isGood === null ? "neutral" : isGood ? "positive" : "negative";
     const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus;
-    const ariaLabel = direction === "neutral" ? `\u5909\u5316\u306A\u3057 ${value}%` : direction === "up" ? `${value}% \u5897\u52A0` : `${value}% \u6E1B\u5C11`;
+    const t = TEXT20[uiLanguage(useLocale())];
+    const ariaLabel = direction === "neutral" ? t.flat(value) : direction === "up" ? t.up(value) : t.down(value);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -7843,21 +7476,49 @@ var TrendIndicator = forwardRef(
   }
 );
 TrendIndicator.displayName = "TrendIndicator";
+var STATUS_LABELS = {
+  ja: {
+    success: "\u6B63\u5E38",
+    partial: "\u4E00\u90E8\u5931\u6557",
+    failed: "\u5931\u6557",
+    delayed: "\u9045\u5EF6",
+    running: "\u5B9F\u884C\u4E2D",
+    stopped: "\u505C\u6B62\u4E2D",
+    active: "\u6709\u52B9",
+    inactive: "\u7121\u52B9",
+    warning: "\u8B66\u544A",
+    error: "\u30A8\u30E9\u30FC",
+    pending: "\u4FDD\u7559\u4E2D"
+  },
+  en: {
+    success: "Healthy",
+    partial: "Partially failed",
+    failed: "Failed",
+    delayed: "Delayed",
+    running: "Running",
+    stopped: "Stopped",
+    active: "Active",
+    inactive: "Inactive",
+    warning: "Warning",
+    error: "Error",
+    pending: "Pending"
+  }
+};
 var STATUS_VOCABULARY = {
-  success: { label: "\u6B63\u5E38", tone: "positive" },
-  partial: { label: "\u4E00\u90E8\u5931\u6557", tone: "warning" },
-  failed: { label: "\u5931\u6557", tone: "negative" },
-  delayed: { label: "\u9045\u5EF6", tone: "warning" },
-  running: { label: "\u5B9F\u884C\u4E2D", tone: "info" },
-  stopped: { label: "\u505C\u6B62\u4E2D", tone: "neutral" },
-  active: { label: "\u6709\u52B9", tone: "positive" },
-  inactive: { label: "\u7121\u52B9", tone: "neutral" },
-  warning: { label: "\u8B66\u544A", tone: "warning" },
-  error: { label: "\u30A8\u30E9\u30FC", tone: "negative" },
-  pending: { label: "\u4FDD\u7559\u4E2D", tone: "info" }
+  success: { label: STATUS_LABELS.en.success, tone: "positive" },
+  partial: { label: STATUS_LABELS.en.partial, tone: "warning" },
+  failed: { label: STATUS_LABELS.en.failed, tone: "negative" },
+  delayed: { label: STATUS_LABELS.en.delayed, tone: "warning" },
+  running: { label: STATUS_LABELS.en.running, tone: "info" },
+  stopped: { label: STATUS_LABELS.en.stopped, tone: "neutral" },
+  active: { label: STATUS_LABELS.en.active, tone: "positive" },
+  inactive: { label: STATUS_LABELS.en.inactive, tone: "neutral" },
+  warning: { label: STATUS_LABELS.en.warning, tone: "warning" },
+  error: { label: STATUS_LABELS.en.error, tone: "negative" },
+  pending: { label: STATUS_LABELS.en.pending, tone: "info" }
 };
-function statusLabel(status) {
-  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_VOCABULARY[status].label : status;
+function statusLabel(status, locale) {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_LABELS[uiLanguage(resolveLocale(locale))][status] : status;
 }
 var defaultColorMap = Object.fromEntries(
   Object.entries(STATUS_VOCABULARY).map(([key, { tone }]) => [key, tone])
@@ -7870,11 +7531,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";
@@ -7882,19 +7543,20 @@ var resolveTone = (color) => {
   return legacyColorTones[color] ?? "neutral";
 };
 var StatusBadge = forwardRef(function StatusBadge2({ status, label: label2, colorMap, className }, ref) {
+  const locale = useLocale();
   const mergedColorMap = { ...defaultColorMap, ...colorMap };
   const style = toneStyles[resolveTone(mergedColorMap[status])];
-  const displayLabel = label2 ?? statusLabel(status);
+  const displayLabel = label2 ?? statusLabel(status, locale);
   return /* @__PURE__ */ jsxs(
     Badge,
     {
       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
       ]
     }
@@ -7914,6 +7576,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-HKSVYMYJ.js.map
-//# sourceMappingURL=chunk-HKSVYMYJ.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-77CISBMG.js.map
+//# sourceMappingURL=chunk-77CISBMG.js.map