@squadbase/vantage 0.6.1-dev2.5f947f1 → 0.6.2-dev1.31accb1

package/dist/{chunk-LSRMRIXA.js → chunk-AG6RZ2RR.js}

@@ -1,9 +1,9 @@
-import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from './chunk-RPZAALCX.js';
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Tooltip, TooltipTrigger, TooltipContent, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from './chunk-OB6UBJXF.js';
 import { Button } from './chunk-PXRX5PEC.js';
 import { cn } from './chunk-A2UUGASH.js';
-import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment, createContext, useId, useContext } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1, createContext, useId, useContext } from 'react';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Check, Copy, Download, Search, ArrowUp, ArrowDown, ArrowUpDown, Columns3, CalendarIcon, ChevronDownIcon, Minus, ChevronRight, XIcon, LoaderIcon, CheckIcon, ChevronDown, X } from 'lucide-react';
 import * as echarts from 'echarts';
 import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
@@ -21,17 +21,22 @@ var PageShellHeader = forwardRef(
     {
       ref,
       "data-slot": "page-shell-header",
-      className: cn(
-        "grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-6 border-b px-6 py-12",
-        className
-      ),
+      className: cn("flex flex-wrap items-start gap-x-4 gap-y-6 border-b px-6 py-12", className),
       ...props
     }
   )
 );
 PageShellHeader.displayName = "PageShellHeader";
 var PageShellHeading = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell-heading", className: cn("min-w-0", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "page-shell-heading",
+      className: cn("min-w-0 grow basis-80", className),
+      ...props
+    }
+  )
 );
 PageShellHeading.displayName = "PageShellHeading";
 var PageShellTitle = forwardRef(
@@ -64,7 +69,7 @@ var PageShellHeaderEnd = forwardRef(
     {
       ref,
       "data-slot": "page-shell-header-end",
-      className: cn("flex shrink-0 flex-col items-end gap-2", className),
+      className: cn("flex max-w-full shrink-0 flex-col flex-wrap items-end gap-2", className),
       ...props
     }
   )
@@ -101,7 +106,7 @@ var PageShellSummary = forwardRef(
       ref,
       "data-slot": "page-shell-summary",
       className: cn(
-        "col-span-full grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+        "grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
         className
       ),
       ...props
@@ -481,15 +486,17 @@ function DashboardCardPreset({
     footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: footerClassName, children: footer })
   ] });
 }
-
-// src/components/chart-theme.ts
 var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
 var normalizeContext;
+var ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i;
 function toCanvasColor(value) {
   const raw = value.trim();
   if (!raw) return null;
   if (normalizeContext === void 0) {
-    normalizeContext = document.createElement("canvas").getContext("2d");
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    normalizeContext = canvas.getContext("2d", { willReadFrequently: true });
   }
   const ctx = normalizeContext;
   if (!ctx) return raw;
@@ -498,7 +505,12 @@ function toCanvasColor(value) {
   const onBlack = ctx.fillStyle;
   ctx.fillStyle = "#ffffff";
   ctx.fillStyle = raw;
-  return onBlack === ctx.fillStyle ? onBlack : null;
+  if (onBlack !== ctx.fillStyle || typeof onBlack !== "string") return null;
+  if (ZRENDER_COLOR_RE.test(onBlack)) return onBlack;
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillRect(0, 0, 1, 1);
+  const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data;
+  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
 }
 function readChartTokens(el) {
   if (typeof document === "undefined") return null;
@@ -598,6 +610,36 @@ function buildChartTheme(tokens) {
     }
   };
 }
+function useChartTokens() {
+  const [tokens, setTokens] = useState(() => readChartTokens());
+  useEffect(() => {
+    const sync = () => {
+      setTokens((prev) => {
+        const next = readChartTokens();
+        return sameChartTokens(prev, next) ? prev : next;
+      });
+    };
+    sync();
+    return watchChartTokens(sync);
+  }, []);
+  return tokens;
+}
+var SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/;
+var CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
+function resolveChartColors(colors, tokens) {
+  return colors.map((color) => {
+    const token = SERIES_TOKEN_NAME_RE.exec(color.trim());
+    if (token) return tokens?.series[Number(token[1]) - 1] ?? "";
+    if (typeof document === "undefined") return color;
+    let value = color.trim();
+    const cssVar = CSS_VAR_RE.exec(value);
+    if (cssVar) {
+      const styles = getComputedStyle(document.documentElement);
+      value = styles.getPropertyValue(cssVar[1]).trim() || (cssVar[2] ?? "").trim();
+    }
+    return toCanvasColor(value) ?? "";
+  });
+}
 var EChart = forwardRef(function EChart2({
   option,
   height,
@@ -741,6 +783,945 @@ var EChart = forwardRef(function EChart2({
   );
 });
 EChart.displayName = "EChart";
+
+// src/components/chart-utils.ts
+var DEFAULT_CHART_COLORS = [
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5"
+];
+var TOKEN_NAME_RE = /^chart-[1-5]$/;
+function chartColorToCss(color) {
+  const value = color.trim();
+  return TOKEN_NAME_RE.test(value) ? `var(--${value})` : value;
+}
+function chartColorAt(colors, i) {
+  const palette = colors && colors.length > 0 ? colors : DEFAULT_CHART_COLORS;
+  return palette[i % palette.length];
+}
+function chartColorsFor(colors, count) {
+  return Array.from({ length: count }, (_, i) => chartColorAt(colors, i));
+}
+function tintCss(cssColor, percent) {
+  return `color-mix(in oklab, ${cssColor} ${percent}%, transparent)`;
+}
+var numberFormat = new Intl.NumberFormat("ja-JP", { maximumFractionDigits: 2 });
+var defaultValueFormatter = (value) => numberFormat.format(value);
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function sortBarListData(data, sortOrder) {
+  const rows = [...data];
+  if (sortOrder === "ascending") rows.sort((a, b) => a.value - b.value);
+  else if (sortOrder === "descending") rows.sort((a, b) => b.value - a.value);
+  return rows;
+}
+function barListWidths(values) {
+  const max = Math.max(0, ...values);
+  if (max === 0) return values.map(() => 0);
+  return values.map((v) => v <= 0 ? 0 : Math.max(1, v / max * 100));
+}
+function categoryBarSegments(values) {
+  const clean = values.map((v) => Number.isFinite(v) && v > 0 ? v : 0);
+  const total = clean.reduce((sum, v) => sum + v, 0);
+  let running = 0;
+  return clean.map((v) => {
+    const start = total === 0 ? 0 : running / total * 100;
+    running += v;
+    return { width: total === 0 ? 0 : v / total * 100, start, end: running };
+  });
+}
+function categoryBarLabels(values, minGap = 8) {
+  const segments = categoryBarSegments(values).filter((s) => s.width > 0);
+  if (segments.length === 0) return [];
+  const labels = [{ position: 0, value: 0 }];
+  segments.forEach((s, i) => {
+    const label = { position: s.start + s.width, value: s.end };
+    const prev = labels[labels.length - 1];
+    if (label.position - prev.position >= minGap) labels.push(label);
+    else if (i === segments.length - 1 && labels.length > 1) labels[labels.length - 1] = label;
+  });
+  return labels;
+}
+function categoryBarMarkerPosition(value, values) {
+  const total = values.reduce((sum, v) => sum + (Number.isFinite(v) && v > 0 ? v : 0), 0);
+  if (total === 0) return 0;
+  return clamp(value / total * 100, 0, 100);
+}
+function categoryBarMarkerSegment(value, values) {
+  const segments = categoryBarSegments(values);
+  const index = segments.findIndex((s) => s.width > 0 && value <= s.end);
+  if (index !== -1) return index;
+  for (let i = segments.length - 1; i >= 0; i--) if (segments[i].width > 0) return i;
+  return 0;
+}
+function progressCircleGeometry(value, max, radius, strokeWidth) {
+  const ratio = max > 0 && Number.isFinite(value) ? clamp(value / max, 0, 1) : 0;
+  const normalizedRadius = Math.max(0, radius - strokeWidth / 2);
+  const circumference = 2 * Math.PI * normalizedRadius;
+  return { size: radius * 2, normalizedRadius, circumference, offset: circumference * (1 - ratio), ratio };
+}
+function cellNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "bigint") return Number(value);
+  if (typeof value === "string" && value.trim() !== "") {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+}
+function cartesianSeriesValues(data, categories, type = "default") {
+  const raw = categories.map((category) => data.map((row) => cellNumber(row[category])));
+  if (type !== "percent") return raw;
+  return raw.map(
+    (values) => values.map((value, i) => {
+      if (value === null) return null;
+      const total = categories.reduce((sum, _, k) => sum + Math.abs(raw[k][i] ?? 0), 0);
+      return total === 0 ? 0 : Math.abs(value) / total * 100;
+    })
+  );
+}
+function withAlpha(color, alpha) {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
+    const n = Number.parseInt(full, 16);
+    return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(color.trim());
+  if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
+  return color;
+}
+var HTML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
+}
+function tooltipHtml(title, rows, valueFormatter) {
+  const lines = rows.map(
+    (row) => `<div style="display:flex;align-items:center;gap:8px;line-height:20px"><span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${escapeHtml(row.color)}"></span><span style="flex:1;opacity:.8">${escapeHtml(row.name)}</span><span style="font-weight:500;font-variant-numeric:tabular-nums;margin-left:12px">${row.value === null ? "\u2013" : escapeHtml(valueFormatter(row.value))}</span></div>`
+  );
+  return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(title)}</div>${lines.join("")}`;
+}
+var DIMMED = 0.3;
+function buildCartesianOption(cfg) {
+  const {
+    kind,
+    data,
+    index,
+    categories,
+    palette,
+    valueFormatter,
+    type = "default",
+    layout = "horizontal",
+    curveType = "linear",
+    fill = "gradient",
+    connectNulls = false,
+    showLegend = true,
+    showTooltip = true,
+    showGridLines = true,
+    showXAxis = true,
+    showYAxis = true,
+    startEndOnly = false,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    autoMinValue = false,
+    allowDecimals = true,
+    xAxisLabel,
+    yAxisLabel,
+    barCategoryGap,
+    showDots = false,
+    active = null
+  } = cfg;
+  const labels = data.map((row) => String(row[index] ?? ""));
+  const values = cartesianSeriesValues(data, categories, kind === "line" ? "default" : type);
+  const stacked = kind !== "line" && type !== "default";
+  const percent = kind !== "line" && type === "percent";
+  const horizontalBars = kind === "bar" && layout === "vertical";
+  const last = labels.length - 1;
+  const series = categories.map((category, c) => {
+    const color = palette[c] || void 0;
+    const dimSeries = active !== null && active.category !== category;
+    if (kind === "bar") {
+      const radius = stacked ? 0 : horizontalBars ? [0, 3, 3, 0] : [3, 3, 0, 0];
+      return {
+        type: "bar",
+        name: category,
+        stack: stacked ? "total" : void 0,
+        barCategoryGap,
+        itemStyle: { color, borderRadius: radius },
+        emphasis: { focus: "series" },
+        data: values[c].map(
+          (value, i) => active !== null && !(active.category === category && active.index === i) ? { value, itemStyle: { opacity: DIMMED } } : value
+        )
+      };
+    }
+    const areaStyle = kind !== "area" || fill === "none" ? void 0 : fill === "solid" || !color ? { opacity: fill === "solid" ? 0.3 : 0.2 } : {
+      color: {
+        type: "linear",
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: withAlpha(color, 0.35) },
+          { offset: 1, color: withAlpha(color, 0) }
+        ]
+      }
+    };
+    return {
+      type: "line",
+      name: category,
+      stack: stacked ? "total" : void 0,
+      smooth: curveType === "smooth",
+      step: curveType === "step" ? "middle" : void 0,
+      connectNulls,
+      symbol: "circle",
+      symbolSize: 6,
+      showSymbol: showDots || labels.length === 1,
+      lineStyle: { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
+      itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
+      areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
+      emphasis: { focus: "series" },
+      data: values[c]
+    };
+  });
+  const categoryAxis = {
+    type: "category",
+    data: labels,
+    show: horizontalBars ? showYAxis : showXAxis,
+    boundaryGap: kind === "bar",
+    inverse: horizontalBars,
+    axisTick: { show: false },
+    axisLabel: {
+      hideOverlap: true,
+      interval: startEndOnly ? (i) => i === 0 || i === last : "auto",
+      ...horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" } : {}
+    },
+    name: horizontalBars ? yAxisLabel : xAxisLabel,
+    nameLocation: "middle",
+    nameGap: horizontalBars ? (yAxisWidth ?? 48) + 8 : 28
+  };
+  const valueAxis = {
+    type: "value",
+    show: horizontalBars ? showXAxis : showYAxis,
+    min: percent ? 0 : minValue,
+    max: percent ? 100 : maxValue,
+    scale: autoMinValue && minValue == null,
+    minInterval: allowDecimals ? void 0 : 1,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: showGridLines },
+    axisLabel: {
+      formatter: percent ? (v) => `${v}%` : (v) => valueFormatter(v),
+      ...!horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" } : {}
+    },
+    name: horizontalBars ? xAxisLabel : yAxisLabel,
+    nameLocation: "middle",
+    nameGap: horizontalBars ? 28 : (yAxisWidth ?? 48) + 8
+  };
+  return {
+    animationDuration: 400,
+    legend: {
+      show: showLegend,
+      top: 0,
+      right: 0,
+      type: "scroll",
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 16
+    },
+    grid: {
+      top: showLegend ? 36 : 12,
+      // Lines start and end on the outermost ticks, so the last label hangs past the plot.
+      right: kind === "bar" ? 12 : 24,
+      bottom: xAxisLabel ? 24 : 4,
+      left: yAxisLabel ? 24 : 4,
+      containLabel: true
+    },
+    tooltip: {
+      show: showTooltip,
+      trigger: "axis",
+      axisPointer: { type: kind === "bar" ? "shadow" : "line" },
+      formatter: (params) => {
+        const list = Array.isArray(params) ? params : [params];
+        const i = list[0]?.dataIndex ?? 0;
+        const row = data[i] ?? {};
+        return tooltipHtml(
+          String(row[index] ?? ""),
+          list.map((p) => ({
+            name: p.seriesName ?? "",
+            color: typeof p.color === "string" ? p.color : "currentColor",
+            value: cellNumber(row[p.seriesName ?? ""])
+          })),
+          valueFormatter
+        );
+      }
+    },
+    xAxis: horizontalBars ? valueAxis : categoryAxis,
+    yAxis: horizontalBars ? categoryAxis : valueAxis,
+    series
+  };
+}
+function donutTotal(data, value) {
+  return data.reduce((sum, row) => {
+    const n = cellNumber(row[value]);
+    return n !== null && n > 0 ? sum + n : sum;
+  }, 0);
+}
+function buildDonutOption(cfg) {
+  const { data, category, value, palette, valueFormatter, variant = "donut", showTooltip = true, active = null } = cfg;
+  return {
+    animationDuration: 400,
+    tooltip: {
+      show: showTooltip,
+      trigger: "item",
+      formatter: (params) => {
+        const p = params;
+        const n = cellNumber(p.value);
+        const share = typeof p.percent === "number" ? ` (${p.percent.toFixed(1)}%)` : "";
+        return tooltipHtml(
+          `${p.name ?? ""}${share}`,
+          [{ name: value, color: typeof p.color === "string" ? p.color : "currentColor", value: n }],
+          valueFormatter
+        );
+      }
+    },
+    series: [
+      {
+        type: "pie",
+        radius: variant === "donut" ? ["72%", "100%"] : [0, "100%"],
+        center: ["50%", "50%"],
+        avoidLabelOverlap: true,
+        label: { show: false },
+        labelLine: { show: false },
+        // A hairline gap between slices instead of a border — no background colour to match.
+        padAngle: data.length > 1 ? 1 : 0,
+        itemStyle: { borderRadius: variant === "donut" ? 2 : 0 },
+        emphasis: { scale: true, scaleSize: 4 },
+        data: data.map((row, i) => {
+          const name = String(row[category] ?? "");
+          const color = palette[i] || void 0;
+          const n = cellNumber(row[value]);
+          return {
+            name,
+            value: n !== null && n > 0 ? n : 0,
+            itemStyle: { color, opacity: active !== null && active !== name ? DIMMED : 1 }
+          };
+        })
+      }
+    ]
+  };
+}
+function nextChartSelection(current, category, index) {
+  return current && current.category === category && current.index === index ? null : { category, index };
+}
+function chartSelectionPayload(selection, data, eventType) {
+  if (!selection) return null;
+  return { ...data[selection.index], eventType, categoryClicked: selection.category };
+}
+function useChartSelection(data, onValueChange, eventType) {
+  const [active, setActive] = useState(null);
+  const latest = useRef({ data, onValueChange, active });
+  latest.current = { data, onValueChange, active };
+  const interactive = onValueChange !== void 0;
+  const onEvents = useMemo(() => {
+    if (!interactive) return void 0;
+    return {
+      click: (raw) => {
+        const p = raw;
+        if (p.componentType !== "series" || typeof p.dataIndex !== "number") return;
+        const category = eventType === "slice" ? p.name ?? "" : p.seriesName ?? "";
+        const next = nextChartSelection(latest.current.active, category, p.dataIndex);
+        latest.current.active = next;
+        setActive(next);
+        latest.current.onValueChange?.(chartSelectionPayload(next, latest.current.data, eventType));
+      }
+    };
+  }, [interactive, eventType]);
+  return { active: interactive ? active : null, onEvents };
+}
+var AreaChart = forwardRef(function AreaChart2({
+  data,
+  index,
+  categories,
+  colors,
+  valueFormatter = defaultValueFormatter,
+  type = "default",
+  curveType = "linear",
+  fill = "gradient",
+  connectNulls = false,
+  showLegend = true,
+  showTooltip = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  yAxisWidth,
+  minValue,
+  maxValue,
+  autoMinValue = false,
+  allowDecimals = true,
+  xAxisLabel,
+  yAxisLabel,
+  onValueChange,
+  height,
+  loading,
+  ariaLabel,
+  className
+}, ref) {
+  const tokens = useChartTokens();
+  const palette = useMemo(
+    () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
+    [colors, categories.length, tokens]
+  );
+  const { active, onEvents } = useChartSelection(data, onValueChange, "dot");
+  const option = useMemo(
+    () => buildCartesianOption({
+      kind: "area",
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      type,
+      curveType,
+      fill,
+      connectNulls,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      showDots: onValueChange !== void 0,
+      active
+    }),
+    [
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      type,
+      curveType,
+      fill,
+      connectNulls,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      onValueChange,
+      active
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    EChart,
+    {
+      ref,
+      option,
+      onEvents,
+      height,
+      loading,
+      ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u9762\u30B0\u30E9\u30D5`,
+      className: cn("h-80", className)
+    }
+  );
+});
+AreaChart.displayName = "AreaChart";
+var BarChart = forwardRef(function BarChart2({
+  data,
+  index,
+  categories,
+  colors,
+  valueFormatter = defaultValueFormatter,
+  type = "default",
+  layout = "horizontal",
+  barCategoryGap,
+  showLegend = true,
+  showTooltip = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  yAxisWidth,
+  minValue,
+  maxValue,
+  autoMinValue = false,
+  allowDecimals = true,
+  xAxisLabel,
+  yAxisLabel,
+  onValueChange,
+  height,
+  loading,
+  ariaLabel,
+  className
+}, ref) {
+  const tokens = useChartTokens();
+  const palette = useMemo(
+    () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
+    [colors, categories.length, tokens]
+  );
+  const { active, onEvents } = useChartSelection(data, onValueChange, "bar");
+  const option = useMemo(
+    () => buildCartesianOption({
+      kind: "bar",
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      type,
+      layout,
+      barCategoryGap,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      active
+    }),
+    [
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      type,
+      layout,
+      barCategoryGap,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      active
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    EChart,
+    {
+      ref,
+      option,
+      onEvents,
+      height,
+      loading,
+      ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u68D2\u30B0\u30E9\u30D5`,
+      className: cn("h-80", className)
+    }
+  );
+});
+BarChart.displayName = "BarChart";
+var LineChart = forwardRef(function LineChart2({
+  data,
+  index,
+  categories,
+  colors,
+  valueFormatter = defaultValueFormatter,
+  curveType = "linear",
+  connectNulls = false,
+  showLegend = true,
+  showTooltip = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  yAxisWidth,
+  minValue,
+  maxValue,
+  autoMinValue = false,
+  allowDecimals = true,
+  xAxisLabel,
+  yAxisLabel,
+  onValueChange,
+  height,
+  loading,
+  ariaLabel,
+  className
+}, ref) {
+  const tokens = useChartTokens();
+  const palette = useMemo(
+    () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
+    [colors, categories.length, tokens]
+  );
+  const { active, onEvents } = useChartSelection(data, onValueChange, "dot");
+  const option = useMemo(
+    () => buildCartesianOption({
+      kind: "line",
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      curveType,
+      connectNulls,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      showDots: onValueChange !== void 0,
+      active
+    }),
+    [
+      data,
+      index,
+      categories,
+      palette,
+      valueFormatter,
+      curveType,
+      connectNulls,
+      showLegend,
+      showTooltip,
+      showGridLines,
+      showXAxis,
+      showYAxis,
+      startEndOnly,
+      yAxisWidth,
+      minValue,
+      maxValue,
+      autoMinValue,
+      allowDecimals,
+      xAxisLabel,
+      yAxisLabel,
+      onValueChange,
+      active
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    EChart,
+    {
+      ref,
+      option,
+      onEvents,
+      height,
+      loading,
+      ariaLabel: ariaLabel ?? `${categories.join("\u30FB")}\u306E\u6298\u308C\u7DDA\u30B0\u30E9\u30D5`,
+      className: cn("h-80", className)
+    }
+  );
+});
+LineChart.displayName = "LineChart";
+var DonutChart = forwardRef(function DonutChart2({
+  data,
+  category,
+  value,
+  colors,
+  variant = "donut",
+  valueFormatter = defaultValueFormatter,
+  label,
+  showLabel = true,
+  showTooltip = true,
+  onValueChange,
+  loading,
+  ariaLabel,
+  className
+}, ref) {
+  const tokens = useChartTokens();
+  const palette = useMemo(
+    () => resolveChartColors(chartColorsFor(colors, data.length), tokens),
+    [colors, data.length, tokens]
+  );
+  const { active, onEvents } = useChartSelection(data, onValueChange, "slice");
+  const option = useMemo(
+    () => buildDonutOption({
+      data,
+      category,
+      value,
+      palette,
+      valueFormatter,
+      variant,
+      showTooltip,
+      active: active?.category ?? null
+    }),
+    [data, category, value, palette, valueFormatter, variant, showTooltip, active]
+  );
+  const centerLabel = label ?? valueFormatter(donutTotal(data, value));
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "donut-chart", className: cn("relative size-40", className), children: [
+    /* @__PURE__ */ jsx(
+      EChart,
+      {
+        option,
+        onEvents,
+        loading,
+        ariaLabel: ariaLabel ?? `${category}\u5225\u306E${value}`,
+        className: "h-full"
+      }
+    ),
+    variant === "donut" && showLabel && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "donut-chart-label",
+        className: "pointer-events-none absolute inset-0 flex items-center justify-center px-[18%] text-center text-lg font-semibold text-foreground tabular-nums",
+        children: centerLabel
+      }
+    )
+  ] });
+});
+DonutChart.displayName = "DonutChart";
+var BarList = forwardRef(function BarList2({
+  data,
+  valueFormatter = defaultValueFormatter,
+  sortOrder = "descending",
+  color = "chart-1",
+  showAnimation = false,
+  onValueChange,
+  className,
+  ...props
+}, ref) {
+  const [mounted, setMounted] = useState(!showAnimation);
+  useEffect(() => {
+    if (!showAnimation) return;
+    const frame = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(frame);
+  }, [showAnimation]);
+  const rows = sortBarListData(data, sortOrder);
+  const widths = barListWidths(rows.map((row) => row.value));
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "bar-list", className: cn("flex justify-between gap-6 text-sm", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1 space-y-1.5", children: rows.map((row, i) => {
+      const css = chartColorToCss(row.color ?? color);
+      const label = row.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: row.href,
+          target: /^https?:\/\//.test(row.href) ? "_blank" : void 0,
+          rel: /^https?:\/\//.test(row.href) ? "noreferrer" : void 0,
+          onClick: (event) => event.stopPropagation(),
+          className: "truncate hover:underline",
+          children: row.name
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: row.name });
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "bar-list-bar",
+            className: cn(
+              "absolute inset-y-0 left-0 rounded-sm",
+              showAnimation && "transition-[width] duration-700 ease-out"
+            ),
+            style: { width: `${mounted ? widths[i] : 0}%`, background: tintCss(css, 28) }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative flex min-w-0 items-center px-2 text-foreground", children: label })
+      ] });
+      const rowClass = "relative flex h-8 w-full items-center rounded-sm";
+      return onValueChange ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "bar-list-row",
+          onClick: () => onValueChange(row),
+          className: cn(
+            rowClass,
+            "text-left outline-none hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: content
+        },
+        row.key ?? row.name
+      ) : /* @__PURE__ */ jsx("div", { "data-slot": "bar-list-row", className: rowClass, children: content }, row.key ?? row.name);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 space-y-1.5 text-right", children: rows.map((row) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-8 items-center justify-end font-medium text-foreground tabular-nums",
+        children: valueFormatter(row.value)
+      },
+      row.key ?? row.name
+    )) })
+  ] });
+});
+BarList.displayName = "BarList";
+var CategoryBar = forwardRef(function CategoryBar2({ values, colors, marker, showLabels = true, valueFormatter = defaultValueFormatter, className, ...props }, ref) {
+  const segments = categoryBarSegments(values);
+  const labels = showLabels ? categoryBarLabels(values) : [];
+  const markerPosition = marker ? categoryBarMarkerPosition(marker.value, values) : 0;
+  const markerColor = marker ? chartColorToCss(chartColorAt(colors, categoryBarMarkerSegment(marker.value, values))) : "";
+  const markerDot = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "block h-4 w-1 rounded-full ring-2 ring-background",
+      style: { background: markerColor }
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "category-bar", className: cn("w-full", className), ...props, children: [
+    showLabels && labels.length > 0 && /* @__PURE__ */ jsx("div", { "data-slot": "category-bar-labels", className: "relative mb-2 h-4 text-xs text-muted-foreground tabular-nums", children: labels.map((label, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute top-0",
+          label.position <= 0 ? "left-0" : label.position >= 100 ? "right-0" : "-translate-x-1/2"
+        ),
+        style: label.position > 0 && label.position < 100 ? { left: `${label.position}%` } : void 0,
+        children: valueFormatter(label.value)
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-full items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-full w-full gap-0.5 overflow-hidden rounded-full", children: segments.map(
+        (segment, i) => segment.width > 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "category-bar-segment",
+            className: "h-full",
+            style: { flex: `${segment.width} 1 0%`, background: chartColorToCss(chartColorAt(colors, i)) }
+          },
+          i
+        ) : null
+      ) }),
+      marker && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "category-bar-marker",
+          className: cn(
+            "absolute -translate-x-1/2",
+            marker.showAnimation && "transition-[left] duration-700 ease-out"
+          ),
+          style: { left: `${markerPosition}%` },
+          children: marker.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", { "aria-label": marker.tooltip, className: "block py-1" }), children: markerDot }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: marker.tooltip })
+          ] }) : markerDot
+        }
+      )
+    ] })
+  ] });
+});
+CategoryBar.displayName = "CategoryBar";
+var ProgressCircle = forwardRef(function ProgressCircle2({
+  value = 0,
+  max = 100,
+  radius = 32,
+  strokeWidth = 6,
+  color = "chart-1",
+  showAnimation = true,
+  className,
+  children,
+  ...props
+}, ref) {
+  const [mounted, setMounted] = useState(!showAnimation);
+  useEffect(() => {
+    if (!showAnimation) return;
+    const frame = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(frame);
+  }, [showAnimation]);
+  const { size, normalizedRadius, circumference, offset, ratio } = progressCircleGeometry(value, max, radius, strokeWidth);
+  const css = chartColorToCss(color);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "progress-circle",
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      className: cn("relative inline-flex shrink-0 items-center justify-center", className),
+      style: { width: size, height: size },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: radius,
+              cy: radius,
+              r: normalizedRadius,
+              fill: "none",
+              strokeWidth,
+              style: { stroke: tintCss(css, 20) }
+            }
+          ),
+          ratio > 0 && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              "data-slot": "progress-circle-value",
+              cx: radius,
+              cy: radius,
+              r: normalizedRadius,
+              fill: "none",
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeDasharray: `${circumference} ${circumference}`,
+              strokeDashoffset: mounted ? offset : circumference,
+              className: cn(showAnimation && "transition-[stroke-dashoffset] duration-700 ease-out"),
+              style: { stroke: css }
+            }
+          )
+        ] }),
+        children != null && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-foreground tabular-nums", children })
+      ]
+    }
+  );
+});
+ProgressCircle.displayName = "ProgressCircle";
+var DEFAULT_BLOCK_COLOR = "color-mix(in oklab, var(--muted-foreground) 35%, transparent)";
+var Tracker = forwardRef(function Tracker2({ data, defaultColor, hoverEffect = true, className, ...props }, ref) {
+  const fallback = defaultColor ? chartColorToCss(defaultColor) : DEFAULT_BLOCK_COLOR;
+  return /* @__PURE__ */ jsx("div", { ref, "data-slot": "tracker", className: cn("flex h-8 w-full gap-px", className), ...props, children: data.map((block, i) => {
+    const blockClass = cn(
+      "h-full min-w-0 flex-1 rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]",
+      hoverEffect && "transition-opacity hover:opacity-60"
+    );
+    const style = { background: block.color ? chartColorToCss(block.color) : fallback };
+    return block.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          delay: 0,
+          render: /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", "aria-label": block.tooltip, className: blockClass, style })
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { children: block.tooltip })
+    ] }, block.key ?? i) : /* @__PURE__ */ jsx("div", { "data-slot": "tracker-block", className: blockClass, style }, block.key ?? i);
+  }) });
+});
+Tracker.displayName = "Tracker";
 var DEFAULT_COLORS = [
   "bg-chart-1",
   "bg-chart-2",
@@ -883,7 +1864,7 @@ var FunnelSteps = forwardRef(function FunnelSteps2({
           }
         } : {};
         const barInteractionClasses = isClickable ? "cursor-pointer hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none" : void 0;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
           isHorizontal ? /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1014,7 +1995,7 @@ var Sparkline = forwardRef(function Sparkline2({
       className: cn("overflow-visible", className),
       ...props,
       children: [
-        variant === "line" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        variant === "line" && /* @__PURE__ */ jsxs(Fragment, { children: [
           area && /* @__PURE__ */ jsx(
             "path",
             {
@@ -1420,7 +2401,7 @@ function DataTablePreset({
   bulkActions,
   ...tableProps
 }) {
-  const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment, { children: [
     toolbar,
     enableColumnVisibility && /* @__PURE__ */ jsx(DataTableColumnVisibility, { columnLabels })
   ] }) : void 0;
@@ -1576,7 +2557,7 @@ function FilterBarActiveChips({ filters, className }) {
   };
   const activeChips = getActiveChips();
   if (activeChips.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
     Badge,
     {
       variant: "secondary",
@@ -1907,7 +2888,7 @@ function OptionCommandList({
   ));
   return /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearch, children: [
     /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearch }),
-    /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
       isGroupedOptions(options) ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: renderOptions(group.options) }, group.label)) : renderOptions(options)
     ] }) })
@@ -2042,7 +3023,7 @@ var MultiSelect = forwardRef(function MultiSelect2({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             visibleBadges.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 pr-1", children: [
               /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: option.label }),
               /* @__PURE__ */ jsx(
@@ -2222,6 +3203,6 @@ var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref)
 });
 Placeholder.displayName = "Placeholder";
 
-export { AppShell, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
-//# sourceMappingURL=chunk-LSRMRIXA.js.map
-//# sourceMappingURL=chunk-LSRMRIXA.js.map
+export { AppShell, AreaChart, BarChart, BarList, CategoryBar, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, DonutChart, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, LineChart, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, ProgressCircle, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, Tracker, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
+//# sourceMappingURL=chunk-AG6RZ2RR.js.map
+//# sourceMappingURL=chunk-AG6RZ2RR.js.map