@squadbase/vantage 0.7.0 → 0.7.1-dev1.215984c

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

@@ -1,19 +1,19 @@
-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 { ChartFrameContext, useChartSurface, resolveChartColors, resolveFillColors, EChart, CHART_OTHER_COLOR } from './chunk-EG4PX726.js';
+import { Sparkline } from './chunk-P2KIHF65.js';
+import { formatDateRange, EMPTY_VALUE, toValueFormatter, formatDate, formatValue, formatPoints, formatKind, formatDelta, MINUS_SIGN, DEFAULT_LOCALE, formatDatesInText } from './chunk-XRKSIC5Z.js';
+import { Tooltip, TooltipTrigger, TooltipContent, Badge, SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Skeleton, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Empty, Checkbox, Card, CardHeader, CardDescription, CardTitle, CardAction, CardFooter } from './chunk-5HBUBVQ3.js';
 import { useLocale, uiLanguage, Button, weekStartsOn, resolveLocale, defaultFiscalYearStartMonth, FALLBACK_LOCALE } from './chunk-ROHNXP7J.js';
 import { cn } from './chunk-U736PVHY.js';
-import { forwardRef, useState, useEffect, createContext, useId, useMemo, useRef, useCallback, Fragment as Fragment$1, useContext } from 'react';
+import { forwardRef, useState, useEffect, createContext, useId, useMemo, useRef, useCallback, Fragment as Fragment$1, useContext, useInsertionEffect, useLayoutEffect } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Search, Columns3, CalendarIcon, ChevronDownIcon, ArrowUp, ArrowDown, ArrowRight, Minus, ChevronRight, ArrowUpDown, XIcon, LoaderIcon, CheckIcon, Download, ChevronDown, X, CircleX, TriangleAlert, CircleCheck } from 'lucide-react';
-import { use } from 'echarts/core';
-import { GraphicComponent, VisualMapComponent } from 'echarts/components';
-import { ScatterChart as ScatterChart$1, HeatmapChart } from 'echarts/charts';
+import { use, registerMap } from 'echarts/core';
+import { GraphicComponent, VisualMapComponent, GeoComponent } from 'echarts/components';
+import { ScatterChart as ScatterChart$1, HeatmapChart, MapChart, TreemapChart } from 'echarts/charts';
 import 'echarts';
+import { subMonths, subDays, endOfDay, startOfDay, startOfWeek, subWeeks, endOfWeek, startOfMonth, endOfMonth, isSameDay, subYears, differenceInCalendarDays, addMonths, parseISO } from 'date-fns';
 import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
-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.
@@ -127,7 +127,13 @@ var UpdatedAt = forwardRef(
 );
 UpdatedAt.displayName = "UpdatedAt";
 var PageShell = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell", className: cn("flex flex-col", className), ...props })
+  ({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell", className: cn("flex flex-col", className), ...props, children: title === void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageShellHeader, { children: /* @__PURE__ */ jsxs(PageShellHeading, { children: [
+      /* @__PURE__ */ jsx(PageShellTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(PageShellDescription, { children: description }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(PageShellContent, { children })
+  ] }) })
 );
 PageShell.displayName = "PageShell";
 var SOURCE_PREFIX = { ja: "\u51FA\u5178\uFF1A", en: "Source: " };
@@ -621,7 +627,7 @@ var DashboardCardFooter = forwardRef(
     {
       ref,
       "data-slot": "dashboard-card-footer",
-      className: cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className),
+      className: cn("-mx-1 -mb-1 flex min-w-0 items-center justify-between gap-3 border-t px-4 py-2.5 text-xs text-muted-foreground tabular-nums group-data-[size=sm]:px-3", className),
       ...props
     }
   )
@@ -647,6 +653,7 @@ function DashboardCardSkeleton({ className }) {
 function DashboardCardPreset({
   title,
   description,
+  headline,
   actions,
   footer,
   children,
@@ -658,15 +665,21 @@ function DashboardCardPreset({
   ...props
 }) {
   const sample = useSampleMark();
-  const hasHeader = title || description || actions || sample;
-  return /* @__PURE__ */ jsx(DashboardCard, { className, subgrid, ...props, children: /* @__PURE__ */ jsxs(SampleClaim, { children: [
+  const hasTitle = Boolean(title || description);
+  const floatingMark = sample && !hasTitle && !headline && !actions;
+  const hasHeader = hasTitle || headline || actions || sample && !floatingMark;
+  return /* @__PURE__ */ jsx(DashboardCard, { className: cn(floatingMark && "relative", className), subgrid, ...props, children: /* @__PURE__ */ jsxs(SampleClaim, { children: [
+    floatingMark && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label, className: "absolute top-2 right-2 z-10" }),
     hasHeader && /* @__PURE__ */ jsxs(DashboardCardHeader, { className: cn(subgrid && "row-start-1", headerClassName), children: [
-      (title || description) && /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
+      (hasTitle || sample) && /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+          title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
+          sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label })
+        ] }),
         description && /* @__PURE__ */ jsx(DashboardCardDescription, { children: description })
       ] }),
-      (actions || sample) && /* @__PURE__ */ jsxs(DashboardCardAction, { className: cn(sample && actions && "flex items-center gap-2"), children: [
-        sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label }),
+      (headline || actions) && /* @__PURE__ */ jsxs(DashboardCardAction, { className: "flex items-center gap-2", children: [
+        headline && /* @__PURE__ */ jsx("div", { "data-slot": "dashboard-card-headline", className: "text-sm tabular-nums text-muted-foreground", children: headline }),
         actions
       ] })
     ] }),
@@ -690,6 +703,7 @@ var ChartFrame = forwardRef(function ChartFrame2({
   ariaLabel,
   plotRole = "img",
   dataTable,
+  footnote,
   className,
   children,
   ...props
@@ -720,6 +734,7 @@ var ChartFrame = forwardRef(function ChartFrame2({
         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 })
       }
     ),
+    footnote && /* @__PURE__ */ jsx("p", { "data-slot": "chart-frame-footnote", className: "text-xs leading-snug text-muted-foreground", children: footnote }),
     state === "ready" && dataTable && dataTable.rows.length > 0 && /* @__PURE__ */ jsx(ChartDataTableView, { table: dataTable, fallbackCaption: title ?? ariaLabel })
   ] });
 });
@@ -743,7 +758,7 @@ function ChartDataTableView({ table, fallbackCaption }) {
     caption && /* @__PURE__ */ jsx("caption", { children: caption }),
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column, i) => /* @__PURE__ */ jsx("th", { scope: "col", children: column }, i)) }) }),
     /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, r) => /* @__PURE__ */ jsx("tr", { children: row.map(
-      (cell, c) => c === 0 ? /* @__PURE__ */ jsx("th", { scope: "row", children: cell }, c) : /* @__PURE__ */ jsx("td", { children: cell }, c)
+      (cell2, c) => c === 0 ? /* @__PURE__ */ jsx("th", { scope: "row", children: cell2 }, c) : /* @__PURE__ */ jsx("td", { children: cell2 }, c)
     ) }, r)) })
   ] }) });
 }
@@ -800,8 +815,8 @@ function chartColorAt(colors, i) {
   const palette = colors && colors.length > 0 ? colors : DEFAULT_CHART_COLORS;
   return palette[i % palette.length];
 }
-function tintCss(cssColor, percent) {
-  return `color-mix(in oklab, ${cssColor} ${percent}%, transparent)`;
+function tintCss(cssColor, percent2) {
+  return `color-mix(in oklab, ${cssColor} ${percent2}%, transparent)`;
 }
 function resolveValueFormatter(valueFormatter, format, locale) {
   return valueFormatter ?? toValueFormatter(format, locale);
@@ -1217,20 +1232,20 @@ function baselineOfLabel(named, language) {
   }
   return named;
 }
-function comparisonBaseline(vs, grain, label2, toDate2, locale) {
+function comparisonBaseline(vs, grain, label2, toDate3, locale) {
   const language = uiLanguage(resolveLocale(locale));
   const nouns = BASELINE_NOUNS[language];
   const named = label2?.trim();
   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;
+  if (vs === "prior-year" && toDate3) return nouns["prior-year"].unknown;
+  if (vs !== "prior-year" && vs !== "prior-period") return nouns.custom;
   return nouns[vs][grain ?? "unknown"];
 }
-function comparisonLabel(vs, grain, label2, toDate2, locale) {
+function comparisonLabel(vs, grain, label2, toDate3, locale) {
   if (label2?.trim()) return label2;
   const resolved = resolveLocale(locale);
-  return LABEL_OF[uiLanguage(resolved)](comparisonBaseline(vs, grain, void 0, toDate2, resolved));
+  return LABEL_OF[uiLanguage(resolved)](comparisonBaseline(vs, grain, void 0, toDate3, resolved));
 }
 var toNumber = (v) => v === null || v === void 0 || Number.isNaN(v) ? null : v;
 function computeComparison(current, comparison, options) {
@@ -1622,6 +1637,9 @@ function legendLines(items, plotWidth, reserve = 0) {
   return Math.min(3, Math.max(1, Math.ceil(width / budget)));
 }
 var ACTIONS_RESERVE = 80;
+var BAR_MAX_WIDTH = 40;
+var BAR_RADIUS = 3;
+var STACK_GAP = 1.5;
 var TIME_LABEL_WIDTH = 80;
 var HIGHLIGHT_LABEL_WIDTH = 96;
 var TARGET_NEAR_SHARE = 0.12;
@@ -1740,9 +1758,9 @@ function buildCartesianOption(cfg) {
   const text = chartText(locale);
   const provisionalLabel = cfg.provisionalLabel ?? text.provisional;
   const stacked = kind !== "line" && type !== "default";
-  const percent = kind !== "line" && type === "percent";
+  const percent2 = kind !== "line" && type === "percent";
   const horizontalBars = kind === "bar" && layout === "vertical";
-  const comparison = kind !== "bar" && !percent ? cfg.comparison : void 0;
+  const comparison = kind !== "bar" && !percent2 ? cfg.comparison : void 0;
   const compIdx = comparison ? categories.indexOf(comparison.category) : -1;
   const mainIdx = categories.map((_, i) => i).filter((i) => i !== compIdx);
   const seriesType = kind === "line" ? "default" : type;
@@ -1752,16 +1770,17 @@ function buildCartesianOption(cfg) {
     const compared = cartesianSeriesValues(data, [categories[compIdx]], "default")[0];
     return categories.map((_, i) => i === compIdx ? compared : main[mainIdx.indexOf(i)]);
   })();
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0));
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : void 0;
   const labels = data.map((row) => String(row[index] ?? ""));
   const rawIndex = data.map((row) => row[index]);
   const lastActual = labels.length - 1;
   const provStart = categories.length > 0 ? provisionalStart(rawIndex, cfg.provisionalFrom) : -1;
-  const forecast = kind !== "bar" && !percent && cfg.forecast && cfg.forecast.data.length > 0 && data.length > 0 && categories.length > 0 ? cfg.forecast : void 0;
+  const forecast2 = kind !== "bar" && !percent2 && cfg.forecast && cfg.forecast.data.length > 0 && data.length > 0 && categories.length > 0 ? cfg.forecast : void 0;
   const forecastAt = [];
-  if (forecast) {
+  if (forecast2) {
     const position = new Map(labels.map((label2, i) => [label2, i]));
-    for (const row of forecast.data) {
+    for (const row of forecast2.data) {
       const label2 = String(row[index] ?? "");
       let at = position.get(label2);
       if (at === void 0 || at <= lastActual) {
@@ -1798,14 +1817,14 @@ function buildCartesianOption(cfg) {
     (title, i) => nameLabels ? hasLabel(nameLabels, labels[i] ?? "") ? labelOf(labels[i] ?? "", nameLabels) : title : title
   );
   const highlight = cfg.highlight ?? defaultChartHighlight(kind, data, index);
-  const stackTotals = stacked && !percent ? stackTotalsOf(mainIdx.map((i) => values[i])) : null;
+  const stackTotals = stacked && !percent2 ? stackTotalsOf(mainIdx.map((i) => values[i])) : null;
   const highlightSeries = (stackTotals ? mainIdx[mainIdx.length - 1] : mainIdx[0]) ?? 0;
-  const shareHighlight = percent && kind === "area";
-  const picked = highlight !== "auto" || mainIdx.length === 0 || percent && !shareHighlight ? [] : shareHighlight ? categories.length <= 2 ? pickShareHighlightPoints(values[0] ?? []) : [] : stackTotals ? pickHighlightPoints(stackTotals) : mainIdx.length <= 2 ? pickHighlightPoints(values[highlightSeries] ?? []) : [];
+  const shareHighlight = percent2 && kind === "area";
+  const picked = highlight !== "auto" || mainIdx.length === 0 || percent2 && !shareHighlight ? [] : shareHighlight ? categories.length <= 2 ? pickShareHighlightPoints(values[0] ?? []) : [] : stackTotals ? pickHighlightPoints(stackTotals) : mainIdx.length <= 2 ? pickHighlightPoints(values[highlightSeries] ?? []) : [];
   const pointGap = plotWidth && labels.length > 1 ? plotWidth / (kind === "bar" ? labels.length : labels.length - 1) : null;
   const latestOnly = cfg.highlight === void 0 && !shareHighlight && picked.length === 2;
   const highlightPoints = latestOnly ? [picked[1]] : picked.length === 2 && pointGap !== null && Math.abs(picked[1].index - picked[0].index) * pointGap < HIGHLIGHT_LABEL_WIDTH ? [picked[1]] : picked;
-  const boundaryIndex = kind !== "bar" && !percent && cfg.forecast && cfg.forecast.data.length > 0 ? lastActual : -1;
+  const boundaryIndex = kind !== "bar" && !percent2 && cfg.forecast && cfg.forecast.data.length > 0 ? lastActual : -1;
   const edgeAlign = (i) => horizontalBars || labels.length < 2 ? void 0 : i === boundaryIndex && i !== last ? { align: "right", offset: [-6, 0] } : i === last ? { align: "right", ...kind === "bar" ? { offset: [8, 0] } : {} } : i === 0 ? { align: "left", ...kind === "bar" ? { offset: [-8, 0] } : {} } : void 0;
   const perBarTarget = kind === "bar" && Boolean(targetKey);
   const hasTarget = !perBarTarget && target !== void 0 && Number.isFinite(target);
@@ -1826,7 +1845,7 @@ function buildCartesianOption(cfg) {
   const hideTargetLabel = kind === "line" && targetLabelPosition === "legend" || !shareHighlight && plotWidth !== void 0 && plotWidth < TARGET_LABEL_NARROW_WIDTH && highlightPoints.some((p) => p.index === labels.length - 1 && (nearTargetLabel(p, "under") || nearTargetLabel(p, "over")));
   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 barTargets = perBarTarget && targetKey && !percent2 && (stacked || categories.length === 1) ? barTargetValues(data, targetKey) : null;
   const barTargetName = targetLabel ?? text.target;
   const barTargetColor = labelColor ?? guideColor;
   const markPointFor = (c, color) => c === highlightSeries && highlightPoints.length > 0 ? {
@@ -1867,14 +1886,16 @@ function buildCartesianOption(cfg) {
     const seriesData = pad(values[c]);
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0];
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded;
+      const radius = stacked ? BAR_RADIUS : rounded;
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {};
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar",
         name: category,
         stack: stacked ? "total" : void 0,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: void 0,
         data: seriesData.map((value, i) => {
@@ -1951,7 +1972,7 @@ function buildCartesianOption(cfg) {
       symbolSize: 6,
       showSymbol: showDots || data.length === 1,
       // 100% stacked: the top band's upper edge is the 100% line, not a value — drawn, it reads as「this band = 100%」.
-      lineStyle: percent && c === categories.length - 1 ? { width: 0, color, opacity: 0 } : { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
+      lineStyle: percent2 && c === categories.length - 1 ? { width: 0, color, opacity: 0 } : { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
       itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
       // Hovering a series fades the others (not for a stack, where the bands read together).
       emphasis: stacked ? void 0 : { focus: "series" },
@@ -1980,7 +2001,7 @@ function buildCartesianOption(cfg) {
         symbol: "circle",
         symbolSize: 6,
         showSymbol: showDots || data.length === 1,
-        lineStyle: percent && c === categories.length - 1 ? { width: 0, color, opacity: 0 } : { width: 2, type: "dashed", color, opacity },
+        lineStyle: percent2 && c === categories.length - 1 ? { width: 0, color, opacity: 0 } : { width: 2, type: "dashed", color, opacity },
         itemStyle: { color, opacity },
         areaStyle: solid.areaStyle ? { ...solid.areaStyle, opacity: (solid.areaStyle.opacity ?? 1) * PROVISIONAL_OPACITY } : void 0,
         markPoint: void 0,
@@ -2006,11 +2027,11 @@ function buildCartesianOption(cfg) {
       data: []
     });
   }
-  const forecastLabel = forecast?.label ?? text.forecast;
+  const forecastLabel = forecast2?.label ?? text.forecast;
   const forecastBandAlpha = isDarkSurface(labelBackground) ? FORECAST_BAND_ALPHA_DARK : FORECAST_BAND_ALPHA_LIGHT;
   const forecastValues = [];
-  if (forecast) {
-    const category = forecast.category !== void 0 && categories.includes(forecast.category) && forecast.category !== comparison?.category ? forecast.category : categories[mainIdx[0] ?? 0];
+  if (forecast2) {
+    const category = forecast2.category !== void 0 && categories.includes(forecast2.category) && forecast2.category !== comparison?.category ? forecast2.category : categories[mainIdx[0] ?? 0];
     const c = categories.indexOf(category);
     const color = palette[c] || void 0;
     const actual = values[c];
@@ -2030,7 +2051,7 @@ function buildCartesianOption(cfg) {
       range[start] = 0;
     }
     let hasBand = false;
-    forecast.data.forEach((row, k) => {
+    forecast2.data.forEach((row, k) => {
       const at = forecastAt[k];
       line[at] = cellNumber(row.value);
       const lo = cellNumber(row.lower);
@@ -2096,7 +2117,7 @@ function buildCartesianOption(cfg) {
     const totals = labels.map(
       (_, i) => stacked ? values.reduce((sum, v) => sum + Math.max(0, v[i] ?? 0), 0) : Math.max(0, ...values.map((v) => v[i] ?? 0))
     );
-    const top = percent ? 100 : maxValue ?? Math.max(target, ...totals);
+    const top = percent2 ? 100 : maxValue ?? Math.max(target, ...totals);
     if (!(top > 0)) return "center";
     const ratio = Math.min(1, Math.max(0, target / top));
     const half = (estimateTextWidth(targetText) + 8) / 2;
@@ -2129,7 +2150,15 @@ function buildCartesianOption(cfg) {
       }
     });
   }
-  if (forecast) {
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false }
+    });
+  }
+  if (forecast2) {
     const forecastSpan = plotWidth && labels.length > 1 ? Math.max(1, plotWidth - (showYAxis ? yAxisWidth ?? Y_AXIS_ESTIMATE : 0) - LINE_RIGHT_MARGIN) / (labels.length - 1) * (labels.length - 1 - lastActual) + LINE_RIGHT_MARGIN : null;
     markLines.push({
       name: "forecast-boundary",
@@ -2260,6 +2289,8 @@ function buildCartesianOption(cfg) {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : void 0,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -2280,16 +2311,16 @@ function buildCartesianOption(cfg) {
   const fit = kind === "line" && (fitToData ?? autoMinValue);
   const valueSplitNumber = (() => {
     if (!horizontalBars || !plotWidth) return void 0;
-    const top = percent ? 100 : maxValue ?? Math.max(0, ...(stacked ? stackTotalsOf(values) : values.flat()).map((v) => v ?? 0));
+    const top = percent2 ? 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 text2 = percent ? (v) => `${v}%` : (v) => axisFormatter(v);
+    const text2 = percent2 ? (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);
   const tickFormatter = (() => {
-    if (!cfg.axisTicks || percent) return axisFormatter;
+    if (!cfg.axisTicks || percent2) return axisFormatter;
     const extentValues = [];
     const addAll = (list) => {
       for (const v of list) if (v !== null && Number.isFinite(v)) extentValues.push(v);
@@ -2297,7 +2328,7 @@ function buildCartesianOption(cfg) {
     if (stackTotals) addAll(stackTotals);
     else values.forEach(addAll);
     addAll(forecastValues);
-    if (forecast) addAll(forecast.data.flatMap((row) => [cellNumber(row.lower), cellNumber(row.upper)]));
+    if (forecast2) addAll(forecast2.data.flatMap((row) => [cellNumber(row.lower), cellNumber(row.upper)]));
     if (barTargets) addAll(barTargets);
     if (hasTarget && target !== void 0) extentValues.push(target);
     if (maxValue !== void 0 && Number.isFinite(maxValue)) extentValues.push(maxValue);
@@ -2314,8 +2345,8 @@ function buildCartesianOption(cfg) {
     show: horizontalBars ? showXAxis : showYAxis,
     // Bars and areas always start at 0 (a positive `minValue` can't lift them, a negative one makes room below);
     // lines do too unless asked to fit the data. A limit never cuts the data: the axis widens to it.
-    min: percent ? 0 : kind === "line" ? minValue === void 0 ? fit ? void 0 : zeroBasedMin : limits.min : limits.min,
-    max: percent ? 100 : limits.max,
+    min: percent2 ? 0 : kind === "line" ? minValue === void 0 ? fit ? void 0 : zeroBasedMin : limits.min : limits.min,
+    max: percent2 ? 100 : limits.max,
     scale: fit && minValue == null,
     splitNumber,
     minInterval: allowDecimals ? void 0 : 1,
@@ -2323,7 +2354,7 @@ function buildCartesianOption(cfg) {
     axisTick: { show: false },
     splitLine: { show: showGridLines },
     axisLabel: {
-      formatter: percent ? (v) => `${v}%` : (v) => tickFormatter(v),
+      formatter: percent2 ? (v) => `${v}%` : (v) => tickFormatter(v),
       // Fitted to the data: the lowest tick would print over the first x label at the bottom left. The gridline stays.
       showMinLabel: fit && minValue == null && !horizontalBars ? false : void 0,
       // Horizontal: ticks that would still touch on a narrow plot are dropped.
@@ -2337,7 +2368,7 @@ function buildCartesianOption(cfg) {
   };
   const legendItems = [
     ...categories,
-    ...forecast ? [forecastLabel] : [],
+    ...forecast2 ? [forecastLabel] : [],
     ...provStart !== -1 ? [provisionalLabel] : [],
     ...barTargets ? [barTargetName] : [],
     ...hasTarget ? [targetText] : []
@@ -2348,7 +2379,7 @@ function buildCartesianOption(cfg) {
       show: showLegend,
       top: 0,
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
-      ...plotWidth !== void 0 && plotWidth < NARROW_PLOT_WIDTH ? { left: 0, right: 0 } : { right: reserveActions ? ACTIONS_RESERVE : 0 },
+      ...plotWidth !== void 0 && plotWidth < NARROW_PLOT_WIDTH ? { left: 0, right: 0 } : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 },
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -2358,7 +2389,7 @@ function buildCartesianOption(cfg) {
       // The target marker is a tick, not a dot.
       // The target is a row of dots and the forecast a row of dashes — their lines' patterns — and a per-bar target a tick.
       data: legendItems.map(
-        (name) => barTargets && name === barTargetName ? { name, icon: TARGET_LEGEND_ICON } : forecast && name === forecastLabel ? { name, icon: FORECAST_DASHED_ICON } : hasTarget && name === targetText ? { name, icon: TARGET_DOTTED_ICON } : name
+        (name) => barTargets && name === barTargetName ? { name, icon: TARGET_LEGEND_ICON } : forecast2 && name === forecastLabel ? { name, icon: FORECAST_DASHED_ICON } : hasTarget && name === targetText ? { name, icon: TARGET_DOTTED_ICON } : name
       ),
       formatter: nameLabels ? (name) => labelOf(name, nameLabels) : void 0
     },
@@ -2366,7 +2397,7 @@ function buildCartesianOption(cfg) {
       top: (showLegend ? 12 + LEGEND_LINE_HEIGHT * legendLines(legendItems, plotWidth, reserveActions ? ACTIONS_RESERVE : 0) : 12) + // The flat target label of a horizontal bar chart sits above the plot.
       (horizontalBars && hasTarget ? 18 : 0) + // The label of a band over bars sits above the plot's top edge.
       (kind === "bar" && notes.some((n) => n.to !== void 0) ? BAND_LABEL_ROOM : 0) + // The boundary label of a forecast sits above the plot's top edge too.
-      (forecast ? FORECAST_LABEL_ROOM : 0),
+      (forecast2 ? FORECAST_LABEL_ROOM : 0),
       // Lines start and end on the outermost ticks, so the last x label (and an edge
       // highlight) hangs past the plot; a horizontal bar's highlight sits past its end.
       right: horizontalBars ? highlightPoints.length > 0 ? 64 : 16 : kind === "bar" ? 16 : LINE_RIGHT_MARGIN,
@@ -2397,7 +2428,7 @@ function buildCartesianOption(cfg) {
             )
           };
         };
-        const shares = percent ? cartesianSeriesValues(i <= lastActual ? [row] : [], categories, "percent") : null;
+        const shares = percent2 ? cartesianSeriesValues(i <= lastActual ? [row] : [], categories, "percent") : null;
         const legendRank = (p) => {
           const at = categories.indexOf(p.seriesName ?? "");
           return at === -1 ? categories.length : at;
@@ -2642,12 +2673,12 @@ function AreaChartImpl({
   provisionalFrom,
   provisionalLabel,
   isLoading,
-  loading,
+  loading: loading2,
   emptyState,
   height,
   chartOptions,
   areaOptions,
-  forecast,
+  forecast: forecast2,
   comparison,
   highlight,
   target,
@@ -2729,7 +2760,7 @@ function AreaChartImpl({
       target,
       targetLabel,
       annotations,
-      forecast,
+      forecast: forecast2,
       comparison: comparisonConfig,
       comparisonFormat: format,
       provisionalFrom,
@@ -2775,7 +2806,7 @@ function AreaChartImpl({
       target,
       targetLabel,
       annotations,
-      forecast,
+      forecast2,
       comparisonConfig,
       format,
       height,
@@ -2803,7 +2834,7 @@ function AreaChartImpl({
       ref: frameRef,
       title,
       summary: resolvedSummary,
-      isLoading: isLoading ?? loading ?? false,
+      isLoading: isLoading ?? loading2 ?? false,
       isEmpty: data.length === 0,
       emptyState,
       height,
@@ -2837,7 +2868,7 @@ function BarChartImpl({
   provisionalFrom,
   provisionalLabel,
   isLoading,
-  loading,
+  loading: loading2,
   emptyState,
   height,
   chartOptions,
@@ -2993,7 +3024,7 @@ function BarChartImpl({
       ref: frameRef,
       title,
       summary: resolvedSummary,
-      isLoading: isLoading ?? loading ?? false,
+      isLoading: isLoading ?? loading2 ?? false,
       isEmpty: data.length === 0,
       emptyState,
       height,
@@ -3027,12 +3058,12 @@ function LineChartImpl({
   provisionalFrom,
   provisionalLabel,
   isLoading,
-  loading,
+  loading: loading2,
   emptyState,
   height,
   chartOptions,
   lineOptions,
-  forecast,
+  forecast: forecast2,
   comparison,
   highlight,
   target,
@@ -3115,7 +3146,7 @@ function LineChartImpl({
       targetLabel,
       targetLabelPosition,
       annotations,
-      forecast,
+      forecast: forecast2,
       comparison: comparisonConfig,
       comparisonFormat: format,
       provisionalFrom,
@@ -3162,7 +3193,7 @@ function LineChartImpl({
       targetLabel,
       targetLabelPosition,
       annotations,
-      forecast,
+      forecast2,
       comparisonConfig,
       format,
       height,
@@ -3190,7 +3221,7 @@ function LineChartImpl({
       ref: frameRef,
       title,
       summary: resolvedSummary,
-      isLoading: isLoading ?? loading ?? false,
+      isLoading: isLoading ?? loading2 ?? false,
       isEmpty: data.length === 0,
       emptyState,
       height,
@@ -3234,7 +3265,7 @@ function DonutChartImpl({
   actions,
   fileName,
   isLoading,
-  loading,
+  loading: loading2,
   emptyState,
   height,
   chartOptions,
@@ -3328,7 +3359,7 @@ function DonutChartImpl({
       ref: frameRef,
       title,
       summary: resolvedSummary,
-      isLoading: isLoading ?? loading ?? false,
+      isLoading: isLoading ?? loading2 ?? false,
       isEmpty: data.length === 0,
       emptyState,
       height,
@@ -4378,8 +4409,8 @@ function buildScatterOption(config) {
     legend: {
       show: showLegend,
       ...legendBelow ? { bottom: 0 } : { top: 0 },
-      // With a heading the legend reads from the left, after it; otherwise it sits at the right edge.
-      ...headingWidth > 0 ? { left: headingWidth } : legendBelow ? { left: 0 } : { right: config.reserveActions ? 72 : 0 },
+      // With a heading the legend reads from the left, after it; otherwise it sits at the left edge (as in every chart).
+      ...headingWidth > 0 ? { left: headingWidth } : { left: 0, ...legendBelow ? {} : { right: config.reserveActions ? 72 : 0 } },
       type: "plain",
       icon: "circle",
       itemWidth: 8,
@@ -4623,7 +4654,7 @@ var TEXT11 = {
   ja: { legend: "\u51E1\u4F8B" },
   en: { legend: "Legend" }
 };
-var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", ariaLabel, className }, ref) {
+var Legend = forwardRef(function Legend2({ categories, colors, labels, layout = "horizontal", hidden = [], onHiddenChange, ariaLabel, className }, ref) {
   const t = TEXT11[uiLanguage(useLocale())];
   if (categories.length === 0) return null;
   const swatches = legendColors(categories, colors);
@@ -4635,10 +4666,23 @@ var Legend = forwardRef(function Legend2({ categories, colors, labels, layout =
       "data-layout": layout,
       "aria-label": ariaLabel ?? t.legend,
       className: cn("m-0 flex list-none gap-x-4 gap-y-1 p-0 text-xs", layout === "vertical" ? "flex-col" : "flex-row flex-wrap", className),
-      children: categories.map((category, i) => /* @__PURE__ */ jsxs("li", { "data-slot": "legend-item", className: "flex min-w-0 items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-2.5 shrink-0 rounded-[2px]", style: { background: swatches[i] } }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: labelOf(category, labels) })
-      ] }, category))
+      children: categories.map((category, i) => {
+        const off = hidden.includes(category);
+        const chip = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-2.5 shrink-0 rounded-[2px]", off && "opacity-30"), style: { background: swatches[i] } }),
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate text-muted-foreground", off && "line-through opacity-60"), children: labelOf(category, labels) })
+        ] });
+        return /* @__PURE__ */ jsx("li", { "data-slot": "legend-item", "data-hidden": off || void 0, className: "flex min-w-0 items-center gap-1.5", children: onHiddenChange ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !off,
+            onClick: () => onHiddenChange(off ? hidden.filter((c) => c !== category) : [...hidden, category]),
+            className: "flex min-w-0 cursor-pointer items-center gap-1.5 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: chip
+          }
+        ) : chip }, category);
+      })
     }
   );
 });
@@ -5083,10 +5127,10 @@ var HEATMAP_CELL_PADDING = 4;
 var HEATMAP_BUCKET_MID = 20;
 function heatmapCellFontSize(plotWidth, columns, rowNames, texts) {
   const widest = (items) => items.reduce((m, t) => Math.max(m, estimateTextWidth2(t)), 0);
-  const cell = (plotWidth + HEATMAP_BUCKET_MID - HEATMAP_GRID_X - (widest(rowNames) + 8)) / Math.max(1, columns);
+  const cell2 = (plotWidth + HEATMAP_BUCKET_MID - HEATMAP_GRID_X - (widest(rowNames) + 8)) / Math.max(1, columns);
   const text = widest(texts);
-  if (text + HEATMAP_CELL_PADDING <= cell) return 12;
-  return text * 10 / 12 + HEATMAP_CELL_PADDING <= cell ? 10 : null;
+  if (text + HEATMAP_CELL_PADDING <= cell2) return 12;
+  return text * 10 / 12 + HEATMAP_CELL_PADDING <= cell2 ? 10 : null;
 }
 var TEXT13 = {
   ja: {
@@ -5114,24 +5158,24 @@ function buildHeatmapOption(config) {
   const base = config.color || "#6366f1";
   const range = [mixIntoSurface(base, config.surfaceColor, HEATMAP_FLOOR_SHARE), base];
   const gapColor = "rgba(0, 0, 0, 0)";
-  const flagged = (cell) => cell.flagged ? { borderColor: config.flagColor, borderWidth: 3, borderType: "solid" } : { borderColor: "transparent", borderWidth: 1 };
-  const tooltip = (cell) => {
-    const head = `${escapeHtml2(label2(model.ys[cell.yi]))} ${escapeHtml2(label2(model.xs[cell.xi]))}`;
-    const main = cell.value === null ? EMPTY_VALUE : escapeHtml2(valueFormatter(cell.value));
+  const flagged = (cell2) => cell2.flagged ? { borderColor: config.flagColor, borderWidth: 3, borderType: "solid" } : { borderColor: "transparent", borderWidth: 1 };
+  const tooltip = (cell2) => {
+    const head = `${escapeHtml2(label2(model.ys[cell2.yi]))} ${escapeHtml2(label2(model.xs[cell2.xi]))}`;
+    const main = cell2.value === null ? EMPTY_VALUE : escapeHtml2(valueFormatter(cell2.value));
     const extras = (config.details ?? []).map((key) => {
-      const n = cell.row ? toChartNumber(cell.row[key]) : null;
+      const n = cell2.row ? toChartNumber(cell2.row[key]) : null;
       return `${escapeHtml2(label2(key))} ${n === null ? EMPTY_VALUE : escapeHtml2(valueFormatter(n))}`;
     }).join(t.join);
-    const flag = cell.flagged ? `${t.join}${t.flagged}` : "";
+    const flag = cell2.flagged ? `${t.join}${t.flagged}` : "";
     return `${head} ${main}${extras ? `${t.join}${extras}` : ""}${flag}`;
   };
   const cellFont = config.plotWidth ? heatmapCellFontSize(
     config.plotWidth,
     model.xs.length,
     model.ys.map(label2),
-    model.cells.flatMap((cell) => cell.value === null ? [] : [valueFormatter(cell.value)])
+    model.cells.flatMap((cell2) => cell2.value === null ? [] : [valueFormatter(cell2.value)])
   ) : 12;
-  const point = (cell) => ({ value: [cell.xi, cell.yi, cell.value], cell });
+  const point = (cell2) => ({ value: [cell2.xi, cell2.yi, cell2.value], cell: cell2 });
   const option = {
     animation: false,
     tooltip: config.showTooltip ? { trigger: "item", formatter: (p) => tooltip(p.data.cell) } : { show: false },
@@ -5179,11 +5223,11 @@ function buildHeatmapOption(config) {
       {
         id: "values",
         type: "heatmap",
-        data: present.map((cell) => ({
-          ...point(cell),
-          itemStyle: flagged(cell),
+        data: present.map((cell2) => ({
+          ...point(cell2),
+          itemStyle: flagged(cell2),
           label: {
-            color: heatmapRatio(cell.value, model.min, model.max) >= HEATMAP_LIGHT_TEXT_FROM ? config.darkCellText : config.lightCellText
+            color: heatmapRatio(cell2.value, model.min, model.max) >= HEATMAP_LIGHT_TEXT_FROM ? config.darkCellText : config.lightCellText
           }
         })),
         label: {
@@ -5198,7 +5242,7 @@ function buildHeatmapOption(config) {
       {
         id: "gaps",
         type: "heatmap",
-        data: missing.map((cell) => ({ value: [cell.xi, cell.yi, 0], cell, itemStyle: flagged(cell) })),
+        data: missing.map((cell2) => ({ value: [cell2.xi, cell2.yi, 0], cell: cell2, itemStyle: flagged(cell2) })),
         label: { show: false },
         itemStyle: {
           color: gapColor,
@@ -5234,7 +5278,7 @@ function heatmapDataTable(model, names, formatter, labels, locale) {
 }
 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;
+  for (const cell2 of model.cells) if (cell2.value !== null && (!best || cell2.value > best.value)) best = cell2;
   if (!best) return void 0;
   const label2 = (key) => labels?.[key] ?? key;
   const head = title ? `${title}: ` : "";
@@ -5348,122 +5392,3180 @@ function HeatmapLegend({
 var Heatmap = forwardRef(HeatmapImpl);
 Heatmap.displayName = "Heatmap";
 var TEXT14 = {
+  ja: { item: "\u9805\u76EE", chart: (keys) => `${keys.join("\u30FB")}\u306E\u63A8\u79FB(\u4E0A\u6BB5 \u68D2\u3001\u4E0B\u6BB5 \u7DDA)` },
+  en: { item: "Item", chart: (keys) => `Trend of ${keys.join(", ")} (bars on top, line below)` }
+};
+var NO_ROWS12 = [];
+var NO_KEYS = [];
+var PANEL_GAP = 20;
+var LEGEND_LINE = 24;
+var DEFAULT_HEIGHT = 400;
+var DEFAULT_Y_AXIS_WIDTH = 64;
+function pairedPalette(barKeys, lineKeys, barColors, lineColors) {
+  const bars = seriesColorsFor(barKeys, barColors, CHART_OTHER_COLOR);
+  const line = lineColors ? seriesColorsFor(lineKeys, lineColors, CHART_OTHER_COLOR) : lineKeys.map((_, i) => DEFAULT_CHART_COLORS[(barKeys.length + i) % DEFAULT_CHART_COLORS.length]);
+  return { bars, line };
+}
+function buildPairedOption(cfg) {
+  const { data, index, labels, barKeys, lineKeys, height, heightRatio, yAxisWidth, showLegend, showTooltip } = cfg;
+  const legendNames = [...barKeys, ...lineKeys];
+  const legendWidth = legendNames.reduce((sum, name) => sum + [...labels?.[name] ?? name].length * 12 + 29, 0);
+  const budget = Math.max(80, Math.min(cfg.plotWidth ?? 720, 720) - (cfg.reserveActions ? 80 : 0));
+  const legendRows = showLegend ? Math.min(3, Math.max(1, Math.ceil(legendWidth / budget))) : 0;
+  const top = (showLegend ? 12 + LEGEND_LINE * legendRows : 12) + 4;
+  const room = Math.max(120, height - top - PANEL_GAP);
+  const [a, b] = heightRatio;
+  const upper = Math.round(room * a / (a + b));
+  const common = {
+    data,
+    index,
+    labels,
+    showLegend: false,
+    showTooltip: false,
+    highlight: "none",
+    yAxisWidth,
+    reducedMotion: false,
+    locale: cfg.locale
+  };
+  const barOpt = buildCartesianOption({
+    ...common,
+    kind: "bar",
+    categories: barKeys,
+    palette: cfg.barPalette,
+    valueFormatter: cfg.barFormatter,
+    axisFormatter: cfg.barAxis,
+    axisTicks: cfg.barTicks,
+    type: cfg.type,
+    showXAxis: false,
+    yAxisLabel: cfg.barAxisLabel,
+    maxValue: cfg.barMax,
+    plotWidth: cfg.plotWidth,
+    plotHeight: upper
+  });
+  const lineOpt = buildCartesianOption({
+    ...common,
+    kind: "line",
+    categories: lineKeys,
+    palette: cfg.linePalette,
+    valueFormatter: cfg.lineFormatter,
+    axisFormatter: cfg.lineAxis,
+    axisTicks: cfg.lineTicks,
+    fitToData: cfg.fitToData,
+    showXAxis: true,
+    yAxisLabel: cfg.lineAxisLabel,
+    minValue: cfg.lineMin,
+    maxValue: cfg.lineMax,
+    guideColor: cfg.guideColor,
+    plotWidth: cfg.plotWidth,
+    plotHeight: room - upper
+  });
+  const times = timeTooltipLabels(data.map((row) => row[index]), cfg.locale);
+  const titles = labelRows(data, index, labels).map((row, i) => String(times?.[i] ?? row[index] ?? ""));
+  const cell2 = (row, key) => {
+    const v = row[key];
+    const n = typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : NaN;
+    return Number.isFinite(n) ? n : null;
+  };
+  const rowsOf = (row, keys, palette) => keys.map((key, i) => ({ name: labelOf(key, labels), color: palette[i] || "currentColor", value: cell2(row, key) }));
+  const emptyTitle = tooltipHtml("", [], String, [], cfg.locale);
+  const tooltipFormatter = (params) => {
+    const list = Array.isArray(params) ? params : [params];
+    const i = list[0]?.dataIndex ?? 0;
+    const row = data[i] ?? {};
+    const upperHtml = tooltipHtml(titles[i] ?? "", rowsOf(row, barKeys, cfg.barPalette), cfg.barFormatter, [], cfg.locale);
+    const lowerHtml = tooltipHtml("", rowsOf(row, lineKeys, cfg.linePalette), cfg.lineFormatter, [], cfg.locale).slice(emptyTitle.length);
+    return `${upperHtml}${lowerHtml}`;
+  };
+  const lineX = { ...lineOpt.xAxis, id: "x-line", gridIndex: 1, boundaryGap: true };
+  const barX = { ...barOpt.xAxis, id: "x-bars", gridIndex: 0, show: true, axisLine: { show: false }, axisLabel: { show: false } };
+  const gridLeft = barOpt.grid.left ?? 4;
+  const right = 16;
+  const option = {
+    ...barOpt,
+    legend: { ...barOpt.legend, show: showLegend, data: legendNames, left: 0, right: cfg.reserveActions ? 80 : 0 },
+    grid: [
+      { top, height: upper, left: gridLeft, right, containLabel: true },
+      { top: top + upper + PANEL_GAP, bottom: 4, left: gridLeft, right, containLabel: true }
+    ],
+    xAxis: [barX, lineX],
+    yAxis: [
+      { ...barOpt.yAxis, id: "y-bars", gridIndex: 0 },
+      { ...lineOpt.yAxis, id: "y-line", gridIndex: 1 }
+    ],
+    series: [
+      ...barOpt.series.map((s) => ({ ...s, xAxisIndex: 0, yAxisIndex: 0 })),
+      ...lineOpt.series.map((s) => ({ ...s, xAxisIndex: 1, yAxisIndex: 1 }))
+    ],
+    tooltip: {
+      ...barOpt.tooltip,
+      show: showTooltip,
+      trigger: "axis",
+      axisPointer: { type: "line", link: [{ xAxisIndex: "all" }] },
+      formatter: tooltipFormatter
+    },
+    axisPointer: { link: [{ xAxisIndex: "all" }] }
+  };
+  return mergeChartOptions(option, cfg.chartOptions);
+}
+function PairedChartImpl({
+  data = NO_ROWS12,
+  index,
+  labels,
+  bars,
+  line,
+  title,
+  summary,
+  actions,
+  fileName,
+  isLoading,
+  emptyState,
+  height = DEFAULT_HEIGHT,
+  heightRatio = [3, 2],
+  yAxisWidth = DEFAULT_Y_AXIS_WIDTH,
+  showLegend = true,
+  showTooltip = true,
+  chartOptions,
+  ariaLabel,
+  className,
+  ...rest
+}, ref) {
+  const { ref: frameRef, width: plotWidth, tokens } = useChartSurface(ref);
+  const barKeys = bars?.categories ?? NO_KEYS;
+  const lineKeys = line?.categories ?? NO_KEYS;
+  const locale = useLocale();
+  const t = TEXT14[uiLanguage(locale)];
+  const barFormatter = useMemo(() => resolveValueFormatter(bars?.valueFormatter, bars?.format, locale), [bars?.valueFormatter, bars?.format, locale]);
+  const lineFormatter = useMemo(() => resolveValueFormatter(line?.valueFormatter, line?.format, locale), [line?.valueFormatter, line?.format, locale]);
+  const barAxis = useMemo(() => resolveAxisFormatter(bars?.valueFormatter, bars?.format, locale), [bars?.valueFormatter, bars?.format, locale]);
+  const lineAxis = useMemo(() => resolveAxisFormatter(line?.valueFormatter, line?.format, locale), [line?.valueFormatter, line?.format, locale]);
+  const barTicks = useMemo(() => resolveAxisTickFormatter(bars?.valueFormatter, bars?.format, locale), [bars?.valueFormatter, bars?.format, locale]);
+  const lineTicks = useMemo(() => resolveAxisTickFormatter(line?.valueFormatter, line?.format, locale), [line?.valueFormatter, line?.format, locale]);
+  const palette = useMemo(() => {
+    const p = pairedPalette(barKeys, lineKeys, bars?.colors, line?.colors);
+    return { bars: resolveChartColors(p.bars, tokens), line: resolveChartColors(p.line, tokens) };
+  }, [barKeys, lineKeys, bars?.colors, line?.colors, tokens]);
+  const option = useMemo(
+    () => buildPairedOption({
+      data,
+      index,
+      labels,
+      barKeys,
+      lineKeys,
+      barPalette: palette.bars,
+      linePalette: palette.line,
+      barFormatter,
+      lineFormatter,
+      barAxis,
+      lineAxis,
+      barTicks,
+      lineTicks,
+      type: bars?.type,
+      fitToData: line?.fitToData,
+      barAxisLabel: bars?.yAxisLabel,
+      lineAxisLabel: line?.yAxisLabel,
+      barMax: bars?.maxValue,
+      lineMax: line?.maxValue,
+      lineMin: line?.minValue,
+      height,
+      heightRatio,
+      yAxisWidth,
+      showLegend,
+      showTooltip,
+      reserveActions: Boolean(actions),
+      plotWidth,
+      guideColor: tokens?.mutedForeground ?? void 0,
+      chartOptions,
+      locale
+    }),
+    [
+      data,
+      index,
+      labels,
+      barKeys,
+      lineKeys,
+      palette,
+      barFormatter,
+      lineFormatter,
+      barAxis,
+      lineAxis,
+      barTicks,
+      lineTicks,
+      bars?.type,
+      bars?.yAxisLabel,
+      bars?.maxValue,
+      line?.fitToData,
+      line?.yAxisLabel,
+      line?.maxValue,
+      line?.minValue,
+      height,
+      heightRatio,
+      yAxisWidth,
+      showLegend,
+      showTooltip,
+      actions,
+      plotWidth,
+      tokens,
+      chartOptions,
+      locale
+    ]
+  );
+  const dataTable = useMemo(() => {
+    const upper = chartDataTable(labelRows(data, index, labels), index, barKeys, barFormatter, labels, t.item);
+    const lower = chartDataTable(labelRows(data, index, labels), index, lineKeys, lineFormatter, labels, t.item);
+    const times = timeTooltipLabels(data.map((row) => row[index]), locale);
+    return {
+      ...upper,
+      columns: [...upper.columns, ...lower.columns.slice(1)],
+      rows: upper.rows.map((r, i) => [times?.[i] ?? r[0] ?? "", ...r.slice(1), ...(lower.rows[i] ?? []).slice(1)])
+    };
+  }, [data, index, labels, barKeys, lineKeys, barFormatter, lineFormatter, t, locale]);
+  const label2 = ariaLabel ?? t.chart([...barKeys, ...lineKeys]);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary: summary === "auto" ? void 0 : summary,
+      isLoading: isLoading ?? false,
+      isEmpty: data.length === 0,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary: summary === "auto" ? void 0 : summary } })
+    }
+  );
+}
+var PairedChart = forwardRef(PairedChartImpl);
+PairedChart.displayName = "PairedChart";
+
+// ../squadkit/registry/lib/distribution.ts
+function toFinite(value) {
+  const n = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : NaN;
+  return Number.isFinite(n) ? n : null;
+}
+function sortedNumbers(values) {
+  const out = [];
+  for (const v of values) {
+    const n = toFinite(v);
+    if (n !== null) out.push(n);
+  }
+  return out.sort((a, b) => a - b);
+}
+function quantile(sorted, p) {
+  if (sorted.length === 0) return null;
+  const pos = (sorted.length - 1) * Math.min(1, Math.max(0, p));
+  const lo = Math.floor(pos);
+  const hi = Math.ceil(pos);
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo);
+}
+function boxStats(values, whisker = 1.5) {
+  const sorted = sortedNumbers(values);
+  if (sorted.length === 0) return null;
+  const q1 = quantile(sorted, 0.25);
+  const median = quantile(sorted, 0.5);
+  const q3 = quantile(sorted, 0.75);
+  const reach = Math.max(0, whisker) * (q3 - q1);
+  const low = q1 - reach;
+  const high = q3 + reach;
+  const inside = sorted.filter((v) => v >= low && v <= high);
+  return {
+    count: sorted.length,
+    min: sorted[0],
+    max: sorted[sorted.length - 1],
+    q1,
+    median,
+    q3,
+    whiskerLow: inside[0] ?? q1,
+    whiskerHigh: inside[inside.length - 1] ?? q3,
+    outliers: sorted.filter((v) => v < low || v > high)
+  };
+}
+function niceBinWidth(span, target = 10) {
+  if (!(span > 0) || !Number.isFinite(span)) return 1;
+  const raw = span / target;
+  const pow = 10 ** Math.floor(Math.log10(raw));
+  const f = raw / pow;
+  return (f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10) * pow;
+}
+var MAX_BINS = 200;
+function tidy(n, step) {
+  const digits = Math.min(100, Math.max(0, Math.ceil(-Math.log10(step)) + 6));
+  const rounded = Number(n.toFixed(digits));
+  return Number.isFinite(rounded) ? rounded : n;
+}
+function histogramBins(values, config = {}) {
+  const sorted = sortedNumbers(values);
+  if (sorted.length === 0) return [];
+  const width = config.binWidth !== void 0 && Number.isFinite(config.binWidth) && config.binWidth > 0 ? config.binWidth : null;
+  const lo = sorted[0];
+  const hi = sorted[sorted.length - 1];
+  const cap = config.max !== void 0 && Number.isFinite(config.max) ? config.max : null;
+  const end = cap !== null ? cap : hi;
+  const first = config.start !== void 0 && Number.isFinite(config.start) ? config.start : null;
+  let step = width ?? niceBinWidth((cap !== null ? Math.min(hi, cap) : hi) - (first ?? lo));
+  const start = first ?? tidy(Math.floor(lo / step) * step, step);
+  const countFor = (w) => Math.ceil((end - start) / w - 1e-9);
+  if (countFor(step) > MAX_BINS) step = niceBinWidth(end - start, MAX_BINS);
+  const n = Math.min(MAX_BINS, Math.max(cap === null ? 1 : 0, countFor(step)));
+  const bins = [];
+  for (let i = 0; i < n; i++) {
+    const from = i === 0 ? start : bins[i - 1].to;
+    let to = tidy(start + (i + 1) * step, step);
+    if (!(to > from)) to = start + (i + 1) * step;
+    if (cap !== null) to = Math.min(to, cap);
+    bins.push({ from, to, count: 0, overflow: false });
+  }
+  const inRange = cap === null ? sorted : sorted.filter((v) => v < cap);
+  const over = cap === null ? [] : sorted.filter((v) => v >= cap);
+  for (const v of inRange) {
+    if (v < start || bins.length === 0) continue;
+    const i = Math.min(bins.length - 1, Math.floor((v - start) / step + 1e-9));
+    bins[i].count += 1;
+  }
+  if (over.length > 0) bins.push({ from: cap, to: Math.max(hi, cap), count: over.length, overflow: true });
+  return bins;
+}
+var TEXT15 = {
   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"
+    countUnit: "\u4EF6",
+    atOrAbove: (from) => `${from}\u4EE5\u4E0A`,
+    range: (from, to) => `${from}\u301C${to}`,
+    count: (n, unit) => `${n}${unit}`,
+    countHeader: (unit) => `${unit}\u6570`,
+    share: "\u69CB\u6210\u6BD4",
+    value: "\u5024",
+    valueInSentence: "\u5024",
+    threshold: "\u3057\u304D\u3044\u5024",
+    peak: (total, bin, count, unit) => `${total}${unit}\u306E\u3046\u3061\u6700\u3082\u591A\u3044\u306E\u306F ${bin}\uFF08${count}${unit}\uFF09`,
+    overThreshold: (name, value, count, share) => `${name}\uFF08${value}\uFF09\u4EE5\u4E0A\u306F ${count}\uFF08${share}\uFF09`,
+    sentenceJoin: "\u3002",
+    chart: (label2) => `${label2}\u306E\u30D2\u30B9\u30C8\u30B0\u30E9\u30E0`
   },
   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"
+    countUnit: "",
+    atOrAbove: (from) => `${from}+`,
+    range: (from, to) => `${from}\u2013${to}`,
+    count: (n, unit) => unit ? `${n} ${unit}` : `${n}`,
+    countHeader: () => "Count",
+    share: "Share",
+    value: "Value",
+    valueInSentence: "values",
+    threshold: "Threshold",
+    peak: (total, bin, count, unit) => `Most common: ${bin} (${unit ? `${count} ${unit}` : count} of ${total})`,
+    overThreshold: (name, value, count, share) => `At or above ${name} (${value}): ${count} (${share})`,
+    sentenceJoin: ". ",
+    chart: (label2) => `Histogram of ${label2}`
   }
 };
-var useText = () => TEXT14[uiLanguage(useLocale())];
-function resolveFormat(format, row) {
-  return typeof format === "function" ? format(row) : format;
+var textOf4 = (locale) => TEXT15[uiLanguage(resolveLocale(locale))];
+function binLabel(bin, formatter, locale) {
+  const t = textOf4(locale);
+  return bin.overflow ? t.atOrAbove(formatter(bin.from)) : t.range(formatter(bin.from), formatter(bin.to));
+}
+function thresholdPosition(bins, value) {
+  const lastIndex = bins.length - 1;
+  const i = bins.findIndex((b, k) => k === lastIndex ? value >= b.from && (b.overflow || value <= b.to) : value >= b.from && value < b.to);
+  const bin = bins[i];
+  if (!bin) return null;
+  return bin.overflow ? i - 0.5 : i - 0.5 + (value - bin.from) / (bin.to - bin.from);
+}
+function countAtOrAbove(values, value, from = -Infinity) {
+  return sortedNumbers(values).filter((v) => v >= value && v >= from).length;
+}
+var percent = (n, total) => total === 0 ? "0%" : `${Math.round(n / total * 100)}%`;
+function buildHistogramSummary(bins, formatter, config) {
+  if (bins.length === 0 || config.total === 0) return void 0;
+  const t = textOf4(config.locale);
+  const count = (n) => t.count(n, config.countUnit);
+  const peak = bins.reduce((a, b) => b.count > a.count ? b : a);
+  const parts = [t.peak(config.total, binLabel(peak, formatter, config.locale), peak.count, config.countUnit)];
+  if (config.threshold && config.atOrAbove !== void 0) {
+    const name = config.threshold.label ?? t.threshold;
+    parts.push(t.overThreshold(name, formatter(config.threshold.value), count(config.atOrAbove), percent(config.atOrAbove, config.total)));
+  }
+  return parts.join(t.sentenceJoin);
 }
-function isMissingCell(value) {
-  return value === null || value === void 0 || value === "" || typeof value === "number" && Number.isNaN(value);
+function histogramDataTable(bins, formatter, config) {
+  const t = textOf4(config.locale);
+  return {
+    columns: [config.valueLabel ?? t.value, t.countHeader(config.countUnit), t.share],
+    rows: bins.map((b) => [binLabel(b, formatter, config.locale), `${b.count}`, percent(b.count, config.total)])
+  };
 }
-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, 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), locale);
+function thresholdPoint(bins, value) {
+  const pos = thresholdPosition(bins, value) ?? 0;
+  const index = Math.min(bins.length - 1, Math.max(0, Math.round(pos)));
+  return [index, 0, pos - index];
 }
-var THRESHOLD_TONE_STYLES = {
-  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 } = THRESHOLD_TONE_STYLES[tone];
-  const label2 = t.tones[tone];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "data-table-threshold-cell",
-      "data-tone": tone,
-      className: cn("flex items-center justify-end gap-1.5 tabular-nums", toneClass),
+function thresholdRenderer(style) {
+  return (params, api) => {
+    const { x: gx, y: gy, width, height } = params.coordSys;
+    const band = Math.abs(api.size([1, 0])[0] ?? 0);
+    const x = (api.coord([api.value(0), 0])[0] ?? 0) + api.value(2) * band;
+    const nearRight = x > gx + width * 0.7;
+    return {
+      type: "group",
       children: [
-        /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { children: text }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.toneNote(label2) })
+        {
+          type: "line",
+          shape: { x1: x, y1: gy, x2: x, y2: gy + height },
+          style: { stroke: style.lineColor || "#888", lineWidth: 1.5, lineDash: [4, 4], fill: "none" }
+        },
+        {
+          type: "text",
+          style: {
+            text: style.text,
+            x,
+            y: gy - 4,
+            fill: style.labelColor || "#888",
+            textAlign: nearRight ? "right" : "left",
+            textVerticalAlign: "bottom"
+          }
+        }
       ]
-    }
-  );
+    };
+  };
 }
-function useControlledState(controlledValue, defaultValue, onChange) {
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : internalValue;
-  const setValue = useCallback(
-    (updaterOrValue) => {
-      onChange?.(updaterOrValue);
-      if (!isControlled) {
-        setInternalValue(updaterOrValue);
+var ROW_STYLE3 = "display:flex;align-items:center;gap:8px;line-height:20px";
+function buildHistogramOption(config) {
+  const { locale } = config;
+  const t = textOf4(locale);
+  const { bins, total, colors, valueFormatter, threshold, showTooltip = true, countUnit = t.countUnit } = config;
+  const pos = threshold ? thresholdPosition(bins, threshold.value) : null;
+  const option = {
+    ...chartMotion(false),
+    legend: { show: false },
+    grid: { top: pos === null ? 16 : 28, right: 16, bottom: 4, left: 4, containLabel: true },
+    tooltip: {
+      show: showTooltip,
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params) => {
+        const list = Array.isArray(params) ? params : [params];
+        const bin = bins[(list.find((p) => p.seriesId === "count") ?? list[0])?.dataIndex ?? 0];
+        if (!bin) return "";
+        const color = escapeHtml((bin.overflow ? colors.overflow : colors.bar) || "currentColor");
+        const line = (name, text) => `<div style="${ROW_STYLE3}"><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>`;
+        return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(binLabel(bin, valueFormatter, locale))}</div>` + line(t.countHeader(countUnit), t.count(bin.count, countUnit)) + line(t.share, percent(bin.count, total));
       }
     },
-    [onChange, isControlled]
-  );
-  return [value, setValue];
-}
-var DataTableContext = createContext(null);
-function useDataTable() {
-  const ctx = useContext(DataTableContext);
-  if (!ctx) throw new Error("useDataTable must be used inside <DataTable>");
-  return ctx;
+    xAxis: {
+      type: "category",
+      data: bins.map((b) => binLabel(b, valueFormatter, locale)),
+      axisTick: { show: false },
+      axisLabel: { hideOverlap: true }
+    },
+    yAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: true }
+    },
+    series: [
+      {
+        id: "count",
+        type: "bar",
+        barCategoryGap: "6%",
+        data: bins.map((b) => ({
+          value: b.count,
+          itemStyle: { color: (b.overflow ? colors.overflow : colors.bar) || void 0, borderRadius: [2, 2, 0, 0] }
+        })),
+        label: { show: false, color: config.labelColor, fontVariantNumeric: "tabular-nums" }
+      },
+      ...threshold && pos !== null ? [
+        {
+          id: "threshold",
+          type: "custom",
+          silent: true,
+          z: 10,
+          animation: false,
+          tooltip: { show: false },
+          encode: { x: 0, y: 1 },
+          // [階級の添字, 0(y の位置は使わない), 階級の中での位置(左端 -0.5 〜 右端 0.5)]
+          data: [thresholdPoint(bins, threshold.value)],
+          renderItem: thresholdRenderer({
+            text: `${threshold.label ?? t.threshold} ${valueFormatter(threshold.value)}`,
+            lineColor: config.lineColor,
+            labelColor: config.labelColor
+          })
+        }
+      ] : []
+    ]
+  };
+  return mergeChartOptions(option, config.chartOptions);
 }
-var NO_ROWS12 = [];
-function DataTable({
-  columns = NO_ROWS12,
-  data = NO_ROWS12,
-  enableSorting = true,
-  sorting: sortingProp,
-  onSortingChange,
-  enableFiltering = false,
-  columnFilters: columnFiltersProp,
-  onColumnFiltersChange,
-  globalFilter: globalFilterProp,
-  onGlobalFilterChange,
-  enablePagination = false,
-  pagination: paginationProp,
-  onPaginationChange,
-  pageCount,
-  rowCount,
-  manualFiltering,
-  manualSorting,
-  isLoading = false,
+var NO_VALUES = [];
+var HistogramChart = forwardRef(function HistogramChart2({
+  values = NO_VALUES,
+  binWidth,
+  start,
+  max,
+  threshold,
+  countUnit: countUnitProp,
+  valueLabel,
+  format,
+  valueFormatter: valueFormatterProp,
+  showTooltip = true,
+  title,
+  summary,
+  actions,
+  fileName,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  ariaLabel,
+  className,
+  ...rest
+}, ref) {
+  const { ref: frameRef, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT15[uiLanguage(locale)];
+  const countUnit = countUnitProp ?? t.countUnit;
+  const valueFormatter = useMemo(
+    () => valueFormatterProp ?? (format === void 0 ? toValueFormatter("number", locale) : resolveValueFormatter(void 0, format, locale)),
+    [valueFormatterProp, format, locale]
+  );
+  const bins = useMemo(() => histogramBins(values, { binWidth, start, max }), [values, binWidth, start, max]);
+  const total = useMemo(() => bins.reduce((sum, b) => sum + b.count, 0), [bins]);
+  const colors = useMemo(() => {
+    const [bar = ""] = resolveChartColors(["chart-1"], tokens);
+    return { bar, overflow: resolveFillColors(tokens).neutral };
+  }, [tokens]);
+  const option = useMemo(
+    () => buildHistogramOption({
+      bins,
+      total,
+      colors,
+      valueFormatter,
+      countUnit,
+      threshold,
+      showTooltip,
+      labelColor: tokens?.foreground ?? void 0,
+      lineColor: tokens?.mutedForeground ?? void 0,
+      chartOptions,
+      locale
+    }),
+    [bins, total, colors, valueFormatter, countUnit, threshold, showTooltip, tokens, chartOptions, locale]
+  );
+  const dataTable = useMemo(
+    () => histogramDataTable(bins, valueFormatter, { total, countUnit, valueLabel, locale }),
+    [bins, valueFormatter, total, countUnit, valueLabel, locale]
+  );
+  const resolvedSummary = useMemo(
+    () => summary === "auto" ? buildHistogramSummary(bins, valueFormatter, {
+      total,
+      countUnit,
+      threshold,
+      atOrAbove: threshold ? countAtOrAbove(values, threshold.value, bins[0]?.from) : void 0,
+      locale
+    }) : summary,
+    [summary, bins, valueFormatter, total, countUnit, threshold, values, locale]
+  );
+  const label2 = ariaLabel ?? t.chart(valueLabel ?? t.valueInSentence);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary: resolvedSummary,
+      isLoading: isLoading ?? false,
+      isEmpty: bins.length === 0,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary: resolvedSummary } })
+    }
+  );
+});
+HistogramChart.displayName = "HistogramChart";
+var TEXT16 = {
+  ja: {
+    value: "\u5024",
+    valueInSentence: "\u5024",
+    medianOf: (name, label2, median) => `${name}\u306E${label2}\u306E\u4E2D\u592E\u5024\u306F ${median}`,
+    medianRange: (label2, top, topMedian, low, lowMedian) => `${label2}\u306E\u4E2D\u592E\u5024\u304C\u6700\u3082\u9AD8\u3044\u306E\u306F ${top}\uFF08${topMedian}\uFF09\u3001\u6700\u3082\u4F4E\u3044\u306E\u306F ${low}\uFF08${lowMedian}\uFF09`,
+    outliers: (n) => `\u5916\u308C\u5024\u306F ${n} \u4EF6`,
+    sentenceJoin: "\u3002",
+    columns: ["\u7FA4", "\u4EF6\u6570", "\u6700\u5C0F\uFF08\u3072\u3052\uFF09", "\u7B2C1\u56DB\u5206\u4F4D", "\u4E2D\u592E\u5024", "\u7B2C3\u56DB\u5206\u4F4D", "\u6700\u5927\uFF08\u3072\u3052\uFF09", "\u5916\u308C\u5024"],
+    listJoin: "\u3001",
+    none: "\u306A\u3057",
+    tooltipTitle: (name, label2, count) => `${name}\uFF08${label2}\u30FB${count}\u4EF6\uFF09`,
+    max: "\u6700\u5927\uFF08\u3072\u3052\uFF09",
+    q3: "\u7B2C3\u56DB\u5206\u4F4D",
+    median: "\u4E2D\u592E\u5024",
+    q1: "\u7B2C1\u56DB\u5206\u4F4D",
+    min: "\u6700\u5C0F\uFF08\u3072\u3052\uFF09",
+    outlierRow: "\u5916\u308C\u5024",
+    chart: (label2) => `${label2}\u306E\u7BB1\u3072\u3052\u56F3`
+  },
+  en: {
+    value: "Value",
+    valueInSentence: "value",
+    medianOf: (name, label2, median) => `Median ${label2} for ${name}: ${median}`,
+    medianRange: (label2, top, topMedian, low, lowMedian) => `Highest median ${label2}: ${top} (${topMedian}); lowest: ${low} (${lowMedian})`,
+    outliers: (n) => n === 1 ? "1 outlier" : `${n} outliers`,
+    sentenceJoin: ". ",
+    columns: ["Group", "Count", "Min (whisker)", "Q1", "Median", "Q3", "Max (whisker)", "Outliers"],
+    listJoin: ", ",
+    none: "None",
+    tooltipTitle: (name, label2, count) => `${name} (${label2}, n=${count})`,
+    max: "Max (whisker)",
+    q3: "Q3",
+    median: "Median",
+    q1: "Q1",
+    min: "Min (whisker)",
+    outlierRow: "Outliers",
+    chart: (label2) => `Box plot of ${label2}`
+  }
+};
+var textOf5 = (locale) => TEXT16[uiLanguage(resolveLocale(locale))];
+function boxPlotEntries(groups, whisker) {
+  return groups.map((g) => ({ name: g.name, stats: boxStats(g.values, whisker) }));
+}
+function buildBoxPlotSummary(entries, formatter, valueLabel, locale) {
+  const t = textOf5(locale);
+  const label2 = valueLabel ?? t.valueInSentence;
+  const real = entries.filter((e) => e.stats !== null);
+  if (real.length === 0) return void 0;
+  const top = real.reduce((a, b) => b.stats.median > a.stats.median ? b : a);
+  const low = real.reduce((a, b) => b.stats.median < a.stats.median ? b : a);
+  const parts = [
+    real.length === 1 ? t.medianOf(top.name, label2, formatter(top.stats.median)) : t.medianRange(label2, top.name, formatter(top.stats.median), low.name, formatter(low.stats.median))
+  ];
+  const outliers = real.reduce((sum, e) => sum + e.stats.outliers.length, 0);
+  if (outliers > 0) parts.push(t.outliers(outliers));
+  return parts.join(t.sentenceJoin);
+}
+function boxPlotDataTable(entries, formatter, locale) {
+  const t = textOf5(locale);
+  const f = (n) => n === void 0 ? EMPTY_VALUE : formatter(n);
+  return {
+    columns: [...t.columns],
+    rows: entries.map(({ name, stats: s }) => [
+      name,
+      s ? `${s.count}` : EMPTY_VALUE,
+      f(s?.whiskerLow),
+      f(s?.q1),
+      f(s?.median),
+      f(s?.q3),
+      f(s?.whiskerHigh),
+      s ? s.outliers.length > 0 ? s.outliers.map(formatter).join(t.listJoin) : t.none : EMPTY_VALUE
+    ])
+  };
+}
+var ROW_STYLE4 = "display:flex;align-items:center;gap:8px;line-height:20px";
+var BOX_SHARE = 0.4;
+function boxPlotRenderer(color, outliers) {
+  return (_params, api) => {
+    const x = api.coord([api.value(0), api.value(3)])[0] ?? 0;
+    const y = (dim) => api.coord([api.value(0), api.value(dim)])[1] ?? 0;
+    const band = Math.abs(api.size([1, 0])[0] ?? 0);
+    const half = band * BOX_SHARE / 2;
+    const cap = half / 2;
+    const [yLow, yQ1, yMed, yQ3, yHigh] = [y(1), y(2), y(3), y(4), y(5)];
+    const stroke = { stroke: color, lineWidth: 1.5, fill: "none" };
+    const line = (x1, y1, x2, y2) => ({ type: "line", shape: { x1, y1, x2, y2 }, style: stroke });
+    return {
+      type: "group",
+      children: [
+        line(x, yHigh, x, yQ3),
+        line(x, yQ1, x, yLow),
+        line(x - cap, yHigh, x + cap, yHigh),
+        line(x - cap, yLow, x + cap, yLow),
+        {
+          type: "rect",
+          shape: { x: x - half, y: Math.min(yQ3, yQ1), width: half * 2, height: Math.abs(yQ1 - yQ3), r: 2 },
+          style: { fill: withAlpha(color, 0.25), stroke: color, lineWidth: 1.5 }
+        },
+        line(x - half, yMed, x + half, yMed),
+        ...(outliers[api.value(0)] ?? []).map((v) => ({
+          type: "circle",
+          shape: { cx: x, cy: api.coord([api.value(0), v])[1] ?? 0, r: 3 },
+          style: { fill: "transparent", stroke: color, lineWidth: 1.5 }
+        }))
+      ]
+    };
+  };
+}
+function buildBoxPlotOption(config) {
+  const t = textOf5(config.locale);
+  const { entries, valueFormatter, showTooltip = true, valueLabel = t.value } = config;
+  const axisFormatter = config.axisFormatter ?? valueFormatter;
+  const color = config.color || "#888";
+  const data = entries.flatMap((e, i) => e.stats ? [[i, e.stats.whiskerLow, e.stats.q1, e.stats.median, e.stats.q3, e.stats.whiskerHigh, e.stats.min, e.stats.max]] : []);
+  const entryAt = (i) => entries[i];
+  const option = {
+    ...chartMotion(false),
+    legend: { show: false },
+    grid: { top: 16, right: 16, bottom: 4, left: 4, containLabel: true },
+    tooltip: {
+      show: showTooltip,
+      trigger: "item",
+      formatter: (params) => {
+        const entry = entryAt(params.value?.[0] ?? -1);
+        const s = entry?.stats;
+        if (!entry || !s) return "";
+        const line = (name, text) => `<div style="${ROW_STYLE4}"><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>`;
+        return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(t.tooltipTitle(entry.name, valueLabel, s.count))}</div>` + line(t.max, valueFormatter(s.whiskerHigh)) + line(t.q3, valueFormatter(s.q3)) + line(t.median, valueFormatter(s.median)) + line(t.q1, valueFormatter(s.q1)) + line(t.min, valueFormatter(s.whiskerLow)) + (s.outliers.length > 0 ? line(t.outlierRow, s.outliers.map(valueFormatter).join(t.listJoin)) : "");
+      }
+    },
+    xAxis: { type: "category", data: entries.map((e) => e.name), axisTick: { show: false }, axisLabel: { interval: 0, hideOverlap: false } },
+    yAxis: {
+      type: "value",
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: true },
+      axisLabel: { formatter: (v) => axisFormatter(v) }
+    },
+    series: [
+      {
+        id: "box",
+        type: "custom",
+        encode: { x: 0, y: [1, 2, 3, 4, 5, 6, 7] },
+        data,
+        renderItem: boxPlotRenderer(color, entries.map((e) => e.stats?.outliers ?? []))
+      }
+    ]
+  };
+  return mergeChartOptions(option, config.chartOptions);
+}
+var NO_GROUPS = [];
+var BoxPlotChart = forwardRef(function BoxPlotChart2({
+  groups = NO_GROUPS,
+  whisker,
+  valueLabel,
+  format,
+  valueFormatter: valueFormatterProp,
+  showTooltip = true,
+  title,
+  summary,
+  actions,
+  fileName,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  ariaLabel,
+  className,
+  ...rest
+}, ref) {
+  const { ref: frameRef, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT16[uiLanguage(locale)];
+  const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format, locale), [valueFormatterProp, format, locale]);
+  const entries = useMemo(() => boxPlotEntries(groups, whisker), [groups, whisker]);
+  const [color = ""] = useMemo(() => resolveChartColors(["chart-1"], tokens), [tokens]);
+  const option = useMemo(
+    () => buildBoxPlotOption({ entries, color, valueFormatter, valueLabel, showTooltip, labelColor: tokens?.foreground ?? void 0, chartOptions, locale }),
+    [entries, color, valueFormatter, valueLabel, showTooltip, tokens, chartOptions, locale]
+  );
+  const dataTable = useMemo(() => boxPlotDataTable(entries, valueFormatter, locale), [entries, valueFormatter, locale]);
+  const resolvedSummary = useMemo(
+    () => summary === "auto" ? buildBoxPlotSummary(entries, valueFormatter, valueLabel, locale) : summary,
+    [summary, entries, valueFormatter, valueLabel, locale]
+  );
+  const label2 = ariaLabel ?? t.chart(valueLabel ?? t.valueInSentence);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary: resolvedSummary,
+      isLoading: isLoading ?? false,
+      isEmpty: entries.length === 0,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary: resolvedSummary } })
+    }
+  );
+});
+BoxPlotChart.displayName = "BoxPlotChart";
+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: 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, 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])
+);
+var legacyColorTones = {
+  green: "positive",
+  gray: "neutral",
+  yellow: "warning",
+  red: "negative",
+  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" }
+};
+var resolveTone = (color) => {
+  if (color === void 0) return "neutral";
+  if (Object.hasOwn(toneStyles, color)) return 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, locale);
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      ref,
+      "data-slot": "status-badge",
+      variant: "outline",
+      className: cn("gap-1.5 rounded-md border-transparent", style.bg, style.text, className),
+      "aria-label": displayLabel,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("inline-block size-1.5 rounded-full", style.dot), "aria-hidden": "true" }),
+        displayLabel
+      ]
+    }
+  );
+});
+StatusBadge.displayName = "StatusBadge";
+var KIND_ORDER = ["overdue", "risk", "dueSoon", "stale"];
+var KIND_TONES = {
+  overdue: "negative",
+  risk: "negative",
+  dueSoon: "warning",
+  stale: "info"
+};
+var daysEn = (n) => n === 1 ? "1 day" : `${n} days`;
+var TEXT17 = {
+  ja: {
+    labels: { overdue: "\u671F\u65E5\u8D85\u904E", risk: "\u30EA\u30B9\u30AF", dueSoon: "\u671F\u9650\u9593\u8FD1", stale: "\u6EDE\u7559" },
+    overdue: (days) => `\u671F\u65E5\u3092 ${days} \u65E5\u904E\u304E\u3066\u3044\u307E\u3059`,
+    dueToday: "\u671F\u65E5\u306F\u4ECA\u65E5\u3067\u3059",
+    dueIn: (days) => `\u671F\u65E5\u307E\u3067\u3042\u3068 ${days} \u65E5\u3067\u3059`,
+    stale: (days) => `${days} \u65E5\u9593\u52D5\u304D\u304C\u3042\u308A\u307E\u305B\u3093`,
+    empty: "\u5BFE\u5FDC\u304C\u5FC5\u8981\u306A\u9805\u76EE\u306F\u3042\u308A\u307E\u305B\u3093",
+    due: "\u671F\u65E5",
+    nextAction: "\u6B21\u306E\u4E00\u624B: "
+  },
+  en: {
+    labels: { overdue: "Overdue", risk: "At risk", dueSoon: "Due soon", stale: "Stalled" },
+    overdue: (days) => `${daysEn(days)} overdue`,
+    dueToday: "Due today",
+    dueIn: (days) => `Due in ${daysEn(days)}`,
+    stale: (days) => `No activity for ${daysEn(days)}`,
+    empty: "Nothing needs attention",
+    due: "Due",
+    nextAction: "Next step: "
+  }
+};
+TEXT17.en.labels;
+function toDate2(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const date = typeof value === "string" ? parseISO(value) : value;
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+function judgeAttention(input) {
+  const asOf = toDate2(input.asOf);
+  if (!asOf) return null;
+  const dueSoonDays = input.dueSoonDays ?? 7;
+  const due = toDate2(input.dueDate);
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf);
+    if (untilDue < 0) return { kind: "overdue", days: -untilDue };
+  }
+  if (input.risk) return { kind: "risk", days: 0 };
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf);
+    if (untilDue <= dueSoonDays) return { kind: "dueSoon", days: untilDue };
+  }
+  const last = toDate2(input.lastActivityAt);
+  if (last && input.staleDays !== void 0) {
+    const idle = differenceInCalendarDays(asOf, last);
+    if (idle >= input.staleDays) return { kind: "stale", days: idle };
+  }
+  return null;
+}
+function compareAttention(a, b) {
+  if (!a || !b) return a ? -1 : b ? 1 : 0;
+  const byKind = KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind);
+  if (byKind !== 0) return byKind;
+  return a.kind === "dueSoon" ? a.days - b.days : b.days - a.days;
+}
+function defaultReason(j, labels, t) {
+  switch (j.kind) {
+    case "overdue":
+      return t.overdue(j.days);
+    case "dueSoon":
+      return j.days === 0 ? t.dueToday : t.dueIn(j.days);
+    case "stale":
+      return t.stale(j.days);
+    case "risk":
+      return labels.risk;
+  }
+}
+function cell(row, key) {
+  if (!key || row === null || typeof row !== "object") return void 0;
+  return row[key];
+}
+function asDateInput(value) {
+  return typeof value === "string" || value instanceof Date ? value : void 0;
+}
+function asNode(value) {
+  return typeof value === "string" || typeof value === "number" ? value : null;
+}
+function AttentionList({
+  rows,
+  asOf,
+  dueSoonDays,
+  staleDays,
+  labels,
+  getRowId,
+  getTitle,
+  getDueDate,
+  getLastActivityAt,
+  isRisk,
+  idKey,
+  titleKey,
+  dueDateKey,
+  lastActivityAtKey,
+  riskKey,
+  nextActionKey,
+  getReason,
+  getNextAction,
+  getMeta,
+  onRowClick,
+  includeUnflagged = false,
+  emptyTitle,
+  emptyDescription,
+  className,
+  ...rest
+}) {
+  const locale = useLocale();
+  const t = TEXT17[uiLanguage(locale)];
+  const mergedLabels = useMemo(() => ({ ...t.labels, ...labels }), [t, labels]);
+  const colorMap = KIND_TONES;
+  const dueOf = (row) => getDueDate ? getDueDate(row) : asDateInput(cell(row, dueDateKey));
+  const nextActionOf = (row, j) => getNextAction ? getNextAction(row, j) : asNode(cell(row, nextActionKey));
+  const items = (rows ?? []).map((row, index) => ({
+    row,
+    index,
+    judgement: judgeAttention({
+      dueDate: dueOf(row),
+      lastActivityAt: getLastActivityAt ? getLastActivityAt(row) : asDateInput(cell(row, lastActivityAtKey)),
+      risk: isRisk ? isRisk(row) : Boolean(cell(row, riskKey)),
+      asOf,
+      dueSoonDays,
+      staleDays
+    })
+  })).filter((item) => includeUnflagged || item.judgement).sort((a, b) => compareAttention(a.judgement, b.judgement) || a.index - b.index);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Empty, { title: emptyTitle ?? t.empty, description: emptyDescription, className });
+  }
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "attention-list", className: cn("divide-y divide-border", className), ...rest, children: items.map(({ row, index, judgement }) => {
+    const due = dueOf(row);
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [
+        judgement && /* @__PURE__ */ jsx(StatusBadge, { status: judgement.kind, label: mergedLabels[judgement.kind], colorMap }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 font-medium", children: getTitle ? getTitle(row) : asNode(cell(row, titleKey)) }),
+        getMeta && /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums text-muted-foreground", children: getMeta(row) }),
+        due ? /* @__PURE__ */ jsxs("span", { className: "ml-auto text-sm tabular-nums text-muted-foreground", children: [
+          t.due,
+          " ",
+          formatDate(due, "date", locale)
+        ] }) : null
+      ] }),
+      judgement && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels, t) }),
+      judgement && (getNextAction || nextActionKey) && nextActionOf(row, judgement) ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t.nextAction }),
+        nextActionOf(row, judgement)
+      ] }) : null
+    ] });
+    return /* @__PURE__ */ jsx("li", { "data-slot": "attention-list-row", children: onRowClick ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRowClick(row),
+        className: "block w-full px-3 py-3 text-left transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: body }) }, getRowId ? getRowId(row) : String(cell(row, idKey) ?? index));
+  }) });
+}
+AttentionList.displayName = "AttentionList";
+function niceStep2(raw) {
+  if (!(raw > 0) || !Number.isFinite(raw)) return 1;
+  const exp10 = 10 ** Math.floor(Math.log10(raw));
+  const f = raw / exp10;
+  return (f < 1.5 ? 1 : f < 2.5 ? 2 : f < 4 ? 3 : f < 7 ? 5 : 10) * exp10;
+}
+var round = (n) => Number(n.toPrecision(12));
+function comboAxisScale(lo, hi, splitNumber, ticks) {
+  let low = Math.min(0, Number.isFinite(lo) ? lo : 0);
+  let high = Math.max(0, Number.isFinite(hi) ? hi : 0);
+  if (high <= low) high = low + 1;
+  let step = niceStep2((high - low) / Math.max(1, splitNumber));
+  for (let attempt = 0; ; attempt++) {
+    const min = round(Math.floor(low / step) * step);
+    const max = round(Math.ceil(high / step) * step);
+    const tick = ticks(Math.max(Math.abs(min), Math.abs(max)));
+    const count = Math.round((max - min) / step);
+    const labels = Array.from({ length: count + 1 }, (_, i) => tick(round(min + i * step)));
+    if (new Set(labels).size === labels.length || attempt >= 6) return { min, max, interval: step, tick };
+    step = niceStep2(step * 2);
+  }
+}
+var DEFAULT_CHART_HEIGHT2 = 288;
+var splitCountFor = (height) => height < 200 ? 3 : height < 300 ? 4 : 5;
+function escapeHtml3(text) {
+  return text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+var TEXT18 = {
+  ja: { item: "\u9805\u76EE", chart: "\u8907\u5408\u30B0\u30E9\u30D5" },
+  en: { item: "Item", chart: "Combination chart" }
+};
+var textOf6 = (locale) => TEXT18[uiLanguage(resolveLocale(locale))];
+var axisOf = (s) => s.axis === "right" ? "right" : "left";
+function comboSeriesList(series) {
+  if (!Array.isArray(series)) return [];
+  return series.filter(
+    (s) => !!s && typeof s === "object" && typeof s.key === "string" && ["bar", "line", "area"].includes(s.type)
+  );
+}
+function buildComboChartOption(config) {
+  const { data, index, labels, formatters } = config;
+  const series = comboSeriesList(config.series);
+  const label2 = (key) => labels?.[key] ?? key;
+  const seriesName = (s) => s.label ?? label2(s.key);
+  const vertical = config.layout === "vertical";
+  const categories = data.map((row) => String(row?.[index] ?? ""));
+  const values = series.map((s) => data.map((row) => toChartNumber(row?.[s.key])));
+  const hasRight = series.some((s) => axisOf(s) === "right");
+  const axes = hasRight ? ["left", "right"] : ["left"];
+  const extent = (axis) => {
+    let [lo, hi] = [0, 0];
+    const add = (v) => {
+      if (v !== null && Number.isFinite(v)) [lo, hi] = [Math.min(lo, v), Math.max(hi, v)];
+    };
+    const stacks = /* @__PURE__ */ new Map();
+    series.forEach((s, i) => {
+      if (axisOf(s) !== axis) return;
+      if (config.stacked && s.type !== "line") {
+        const stack = stacks.get(s.type) ?? { pos: data.map(() => 0), neg: data.map(() => 0) };
+        values[i].forEach((v, j) => {
+          if (v === null) return;
+          if (v >= 0) stack.pos[j] += v;
+          else stack.neg[j] += v;
+        });
+        stacks.set(s.type, stack);
+      } else values[i].forEach(add);
+    });
+    for (const stack of stacks.values()) [...stack.pos, ...stack.neg].forEach(add);
+    for (const ref of config.referenceLines ?? []) if (axisOf(ref) === axis) add(toChartNumber(ref.value));
+    return [lo, hi];
+  };
+  const split = splitCountFor(config.plotHeight ?? DEFAULT_CHART_HEIGHT2);
+  const scales = Object.fromEntries(axes.map((axis) => [axis, comboAxisScale(...extent(axis), split, config.ticks[axis])]));
+  const valueAxes = axes.map((axis) => ({
+    type: "value",
+    position: vertical ? axis === "left" ? "bottom" : "top" : axis,
+    min: scales[axis].min,
+    max: scales[axis].max,
+    interval: scales[axis].interval,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: axis === "left" },
+    axisLabel: { formatter: (v) => scales[axis].tick(v), hideOverlap: vertical ? true : void 0 }
+  }));
+  const categoryAxis = {
+    type: "category",
+    data: categories,
+    inverse: vertical,
+    axisTick: { show: false },
+    axisLabel: { formatter: (v) => label2(v), hideOverlap: true }
+  };
+  const axisIndex = (s) => axisOf(s) === "right" ? 1 : 0;
+  const drawn = series.map((s, i) => {
+    const color = config.palette[i] || void 0;
+    const common = {
+      id: `series-${i}`,
+      name: seriesName(s),
+      data: values[i],
+      [vertical ? "xAxisIndex" : "yAxisIndex"]: axisIndex(s),
+      emphasis: { focus: "none" }
+    };
+    if (s.type === "bar")
+      return {
+        ...common,
+        type: "bar",
+        stack: config.stacked ? `bar-${axisOf(s)}` : void 0,
+        barMaxWidth: 40,
+        itemStyle: { color, borderRadius: vertical ? [0, 2, 2, 0] : [2, 2, 0, 0] }
+      };
+    return {
+      ...common,
+      type: "line",
+      stack: config.stacked && s.type === "area" ? `area-${axisOf(s)}` : void 0,
+      symbol: "circle",
+      symbolSize: 6,
+      showSymbol: data.length <= 24,
+      connectNulls: false,
+      lineStyle: { width: 2, color },
+      itemStyle: { color },
+      areaStyle: s.type === "area" ? { color, opacity: 0.18 } : void 0,
+      z: 3
+    };
+  });
+  const references = axes.flatMap((axis) => {
+    const lines = (config.referenceLines ?? []).filter((r) => axisOf(r) === axis && toChartNumber(r.value) !== null);
+    if (lines.length === 0) return [];
+    return [
+      {
+        id: `reference-${axis}`,
+        type: "line",
+        data: data.map(() => null),
+        [vertical ? "xAxisIndex" : "yAxisIndex"]: axis === "right" ? 1 : 0,
+        silent: true,
+        symbol: "none",
+        tooltip: { show: false },
+        markLine: {
+          silent: true,
+          symbol: "none",
+          lineStyle: { type: "dashed", color: config.referenceColor || void 0, width: 1 },
+          label: { position: "insideEndTop", color: config.referenceColor || void 0 },
+          data: lines.map((r) => ({
+            [vertical ? "xAxis" : "yAxis"]: toChartNumber(r.value),
+            label: { formatter: r.label ?? config.formatters[axis](toChartNumber(r.value)) }
+          }))
+        }
+      }
+    ];
+  });
+  const showLegend = (config.showLegend ?? true) && series.length > 1;
+  const tooltip = (params) => {
+    const items = Array.isArray(params) ? params : [params];
+    const first = items[0];
+    if (!first) return "";
+    const head = escapeHtml3(label2(categories[first.dataIndex] ?? ""));
+    const lines = items.filter((p) => p.seriesIndex < series.length).map((p) => {
+      const s = series[p.seriesIndex];
+      const v = values[p.seriesIndex][p.dataIndex];
+      return `${p.marker ?? ""}${escapeHtml3(seriesName(s))} ${v === null || v === void 0 ? EMPTY_VALUE : escapeHtml3(formatters[axisOf(s)](v))}`;
+    });
+    return [head, ...lines].join("<br/>");
+  };
+  const option = {
+    animation: false,
+    legend: { show: showLegend, top: 0, left: 0, data: series.map(seriesName) },
+    tooltip: config.showTooltip === false ? { show: false } : { trigger: "axis", axisPointer: { type: "shadow" }, formatter: tooltip },
+    grid: { left: 8, right: 8, top: showLegend ? 36 : 12, bottom: 8, containLabel: true },
+    xAxis: vertical ? valueAxes : categoryAxis,
+    yAxis: vertical ? categoryAxis : valueAxes,
+    series: [...drawn, ...references]
+  };
+  return config.chartOptions ? mergeDeep2(option, config.chartOptions) : option;
+}
+function mergeDeep2(a, b) {
+  const out = { ...a };
+  for (const [k, v] of Object.entries(b)) {
+    const cur = out[k];
+    out[k] = v && cur && typeof v === "object" && typeof cur === "object" && !Array.isArray(v) && !Array.isArray(cur) ? mergeDeep2(cur, v) : v;
+  }
+  return out;
+}
+function comboChartDataTable(data, index, series, formatters, labels, locale) {
+  const list = comboSeriesList(series);
+  const label2 = (key) => labels?.[key] ?? key;
+  return {
+    columns: [labels?.[index] ?? textOf6(locale).item, ...list.map((s) => s.label ?? label2(s.key))],
+    rows: data.map((row) => [
+      label2(String(row?.[index] ?? "")),
+      ...list.map((s) => {
+        const n = toChartNumber(row?.[s.key]);
+        return n === null ? EMPTY_VALUE : formatters[axisOf(s)](n);
+      })
+    ])
+  };
+}
+var NO_ROWS13 = [];
+function ComboChartImpl({
+  data = NO_ROWS13,
+  index,
+  series = NO_ROWS13,
+  format,
+  rightFormat,
+  labels,
+  referenceLines,
+  stacked = false,
+  layout = "horizontal",
+  showLegend = true,
+  showTooltip = true,
+  onSelect,
+  title,
+  summary,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  actions,
+  fileName,
+  className,
+  ariaLabel,
+  ...rest
+}, ref) {
+  const rows = Array.isArray(data) ? data : NO_ROWS13;
+  const list = useMemo(() => comboSeriesList(series), [series]);
+  const { ref: frameRef, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const formatters = useMemo(
+    () => ({ left: resolveValueFormatter(void 0, format, locale), right: resolveValueFormatter(void 0, rightFormat ?? format, locale) }),
+    [format, rightFormat, locale]
+  );
+  const ticks = useMemo(
+    () => ({ left: resolveAxisTickFormatter(void 0, format, locale), right: resolveAxisTickFormatter(void 0, rightFormat ?? format, locale) }),
+    [format, rightFormat, locale]
+  );
+  const palette = useMemo(() => resolveColors(tokens, list), [tokens, list]);
+  const option = useMemo(
+    () => buildComboChartOption({
+      data: rows,
+      index,
+      series: list,
+      palette: palette.series,
+      referenceColor: palette.reference,
+      labels,
+      formatters,
+      ticks,
+      referenceLines,
+      stacked,
+      layout,
+      showLegend,
+      showTooltip,
+      plotHeight: height,
+      chartOptions
+    }),
+    [rows, index, list, palette, labels, formatters, ticks, referenceLines, stacked, layout, showLegend, showTooltip, height, chartOptions]
+  );
+  const onEvents = useMemo(
+    () => onSelect ? {
+      click: (params) => {
+        const p = params;
+        if (p.componentType !== "series" || (p.seriesIndex ?? Infinity) >= list.length) return;
+        const row = rows[p.dataIndex ?? -1];
+        if (row) onSelect(row);
+      }
+    } : void 0,
+    [onSelect, rows, list.length]
+  );
+  const dataTable = useMemo(() => comboChartDataTable(rows, index, list, formatters, labels, locale), [rows, index, list, formatters, labels, locale]);
+  const label2 = ariaLabel ?? textOf6(locale).chart;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary,
+      isLoading: isLoading ?? false,
+      isEmpty: rows.length === 0,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsx(EChart, { option, onEvents, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary } })
+    }
+  );
+}
+function resolveColors(tokens, series) {
+  const resolved = resolveChartColors(
+    ["var(--muted-foreground)", ...series.map((s, i) => s.color ?? DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length])],
+    tokens
+  );
+  return { reference: resolved[0] ?? "", series: resolved.slice(1) };
+}
+var ComboChart = forwardRef(ComboChartImpl);
+ComboChart.displayName = "ComboChart";
+
+// ../squadkit/registry/lib/forecast.ts
+var FORECAST_MIN_POINTS = 5;
+var FORECAST_MAX_FIT_POINTS = 1e3;
+function inverseNormal(p) {
+  if (!(p > 0 && p < 1)) return p <= 0 ? -Infinity : Infinity;
+  const a = [-39.69683028665376, 220.9460984245205, -275.9285104469687, 138.357751867269, -30.66479806614716, 2.506628277459239];
+  const b = [-54.47609879822406, 161.5858368580409, -155.6989798598866, 66.80131188771972, -13.28068155288572];
+  const c = [-0.007784894002430293, -0.3223964580411365, -2.400758277161838, -2.549732539343734, 4.374664141464968, 2.938163982698783];
+  const d = [0.007784695709041462, 0.3224671290700398, 2.445134137142996, 3.754408661907416];
+  const low = 0.02425;
+  if (p < low) {
+    const q2 = Math.sqrt(-2 * Math.log(p));
+    return (((((c[0] * q2 + c[1]) * q2 + c[2]) * q2 + c[3]) * q2 + c[4]) * q2 + c[5]) / ((((d[0] * q2 + d[1]) * q2 + d[2]) * q2 + d[3]) * q2 + 1);
+  }
+  if (p > 1 - low) {
+    const q2 = Math.sqrt(-2 * Math.log(1 - p));
+    return -(((((c[0] * q2 + c[1]) * q2 + c[2]) * q2 + c[3]) * q2 + c[4]) * q2 + c[5]) / ((((d[0] * q2 + d[1]) * q2 + d[2]) * q2 + d[3]) * q2 + 1);
+  }
+  const q = p - 0.5;
+  const r = q * q;
+  return (((((a[0] * r + a[1]) * r + a[2]) * r + a[3]) * r + a[4]) * r + a[5]) * q / (((((b[0] * r + b[1]) * r + b[2]) * r + b[3]) * r + b[4]) * r + 1);
+}
+function nelderMead(f, start, step, maxEvals) {
+  const dim = start.length;
+  const simplex = [{ x: start.slice(), fx: f(start) }];
+  for (let i = 0; i < dim; i++) {
+    const x = start.slice();
+    x[i] = x[i] + step;
+    simplex.push({ x, fx: f(x) });
+  }
+  let evals = dim + 1;
+  const combine = (a, b, t) => a.map((v, i) => v + t * (b[i] - v));
+  while (evals < maxEvals) {
+    simplex.sort((p, q) => p.fx - q.fx);
+    const best = simplex[0];
+    const worst = simplex[dim];
+    const spread = Math.abs(worst.fx - best.fx);
+    if (spread <= 1e-10 * (Math.abs(best.fx) + 1e-20)) break;
+    const centroid = new Array(dim).fill(0);
+    for (let i = 0; i < dim; i++) for (let j = 0; j < dim; j++) centroid[j] += simplex[i].x[j] / dim;
+    const reflected = combine(centroid, worst.x, -1);
+    const fr = f(reflected);
+    evals++;
+    if (fr < best.fx) {
+      const expanded = combine(centroid, worst.x, -2);
+      const fe = f(expanded);
+      evals++;
+      simplex[dim] = fe < fr ? { x: expanded, fx: fe } : { x: reflected, fx: fr };
+      continue;
+    }
+    if (fr < simplex[dim - 1].fx) {
+      simplex[dim] = { x: reflected, fx: fr };
+      continue;
+    }
+    const outside = fr < worst.fx;
+    const contracted = outside ? combine(centroid, reflected, 0.5) : combine(centroid, worst.x, 0.5);
+    const fc = f(contracted);
+    evals++;
+    if (fc < (outside ? fr : worst.fx)) {
+      simplex[dim] = { x: contracted, fx: fc };
+      continue;
+    }
+    for (let i = 1; i <= dim; i++) {
+      const x = combine(best.x, simplex[i].x, 0.5);
+      simplex[i] = { x, fx: f(x) };
+      evals++;
+    }
+  }
+  simplex.sort((p, q) => p.fx - q.fx);
+  return simplex[0];
+}
+function run(y, spec, p) {
+  let l = p.l0;
+  let b = spec.trend === "additive" ? p.b0 : 0;
+  const s = spec.season === "none" ? [] : p.s0.slice();
+  const mult = spec.season === "multiplicative";
+  let sse = 0;
+  for (let t = 0; t < y.length; t++) {
+    const j = t % spec.m;
+    const base = l + b;
+    const sj = spec.season === "none" ? mult ? 1 : 0 : s[j];
+    if (mult && (sj <= 0 || base <= 0)) return null;
+    const yhat = mult ? base * sj : base + sj;
+    const e = y[t] - yhat;
+    if (!Number.isFinite(e)) return null;
+    sse += e * e;
+    if (mult) {
+      l = base + p.alpha * e / sj;
+      if (spec.trend === "additive") b = b + p.beta * e / sj;
+      s[j] = sj + p.gamma * e / base;
+    } else {
+      l = base + p.alpha * e;
+      if (spec.trend === "additive") b = b + p.beta * e;
+      if (spec.season === "additive") s[j] = sj + p.gamma * e;
+    }
+  }
+  return Number.isFinite(sse) ? { sse, level: l, slope: b, season: s } : null;
+}
+function initialSeason(y, m, mult) {
+  const len = Math.min(Math.floor(y.length / m), 3) * m;
+  const half = Math.floor(m / 2);
+  const sums = new Array(m).fill(0);
+  const counts = new Array(m).fill(0);
+  for (let t = half; t < len - half; t++) {
+    let trend;
+    if (m % 2 === 0) {
+      let sum = 0.5 * y[t - half] + 0.5 * y[t + half];
+      for (let k = t - half + 1; k < t + half; k++) sum += y[k];
+      trend = sum / m;
+    } else {
+      let sum = 0;
+      for (let k = t - half; k <= t + half; k++) sum += y[k];
+      trend = sum / m;
+    }
+    if (mult && trend <= 0) continue;
+    sums[t % m] += mult ? y[t] / trend : y[t] - trend;
+    counts[t % m]++;
+  }
+  const raw = sums.map((v, j) => counts[j] > 0 ? v / counts[j] : mult ? 1 : 0);
+  const mean = raw.reduce((a, v) => a + v, 0) / m;
+  return mult ? raw.map((v) => mean > 0 ? v / mean : 1) : raw.map((v) => v - mean);
+}
+function linearFit(z) {
+  const n = z.length;
+  if (n < 2) return { intercept: z[0] ?? 0, slope: 0 };
+  const mt = (n - 1) / 2;
+  const mz = z.reduce((a, v) => a + v, 0) / n;
+  let num = 0;
+  let den = 0;
+  z.forEach((v, t) => {
+    num += (t - mt) * (v - mz);
+    den += (t - mt) * (t - mt);
+  });
+  const slope = den === 0 ? 0 : num / den;
+  return { intercept: mz - slope * mt, slope };
+}
+var logistic = (x) => 1 / (1 + Math.exp(-x));
+var logit = (p) => Math.log(p / (1 - p));
+var EDGE = 1e-4;
+function fitModel(y, spec) {
+  const n = y.length;
+  const { m } = spec;
+  const seasonal = spec.season !== "none";
+  const mult = spec.season === "multiplicative";
+  const s0 = seasonal ? initialSeason(y, m, mult) : [];
+  const adjusted = y.map((v, t) => !seasonal ? v : mult ? v / s0[t % m] : v - s0[t % m]);
+  const head = adjusted.slice(0, seasonal ? Math.min(n, Math.max(2 * m, 10)) : Math.min(n, 10));
+  const line = linearFit(head);
+  const trend = spec.trend === "additive";
+  const l0Init = trend ? line.intercept - line.slope : head.slice(0, Math.min(head.length, 4)).reduce((a, v) => a + v, 0) / Math.min(head.length, 4);
+  const b0Init = trend ? line.slope : 0;
+  const mean = y.reduce((a, v) => a + v, 0) / n;
+  const sd = Math.sqrt(y.reduce((a, v) => a + (v - mean) * (v - mean), 0) / n);
+  const scale = Math.max(sd, Math.abs(mean) * 1e-3, 1e-9);
+  const decode = (x) => {
+    let i = 0;
+    const alpha = EDGE + (1 - 2 * EDGE) * logistic(x[i++]);
+    const beta = trend ? alpha * (EDGE + (1 - 2 * EDGE) * logistic(x[i++])) : 0;
+    const gamma = seasonal ? (1 - alpha) * (EDGE + (1 - 2 * EDGE) * logistic(x[i++])) : 0;
+    const l0 = l0Init + x[i++] * scale;
+    const b0 = trend ? b0Init + x[i++] * scale * 0.1 : 0;
+    return { alpha, beta, gamma, l0, b0, s0 };
+  };
+  const objective = (x) => run(y, spec, decode(x))?.sse ?? Infinity;
+  const starts = [
+    [0.2, 0.1, 0.1],
+    [0.5, 0.3, 0.3],
+    [0.05, 0.5, 0.05]
+  ];
+  let best = null;
+  for (const [a, b, g] of starts) {
+    const x0 = [logit(a), ...trend ? [logit(b)] : [], ...seasonal ? [logit(g)] : [], 0, ...trend ? [0] : []];
+    let found = nelderMead(objective, x0, 1, 300 * x0.length);
+    found = nelderMead(objective, found.x, 0.25, 200 * x0.length);
+    if (best === null || found.fx < best.fx) best = found;
+  }
+  if (best === null || !Number.isFinite(best.fx)) return null;
+  const params = decode(best.x);
+  const state = run(y, spec, params);
+  if (!state) return null;
+  const k = 2 + (trend ? 2 : 0) + (seasonal ? 1 + (m - 1) : 0);
+  const sse = Math.max(state.sse, 1e-12 * Math.max(1, mean * mean) * n);
+  const aic = n * Math.log(sse / n) + 2 * k;
+  const aicc = n - k - 1 > 0 ? aic + 2 * k * (k + 1) / (n - k - 1) : Infinity;
+  return { spec, params, state, k, aicc };
+}
+function varianceMultiplier(fit, h, seasonIndex) {
+  const { alpha: a, beta: b, gamma: g } = fit.params;
+  const { m } = fit.spec;
+  const trend = fit.spec.trend === "additive";
+  const seasonal = fit.spec.season !== "none";
+  const k = Math.floor((h - 1) / m);
+  let extra = trend ? (h - 1) * (a * a + a * b * h + b * b * h * (2 * h - 1) / 6) : (h - 1) * a * a;
+  if (seasonal) extra += trend ? g * k * (2 * a + g + b * m * (k + 1)) : g * k * (2 * a + g);
+  if (fit.spec.season === "multiplicative") extra *= seasonIndex * seasonIndex;
+  return 1 + extra;
+}
+function forecast(values, options = {}) {
+  const finite = (v) => typeof v === "number" && Number.isFinite(v);
+  let first = 0;
+  while (first < values.length && !finite(values[first])) first++;
+  let last = values.length - 1;
+  while (last >= first && !finite(values[last])) last--;
+  if (last < first) return null;
+  const ignore = Math.max(0, Math.floor(options.ignoreLast ?? 0));
+  const end = last + 1 - ignore;
+  let start = first;
+  if (end - start > FORECAST_MAX_FIT_POINTS) start = end - FORECAST_MAX_FIT_POINTS;
+  if (end - start < FORECAST_MIN_POINTS) return null;
+  const y = [];
+  for (let t = start; t < end; t++) {
+    const v = values[t];
+    if (finite(v)) {
+      y.push(v);
+      continue;
+    }
+    let lo = t - 1;
+    while (lo >= start && !finite(values[lo])) lo--;
+    let hi = t + 1;
+    while (hi < end && !finite(values[hi])) hi++;
+    const a = lo >= start ? values[lo] : void 0;
+    const b = hi < end ? values[hi] : void 0;
+    y.push(a !== void 0 && b !== void 0 ? a + (b - a) * (t - lo) / (hi - lo) : a ?? b ?? 0);
+  }
+  const n = y.length;
+  const m = Math.max(1, Math.floor(options.seasonLength ?? 1));
+  const seasonOption = options.season ?? "auto";
+  const trendOption = options.trend ?? "auto";
+  const canSeason = m > 1 && n >= 2 * m && seasonOption !== "none";
+  const positive = y.every((v) => v > 0);
+  const seasons = !canSeason ? ["none"] : seasonOption === "additive" ? ["additive"] : seasonOption === "multiplicative" ? [positive ? "multiplicative" : "additive"] : positive ? ["none", "additive", "multiplicative"] : ["none", "additive"];
+  const trends = trendOption === "none" ? ["none"] : trendOption === "auto" ? ["none", "additive"] : ["additive"];
+  let chosen = null;
+  for (const trend of trends) {
+    for (const season of seasons) {
+      const fit = fitModel(y, { trend, season, m: season === "none" ? 1 : m });
+      if (!fit) continue;
+      if (chosen === null || fit.aicc < chosen.aicc || !Number.isFinite(chosen.aicc) && fit.k < chosen.k) chosen = fit;
+    }
+  }
+  if (!chosen) return null;
+  const dof = n - (chosen.k - 1);
+  const sigma = Math.sqrt(chosen.state.sse / (dof >= 1 ? dof : n));
+  const confidence = options.confidence !== void 0 && options.confidence > 0 && options.confidence < 1 ? options.confidence : 0.95;
+  const z = inverseNormal(1 - (1 - confidence) / 2);
+  const horizon = options.horizon !== void 0 && Number.isFinite(options.horizon) ? Math.max(0, Math.floor(options.horizon)) : m > 1 ? m : Math.min(12, Math.max(1, Math.round(n / 4)));
+  const steps = values.length - end + horizon;
+  const { spec, state } = chosen;
+  const points = [];
+  for (let h = 1; h <= steps; h++) {
+    const base = state.level + h * state.slope;
+    const s = spec.season === "none" ? void 0 : state.season[(n - 1 + h) % spec.m];
+    const value = s === void 0 ? base : spec.season === "multiplicative" ? base * s : base + s;
+    const half = z * sigma * Math.sqrt(varianceMultiplier(chosen, h, s ?? 1));
+    points.push({ value, lower: value - half, upper: value + half });
+  }
+  const { alpha, beta, gamma } = chosen.params;
+  return {
+    model: {
+      trend: spec.trend,
+      season: spec.season,
+      alpha,
+      ...spec.trend === "additive" ? { beta } : {},
+      ...spec.season !== "none" ? { gamma, seasonLength: spec.m } : {}
+    },
+    fitted: n,
+    end,
+    sigma,
+    points
+  };
+}
+var TEXT19 = {
+  ja: {
+    forecast: "\u4E88\u6E2C",
+    note: (source) => source ? `\u4E88\u6E2C\u306F\u6307\u6570\u5E73\u6ED1\u6CD5\u306B\u3088\u308B\u8FD1\u4F3C\u5024\u3067\u3059\u3002${source} \u306E\u4E88\u6E2C\u5024\u3068\u306F\u4E00\u81F4\u3057\u307E\u305B\u3093\u3002` : "\u4E88\u6E2C\u306F\u6307\u6570\u5E73\u6ED1\u6CD5\u306B\u3088\u308B\u8FD1\u4F3C\u5024\u3067\u3059\u3002\u5143\u306E\u30C4\u30FC\u30EB\u306E\u4E88\u6E2C\u5024\u3068\u306F\u4E00\u81F4\u3057\u307E\u305B\u3093\u3002",
+    interval: (pct, lo, hi) => `${pct} \u4E88\u6E2C\u533A\u9593 ${lo}\u301C${hi}`,
+    chart: (names) => `${names.join("\u30FB")}\u306E\u5B9F\u7E3E\u3068\u4E88\u6E2C\u306E\u6298\u308C\u7DDA\u30B0\u30E9\u30D5`,
+    item: "\u671F\u9593"
+  },
+  en: {
+    forecast: "Forecast",
+    note: (source) => `Forecast is an approximation (exponential smoothing); values do not match ${source ? `${source}'s` : "the source tool's"} forecast.`,
+    interval: (pct, lo, hi) => `${pct} interval ${lo} \u2013 ${hi}`,
+    chart: (names) => `Line chart of actuals and forecast for ${names.join(", ")}`,
+    item: "Period"
+  }
+};
+var LEGEND_DASHED_ICON = "path://M0,0 L42,0 L42,24 L0,24 Z M58,0 L100,0 L100,24 L58,24 Z";
+var BOUNDARY_LABEL_ROOM = 18;
+var MAX_PERIODS = 5e3;
+var DAY_MS = 864e5;
+var NO_ROWS14 = [];
+var DATE_RE = /^(\d{4})(?:[-/](\d{1,2})(?:[-/](\d{1,2}))?)?(?:[T ].*)?$/;
+var QUARTER_RE = /^(\d{4})[-\s]?Q([1-4])$/i;
+function parseDate(value) {
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : { y: value.getFullYear(), m: value.getMonth() + 1, d: value.getDate(), precision: "day" };
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    if (Number.isInteger(value) && value >= 1e3 && value <= 9999) return { y: value, m: 1, d: 1, precision: "year" };
+    return parseDate(new Date(value));
+  }
+  if (typeof value !== "string") return null;
+  const text = value.trim();
+  const q = QUARTER_RE.exec(text);
+  if (q) return { y: Number(q[1]), m: (Number(q[2]) - 1) * 3 + 1, d: 1, precision: "month" };
+  const m = DATE_RE.exec(text);
+  if (m) {
+    const month = m[2] === void 0 ? 1 : Number(m[2]);
+    const day = m[3] === void 0 ? 1 : Number(m[3]);
+    if (month < 1 || month > 12 || day < 1 || day > 31) return null;
+    return { y: Number(m[1]), m: month, d: day, precision: m[3] !== void 0 ? "day" : m[2] !== void 0 ? "month" : "year" };
+  }
+  if (text === "") return null;
+  const parsed = new Date(text);
+  return Number.isNaN(parsed.getTime()) ? null : parseDate(parsed);
+}
+var dayOrdinal = (p) => Math.round(Date.UTC(p.y, p.m - 1, p.d) / DAY_MS);
+function ordinal(p, period) {
+  switch (period) {
+    case "year":
+      return p.y;
+    case "quarter":
+      return p.y * 4 + Math.floor((p.m - 1) / 3);
+    case "month":
+      return p.y * 12 + (p.m - 1);
+    default:
+      return dayOrdinal(p);
+  }
+}
+var pad2 = (n) => String(n).padStart(2, "0");
+function ordinalLabel(o, period) {
+  if (period === "year") return String(o);
+  if (period === "quarter") return `${Math.floor(o / 4)}-${pad2(o % 4 * 3 + 1)}`;
+  if (period === "month") return `${Math.floor(o / 12)}-${pad2(o % 12 + 1)}`;
+  const d = new Date(o * DAY_MS);
+  return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
+}
+function inferPeriod(dates) {
+  if (dates.every((d) => d.precision === "year")) return "year";
+  const coarse = dates.every((d) => d.precision !== "day");
+  const keys = [...new Set(dates.map((d) => coarse ? ordinal(d, "month") : dayOrdinal(d)))].sort((a, b) => a - b);
+  const gaps = keys.slice(1).map((k, i) => k - keys[i]).sort((a, b) => a - b);
+  const gap = gaps.length === 0 ? coarse ? 1 : 1 : gaps[Math.floor(gaps.length / 2)];
+  if (coarse) return gap >= 12 ? "year" : gap >= 3 ? "quarter" : "month";
+  return gap >= 360 ? "year" : gap >= 85 ? "quarter" : gap >= 28 ? "month" : gap >= 7 ? "week" : "day";
+}
+var SEASON_LENGTH = { day: 7, week: 52, month: 12, quarter: 4, year: 1 };
+function buildForecastModel(data, x, y, seriesKey, period, options, singleName, otherLabel) {
+  if (!x || !y || !Array.isArray(data)) return null;
+  const points = [];
+  for (const row of data) {
+    if (!row || typeof row !== "object") continue;
+    const date = parseDate(row[x]);
+    const value = toChartNumber(row[y]);
+    if (!date || value === null) continue;
+    const raw = seriesKey ? row[seriesKey] : singleName;
+    const name = raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
+    points.push({ date, name, value });
+  }
+  if (points.length === 0) return null;
+  const grain = period ?? inferPeriod(points.map((p) => p.date));
+  const step = grain === "week" ? 7 : 1;
+  const keyed = points.map((p) => ({ ...p, key: ordinal(p.date, grain) }));
+  let min = Math.min(...keyed.map((p) => p.key));
+  const max = Math.max(...keyed.map((p) => p.key));
+  if ((max - min) / step + 1 > MAX_PERIODS) min = max - (MAX_PERIODS - 1) * step;
+  const count = Math.floor((max - min) / step) + 1;
+  const slot = (key) => Math.floor((key - min) / step);
+  const sums = /* @__PURE__ */ new Map();
+  for (const p of keyed) {
+    const at = slot(p.key);
+    if (at < 0) continue;
+    let list = sums.get(p.name);
+    if (!list) {
+      list = Array(count).fill(null);
+      sums.set(p.name, list);
+    }
+    list[at] = (list[at] ?? 0) + p.value;
+  }
+  const all = [...sums.keys()];
+  const totals = all.map((name) => ({ name, value: sums.get(name).reduce((a, v) => a + (v ?? 0), 0) }));
+  const { top, rest, other } = aggregateTopN(totals, void 0, otherLabel);
+  const names = top.map((t) => t.name);
+  const actual = names.map((n) => sums.get(n));
+  if (other) {
+    const folded = Array(count).fill(null);
+    for (const r of rest) sums.get(r.name).forEach((v, i) => v === null ? void 0 : folded[i] = (folded[i] ?? 0) + v);
+    names.push(other.name);
+    actual.push(folded);
+  }
+  const resolved = { ...options, seasonLength: options?.seasonLength ?? SEASON_LENGTH[grain] };
+  const results = actual.map((values) => {
+    try {
+      return forecast(values.map((v) => v === null ? NaN : v), resolved);
+    } catch {
+      return null;
+    }
+  });
+  const length = Math.max(count, ...results.map((r) => r ? r.end + r.points.length : 0));
+  const labels = Array.from({ length }, (_, i) => ordinalLabel(min + i * step, grain));
+  const predicted = results.map((r) => {
+    const out = Array(length).fill(null);
+    r?.points.forEach((p, k) => out[r.end + k] = p);
+    return out;
+  });
+  return {
+    labels,
+    actualCount: count,
+    names,
+    otherName: other ? other.name : null,
+    actual: actual.map((list) => [...list, ...Array(length - count).fill(null)]),
+    predicted,
+    fittedEnd: results.map((r) => r ? r.end - 1 : -1),
+    results
+  };
+}
+var FORECAST_ID = "__forecast:";
+var BAND_BASE_ID = "__forecast-band-base:";
+var BAND_RANGE_ID = "__forecast-band-range:";
+function ForecastChartImpl({
+  data = NO_ROWS14,
+  x,
+  y,
+  series: seriesKey,
+  period,
+  forecast: forecast2,
+  forecastLabel,
+  forecastSource,
+  forecastNote,
+  colors,
+  labels,
+  valueFormatter,
+  format,
+  title,
+  summary,
+  actions,
+  fileName,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  showLegend = true,
+  showTooltip = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  yAxisWidth,
+  minValue,
+  maxValue,
+  fitToData = false,
+  xAxisLabel,
+  yAxisLabel,
+  ariaLabel,
+  className,
+  ...rest
+}, ref) {
+  const { ref: frameRef, surface, width: plotWidth, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const t = TEXT19[uiLanguage(locale)];
+  const fcLabel = forecastLabel ?? t.forecast;
+  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 singleName = labels?.[y] ?? y ?? "";
+  const model = useMemo(
+    () => buildForecastModel(data, x, y, seriesKey, period, forecast2, singleName, otherSeriesLabel(locale)),
+    // forecast はオブジェクトリテラルで渡されることが多いので中身で比べる
+    [data, x, y, seriesKey, period, JSON.stringify(forecast2 ?? null), singleName, locale]
+  );
+  const palette = useMemo(
+    () => model ? resolveChartColors(seriesColorsFor(model.names, colors, CHART_OTHER_COLOR, model.otherName), tokens) : [],
+    [model, colors, tokens]
+  );
+  const option = useMemo(() => {
+    if (!model) return null;
+    const index = "__period";
+    const rows = model.labels.map((label3, i) => {
+      const row = { [index]: label3 };
+      model.names.forEach((name, c) => row[name] = model.actual[c][i]);
+      return row;
+    });
+    const base = buildCartesianOption({
+      kind: "line",
+      data: rows,
+      index,
+      categories: model.names,
+      palette,
+      valueFormatter: tooltipFormatter,
+      axisFormatter,
+      axisTicks,
+      curveType: "linear",
+      connectNulls: false,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly: false,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      fitToData,
+      allowDecimals: true,
+      xAxisLabel,
+      yAxisLabel,
+      showDots: false,
+      active: null,
+      highlight: "none",
+      reserveActions: Boolean(actions),
+      guideColor: tokens?.mutedForeground ?? void 0,
+      labelBackground: surface,
+      labelColor: tokens?.foreground ?? void 0,
+      plotWidth,
+      plotHeight: typeof height === "number" ? height : void 0,
+      locale
+    });
+    const bandAlpha = isDarkSurface(surface) ? FORECAST_BAND_ALPHA_DARK : FORECAST_BAND_ALPHA_LIGHT;
+    const helper = {
+      type: "line",
+      symbol: "none",
+      showSymbol: false,
+      connectNulls: true,
+      legendHoverLink: false,
+      emphasis: { disabled: true }
+    };
+    const lines = [];
+    const bands = [];
+    model.names.forEach((name, c) => {
+      const start = model.fittedEnd[c];
+      if (start < 0) return;
+      const color = palette[c] || void 0;
+      const predicted = model.predicted[c];
+      const startValue = model.actual[c][start] ?? null;
+      const line = predicted.map((p, i) => i === start ? startValue : p?.value ?? null);
+      const lower = predicted.map((p, i) => i === start ? startValue : p ? Math.min(p.lower, p.upper) : null);
+      const range = predicted.map((p, i) => i === start ? startValue === null ? null : 0 : p ? Math.abs(p.upper - p.lower) : null);
+      lines.push({
+        ...helper,
+        id: FORECAST_ID + name,
+        name: fcLabel,
+        z: 3,
+        lineStyle: { width: 2, type: FORECAST_LINE_DASH, color, opacity: 0.7 },
+        itemStyle: { color, opacity: 0.7 },
+        data: line
+      });
+      bands.push(
+        { ...helper, id: BAND_BASE_ID + name, name: fcLabel, silent: true, z: 1, stack: BAND_BASE_ID + name, tooltip: { show: false }, lineStyle: { opacity: 0 }, itemStyle: { color }, data: lower },
+        {
+          ...helper,
+          id: BAND_RANGE_ID + name,
+          name: fcLabel,
+          silent: true,
+          z: 1,
+          stack: BAND_BASE_ID + name,
+          tooltip: { show: false },
+          lineStyle: { opacity: 0 },
+          itemStyle: { color },
+          areaStyle: color ? { color: withAlpha(color, bandAlpha), opacity: 1 } : { opacity: bandAlpha },
+          data: range
+        }
+      );
+    });
+    if (lines.length === 0) return mergeChartOptions(base, chartOptions);
+    const boundary = Math.max(...model.fittedEnd);
+    const total = model.labels.length;
+    const span = plotWidth && total > 1 ? (plotWidth - 64) / (total - 1) * (total - 1 - boundary) : null;
+    const boundaryText = forecastBoundaryText(fcLabel);
+    lines[0] = {
+      ...lines[0],
+      markLine: {
+        silent: true,
+        symbol: "none",
+        animation: false,
+        data: [
+          {
+            name: "forecast-boundary",
+            xAxis: boundary,
+            lineStyle: { type: "dashed", width: 1, color: tokens?.mutedForeground ?? void 0 },
+            label: {
+              show: true,
+              position: "end",
+              rotate: 0,
+              align: forecastLabelAlign(span, boundaryText),
+              verticalAlign: "bottom",
+              distance: 4,
+              fontSize: 12,
+              color: tokens?.mutedForeground ?? void 0,
+              formatter: boundaryText
+            }
+          }
+        ]
+      }
+    };
+    const legend = base.legend;
+    const grid = base.grid;
+    const times = timeTooltipLabels(model.labels, locale);
+    const pct = `${Math.round((forecast2?.confidence && forecast2.confidence > 0 && forecast2.confidence < 1 ? forecast2.confidence : 0.95) * 100)}%`;
+    const option2 = {
+      ...base,
+      legend: legend ? { ...legend, data: [...legend.data ?? [], { name: fcLabel, icon: LEGEND_DASHED_ICON }] } : legend,
+      grid: grid ? { ...grid, top: (grid.top ?? 12) + BOUNDARY_LABEL_ROOM } : grid,
+      tooltip: {
+        ...base.tooltip,
+        formatter: (params) => {
+          const list = Array.isArray(params) ? params : [params];
+          const i = list[0]?.dataIndex ?? 0;
+          const shown = new Set(list.map((p) => p.seriesId ?? ""));
+          const visible = (id) => list.length === 0 || shown.has(id);
+          const rows2 = [];
+          model.names.forEach((name, c) => {
+            const color = palette[c] || "currentColor";
+            const value = model.actual[c][i] ?? null;
+            if (value !== null && visible(`series:${name}`)) rows2.push({ name, color, value });
+            const p = model.predicted[c][i];
+            if (p && visible(FORECAST_ID + name)) {
+              rows2.push({
+                name: model.names.length > 1 ? `${name} \xB7 ${fcLabel}` : fcLabel,
+                color,
+                value: p.value,
+                note: t.interval(pct, tooltipFormatter(Math.min(p.lower, p.upper)), tooltipFormatter(Math.max(p.lower, p.upper)))
+              });
+            }
+          });
+          return tooltipHtml(times?.[i] ?? model.labels[i] ?? "", rows2, tooltipFormatter, [], locale);
+        }
+      },
+      series: [...base.series ?? [], ...lines, ...bands]
+    };
+    return mergeChartOptions(option2, chartOptions);
+  }, [
+    model,
+    palette,
+    tooltipFormatter,
+    axisFormatter,
+    axisTicks,
+    showLegend,
+    showTooltip,
+    showGridLines,
+    showXAxis,
+    showYAxis,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    fitToData,
+    xAxisLabel,
+    yAxisLabel,
+    actions,
+    tokens,
+    surface,
+    plotWidth,
+    height,
+    locale,
+    fcLabel,
+    forecast2?.confidence,
+    t,
+    chartOptions
+  ]);
+  const dataTable = useMemo(() => {
+    if (!model) return void 0;
+    const forecastColumns = model.names.map((name) => `${name} (${fcLabel})`);
+    const rows = model.labels.map((label3, i) => {
+      const row = { period: label3 };
+      model.names.forEach((name, c) => {
+        row[name] = model.actual[c][i];
+        row[forecastColumns[c]] = model.predicted[c][i]?.value ?? null;
+      });
+      return row;
+    });
+    const columns = model.names.flatMap((name, c) => model.fittedEnd[c] >= 0 ? [name, forecastColumns[c]] : [name]);
+    const table = chartDataTable(rows, "period", columns, tooltipFormatter, void 0, t.item);
+    const times = timeTooltipLabels(model.labels, locale);
+    return times ? { ...table, rows: table.rows.map((row, i) => [times[i] ?? row[0] ?? "", ...row.slice(1)]) } : table;
+  }, [model, fcLabel, tooltipFormatter, t, locale]);
+  const label2 = ariaLabel ?? t.chart(model?.names ?? [singleName]);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary,
+      isLoading: isLoading ?? false,
+      isEmpty: !model || !option,
+      emptyState,
+      height,
+      variant: "line",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      footnote: [t.note(forecastSource), forecastNote].filter(Boolean).join(" "),
+      children: option && /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary } })
+    }
+  );
+}
+var ForecastChart = forwardRef(ForecastChartImpl);
+ForecastChart.displayName = "ForecastChart";
+
+// ../squadkit/registry/lib/color-ramp.ts
+var RAMP_FLOOR_SHARE = 0.2;
+var RAMP_LIGHT_TEXT_FROM = 0.55;
+function parseRgb2(color) {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color.trim());
+  if (hex) {
+    const n = parseInt(hex[1], 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(color.trim());
+  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : null;
+}
+var toLinear2 = (c) => (c /= 255) <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var fromLinear2 = (c) => Math.round(255 * Math.min(1, Math.max(0, c <= 31308e-7 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055)));
+function toOklab2([r, g, b]) {
+  const [lr, lg, lb] = [toLinear2(r), toLinear2(g), toLinear2(b)];
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const t = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * t, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * t, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * t];
+}
+function fromOklab2([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const t = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const rgb = [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * t, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * t, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * t];
+  return `rgb(${rgb.map(fromLinear2).join(", ")})`;
+}
+function withAlpha3(color, alpha) {
+  const c = parseRgb2(color);
+  return c ? `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})` : color;
+}
+function mixIntoSurface2(color, surface, share) {
+  const c = parseRgb2(color);
+  const s = surface ? parseRgb2(surface) : null;
+  if (!c || !s) return withAlpha3(color, share);
+  const [c1, c2] = [toOklab2(c), toOklab2(s)];
+  return fromOklab2([0, 1, 2].map((i) => c2[i] + (c1[i] - c2[i]) * share));
+}
+function rampRatio(value, min, max) {
+  return max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 1;
+}
+function rampColor(color, surface, ratio) {
+  return mixIntoSurface2(color, surface, RAMP_FLOOR_SHARE + (1 - RAMP_FLOOR_SHARE) * Math.min(1, Math.max(0, ratio)));
+}
+function rampGradientCss(tone) {
+  return `linear-gradient(to right, color-mix(in oklch, var(--${tone}) ${RAMP_FLOOR_SHARE * 100}%, var(--card)), var(--${tone}))`;
+}
+var GEO_MAPS = ["japan", "us", "world"];
+var geoMapKey = (name) => `squadkit-${name}`;
+var GEO_ASPECT_SCALE = { japan: 0.8, us: 0.8, world: 0.75 };
+function fold(text) {
+  return text.normalize("NFKC").normalize("NFD").replace(/[̀-ͯ]/g, "").normalize("NFC").toLowerCase().trim();
+}
+var SEPARATORS = /[\s.,'’`"()_\-‐・･]/g;
+var squash = (text) => text.replace(SEPARATORS, "");
+function regionKeys(raw) {
+  if (raw === null || raw === void 0) return [];
+  const text = fold(String(raw));
+  if (!text) return [];
+  const keys = [squash(text)];
+  const stripped = text.replace(/[\s-]+(prefecture|pref|ken|fu|to|state)$/, "").replace(/^(state of|the)\s+/, "").replace(/(?<=..)(都|府|県|州)$/, "");
+  if (stripped !== text) keys.push(squash(stripped));
+  if (/^\d{1,2}$/.test(text)) keys.push(`jp${text.padStart(2, "0")}`);
+  return [...new Set(keys.filter(Boolean))];
+}
+var ALIASES = {
+  "US-DC": ["District of Columbia", "Washington DC", "Washington, D.C.", "\u30EF\u30B7\u30F3\u30C8\u30F3DC", "\u30B3\u30ED\u30F3\u30D3\u30A2\u7279\u5225\u533A"],
+  USA: ["United States", "US", "USA", "America", "\u7C73\u56FD", "\u30A2\u30E1\u30EA\u30AB"],
+  GBR: ["UK", "Great Britain", "Britain", "\u82F1\u56FD"],
+  KOR: ["Korea", "Republic of Korea", "Korea, Republic of", "\u97D3\u56FD"],
+  PRK: ["DPRK", "\u5317\u671D\u9BAE"],
+  CHN: ["China", "\u4E2D\u56FD"],
+  TWN: ["TW", "\u53F0\u6E7E"],
+  RUS: ["Russian Federation"],
+  CZE: ["Czechia"],
+  VNM: ["Viet Nam"],
+  CIV: ["C\xF4te d'Ivoire"],
+  SWZ: ["Swaziland"],
+  MKD: ["Macedonia"],
+  COD: ["DR Congo", "Congo-Kinshasa"],
+  COG: ["Congo", "Congo-Brazzaville"]
+};
+var SKIP_NAME = /* @__PURE__ */ new Set(["US-DC"]);
+var indexCache = /* @__PURE__ */ new WeakMap();
+function buildGeoIndex(map, collection) {
+  const cached = indexCache.get(collection);
+  if (cached) return cached;
+  const byKey = /* @__PURE__ */ new Map();
+  const byCode = /* @__PURE__ */ new Map();
+  const add = (key, code) => {
+    for (const k of regionKeys(key)) if (!byKey.has(k)) byKey.set(k, code);
+  };
+  for (const { properties: p } of collection.features) {
+    byCode.set(p.code, p);
+    add(p.code, p.code);
+    const short = p.code.split("-")[1];
+    if (short) add(short, p.code);
+    if (p.alpha2) add(p.alpha2, p.code);
+    if (map === "japan" && short) add(String(Number(short)), p.code);
+  }
+  for (const { properties: p } of collection.features) {
+    if (!SKIP_NAME.has(p.code)) add(p.name, p.code);
+    add(p.name_ja, p.code);
+    for (const alias of ALIASES[p.code] ?? []) add(alias, p.code);
+  }
+  const index = { map, byKey, byCode };
+  indexCache.set(collection, index);
+  return index;
+}
+function matchRegion(index, raw) {
+  for (const key of regionKeys(raw)) {
+    const code = index.byKey.get(key);
+    if (code) return code;
+  }
+  return null;
+}
+function regionName(properties, language) {
+  return language === "ja" && properties.name_ja ? properties.name_ja : properties.name.replace(/ Prefecture$/, "");
+}
+function detectGeoMap(values, loaded2) {
+  const distinct = [...new Set(values.filter((v) => v !== null && v !== void 0 && String(v).trim() !== "").map(String))];
+  let best = null;
+  let bestCount = 0;
+  for (const map of GEO_MAPS) {
+    const collection = loaded2[map];
+    if (!collection) continue;
+    const index = buildGeoIndex(map, collection);
+    const count = distinct.filter((v) => matchRegion(index, v) !== null).length;
+    if (count > bestCount) [best, bestCount] = [map, count];
+  }
+  return best;
+}
+var BOUNDS = {
+  japan: [122, 20, 154, 46.5],
+  us: [-180, 18, -65, 72]
+};
+function detectBasemap(points) {
+  if (points.length === 0) return "world";
+  for (const map of ["japan", "us"]) {
+    const [w, s, e, n] = BOUNDS[map];
+    if (points.every(([lon, lat]) => lon >= w && lon <= e && lat >= s && lat <= n)) return map;
+  }
+  return "world";
+}
+var US_INSETS = [
+  // Alaska (the Aleutians stop short of the antimeridian in this data).
+  { box: [-180, 51, -129.5, 72], center: [-149, 63], to: [-117, 25.5], scale: 0.35 },
+  // Hawaii.
+  { box: [-161, 18.5, -154.5, 22.5], center: [-157.5, 20.5], to: [-106, 25.5], scale: 1 }
+];
+function insetUsPoint(lon, lat) {
+  for (const inset of US_INSETS) {
+    const [w, s, e, n] = inset.box;
+    if (lon >= w && lon <= e && lat >= s && lat <= n) {
+      return [inset.to[0] + (lon - inset.center[0]) * inset.scale, inset.to[1] + (lat - inset.center[1]) * inset.scale];
+    }
+  }
+  return [lon, lat];
+}
+function insetUs(collection) {
+  const moveRing = (ring) => ring.map(([lon, lat]) => insetUsPoint(lon, lat));
+  return {
+    type: "FeatureCollection",
+    features: collection.features.map((f) => {
+      if (f.properties.code !== "US-AK" && f.properties.code !== "US-HI") return f;
+      const g = f.geometry;
+      const geometry = g.type === "Polygon" ? { type: "Polygon", coordinates: g.coordinates.map(moveRing) } : { type: "MultiPolygon", coordinates: g.coordinates.map((poly) => poly.map(moveRing)) };
+      return { ...f, geometry };
+    })
+  };
+}
+var loading = /* @__PURE__ */ new Map();
+var loaded = /* @__PURE__ */ new Map();
+function loadedGeoMap(name) {
+  return loaded.get(name);
+}
+function loadGeoMap(name) {
+  const pending = loading.get(name);
+  if (pending) return pending;
+  const promise = (name === "japan" ? import('./geo-japan-7BMSOJRX.js').then((m) => m.JAPAN_PREFECTURES) : name === "us" ? import('./geo-us-GVOG7VXH.js').then((m) => insetUs(m.US_STATES)) : import('./geo-world-35HL56UU.js').then((m) => m.WORLD_COUNTRIES)).then((collection) => {
+    registerMap(geoMapKey(name), collection);
+    loaded.set(name, collection);
+    return collection;
+  });
+  promise.catch(() => loading.delete(name));
+  loading.set(name, promise);
+  return promise;
+}
+async function loadGeoMapFor(values, map) {
+  if (map !== "auto") return { name: map, collection: await loadGeoMap(map) };
+  const distinct = [...new Set(values.filter((v) => v !== null && v !== void 0).map(String))];
+  const [japan, us] = await Promise.all([loadGeoMap("japan"), loadGeoMap("us")]);
+  const local = { japan, us };
+  const pick = detectGeoMap(distinct, local);
+  if (pick) {
+    const index = buildGeoIndex(pick, local[pick]);
+    const matched = distinct.filter((v) => matchRegion(index, v) !== null).length;
+    if (matched * 2 >= distinct.length) return { name: pick, collection: local[pick] };
+  }
+  const world = await loadGeoMap("world");
+  const name = detectGeoMap(distinct, { ...local, world }) ?? "world";
+  return { name, collection: name === "world" ? world : local[name] };
+}
+function useGeoMap(values, map) {
+  const key = useMemo(() => [...new Set(values.map((v) => v === null || v === void 0 ? "" : String(v)))].join("\0"), [values]);
+  const [state, setState] = useState(null);
+  const wanted = `${map}
${key}`;
+  useEffect(() => {
+    let alive = true;
+    loadGeoMapFor(key ? key.split("\0") : [], map).then(
+      (result) => alive && setState({ key: wanted, result }),
+      () => {
+      }
+    );
+    return () => {
+      alive = false;
+    };
+  }, [wanted]);
+  if (state?.key === wanted) return state.result;
+  const ready = map !== "auto" ? loadedGeoMap(map) : void 0;
+  return ready && map !== "auto" ? { name: map, collection: ready } : null;
+}
+use([MapChart]);
+function buildFilledMapModel(config) {
+  const { data, region, value, map, collection } = config;
+  const language = uiLanguage(resolveLocale(config.locale));
+  const index = buildGeoIndex(map, collection);
+  const byCode = /* @__PURE__ */ new Map();
+  const unmatched = [];
+  for (const row of data) {
+    if (!row || typeof row !== "object") continue;
+    const code = matchRegion(index, row[region]);
+    if (code) byCode.set(code, row);
+    else unmatched.push(row);
+  }
+  let lo = Infinity;
+  let hi = -Infinity;
+  const regions = collection.features.map(({ properties }) => {
+    const row = byCode.get(properties.code) ?? null;
+    const n = row ? toChartNumber(row[value]) : null;
+    if (n !== null) [lo, hi] = [Math.min(lo, n), Math.max(hi, n)];
+    const key = row ? String(row[region]) : null;
+    return { code: properties.code, key, name: (key !== null ? config.labels?.[key] : void 0) ?? regionName(properties, language), value: n, row };
+  });
+  const min = config.scale?.min ?? (Number.isFinite(lo) ? lo : 0);
+  let max = config.scale?.max ?? (Number.isFinite(hi) ? hi : 1);
+  if (max <= min) max = min + 1;
+  const selectedCodes = config.selected && config.selected.length > 0 ? new Set(config.selected.map((v) => matchRegion(index, v)).filter((c) => c !== null)) : null;
+  return { map, regions, unmatched, selectedCodes, min, max };
+}
+function escapeHtml4(text) {
+  return text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+var TEXT20 = {
+  ja: {
+    join: "\u30FB",
+    region: "\u5730\u57DF",
+    notOnMap: "(\u5730\u56F3\u306B\u7121\u3044)",
+    top: (name, value) => `\u6700\u5927\u306F ${name} \u306E ${value}`,
+    chart: (value) => `${value}\u306E\u5730\u56F3`
+  },
+  en: {
+    join: ", ",
+    region: "Region",
+    notOnMap: " (not on the map)",
+    top: (name, value) => `Highest: ${name} (${value})`,
+    chart: (value) => `Map of ${value}`
+  }
+};
+var textOf7 = (locale) => TEXT20[uiLanguage(resolveLocale(locale))];
+function detailText(raw, formatter) {
+  if (raw === null || raw === void 0 || raw === "") return EMPTY_VALUE;
+  const n = typeof raw === "string" ? null : toChartNumber(raw);
+  return n === null ? String(raw) : formatter(n);
+}
+function buildFilledMapOption(config) {
+  const { model, labels, valueFormatter } = config;
+  const t = textOf7(config.locale);
+  const label2 = (key) => labels?.[key] ?? key;
+  const base = config.color || "#6366f1";
+  const border = config.surfaceColor ?? "#ffffff";
+  const dimmed = (r) => model.selectedCodes !== null && !model.selectedCodes.has(r.code);
+  const tooltip = (r) => {
+    const head = `${escapeHtml4(r.name)} ${r.value === null ? EMPTY_VALUE : escapeHtml4(valueFormatter(r.value))}`;
+    const extras = (config.details ?? []).map((key) => `${escapeHtml4(label2(key))} ${escapeHtml4(detailText(r.row?.[key], valueFormatter))}`).join(t.join);
+    return extras ? `${head}${t.join}${extras}` : head;
+  };
+  const option = {
+    animation: false,
+    tooltip: config.showTooltip ? { trigger: "item", formatter: (p) => tooltip(p.data.region) } : { show: false },
+    series: [
+      {
+        id: "regions",
+        type: "map",
+        map: geoMapKey(model.map),
+        nameProperty: "code",
+        aspectScale: GEO_ASPECT_SCALE[model.map],
+        roam: false,
+        selectedMode: false,
+        left: 8,
+        right: 8,
+        top: 8,
+        bottom: 8,
+        label: { show: false },
+        itemStyle: { areaColor: config.emptyColor, borderColor: border, borderWidth: 0.6 },
+        emphasis: { label: { show: false }, itemStyle: { borderColor: config.hoverColor, borderWidth: 1.2 } },
+        data: model.regions.map((r) => {
+          const fill = r.value === null ? config.emptyColor : rampColor(base, config.surfaceColor, rampRatio(r.value, model.min, model.max));
+          const areaColor = dimmed(r) ? mixIntoSurface2(fill, config.surfaceColor, 0.3) : fill;
+          return {
+            name: r.code,
+            value: r.value ?? void 0,
+            region: r,
+            itemStyle: { areaColor },
+            emphasis: { itemStyle: { areaColor } }
+          };
+        })
+      }
+    ]
+  };
+  return config.chartOptions ? mergeDeep3(option, config.chartOptions) : option;
+}
+function mergeDeep3(a, b) {
+  const out = { ...a };
+  for (const [k, v] of Object.entries(b)) {
+    const cur = out[k];
+    out[k] = v && cur && typeof v === "object" && typeof cur === "object" && !Array.isArray(v) && !Array.isArray(cur) ? mergeDeep3(cur, v) : v;
+  }
+  return out;
+}
+function filledMapDataTable(model, names, formatter, details = [], labels, locale) {
+  const t = textOf7(locale);
+  const label2 = (key) => labels?.[key] ?? key;
+  const cells = (row, value) => [
+    value === null ? EMPTY_VALUE : formatter(value),
+    ...details.map((key) => detailText(row?.[key], formatter))
+  ];
+  const rows = [
+    ...model.regions.filter((r) => r.row !== null).map((r) => [r.name, ...cells(r.row, r.value)]),
+    ...model.unmatched.map((row) => [`${label2(String(row[names.region] ?? EMPTY_VALUE))}${t.notOnMap}`, ...cells(row, toChartNumber(row[names.value]))])
+  ];
+  return { columns: [labels?.[names.region] ?? t.region, label2(names.value), ...details.map(label2)], rows };
+}
+function buildFilledMapSummary(model, formatter, title, locale) {
+  let best;
+  for (const r of model.regions) if (r.value !== null && (!best || r.value > best.value)) best = r;
+  if (!best) return void 0;
+  return `${title ? `${title}: ` : ""}${textOf7(locale).top(best.name, formatter(best.value))}`;
+}
+function colorsFor2(tokens, tone) {
+  const [color = "", empty = "", hover = ""] = resolveChartColors([tone, "var(--muted)", "var(--foreground)"], tokens);
+  return { color, empty, hover };
+}
+var NO_ROWS15 = [];
+function FilledMapImpl({
+  data = NO_ROWS15,
+  region,
+  value,
+  map = "auto",
+  labels,
+  format,
+  valueFormatter,
+  tone = "chart-1",
+  scale,
+  showLegend = true,
+  showTooltip = true,
+  details,
+  selected,
+  onSelect,
+  title,
+  summary,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  actions,
+  fileName,
+  className,
+  ariaLabel,
+  ...rest
+}, ref) {
+  const rows = Array.isArray(data) ? data : NO_ROWS15;
+  const { ref: frameRef, surface, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const formatter = useMemo(() => resolveValueFormatter(valueFormatter, format ?? "number", locale), [valueFormatter, format, locale]);
+  const regionValues = useMemo(() => rows.map((row) => row && typeof row === "object" ? row[region] : void 0), [rows, region]);
+  const geo = useGeoMap(regionValues, map);
+  const model = useMemo(
+    () => geo ? buildFilledMapModel({ data: rows, region, value, map: geo.name, collection: geo.collection, scale, labels, selected, locale }) : null,
+    [geo, rows, region, value, scale?.min, scale?.max, labels, selected, locale]
+  );
+  const colors = useMemo(() => colorsFor2(tokens, tone), [tokens, tone]);
+  const option = useMemo(
+    () => model ? buildFilledMapOption({
+      model,
+      color: colors.color,
+      surfaceColor: surface ?? void 0,
+      emptyColor: colors.empty || "rgba(128, 128, 128, 0.15)",
+      hoverColor: colors.hover || "#000000",
+      labels,
+      valueFormatter: formatter,
+      details,
+      showTooltip,
+      chartOptions,
+      locale
+    }) : null,
+    [model, value, colors, surface, labels, formatter, details, showTooltip, chartOptions, locale]
+  );
+  const onEvents = useMemo(
+    () => onSelect ? {
+      click: (params) => {
+        const r = params.data?.region;
+        if (r?.row) onSelect(String(r.row[region]), r.row);
+      }
+    } : void 0,
+    [onSelect, region]
+  );
+  const dataTable = useMemo(
+    () => model ? filledMapDataTable(model, { region, value }, formatter, details, labels, locale) : void 0,
+    [model, region, value, formatter, details, labels, locale]
+  );
+  const resolvedSummary = useMemo(
+    () => summary === "auto" ? model ? buildFilledMapSummary(model, formatter, title, locale) : void 0 : summary,
+    [summary, model, formatter, title, locale]
+  );
+  const label2 = ariaLabel ?? textOf7(locale).chart(labels?.[value] ?? value ?? "");
+  const isEmpty = rows.length === 0;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary: resolvedSummary,
+      isLoading: (isLoading ?? false) || !isEmpty && !option,
+      isEmpty,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: option && /* @__PURE__ */ jsx(EChart, { option, onEvents, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary: resolvedSummary } }) }),
+        showLegend && model ? /* @__PURE__ */ jsx(RampLegend, { min: model.min, max: model.max, formatter, tone }) : null
+      ] })
+    }
+  );
+}
+function RampLegend({ min, max, formatter, tone }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "filled-map-legend", className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground tabular-nums", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { children: formatter(min) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2 w-24 rounded-sm", style: { backgroundImage: rampGradientCss(tone) } }),
+    /* @__PURE__ */ jsx("span", { children: formatter(max) })
+  ] }) });
+}
+var FilledMap = forwardRef(FilledMapImpl);
+FilledMap.displayName = "FilledMap";
+use([ScatterChart$1, GeoComponent]);
+var SYMBOL_MAP_MIN_SIZE = 6;
+var SYMBOL_MAP_MAX_SIZE = 36;
+var SYMBOL_MAP_DEFAULT_SIZE = 10;
+var MAX_CATEGORIES = 5;
+var isBlank = (v) => v === null || v === void 0 || typeof v === "string" && v.trim() === "";
+function buildSymbolMapModel(config) {
+  const { data, latitude, longitude, name, size, color } = config;
+  const rows = data.filter((row) => row && typeof row === "object");
+  const colorValues = color ? rows.map((row) => row[color]).filter((v) => !isBlank(v)) : [];
+  const colorMode = !color || colorValues.length === 0 ? "none" : colorValues.every((v) => toChartNumber(v) !== null) ? "numeric" : "category";
+  const points = [];
+  const unplotted = [];
+  const categories = [];
+  let [lo, hi, sizeMax] = [Infinity, -Infinity, 0];
+  for (const row of rows) {
+    const lat = toChartNumber(row[latitude]);
+    const lon = toChartNumber(row[longitude]);
+    if (lat === null || lon === null || Math.abs(lat) > 90 || Math.abs(lon) > 180) {
+      unplotted.push(row);
+      continue;
+    }
+    const s = size ? toChartNumber(row[size]) : null;
+    if (s !== null && s > sizeMax) sizeMax = s;
+    const shade = colorMode === "numeric" ? toChartNumber(row[color]) : null;
+    if (shade !== null) [lo, hi] = [Math.min(lo, shade), Math.max(hi, shade)];
+    const category = colorMode === "category" && !isBlank(row[color]) ? String(row[color]) : null;
+    if (category !== null && !categories.includes(category)) categories.push(category);
+    points.push({ lon, lat, name: name && !isBlank(row[name]) ? String(row[name]) : null, size: s, shade, category, row });
+  }
+  const shadeMin = Number.isFinite(lo) ? lo : 0;
+  let shadeMax = Number.isFinite(hi) ? hi : 1;
+  if (shadeMax <= shadeMin) shadeMax = shadeMin + 1;
+  return { points, unplotted, colorMode, categories, shadeMin, shadeMax, sizeMax };
+}
+function symbolMapSize(value, max, hasSize) {
+  if (!hasSize) return SYMBOL_MAP_DEFAULT_SIZE;
+  if (value === null || value <= 0 || !(max > 0)) return SYMBOL_MAP_MIN_SIZE;
+  return SYMBOL_MAP_MIN_SIZE + (SYMBOL_MAP_MAX_SIZE - SYMBOL_MAP_MIN_SIZE) * Math.sqrt(Math.min(1, value / max));
+}
+function escapeHtml5(text) {
+  return text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+var TEXT21 = {
+  ja: {
+    join: "\u30FB",
+    point: "\u5730\u70B9",
+    latitude: "\u7DEF\u5EA6",
+    longitude: "\u7D4C\u5EA6",
+    notPlotted: "(\u5EA7\u6A19\u306A\u3057)",
+    chart: "\u5730\u70B9\u306E\u5730\u56F3"
+  },
+  en: {
+    join: ", ",
+    point: "Point",
+    latitude: "Latitude",
+    longitude: "Longitude",
+    notPlotted: " (no coordinates)",
+    chart: "Map of points"
+  }
+};
+var textOf8 = (locale) => TEXT21[uiLanguage(resolveLocale(locale))];
+var coordText = (n) => n === null ? EMPTY_VALUE : n.toFixed(4).replace(/\.?0+$/, "");
+function buildSymbolMapOption(config) {
+  const { model, labels, valueFormatter, sizeFormatter } = config;
+  const label2 = (key) => labels?.[key] ?? key;
+  const base = config.toneColor || "#6366f1";
+  const selected = config.selected && config.selected.length > 0 ? new Set(config.selected.map(String)) : null;
+  const fillOf = (p) => {
+    if (model.colorMode === "numeric") return p.shade === null ? config.landColor : rampColor(base, config.surfaceColor, rampRatio(p.shade, model.shadeMin, model.shadeMax));
+    if (model.colorMode === "category") {
+      const at = p.category === null ? -1 : model.categories.indexOf(p.category);
+      return at === -1 ? config.categoryColors[MAX_CATEGORIES] ?? base : config.categoryColors[Math.min(at, MAX_CATEGORIES)] ?? base;
+    }
+    return base;
+  };
+  const tooltip = (p) => {
+    const lines = [escapeHtml5(p.name ?? `${coordText(p.lat)}, ${coordText(p.lon)}`)];
+    if (config.size) lines.push(`${escapeHtml5(label2(config.size))} ${p.size === null ? EMPTY_VALUE : escapeHtml5(sizeFormatter(p.size))}`);
+    if (config.color && config.color !== config.size)
+      lines.push(`${escapeHtml5(label2(config.color))} ${model.colorMode === "numeric" ? p.shade === null ? EMPTY_VALUE : escapeHtml5(valueFormatter(p.shade)) : escapeHtml5(label2(p.category ?? EMPTY_VALUE))}`);
+    for (const key of config.details ?? []) lines.push(`${escapeHtml5(label2(key))} ${escapeHtml5(cellText(p.row[key], valueFormatter))}`);
+    return lines.join("<br/>");
+  };
+  const order = [...model.points].sort((a, b) => (b.size ?? 0) - (a.size ?? 0));
+  const option = {
+    animation: false,
+    tooltip: config.showTooltip ? { trigger: "item", formatter: (p) => tooltip(p.data.point) } : { show: false },
+    geo: {
+      map: geoMapKey(config.basemap),
+      silent: true,
+      roam: false,
+      aspectScale: GEO_ASPECT_SCALE[config.basemap],
+      left: 8,
+      right: 8,
+      top: 8,
+      bottom: 8,
+      label: { show: false },
+      itemStyle: { areaColor: config.landColor, borderColor: config.borderColor, borderWidth: 0.6 },
+      emphasis: { disabled: true }
+    },
+    series: [
+      {
+        id: "points",
+        type: "scatter",
+        coordinateSystem: "geo",
+        data: order.map((p) => {
+          const [x, y] = config.basemap === "us" ? insetUsPoint(p.lon, p.lat) : [p.lon, p.lat];
+          const fill = fillOf(p);
+          const dim = selected !== null && !(p.name !== null && selected.has(p.name));
+          return {
+            value: [x, y],
+            point: p,
+            symbolSize: symbolMapSize(p.size, model.sizeMax, !!config.size),
+            itemStyle: { color: dim ? mixIntoSurface2(fill, config.surfaceColor, 0.3) : fill, opacity: dim ? 1 : 0.85 }
+          };
+        }),
+        itemStyle: { borderColor: config.surfaceColor ?? "#ffffff", borderWidth: 1 },
+        emphasis: { scale: false, itemStyle: { opacity: 1, borderColor: config.borderColor, borderWidth: 1.5 } }
+      }
+    ]
+  };
+  return config.chartOptions ? mergeDeep4(option, config.chartOptions) : option;
+}
+function cellText(raw, formatter) {
+  if (isBlank(raw)) return EMPTY_VALUE;
+  const n = typeof raw === "string" ? null : toChartNumber(raw);
+  return n === null ? String(raw) : formatter(n);
+}
+function mergeDeep4(a, b) {
+  const out = { ...a };
+  for (const [k, v] of Object.entries(b)) {
+    const cur = out[k];
+    out[k] = v && cur && typeof v === "object" && typeof cur === "object" && !Array.isArray(v) && !Array.isArray(cur) ? mergeDeep4(cur, v) : v;
+  }
+  return out;
+}
+function symbolMapDataTable(model, names, formatters, details = [], labels, locale) {
+  const t = textOf8(locale);
+  const label2 = (key) => labels?.[key] ?? key;
+  const extra = [names.size, names.color].filter((k) => !!k && k !== names.latitude && k !== names.longitude);
+  const keys = [.../* @__PURE__ */ new Set([...extra, ...details])];
+  const rowCells = (row) => keys.map((key) => key === names.size ? cellText(row[key], formatters.size) : key === names.color && model.colorMode === "category" ? isBlank(row[key]) ? EMPTY_VALUE : label2(String(row[key])) : cellText(row[key], formatters.value));
+  const nameOf = (row) => names.name && !isBlank(row[names.name]) ? String(row[names.name]) : EMPTY_VALUE;
+  const rows = [
+    ...model.points.map((p) => [nameOf(p.row), coordText(p.lat), coordText(p.lon), ...rowCells(p.row)]),
+    ...model.unplotted.map((row) => [
+      `${nameOf(row)}${t.notPlotted}`,
+      coordText(toChartNumber(row[names.latitude])),
+      coordText(toChartNumber(row[names.longitude])),
+      ...rowCells(row)
+    ])
+  ];
+  return {
+    columns: [names.name ? label2(names.name) : t.point, labels?.[names.latitude] ?? t.latitude, labels?.[names.longitude] ?? t.longitude, ...keys.map(label2)],
+    rows
+  };
+}
+function colorsFor3(tokens, tone) {
+  const resolved = resolveChartColors([tone, "var(--muted)", "var(--border)", ...DEFAULT_CHART_COLORS, CHART_OTHER_COLOR], tokens);
+  const [toneColor = "", land = "", border = ""] = resolved;
+  return { toneColor, land, border, categories: resolved.slice(3) };
+}
+var NO_ROWS16 = [];
+function SymbolMapImpl({
+  data = NO_ROWS16,
+  latitude,
+  longitude,
+  name,
+  size,
+  color,
+  basemap = "auto",
+  labels,
+  format,
+  sizeFormat,
+  tone = "chart-1",
+  showLegend = true,
+  showTooltip = true,
+  details,
+  selected,
+  onSelect,
+  title,
+  summary,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  actions,
+  fileName,
+  className,
+  ariaLabel,
+  ...rest
+}, ref) {
+  const rows = Array.isArray(data) ? data : NO_ROWS16;
+  const { ref: frameRef, surface, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const formatter = useMemo(() => resolveValueFormatter(void 0, format ?? "number", locale), [format, locale]);
+  const sizeFormatter = useMemo(() => resolveValueFormatter(void 0, sizeFormat ?? format ?? "number", locale), [sizeFormat, format, locale]);
+  const model = useMemo(() => buildSymbolMapModel({ data: rows, latitude, longitude, name, size, color }), [rows, latitude, longitude, name, size, color]);
+  const resolvedBasemap = useMemo(
+    () => basemap === "auto" ? detectBasemap(model.points.map((p) => [p.lon, p.lat])) : basemap,
+    [basemap, model]
+  );
+  const geo = useGeoMap(NO_ROWS16, resolvedBasemap);
+  const colors = useMemo(() => colorsFor3(tokens, tone), [tokens, tone]);
+  const option = useMemo(
+    () => geo ? buildSymbolMapOption({
+      model,
+      basemap: geo.name,
+      size,
+      color,
+      toneColor: colors.toneColor,
+      categoryColors: colors.categories,
+      surfaceColor: surface ?? void 0,
+      landColor: colors.land || "rgba(128, 128, 128, 0.15)",
+      borderColor: colors.border || "rgba(128, 128, 128, 0.4)",
+      labels,
+      valueFormatter: formatter,
+      sizeFormatter,
+      details,
+      selected,
+      showTooltip,
+      chartOptions}) : null,
+    [geo, model, size, color, colors, surface, labels, formatter, sizeFormatter, details, selected, showTooltip, chartOptions, locale]
+  );
+  const onEvents = useMemo(
+    () => onSelect ? {
+      click: (params) => {
+        const p = params.data?.point;
+        if (p) onSelect(p.row);
+      }
+    } : void 0,
+    [onSelect]
+  );
+  const dataTable = useMemo(
+    () => symbolMapDataTable(model, { latitude, longitude, name, size, color }, { value: formatter, size: sizeFormatter }, details, labels, locale),
+    [model, latitude, longitude, name, size, color, formatter, sizeFormatter, details, labels, locale]
+  );
+  const label2 = ariaLabel ?? textOf8(locale).chart;
+  const isEmpty = rows.length === 0;
+  const legendCategories = model.categories.length > MAX_CATEGORIES ? [...model.categories.slice(0, MAX_CATEGORIES), otherSeriesLabel(locale)] : model.categories;
+  const legend = !showLegend ? null : model.colorMode === "numeric" ? /* @__PURE__ */ jsx("div", { "data-slot": "symbol-map-legend", className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground tabular-nums", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    color && /* @__PURE__ */ jsx("span", { children: labels?.[color] ?? color }),
+    /* @__PURE__ */ jsx("span", { children: formatter(model.shadeMin) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2 w-24 rounded-sm", style: { backgroundImage: rampGradientCss(tone) } }),
+    /* @__PURE__ */ jsx("span", { children: formatter(model.shadeMax) })
+  ] }) }) : model.colorMode === "category" ? /* @__PURE__ */ jsx(Legend, { categories: legendCategories, labels }) : null;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary,
+      isLoading: (isLoading ?? false) || !isEmpty && !option,
+      isEmpty,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: option && /* @__PURE__ */ jsx(EChart, { option, onEvents, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary } }) }),
+        legend
+      ] })
+    }
+  );
+}
+var SymbolMap = forwardRef(SymbolMapImpl);
+SymbolMap.displayName = "SymbolMap";
+use([TreemapChart]);
+var MAX_CATEGORIES2 = 5;
+function buildTreemapModel(config) {
+  const { data, index, group, value, color } = config;
+  const leaves = [];
+  let [lo, hi] = [Infinity, -Infinity];
+  for (const row of data) {
+    if (!row || typeof row !== "object") continue;
+    const shade = color ? toChartNumber(row[color]) : null;
+    if (shade !== null) [lo, hi] = [Math.min(lo, shade), Math.max(hi, shade)];
+    leaves.push({
+      name: String(row[index] ?? EMPTY_VALUE),
+      group: group ? String(row[group] ?? EMPTY_VALUE) : null,
+      value: toChartNumber(row[value]),
+      shade,
+      row
+    });
+  }
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const leaf of leaves) {
+    if (leaf.value === null || leaf.value <= 0) continue;
+    const list = byGroup.get(leaf.group) ?? [];
+    list.push(leaf);
+    byGroup.set(leaf.group, list);
+  }
+  const groups = [...byGroup.entries()].map(([name, list]) => ({ name, total: list.reduce((s, l) => s + l.value, 0), leaves: [...list].sort((a, b) => b.value - a.value) })).sort((a, b) => b.total - a.total);
+  const total = groups.reduce((s, g) => s + g.total, 0);
+  const categories = group ? groups.map((g) => g.name) : [...new Set(groups.flatMap((g) => g.leaves.map((l) => l.name)))];
+  const shadeMin = Number.isFinite(lo) ? lo : 0;
+  let shadeMax = Number.isFinite(hi) ? hi : 1;
+  if (shadeMax <= shadeMin) shadeMax = shadeMin + 1;
+  return { leaves, groups, categories, total, shadeMin, shadeMax };
+}
+function escapeHtml6(text) {
+  return text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+var TEXT22 = {
+  ja: {
+    join: "\u30FB",
+    item: "\u9805\u76EE",
+    group: "\u30B0\u30EB\u30FC\u30D7",
+    share: "\u69CB\u6210\u6BD4",
+    top: (name, share) => `\u6700\u5927\u306F ${name}(\u5168\u4F53\u306E ${share})`,
+    chart: (value) => `${value}\u306E\u30C4\u30EA\u30FC\u30DE\u30C3\u30D7`
+  },
+  en: {
+    join: ", ",
+    item: "Item",
+    group: "Group",
+    share: "Share",
+    top: (name, share) => `Largest: ${name} (${share} of the total)`,
+    chart: (value) => `Treemap of ${value}`
+  }
+};
+var textOf9 = (locale) => TEXT22[uiLanguage(resolveLocale(locale))];
+function buildTreemapOption(config) {
+  const { model, labels, valueFormatter } = config;
+  const t = textOf9(config.locale);
+  const label2 = (key) => labels?.[key] ?? key;
+  const surface = config.surfaceColor ?? "#ffffff";
+  const base = config.toneColor || "#6366f1";
+  const categoryColor = (name) => {
+    const at = model.categories.indexOf(name);
+    return config.categoryColors[at === -1 ? MAX_CATEGORIES2 : Math.min(at, MAX_CATEGORIES2)] ?? base;
+  };
+  const share = (v) => formatValue(model.total > 0 ? v / model.total : 0, "percent", config.locale);
+  const leafNode = (leaf) => {
+    let fill;
+    let dark = true;
+    if (config.colorMode === "numeric") {
+      const ratio = leaf.shade === null ? 0 : rampRatio(leaf.shade, model.shadeMin, model.shadeMax);
+      fill = rampColor(base, config.surfaceColor, ratio);
+      dark = ratio >= RAMP_LIGHT_TEXT_FROM;
+    } else fill = categoryColor(config.hasGroup ? leaf.group : leaf.name);
+    return {
+      name: label2(leaf.name),
+      value: leaf.value,
+      leaf,
+      itemStyle: { color: fill },
+      label: { color: dark ? surface : config.foregroundColor }
+    };
+  };
+  const tooltip = (leaf, name, value) => {
+    const head = leaf?.group != null ? `${escapeHtml6(label2(leaf.group))} / ${escapeHtml6(name)}` : escapeHtml6(name);
+    const parts = [`${head} ${escapeHtml6(valueFormatter(value))}`, `${t.share} ${escapeHtml6(share(value))}`];
+    if (leaf && config.colorKey && config.colorMode === "numeric")
+      parts.push(`${escapeHtml6(label2(config.colorKey))} ${leaf.shade === null ? EMPTY_VALUE : escapeHtml6(config.colorFormatter(leaf.shade))}`);
+    return parts.join(t.join);
+  };
+  const data = config.hasGroup ? model.groups.map((g) => ({
+    name: label2(g.name),
+    value: g.total,
+    itemStyle: { color: config.colorMode === "numeric" ? config.foregroundColor : categoryColor(g.name) },
+    children: g.leaves.map(leafNode)
+  })) : model.groups.flatMap((g) => g.leaves.map(leafNode));
+  const option = {
+    animation: false,
+    tooltip: config.showTooltip ? {
+      trigger: "item",
+      formatter: (p) => {
+        const d = p;
+        return tooltip(d.data?.leaf, d.name, Number(d.value));
+      }
+    } : { show: false },
+    series: [
+      {
+        id: "tiles",
+        type: "treemap",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        roam: false,
+        nodeClick: false,
+        breadcrumb: { show: false },
+        squareRatio: 0.5 * (1 + Math.sqrt(5)),
+        label: {
+          show: true,
+          position: "insideTopLeft",
+          overflow: "truncate",
+          lineHeight: 16,
+          formatter: (p) => {
+            const d = p;
+            return `${d.name}
+${valueFormatter(Number(d.value))}`;
+          }
+        },
+        upperLabel: { show: config.hasGroup, height: 20, color: surface, fontWeight: 600 },
+        itemStyle: { borderColor: surface, borderWidth: 1, gapWidth: 1 },
+        emphasis: { disabled: true },
+        levels: config.hasGroup ? [{ itemStyle: { borderColor: surface, borderWidth: 2, gapWidth: 2 } }, { itemStyle: { borderColor: surface, borderWidth: 0, gapWidth: 1 } }] : [{ itemStyle: { borderColor: surface, borderWidth: 0, gapWidth: 1 } }],
+        data
+      }
+    ]
+  };
+  return config.chartOptions ? mergeDeep5(option, config.chartOptions) : option;
+}
+function mergeDeep5(a, b) {
+  const out = { ...a };
+  for (const [k, v] of Object.entries(b)) {
+    const cur = out[k];
+    out[k] = v && cur && typeof v === "object" && typeof cur === "object" && !Array.isArray(v) && !Array.isArray(cur) ? mergeDeep5(cur, v) : v;
+  }
+  return out;
+}
+function treemapDataTable(model, names, formatters, labels, locale) {
+  const t = textOf9(locale);
+  const label2 = (key) => labels?.[key] ?? key;
+  const share = (v) => v === null || v <= 0 || model.total <= 0 ? EMPTY_VALUE : formatValue(v / model.total, "percent", locale);
+  return {
+    columns: [
+      ...names.group ? [labels?.[names.group] ?? t.group] : [],
+      labels?.[names.index] ?? t.item,
+      label2(names.value),
+      t.share,
+      ...names.color && names.color !== names.value ? [label2(names.color)] : []
+    ],
+    rows: model.leaves.map((leaf) => [
+      ...names.group ? [label2(leaf.group ?? EMPTY_VALUE)] : [],
+      label2(leaf.name),
+      leaf.value === null ? EMPTY_VALUE : formatters.value(leaf.value),
+      share(leaf.value),
+      ...names.color && names.color !== names.value ? [leaf.shade === null ? EMPTY_VALUE : formatters.color(leaf.shade)] : []
+    ])
+  };
+}
+function buildTreemapSummary(model, title, labels, locale) {
+  let best;
+  for (const g of model.groups) for (const l of g.leaves) if (!best || l.value > best.value) best = l;
+  if (!best || model.total <= 0) return void 0;
+  return `${title ? `${title}: ` : ""}${textOf9(locale).top(labels?.[best.name] ?? best.name, formatValue(best.value / model.total, "percent", locale))}`;
+}
+function colorsFor4(tokens, tone) {
+  const resolved = resolveChartColors([tone, "var(--foreground)", ...DEFAULT_CHART_COLORS, CHART_OTHER_COLOR], tokens);
+  const [toneColor = "", foreground = ""] = resolved;
+  return { toneColor, foreground, categories: resolved.slice(2) };
+}
+var NO_ROWS17 = [];
+function TreemapImpl({
+  data = NO_ROWS17,
+  index,
+  group,
+  value,
+  color,
+  labels,
+  format,
+  colorFormat,
+  valueFormatter,
+  tone = "chart-1",
+  showLegend = true,
+  showTooltip = true,
+  onSelect,
+  title,
+  summary,
+  isLoading,
+  emptyState,
+  height,
+  chartOptions,
+  actions,
+  fileName,
+  className,
+  ariaLabel,
+  ...rest
+}, ref) {
+  const rows = Array.isArray(data) ? data : NO_ROWS17;
+  const { ref: frameRef, surface, tokens } = useChartSurface(ref);
+  const locale = useLocale();
+  const formatter = useMemo(() => resolveValueFormatter(valueFormatter, format ?? "number", locale), [valueFormatter, format, locale]);
+  const colorFormatter = useMemo(() => resolveValueFormatter(void 0, colorFormat ?? format ?? "number", locale), [colorFormat, format, locale]);
+  const model = useMemo(() => buildTreemapModel({ data: rows, index, group, value, color }), [rows, index, group, value, color]);
+  const colorMode = color ? "numeric" : "category";
+  const colors = useMemo(() => colorsFor4(tokens, tone), [tokens, tone]);
+  const option = useMemo(
+    () => buildTreemapOption({
+      model,
+      hasGroup: !!group,
+      colorMode,
+      toneColor: colors.toneColor,
+      categoryColors: colors.categories,
+      surfaceColor: surface ?? void 0,
+      foregroundColor: colors.foreground || tokens?.foreground || "#111111",
+      labels,
+      valueFormatter: formatter,
+      colorFormatter,
+      colorKey: color,
+      showTooltip,
+      chartOptions,
+      locale
+    }),
+    [model, group, colorMode, colors, surface, tokens, labels, formatter, colorFormatter, color, showTooltip, chartOptions, locale]
+  );
+  const onEvents = useMemo(
+    () => onSelect ? {
+      click: (params) => {
+        const leaf = params.data?.leaf;
+        if (leaf) onSelect(leaf.row);
+      }
+    } : void 0,
+    [onSelect]
+  );
+  const dataTable = useMemo(
+    () => treemapDataTable(model, { index, group, value, color }, { value: formatter, color: colorFormatter }, labels, locale),
+    [model, index, group, value, color, formatter, colorFormatter, labels, locale]
+  );
+  const resolvedSummary = useMemo(
+    () => summary === "auto" ? buildTreemapSummary(model, title, labels, locale) : summary,
+    [summary, model, title, labels, locale]
+  );
+  const label2 = ariaLabel ?? textOf9(locale).chart(labels?.[value] ?? value ?? "");
+  const legendCategories = model.categories.length > MAX_CATEGORIES2 ? [...model.categories.slice(0, MAX_CATEGORIES2), otherSeriesLabel(locale)] : model.categories;
+  const legend = !showLegend ? null : colorMode === "numeric" ? /* @__PURE__ */ jsx("div", { "data-slot": "treemap-legend", className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground tabular-nums", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    color && /* @__PURE__ */ jsx("span", { children: labels?.[color] ?? color }),
+    /* @__PURE__ */ jsx("span", { children: colorFormatter(model.shadeMin) }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-2 w-24 rounded-sm", style: { backgroundImage: rampGradientCss(tone) } }),
+    /* @__PURE__ */ jsx("span", { children: colorFormatter(model.shadeMax) })
+  ] }) }) : group ? /* @__PURE__ */ jsx(Legend, { categories: legendCategories, labels }) : null;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...chartRootProps(rest),
+      ref: frameRef,
+      title,
+      summary: resolvedSummary,
+      isLoading: isLoading ?? false,
+      isEmpty: rows.length === 0,
+      emptyState,
+      height,
+      variant: "bar",
+      ariaLabel: label2,
+      className,
+      dataTable,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(EChart, { option, onEvents, height: "100%", ariaLabel: label2, actions, fileName, exportHeader: { title, summary: resolvedSummary } }) }),
+        legend
+      ] })
+    }
+  );
+}
+var Treemap = forwardRef(TreemapImpl);
+Treemap.displayName = "Treemap";
+var TEXT23 = {
+  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 = () => TEXT23[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, 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, 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), locale);
+}
+var THRESHOLD_TONE_STYLES = {
+  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 } = THRESHOLD_TONE_STYLES[tone];
+  const label2 = t.tones[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-table-threshold-cell",
+      "data-tone": tone,
+      className: cn("flex items-center justify-end gap-1.5 tabular-nums", toneClass),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: text }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.toneNote(label2) })
+      ]
+    }
+  );
+}
+function useControlledState(controlledValue, defaultValue, onChange) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = useCallback(
+    (updaterOrValue) => {
+      onChange?.(updaterOrValue);
+      if (!isControlled) {
+        setInternalValue(updaterOrValue);
+      }
+    },
+    [onChange, isControlled]
+  );
+  return [value, setValue];
+}
+var DataTableContext = createContext(null);
+function useDataTable() {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) throw new Error("useDataTable must be used inside <DataTable>");
+  return ctx;
+}
+var NO_ROWS18 = [];
+function DataTable({
+  columns = NO_ROWS18,
+  data = NO_ROWS18,
+  enableSorting = true,
+  sorting: sortingProp,
+  onSortingChange,
+  enableFiltering = false,
+  columnFilters: columnFiltersProp,
+  onColumnFiltersChange,
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  enablePagination = false,
+  pagination: paginationProp,
+  onPaginationChange,
+  pageCount,
+  rowCount,
+  manualFiltering,
+  manualSorting,
+  isLoading = false,
   enableRowSelection = false,
   rowSelection: rowSelectionProp,
   onRowSelectionChange,
@@ -5474,7 +8576,7 @@ function DataTable({
   children
 }) {
   const locale = useLocale();
-  const t = TEXT14[uiLanguage(locale)];
+  const t = TEXT23[uiLanguage(locale)];
   const [sorting, setSorting] = useControlledState(sortingProp, [], onSortingChange);
   const [columnFilters, setColumnFilters] = useControlledState(
     columnFiltersProp,
@@ -5758,19 +8860,19 @@ var DataTableContent = forwardRef(
           }) }, headerGroup.id)) }),
           /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from({ length: enablePagination ? table.getState().pagination.pageSize : 5 }).map(
             (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-slot": "data-table-skeleton-row", children: Array.from({ length: visibleColumnCount }).map((__, j) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, j)) }, i)
-          ) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : void 0, children: row.getVisibleCells().map((cell) => {
-            const meta = cell.column.columnDef.meta;
-            const comparisonColumn = comparisonOf.get(cell.column.id);
+          ) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : void 0, children: row.getVisibleCells().map((cell2) => {
+            const meta = cell2.column.columnDef.meta;
+            const comparisonColumn = comparisonOf.get(cell2.column.id);
             const comparisonCell = comparisonColumn ? row.getVisibleCells().find((c) => c.column.id === comparisonColumn.id) : void 0;
             return /* @__PURE__ */ jsxs(
               TableCell,
               {
                 className: columnClassName(meta, {
-                  isComparison: comparisonIds.has(cell.column.id),
-                  isHost: comparisonOf.has(cell.column.id)
+                  isComparison: comparisonIds.has(cell2.column.id),
+                  isHost: comparisonOf.has(cell2.column.id)
                 }),
                 children: [
-                  flexRender(cell.column.columnDef.cell, cell.getContext()),
+                  flexRender(cell2.column.columnDef.cell, cell2.getContext()),
                   comparisonCell && /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -5785,7 +8887,7 @@ var DataTableContent = forwardRef(
                   )
                 ]
               },
-              cell.id
+              cell2.id
             );
           }) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
             TableCell,
@@ -5920,16 +9022,16 @@ DataTableColumnVisibility.displayName = "DataTableColumnVisibility";
 var SIGNED_NUMBER = /^[+-]\s?[^\d\s=+\-@]{0,3}\d[\d,.]*[^\d\s=+\-@]{0,4}$/;
 function toCsv(header, rows, options = {}) {
   const { bom = true, guardFormulas = false } = options;
-  const field = (cell, guard) => {
-    let text = cell === null || cell === void 0 ? "" : String(cell);
-    if (guard && typeof cell === "string" && /^[=+\-@]/.test(text) && !SIGNED_NUMBER.test(text)) {
+  const field = (cell2, guard) => {
+    let text = cell2 === null || cell2 === void 0 ? "" : String(cell2);
+    if (guard && typeof cell2 === "string" && /^[=+\-@]/.test(text) && !SIGNED_NUMBER.test(text)) {
       text = `'${text}`;
     }
     return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
   };
   const lines = [
     header.map((h) => field(h, false)).join(","),
-    ...rows.map((row) => row.map((cell) => field(cell, guardFormulas)).join(","))
+    ...rows.map((row) => row.map((cell2) => field(cell2, guardFormulas)).join(","))
   ];
   return (bom ? "\uFEFF" : "") + lines.join("\r\n");
 }
@@ -5983,7 +9085,7 @@ function DataTableExport({
       disabled: isLoading,
       children: [
         /* @__PURE__ */ jsx(Download, { className: "size-4", "aria-hidden": "true" }),
-        children ?? TEXT14[uiLanguage(locale)].exportCsv
+        children ?? TEXT23[uiLanguage(locale)].exportCsv
       ]
     }
   );
@@ -6017,10 +9119,153 @@ function DataTablePreset({
   ] });
 }
 DataTablePreset.displayName = "DataTablePreset";
+var FLOOR_SHARE = 0.2;
+var DEFAULT_CHART_HEIGHT3 = 288;
+var LIGHT_TEXT_FROM = 0.55;
+var dimText = (v) => v === null || v === void 0 || v === "" ? EMPTY_VALUE : String(v);
+var pivotCellKey = (rowKey, colKey) => `${rowKey.join("
")}\0${colKey.join("
")}`;
+function buildPivotModel(config) {
+  const { data, rows, columns, values } = config;
+  const rowKeys = /* @__PURE__ */ new Map();
+  const colKeys = /* @__PURE__ */ new Map();
+  const cells = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    if (!row || typeof row !== "object") continue;
+    const rk = rows.map((d) => dimText(row[d]));
+    const ck = columns.map((d) => dimText(row[d]));
+    const rId = rk.join("
");
+    const cId = ck.join("
");
+    if (!rowKeys.has(rId)) rowKeys.set(rId, rk);
+    if (!colKeys.has(cId)) colKeys.set(cId, ck);
+    cells.set(pivotCellKey(rk, ck), row);
+  }
+  const ranges = {};
+  for (const value of values) {
+    let [lo, hi] = [Infinity, -Infinity];
+    for (const row of cells.values()) {
+      const n = toChartNumber(row[value]);
+      if (n !== null) [lo, hi] = [Math.min(lo, n), Math.max(hi, n)];
+    }
+    ranges[value] = { min: Number.isFinite(lo) ? lo : 0, max: Number.isFinite(hi) ? hi : 0 };
+  }
+  return {
+    rowKeys: rowKeys.size > 0 ? [...rowKeys.values()] : [rows.map(() => EMPTY_VALUE)],
+    colKeys: colKeys.size > 0 ? [...colKeys.values()] : [columns.map(() => EMPTY_VALUE)],
+    cells,
+    ranges
+  };
+}
+function pivotSpans(keys, level) {
+  const out = [];
+  const prefix = (k) => k.slice(0, level + 1).join("
");
+  keys.forEach((key, i) => {
+    const last = out[out.length - 1];
+    if (last && prefix(keys[last.start]) === prefix(key)) last.span++;
+    else out.push({ text: key[level] ?? "", start: i, span: 1 });
+  });
+  return out;
+}
+var TEXT24 = {
+  ja: { table: "\u30D4\u30DC\u30C3\u30C8\u8868" },
+  en: { table: "Pivot table" }
+};
+var NO_ROWS19 = [];
+var asList = (v) => Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+function PivotTable({
+  data = NO_ROWS19,
+  rows: rowDims,
+  columns: colDims,
+  values: valueKeys,
+  formats,
+  labels,
+  highlight = false,
+  tone = "chart-1",
+  onSelect,
+  title,
+  summary,
+  isLoading,
+  emptyState,
+  maxHeight = 480,
+  className,
+  ariaLabel
+}) {
+  const locale = useLocale();
+  const t = TEXT24[uiLanguage(resolveLocale(locale))];
+  const dataRows = Array.isArray(data) ? data : NO_ROWS19;
+  const rows = useMemo(() => asList(rowDims), [rowDims]);
+  const columns = useMemo(() => asList(colDims), [colDims]);
+  const values = useMemo(() => asList(valueKeys), [valueKeys]);
+  const model = useMemo(() => buildPivotModel({ data: dataRows, rows, columns, values }), [dataRows, rows, columns, values]);
+  const label2 = (key) => labels?.[key] ?? key;
+  const R = rows.length;
+  const C = columns.length;
+  const V = values.length;
+  const valueRow = V > 1 || C === 0;
+  const H = C + (valueRow ? 1 : 0);
+  const shaded = (value) => highlight === true || highlight === value;
+  const isEmpty = dataRows.length === 0;
+  const ready = !isLoading && !isEmpty;
+  const cellStyle = (value, n) => {
+    if (n === null || !shaded(value)) return void 0;
+    const { min, max } = model.ranges[value] ?? { min: 0, max: 0 };
+    const ratio = max > min ? Math.min(1, Math.max(0, (n - min) / (max - min))) : 1;
+    const share = Math.round((FLOOR_SHARE + (1 - FLOOR_SHARE) * ratio) * 100);
+    return {
+      backgroundColor: `color-mix(in oklch, var(--${tone}) ${share}%, var(--card))`,
+      color: ratio >= LIGHT_TEXT_FROM ? "var(--card)" : void 0
+    };
+  };
+  const headerRows = Array.from({ length: H }, (_, h) => {
+    const lead = h === H - 1 ? rows.map((d, level) => /* @__PURE__ */ jsx(TableHead, { scope: "col", className: cn(level === 0 && "pl-0"), children: label2(d) }, `dim-${d}`)) : h === 0 && R > 0 ? [/* @__PURE__ */ jsx(TableHead, { colSpan: R, rowSpan: H - 1, "aria-hidden": "true" }, "corner")] : [];
+    const cells = h < C ? pivotSpans(model.colKeys, h).map((s) => /* @__PURE__ */ jsx(TableHead, { scope: "colgroup", colSpan: s.span * Math.max(1, V), className: "text-right", children: label2(s.text) }, `c-${h}-${s.start}`)) : model.colKeys.flatMap(
+      (_2, ci) => values.map((v) => /* @__PURE__ */ jsx(TableHead, { scope: "col", className: "text-right", children: label2(v) }, `v-${ci}-${v}`))
+    );
+    return /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+      lead,
+      cells
+    ] }, `h-${h}`);
+  });
+  const rowSpans = rows.map((_, level) => new Map(pivotSpans(model.rowKeys, level).map((s) => [s.start, s.span])));
+  const body = model.rowKeys.map((rk, ri) => /* @__PURE__ */ jsxs(TableRow, { children: [
+    rows.map((d, level) => {
+      const span = rowSpans[level].get(ri);
+      if (span === void 0) return null;
+      return /* @__PURE__ */ jsx(TableHead, { scope: span > 1 ? "rowgroup" : "row", rowSpan: span, className: cn("align-top font-medium text-foreground", level === 0 && "pl-0"), children: label2(rk[level] ?? "") }, `rh-${d}`);
+    }),
+    model.colKeys.flatMap(
+      (ck, ci) => values.map((v) => {
+        const row = model.cells.get(pivotCellKey(rk, ck));
+        const n = row ? toChartNumber(row[v]) : null;
+        const text = formatValue(n, formats?.[v] ?? "number", locale);
+        return /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", style: cellStyle(v, n), children: onSelect && row ? /* @__PURE__ */ jsx("button", { type: "button", className: "w-full cursor-pointer text-right tabular-nums", onClick: () => onSelect(row), children: text }) : text }, `c-${ci}-${v}`);
+      })
+    )
+  ] }, `r-${ri}`));
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      title,
+      summary,
+      isLoading: isLoading ?? false,
+      isEmpty,
+      emptyState,
+      height: ready ? "auto" : DEFAULT_CHART_HEIGHT3,
+      variant: "list",
+      plotRole: "group",
+      ariaLabel: ariaLabel ?? title ?? t.table,
+      className,
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "pivot-table", className: "relative w-full overflow-auto", style: { maxHeight }, children: /* @__PURE__ */ jsxs("table", { "data-slot": "table", "aria-label": ariaLabel ?? title ?? t.table, className: "w-full caption-bottom text-sm", children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-card", children: headerRows }),
+        /* @__PURE__ */ jsx(TableBody, { children: body })
+      ] }) })
+    }
+  );
+}
 var FilterBarContext = createContext(null);
-var TEXT15 = {
+var TEXT25 = {
   ja: {
     filters: "\u30D5\u30A3\u30EB\u30BF\u30FC",
+    addFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u8FFD\u52A0",
     selected: (count) => ` (${count}\u4EF6\u9078\u629E\u4E2D)`,
     remove: (filter, option) => `${filter}: ${option} \u3092\u524A\u9664`,
     clear: "\u30AF\u30EA\u30A2",
@@ -6028,13 +9273,14 @@ var TEXT15 = {
   },
   en: {
     filters: "Filters",
+    addFilter: "Add filter",
     selected: (count) => ` (${count} selected)`,
     remove: (filter, option) => `Remove ${filter}: ${option}`,
     clear: "Clear",
     clearAll: "Clear all filters"
   }
 };
-var useText2 = () => TEXT15[uiLanguage(useLocale())];
+var useText2 = () => TEXT25[uiLanguage(useLocale())];
 function useFilterBar() {
   const ctx = useContext(FilterBarContext);
   if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>");
@@ -6301,6 +9547,11 @@ function fiscalPeriodRange(date, {
   const periodStart = addMonths(startOfMonth(subMonths(date, into)), offset * length);
   return { from: periodStart, to: endOfMonth(addMonths(periodStart, length - 1)) };
 }
+function comparisonRange({ from, to }, kind) {
+  if (kind === "previous-year") return { from: subYears(from, 1), to: subYears(to, 1) };
+  const days = differenceInCalendarDays(to, from) + 1;
+  return { from: subDays(from, days), to: subDays(from, 1) };
+}
 var PRESET_LABELS = {
   ja: {
     today: "\u4ECA\u65E5",
@@ -6337,9 +9588,17 @@ var PRESET_LABELS = {
     lastFiscalYear: "Last fiscal year"
   }
 };
-var TEXT16 = {
-  ja: { placeholder: "\u671F\u9593\u3092\u9078\u629E", rangeSeparator: " - " },
-  en: { placeholder: "Pick a date range", rangeSeparator: " \u2013 " }
+var TEXT26 = {
+  ja: {
+    placeholder: "\u671F\u9593\u3092\u9078\u629E",
+    rangeSeparator: " - ",
+    comparison: { "previous-period": "\u524D\u671F\u9593", "previous-year": "\u524D\u5E74\u540C\u671F" }
+  },
+  en: {
+    placeholder: "Pick a date range",
+    rangeSeparator: " \u2013 ",
+    comparison: { "previous-period": "vs. previous period", "previous-year": "vs. same period last year" }
+  }
 };
 var calendarLocale = (locale) => uiLanguage(locale) === "ja" ? ja : void 0;
 function createDatePresets({
@@ -6355,7 +9614,7 @@ function createDatePresets({
     const today = now();
     return { from: startOfDay(subDays(today, days - 1)), to: endOfDay(today) };
   };
-  const toDate2 = (unit) => () => {
+  const toDate3 = (unit) => () => {
     const today = now();
     return {
       from: fiscalPeriodRange(today, { unit, fiscalYearStartMonth: startMonth }).from,
@@ -6405,9 +9664,9 @@ function createDatePresets({
         return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
       }
     },
-    { label: t.thisQuarter, getValue: toDate2("quarter") },
+    { label: t.thisQuarter, getValue: toDate3("quarter") },
     { label: t.lastQuarter, getValue: previous("quarter") },
-    { label: t.thisFiscalYear, getValue: toDate2("year") },
+    { label: t.thisFiscalYear, getValue: toDate3("year") },
     { label: t.lastFiscalYear, getValue: previous("year") }
   ];
 }
@@ -6428,6 +9687,7 @@ var DateRangePicker = forwardRef(
     showPresets = true,
     locale: localeProp,
     fiscalYearStartMonth,
+    comparison,
     maxDate,
     minDate,
     placeholder,
@@ -6438,7 +9698,7 @@ var DateRangePicker = forwardRef(
     const [open, setOpen] = useState(false);
     const isMobile = useIsMobile();
     const locale = useLocale(localeProp);
-    const t = TEXT16[uiLanguage(locale)];
+    const t = TEXT26[uiLanguage(locale)];
     const presets = useMemo(
       () => presetsProp ?? createDatePresets({ locale, fiscalYearStartMonth }),
       [presetsProp, locale, fiscalYearStartMonth]
@@ -6463,6 +9723,10 @@ var DateRangePicker = forwardRef(
     };
     const selectedPreset = findMatchingPreset(presets, value);
     const presetLabel = selectedPreset?.label;
+    const comparisonText = comparison && value?.from && value.to ? (() => {
+      const c = comparisonRange({ from: value.from, to: value.to }, comparison);
+      return `${t.comparison[comparison]} ${formatDate(c.from, "date", locale)}${t.rangeSeparator}${formatDate(c.to, "date", locale)}`;
+    })() : void 0;
     const endMonth = value?.to ?? value?.from;
     const defaultMonth = endMonth ? isMobile ? endMonth : subMonths(endMonth, 1) : void 0;
     const calendarSelected = value?.from ? { from: value.from, to: value.to ?? void 0 } : void 0;
@@ -6489,7 +9753,8 @@ var DateRangePicker = forwardRef(
             presetLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { children: presetLabel }),
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: formatDateRange2() })
-            ] }) : /* @__PURE__ */ jsx("span", { children: formatDateRange2() })
+            ] }) : /* @__PURE__ */ jsx("span", { children: formatDateRange2() }),
+            comparisonText && /* @__PURE__ */ jsx("span", { "data-slot": "date-range-picker-comparison", className: "text-muted-foreground", children: comparisonText })
           ]
         }
       ),
@@ -6655,7 +9920,7 @@ function RemoveButton({ label: label2, onRemove, iconClassName }) {
     }
   );
 }
-var TEXT17 = {
+var TEXT27 = {
   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" }
 };
@@ -6675,7 +9940,7 @@ var SearchableSelect = forwardRef(
     className
   }, ref) {
     const [open, setOpen] = useState(false);
-    const t = TEXT17[uiLanguage(useLocale())];
+    const t = TEXT27[uiLanguage(useLocale())];
     const allOptions = useMemo(() => flattenOptions(options), [options]);
     const selectedOption = useMemo(
       () => allOptions.find((opt) => opt.value === value),
@@ -6728,7 +9993,7 @@ var SearchableSelect = forwardRef(
   }
 );
 SearchableSelect.displayName = "SearchableSelect";
-var TEXT18 = {
+var TEXT28 = {
   ja: {
     placeholder: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
     search: "\u691C\u7D22...",
@@ -6745,10 +10010,10 @@ var TEXT18 = {
   }
 };
 var NO_OPTIONS3 = [];
-var NO_VALUES = [];
+var NO_VALUES2 = [];
 var MultiSelect = forwardRef(function MultiSelect2({
   options = NO_OPTIONS3,
-  value = NO_VALUES,
+  value = NO_VALUES2,
   onChange,
   onSearch,
   maxCount = 3,
@@ -6761,7 +10026,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
 }, ref) {
   const [open, setOpen] = useState(false);
   const listId = useId();
-  const t = TEXT18[uiLanguage(useLocale())];
+  const t = TEXT28[uiLanguage(useLocale())];
   const allOptions = useMemo(() => flattenOptions(options), [options]);
   const selectedOptions = useMemo(
     () => allOptions.filter((opt) => value.includes(opt.value)),
@@ -6891,10 +10156,10 @@ function computeTargetProgress(current, target, options) {
     elapsed
   };
 }
-var DAY_MS = 24 * 60 * 60 * 1e3;
+var DAY_MS2 = 24 * 60 * 60 * 1e3;
 function inferPeriodGrain(period) {
   if (!period) return void 0;
-  const days = (toTime(period.end) - toTime(period.start)) / DAY_MS;
+  const days = (toTime(period.end) - toTime(period.start)) / DAY_MS2;
   if (!Number.isFinite(days)) return void 0;
   const near = (min, max) => days >= min - 1 / 24 && days <= max + 1 / 24;
   if (near(1, 1)) return "day";
@@ -6936,7 +10201,7 @@ var deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
+        badge: "h-5 rounded-md px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5"
       },
       sentiment: {
@@ -6946,9 +10211,9 @@ var deltaVariants = cva(
       }
     },
     compoundVariants: [
-      { variant: "badge", sentiment: "positive", className: "border-positive/20 bg-positive-subtle dark:border-positive/25" },
-      { variant: "badge", sentiment: "negative", className: "border-negative/20 bg-negative-subtle dark:border-negative/25" },
-      { variant: "badge", sentiment: "neutral", className: "border-neutral/20 bg-neutral-subtle dark:border-neutral/25" }
+      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
+      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
+      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" }
     ],
     defaultVariants: {
       variant: "badge",
@@ -6981,6 +10246,7 @@ function deltaAriaLabel(result, locale, change = "relative", format, digits) {
   if (amount === null) return t.none(label2);
   return t.change(label2, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up");
 }
+var SENTIMENT_TEXT = { positive: "text-positive", negative: "text-negative", neutral: "text-neutral" };
 var Delta = forwardRef(
   ({
     value,
@@ -7010,7 +10276,7 @@ var Delta = forwardRef(
     const comparable = result.direction !== "none";
     const Icon = result.direction === "up" ? ArrowUp : result.direction === "down" ? ArrowDown : ArrowRight;
     const text = formatChange(result, display, locale, format, changeDigits);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
@@ -7020,16 +10286,31 @@ var Delta = forwardRef(
         "data-sentiment": result.sentiment,
         "aria-label": deltaAriaLabel(result, locale, display, format, changeDigits),
         className: cn(
-          deltaVariants({ variant, sentiment: result.sentiment }),
+          variant === "badge" ? "inline-flex w-fit shrink-0 items-center gap-1.5 font-medium whitespace-nowrap tabular-nums" : deltaVariants({ variant, sentiment: result.sentiment }),
+          // The chip carries the colour of the change; the root repeats it for the "—" case and for `className` consumers.
+          variant === "badge" && SENTIMENT_TEXT[result.sentiment],
           !comparable && "text-muted-foreground",
           className
         ),
         ...props,
-        children: [
+        children: variant === "badge" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "delta-chip",
+              className: cn(deltaVariants({ variant, sentiment: result.sentiment }), !comparable && "text-muted-foreground"),
+              children: [
+                comparable && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text ?? DELTA_NOT_COMPARABLE })
+              ]
+            }
+          ),
+          showLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-xs font-normal text-muted-foreground", children: result.label })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           comparable && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text ?? DELTA_NOT_COMPARABLE }),
           showLabel && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "font-normal text-muted-foreground", children: result.label })
-        ]
+        ] })
       }
     );
   }
@@ -7043,7 +10324,7 @@ 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 TEXT19 = {
+var TEXT29 = {
   ja: {
     target: "\u76EE\u6A19",
     provisional: "\u901F\u5831",
@@ -7175,7 +10456,7 @@ function KpiCard({
   ...props
 }) {
   const locale = useLocale(localeProp);
-  const t = TEXT19[uiLanguage(locale)];
+  const t = TEXT29[uiLanguage(locale)];
   const allComparisons = [...comparisonProp ? [comparisonProp] : [], ...comparisons ?? []];
   const comparison = allComparisons[0];
   const isProvisional = provisional !== void 0 && provisional !== false;
@@ -7205,7 +10486,7 @@ function KpiCard({
   const targetBar = hasTarget && !neutral && !byPoints && !lower;
   if (summary !== void 0) warnShallowSummary(summary, t);
   const cardClass = cn("row-span-2 grid content-start gap-y-0 grid-rows-subgrid", className);
-  const valueSize = small ? "text-xl @[218px]/card:text-2xl" : "text-2xl @[218px]/card:text-4xl";
+  const valueSize = small ? "text-xl @[218px]/card:text-2xl" : "text-2xl @[218px]/card:text-[26px]";
   if (isLoading) {
     return /* @__PURE__ */ jsxs(
       Card,
@@ -7310,7 +10591,8 @@ function KpiCard({
       format,
       change: display,
       digits,
-      locale
+      locale,
+      className: "min-w-0 shrink whitespace-normal"
     },
     i
   ));
@@ -7318,16 +10600,20 @@ function KpiCard({
   const longValue = valueText.length > LONG_VALUE_CHARS;
   return /* @__PURE__ */ jsxs(Card, { "data-slot": "kpi-card", size, className: cardClass, ...props, children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: HEADER_CLASS, children: [
-      /* @__PURE__ */ jsx(CardDescription, { "data-slot": "kpi-card-label", title: label2, className: "col-start-1 min-w-0 truncate text-[13px] leading-snug font-medium text-muted-foreground", children: label2 }),
+      /* @__PURE__ */ jsxs(CardDescription, { "data-slot": "kpi-card-label", title: label2, className: "col-start-1 flex min-w-0 items-center gap-2 text-[13px] leading-snug font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label2 }),
+        sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label, className: "shrink-0" })
+      ] }),
       /* @__PURE__ */ jsxs(
         CardTitle,
         {
           "data-slot": "kpi-card-value",
           title: valueText,
           className: cn(
-            "col-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 leading-none font-semibold tracking-tight tabular-nums",
+            "col-start-1 flex min-w-0 items-center gap-x-2 gap-y-1 leading-none font-medium tracking-tight tabular-nums",
             // Fixed size: the step follows the card width only, never the length of the value.
-            valueSize
+            valueSize,
+            (longValue || isProvisional) && "flex-wrap"
           ),
           children: [
             /* @__PURE__ */ jsx("span", { "data-slot": "kpi-card-value-text", className: longValue ? "min-w-0 break-words" : "whitespace-nowrap", children: longValue ? digitGroups(valueText).map((group, i) => /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
@@ -7335,11 +10621,11 @@ function KpiCard({
               /* @__PURE__ */ jsx("wbr", {})
             ] }, i)) : valueText }),
             isProvisional && /* @__PURE__ */ jsx(Badge, { "data-slot": "kpi-card-provisional", variant: "outline", className: "align-middle", children: provisionalLabel }),
-            sample && /* @__PURE__ */ jsx(SampleBadge, { label: sample.label })
+            comparison && !stacked && !longValue && deltas
           ]
         }
       ),
-      comparison && (stacked ? /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-comparisons", className: "flex flex-wrap items-center gap-1", children: deltas }) : /* @__PURE__ */ jsx(CardAction, { className: longValue ? DELTA_UNDER_PLACEMENT : DELTA_PLACEMENT, children: deltas })),
+      comparison && (stacked ? /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-comparisons", className: "flex flex-wrap items-center gap-1", children: deltas }) : longValue && /* @__PURE__ */ jsx(CardAction, { className: DELTA_UNDER_PLACEMENT, children: deltas })),
       hasPrevious && comparison && /* @__PURE__ */ jsx("div", { "data-slot": "kpi-card-previous", className: "col-span-full text-sm text-muted-foreground tabular-nums", children: result?.previous != null ? t.previous(baseline ?? "", fmt(result.previous)) : t.noPrevious(baseline ?? "") }),
       bar && progress && /* @__PURE__ */ jsxs("div", { "data-slot": "kpi-card-target-progress", className: "col-span-full mt-1 flex min-w-0 flex-col gap-1.5", children: [
         /* @__PURE__ */ jsxs(
@@ -7426,7 +10712,7 @@ function updatedAtText(updatedAt, display, locale, t, now, timeZone) {
   const absolute2 = formatDate(updatedAt, "datetime", locale, { timeZone });
   return display === "absolute" ? t.updatedAbsolute(absolute2) : t.updatedBoth(absolute2, relative2);
 }
-var TEXT20 = {
+var TEXT30 = {
   ja: {
     flat: (value) => `\u5909\u5316\u306A\u3057 ${value}%`,
     up: (value) => `${value}% \u5897\u52A0`,
@@ -7455,7 +10741,7 @@ 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 t = TEXT20[uiLanguage(useLocale())];
+    const t = TEXT30[uiLanguage(useLocale())];
     const ariaLabel = direction === "neutral" ? t.flat(value) : direction === "up" ? t.up(value) : t.down(value);
     return /* @__PURE__ */ jsxs(
       "span",
@@ -7476,93 +10762,6 @@ 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: 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, 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])
-);
-var legacyColorTones = {
-  green: "positive",
-  gray: "neutral",
-  yellow: "warning",
-  red: "negative",
-  blue: "info"
-};
-var toneStyles = {
-  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive", border: "border-positive/20 dark:border-positive/25" },
-  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative", border: "border-negative/20 dark:border-negative/25" },
-  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning", border: "border-warning/20 dark:border-warning/25" },
-  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info", border: "border-info/20 dark:border-info/25" },
-  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral", border: "border-neutral/20 dark:border-neutral/25" }
-};
-var resolveTone = (color) => {
-  if (color === void 0) return "neutral";
-  if (Object.hasOwn(toneStyles, color)) return 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, locale);
-  return /* @__PURE__ */ jsxs(
-    Badge,
-    {
-      ref,
-      "data-slot": "status-badge",
-      variant: "outline",
-      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-1.5 rounded-full", style.dot), "aria-hidden": "true" }),
-        displayLabel
-      ]
-    }
-  );
-});
-StatusBadge.displayName = "StatusBadge";
 var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -7575,7 +10774,69 @@ var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref)
   );
 });
 Placeholder.displayName = "Placeholder";
+function DraftChart({ children }) {
+  if (!import.meta.env.DEV) return null;
+  return /* @__PURE__ */ jsx(DraftChartPreview, { children });
+}
+var STYLE_ID = "vantage-draft-chart";
+var DRAFT_CSS = `@layer components {
+  [data-sq-draft] {
+    position: relative;
+    isolation: isolate;
+  }
+  [data-sq-draft]::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    z-index: 2147483647;
+    border-radius: inherit;
+    background-color: var(--background);
+    opacity: 0.75;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+  [data-sq-draft]:hover::after {
+    opacity: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-sq-draft]::after {
+      transition: none;
+    }
+  }
+}`;
+function DraftChartPreview({ children }) {
+  const ref = useRef(null);
+  useInsertionEffect(() => {
+    let style = document.getElementById(STYLE_ID);
+    if (!style) {
+      style = document.createElement("style");
+      style.id = STYLE_ID;
+      document.head.appendChild(style);
+    }
+    if (style.textContent !== DRAFT_CSS) style.textContent = DRAFT_CSS;
+  }, []);
+  useLayoutEffect(() => {
+    const wrapper = ref.current;
+    if (!wrapper) return;
+    let marked = null;
+    const mark = () => {
+      const root = wrapper.firstElementChild;
+      if (root === marked) return;
+      marked?.removeAttribute("data-sq-draft");
+      root?.setAttribute("data-sq-draft", "");
+      marked = root;
+    };
+    mark();
+    const observer = new MutationObserver(mark);
+    observer.observe(wrapper, { childList: true });
+    return () => {
+      observer.disconnect();
+      marked?.removeAttribute("data-sq-draft");
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "draft-chart", style: { display: "contents" }, children });
+}
 
-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
+export { AppShell, AreaChart, AttentionList, BarChart, BarList, BoxPlotChart, COMPARISON_LABELS, CategoryBar, ChartFrame, ComboChart, DEFAULT_SAMPLE_LABEL, DELTA_NOT_COMPARABLE, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTableExport, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, Delta, DonutChart, DraftChart, FilledMap, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, ForecastChart, FunnelSteps, Heatmap, HistogramChart, KpiCard, Legend, LineChart, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, PairedChart, PivotTable, Placeholder, ProgressCircle, RECORD_MIN_POINTS, SampleBadge, SampleClaim, SampleData, ScatterChart, SearchableSelect, SectionHeader, SegmentedControl, StatusBadge, SymbolMap, Tracker, Treemap, TrendIndicator, UpdatedAt, WaterfallChart, comparisonBaseline, comparisonLabel, computeComparison, computeTargetProgress, defaultChangeDisplay, defaultPresets, deltaVariants, detectRecord, fillKpiTemplate, flattenOptions, formatChange, formatChangeAmount, formatRelativeTime, funnelStepsVariants, inferPeriodGrain, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, tableToCsv, toCsv, toneForValue, useDataTable, useSampleMark };
+//# sourceMappingURL=chunk-SC7K2RD6.js.map
+//# sourceMappingURL=chunk-SC7K2RD6.js.map