@squadbase/vantage 0.6.2-dev1.b332e5a → 0.6.2-dev1.b40ce36

package/dist/chunk-JXFCSF3K.js

@@ -0,0 +1,673 @@
+import { Button } from './chunk-PDOBHMUQ.js';
+import { cn } from './chunk-U736PVHY.js';
+import { createContext, forwardRef, useRef, useState, useMemo, useEffect, useCallback, useContext } from 'react';
+import { use, init } from 'echarts/core';
+import { BarChart, CustomChart, LineChart, PieChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { Check, Copy, Download } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// @squadbase/vantage — generated build. Do not edit.
+var CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))";
+var ChartFrameContext = createContext(false);
+var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+var tokenScopes = /* @__PURE__ */ new WeakMap();
+var OPTION_COLOR_TOKENS = [
+  "--background",
+  "--card",
+  "--muted",
+  "--primary",
+  "--destructive",
+  ...["positive", "negative", "warning", "neutral", "info"].flatMap((tone) => ["", "-fill", "-subtle"].map((suffix) => `--${tone}${suffix}`))
+];
+var normalizeContext;
+var ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i;
+function toCanvasColor(value) {
+  const raw = value.trim();
+  if (!raw) return null;
+  if (normalizeContext === void 0) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    normalizeContext = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  const ctx = normalizeContext;
+  if (!ctx) return raw;
+  ctx.fillStyle = "#000000";
+  ctx.fillStyle = raw;
+  const onBlack = ctx.fillStyle;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = raw;
+  if (onBlack !== ctx.fillStyle || typeof onBlack !== "string") return null;
+  if (ZRENDER_COLOR_RE.test(onBlack)) return onBlack;
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillRect(0, 0, 1, 1);
+  const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data;
+  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
+}
+function readChartTokens(el) {
+  if (typeof document === "undefined") return null;
+  const target = el ?? document.documentElement;
+  if (!target) return null;
+  const styles = getComputedStyle(target);
+  const read = (name) => toCanvasColor(styles.getPropertyValue(name));
+  const series = [];
+  for (const token of SERIES_TOKENS) {
+    const color = read(token);
+    if (color) series.push(color);
+  }
+  const tokens = {
+    series,
+    colors: Object.fromEntries(OPTION_COLOR_TOKENS.map((name) => [name, styles.getPropertyValue(name).trim()])),
+    surface: readChartSurface(target),
+    ...styles.fontFamily ? { fontFamily: styles.fontFamily } : {},
+    foreground: read("--foreground"),
+    mutedForeground: read("--muted-foreground"),
+    border: read("--border"),
+    popover: read("--popover"),
+    popoverForeground: read("--popover-foreground")
+  };
+  tokenScopes.set(tokens, target);
+  return tokens;
+}
+function sameChartTokens(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return tokenScopes.get(a) === tokenScopes.get(b) && a.surface === b.surface && Object.keys(a.colors ?? {}).length === Object.keys(b.colors ?? {}).length && Object.entries(a.colors ?? {}).every(([name, value]) => b.colors?.[name] === value) && a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.fontFamily === b.fontFamily && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
+}
+function watchChartTokens(onChange, scope) {
+  if (typeof document === "undefined") return () => {
+  };
+  let frame = 0;
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      onChange();
+    });
+  };
+  const themeObserver = new MutationObserver(schedule);
+  const attributeFilter = ["class", "style", "data-theme"];
+  for (let node = scope ?? document.body ?? document.documentElement; node; node = node.parentElement) {
+    themeObserver.observe(node, { attributes: true, attributeFilter });
+  }
+  const styleObserver = new MutationObserver(schedule);
+  if (document.head) {
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["href", "media", "disabled"]
+    });
+  }
+  const onLoad = (event) => {
+    if (event.target instanceof HTMLLinkElement) schedule();
+  };
+  document.addEventListener("load", onLoad, true);
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", schedule);
+  return () => {
+    if (frame) cancelAnimationFrame(frame);
+    themeObserver.disconnect();
+    styleObserver.disconnect();
+    document.removeEventListener("load", onLoad, true);
+    media.removeEventListener("change", schedule);
+  };
+}
+function axisTheme(tokens, splitLine) {
+  const line = tokens.border ?? void 0;
+  return {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: { show: true, color: tokens.mutedForeground ?? void 0, fontSize: 12 },
+    // Faint horizontal rules only: the border colour at low opacity.
+    splitLine: { show: splitLine, lineStyle: { color: line ? [line] : void 0, opacity: 0.5, width: 1 } },
+    splitArea: { show: false }
+  };
+}
+function buildChartTheme(tokens) {
+  const text = tokens.foreground ?? void 0;
+  const muted = tokens.mutedForeground ?? void 0;
+  const line = tokens.border ?? void 0;
+  return {
+    // Let the page background show through: charts sit on cards, not on a canvas.
+    backgroundColor: "transparent",
+    ...tokens.series.length > 0 ? { color: tokens.series } : {},
+    textStyle: { color: text, ...tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {} },
+    title: { textStyle: { color: text }, subtextStyle: { color: muted } },
+    legend: { textStyle: { color: muted } },
+    categoryAxis: axisTheme(tokens, false),
+    valueAxis: axisTheme(tokens, true),
+    logAxis: axisTheme(tokens, true),
+    timeAxis: axisTheme(tokens, true),
+    tooltip: {
+      // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
+      transitionDuration: 0,
+      backgroundColor: tokens.popover ?? void 0,
+      borderColor: line,
+      borderWidth: 1,
+      padding: [8, 12],
+      // Rounded card with a soft shadow; in dark mode the shadow barely shows, so the border carries the edge.
+      extraCssText: "border-radius:8px;box-shadow:var(--shadow-card, 0 4px 12px rgb(0 0 0 / 0.08));",
+      textStyle: {
+        color: tokens.popoverForeground ?? void 0,
+        fontSize: 12,
+        ...tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}
+      },
+      axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } }
+    }
+  };
+}
+function useChartTokens(scope) {
+  const [tokens, setTokens] = useState(() => readChartTokens());
+  const tokensRef = useRef(tokens);
+  useEffect(() => {
+    const target = scope && "current" in scope ? scope.current : scope;
+    const sync = () => {
+      const next = readChartTokens(target);
+      if (sameChartTokens(tokensRef.current, next)) return;
+      tokensRef.current = next;
+      setTokens(next);
+    };
+    sync();
+    return watchChartTokens(sync, target);
+  }, [scope]);
+  return tokens;
+}
+var SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/;
+var TONE_NAME_RE = /^(?:positive|warning|negative|neutral|info)(?:-fill)?$/;
+var CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
+var EMBEDDED_VAR_RE = /var\(\s*(--[\w-]+)\s*\)/g;
+function resolveChartColors(colors, tokens) {
+  return colors.map((color) => {
+    const token = SERIES_TOKEN_NAME_RE.exec(color.trim());
+    if (token) return tokens?.series[Number(token[1]) - 1] ?? "";
+    if (TONE_NAME_RE.test(color.trim())) {
+      if (typeof document === "undefined") return "";
+      const target = (tokens && tokenScopes.get(tokens)) ?? document.documentElement;
+      return toCanvasColor(getComputedStyle(target).getPropertyValue(`--${color.trim()}`)) ?? "";
+    }
+    if (typeof document === "undefined") return color;
+    let value = color.trim();
+    const cssVar = CSS_VAR_RE.exec(value);
+    const styles = getComputedStyle((tokens && tokenScopes.get(tokens)) ?? document.documentElement);
+    if (cssVar) {
+      value = styles.getPropertyValue(cssVar[1]).trim() || (cssVar[2] ?? "").trim();
+    } else if (value.includes("var(")) {
+      value = value.replace(EMBEDDED_VAR_RE, (_, name) => styles.getPropertyValue(name).trim());
+    }
+    return toCanvasColor(value) ?? "";
+  });
+}
+function resolveFillColors(tokens) {
+  const [positive = "", warning = "", negative = "", neutral = ""] = resolveChartColors(
+    ["positive-fill", "warning-fill", "negative-fill", "neutral-fill"],
+    tokens
+  );
+  return { positive, warning, negative, neutral };
+}
+var TRANSPARENT_RE = /^(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\))$/i;
+function readChartSurface(el) {
+  if (typeof document === "undefined") return null;
+  for (let node = el; node; node = node.parentElement) {
+    const bg = getComputedStyle(node).backgroundColor.trim();
+    if (bg && !TRANSPARENT_RE.test(bg)) {
+      const color = toCanvasColor(bg);
+      if (color) return color;
+    }
+  }
+  return toCanvasColor(getComputedStyle(el ?? document.documentElement).getPropertyValue("--background"));
+}
+var WIDTH_BUCKET = 40;
+function useChartSurface(forwarded, tokens) {
+  const [node, setNode] = useState(null);
+  const scopedTokens = useChartTokens(node);
+  const [surface, setSurface] = useState(void 0);
+  const [width, setWidth] = useState(void 0);
+  const ref = useCallback(
+    (el) => {
+      setNode(el);
+      if (typeof forwarded === "function") forwarded(el);
+      else if (forwarded) forwarded.current = el;
+    },
+    [forwarded]
+  );
+  useEffect(() => {
+    if (!node) return;
+    setSurface(readChartSurface(node) ?? void 0);
+  }, [node, tokens, scopedTokens]);
+  useEffect(() => {
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const update = (w) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET);
+    update(node.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => update(entries[0]?.contentRect.width ?? 0));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return { ref, surface, width, tokens: scopedTokens };
+}
+use([
+  BarChart,
+  CustomChart,
+  LineChart,
+  PieChart,
+  GridComponent,
+  LegendComponent,
+  MarkAreaComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  TooltipComponent,
+  CanvasRenderer
+]);
+var HEADER_PAD_X = 16;
+var HEADER_PAD_TOP = 16;
+var HEADER_PAD_BOTTOM = 12;
+var HEADER_LINE_HEIGHT = 20;
+var HEADER_GAP = 4;
+var HEADER_FONT_SIZE = 14;
+function wrapChartText(text, maxWidth, measure) {
+  const lines = [];
+  let line = "";
+  for (const ch of text) {
+    if (ch === "\n") {
+      lines.push(line);
+      line = "";
+      continue;
+    }
+    if (line !== "" && measure(line + ch) > maxWidth) {
+      lines.push(line);
+      line = ch.trim() === "" ? "" : ch;
+    } else {
+      line += ch;
+    }
+  }
+  if (line !== "" || lines.length === 0) lines.push(line);
+  return lines.filter((l, i) => l !== "" || i < lines.length - 1);
+}
+function chartExportHeaderLayout(header, width, measure) {
+  const title = header?.title?.trim();
+  const summary = header?.summary?.trim();
+  if (!title && !summary) return { lines: [], height: 0 };
+  const room = Math.max(40, width - HEADER_PAD_X * 2);
+  const lines = [
+    ...title ? wrapChartText(title, room, (t) => measure(t, "title")).map((text) => ({ text, kind: "title" })) : [],
+    ...summary ? wrapChartText(summary, room, (t) => measure(t, "summary")).map((text) => ({ text, kind: "summary" })) : []
+  ];
+  const gap = title && summary ? HEADER_GAP : 0;
+  return { lines, height: HEADER_PAD_TOP + lines.length * HEADER_LINE_HEIGHT + gap + HEADER_PAD_BOTTOM };
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("PNG \u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F"));
+    image.src = src;
+  });
+}
+async function pngWithHeader(dataUrl, header, look, pixelRatio) {
+  const image = await loadImage(dataUrl);
+  const width = image.width / pixelRatio;
+  const plotHeight = image.height / pixelRatio;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return dataUrl;
+  const font = (kind) => `${kind === "title" ? 500 : 400} ${HEADER_FONT_SIZE}px ${look.fontFamily}`;
+  ctx.font = font("title");
+  const layout = chartExportHeaderLayout(header, width, (text, kind) => {
+    ctx.font = font(kind);
+    return ctx.measureText(text).width;
+  });
+  if (layout.height === 0) return dataUrl;
+  canvas.width = Math.round(image.width);
+  canvas.height = Math.round((layout.height + plotHeight) * pixelRatio);
+  ctx.scale(pixelRatio, pixelRatio);
+  ctx.fillStyle = look.background;
+  ctx.fillRect(0, 0, width, layout.height + plotHeight);
+  ctx.textBaseline = "middle";
+  let y = HEADER_PAD_TOP;
+  let previous = null;
+  for (const line of layout.lines) {
+    if (previous === "title" && line.kind === "summary") y += HEADER_GAP;
+    ctx.font = font(line.kind);
+    ctx.fillStyle = line.kind === "title" ? look.color : look.mutedColor;
+    ctx.fillText(line.text, HEADER_PAD_X, y + HEADER_LINE_HEIGHT / 2);
+    y += HEADER_LINE_HEIGHT;
+    previous = line.kind;
+  }
+  ctx.drawImage(image, 0, layout.height, width, plotHeight);
+  return canvas.toDataURL("image/png");
+}
+function useResolvedChartColors(colors) {
+  const tokens = useChartTokens();
+  const key = colors.join("\0");
+  return useMemo(() => resolveChartColors(colors, tokens), [key, tokens]);
+}
+var COMPONENT_MAIN_TYPES = /* @__PURE__ */ new Set([
+  "title",
+  "legend",
+  "grid",
+  "xAxis",
+  "yAxis",
+  "polar",
+  "radiusAxis",
+  "angleAxis",
+  "radar",
+  "dataZoom",
+  "visualMap",
+  "tooltip",
+  "axisPointer",
+  "toolbox",
+  "brush",
+  "geo",
+  "parallel",
+  "parallelAxis",
+  "singleAxis",
+  "graphic",
+  "calendar",
+  "dataset",
+  "series",
+  "matrix",
+  "thumbnail"
+]);
+function echartSetOptionOpts(prev, next) {
+  const special = (o) => "timeline" in o || "baseOption" in o || "options" in o || "media" in o;
+  if (!prev || special(prev) || special(next)) return { notMerge: true, lazyUpdate: true };
+  const types = /* @__PURE__ */ new Set();
+  for (const key of [...Object.keys(prev), ...Object.keys(next)]) if (COMPONENT_MAIN_TYPES.has(key)) types.add(key);
+  return { notMerge: false, replaceMerge: [...types], lazyUpdate: true };
+}
+var ID_TYPES = [
+  "title",
+  "legend",
+  "grid",
+  "xAxis",
+  "yAxis",
+  "polar",
+  "radiusAxis",
+  "angleAxis",
+  "radar",
+  "dataZoom",
+  "visualMap",
+  "geo",
+  "singleAxis",
+  "calendar"
+];
+var createStableIdState = () => ({ ids: /* @__PURE__ */ new Map(), order: /* @__PURE__ */ new Map() });
+function shapeOf(v) {
+  if (Array.isArray(v)) return "[]";
+  if (!v || typeof v !== "object" || Object.getPrototypeOf(v) !== Object.prototype) return ".";
+  const o = v;
+  return `{${Object.keys(o).filter((k) => o[k] !== void 0).sort().map((k) => k === "type" || k === "id" ? `${k}=${String(o[k])}` : `${k}:${shapeOf(o[k])}`).join(",")}}`;
+}
+function withStableIds(option, state = createStableIdState()) {
+  const out = { ...option };
+  const taken = /* @__PURE__ */ new Set();
+  const list = (v) => Array.isArray(v) ? v : v && typeof v === "object" ? [v] : null;
+  const give = (key, pick) => {
+    const items = list(out[key]);
+    if (!items) return;
+    const used = new Set(items.flatMap((c) => c && c.id != null ? [String(c.id)] : []));
+    const bases = items.map((c, i) => {
+      if (!c || typeof c !== "object" || c.id != null) return null;
+      let base = pick(c, i);
+      for (let n = 2; used.has(base) || taken.has(`${key}\0${base}`); n++) base = `${pick(c, i)}#${n}`;
+      used.add(base);
+      taken.add(`${key}\0${base}`);
+      return base;
+    });
+    const prevOrder = state.order.get(key) ?? [];
+    const cur = bases.filter((b) => b !== null);
+    const inOrder = cur.length === prevOrder.length && cur.every((b, i) => b === prevOrder[i]);
+    state.order.set(key, cur);
+    out[key] = items.map((c, i) => {
+      const base = bases[i];
+      if (base == null) return c;
+      const shape = shapeOf(c);
+      const prev = state.ids.get(base);
+      const version = !prev ? 0 : prev.shape === shape && inOrder ? prev.version : prev.version + 1;
+      state.ids.set(base, { shape, version });
+      return { ...c, id: version ? `${base}~v${version}` : base };
+    });
+  };
+  give("series", (c, i) => `series:${typeof c.name === "string" && c.name ? c.name : i}`);
+  for (const key of ID_TYPES) give(key, (_c, i) => `${key}:${i}`);
+  return out;
+}
+function snapshotOption(v) {
+  if (Array.isArray(v)) return v.map(snapshotOption);
+  if (v && typeof v === "object") {
+    const proto = Object.getPrototypeOf(v);
+    if (proto === Object.prototype || proto === null) {
+      return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, snapshotOption(x)]));
+    }
+  }
+  return v;
+}
+function optionEquals(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  if (Array.isArray(a)) {
+    const bb = b;
+    return a.length === bb.length && a.every((v, i) => optionEquals(v, bb[i]));
+  }
+  if (a instanceof Date || b instanceof Date) return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+  const pa = Object.getPrototypeOf(a);
+  if (pa !== Object.prototype && pa !== null || Object.getPrototypeOf(b) !== pa) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  return ka.length === kb.length && ka.every((k) => Object.hasOwn(b, k) && optionEquals(a[k], b[k]));
+}
+function withGraphicFont(option, fontFamily) {
+  const graphic = option.graphic;
+  if (!fontFamily || !Array.isArray(graphic)) return option;
+  return {
+    ...option,
+    graphic: graphic.map(
+      (g) => g && g.type === "text" && g.style && !g.style.fontFamily ? { ...g, style: { ...g.style, fontFamily } } : g
+    )
+  };
+}
+function withMotionPreference(option, reducedMotion) {
+  return { ...option, animation: reducedMotion ? false : option.animation ?? true };
+}
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION_QUERY).matches
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia(REDUCED_MOTION_QUERY);
+    const sync = () => setReduced(media.matches);
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, []);
+  return reduced;
+}
+var EChart = forwardRef(function EChart2({
+  option,
+  height,
+  loading = false,
+  theme,
+  onEvents,
+  ariaLabel,
+  className,
+  actions = false,
+  fileName = "chart.png",
+  exportHeader
+}, ref) {
+  const containerRef = useRef(null);
+  const [instance, setInstance] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const tokens = useChartTokens(containerRef);
+  const reducedMotion = usePrefersReducedMotion();
+  const appliedRef = useRef(null);
+  const snapshotRef = useRef(null);
+  const idStateRef = useRef(createStableIdState());
+  const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
+  const resolvedTheme = theme ?? autoTheme;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const inst = init(container, resolvedTheme, { renderer: "canvas" });
+    appliedRef.current = null;
+    snapshotRef.current = null;
+    container.dataset.rendering = "";
+    inst.on("finished", () => {
+      delete container.dataset.rendering;
+    });
+    setInstance(inst);
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (!inst.isDisposed()) inst.resize();
+      });
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      inst.dispose();
+    };
+  }, [resolvedTheme]);
+  useEffect(() => {
+    if (!instance || instance.isDisposed()) return;
+    const prepared = withGraphicFont(
+      withMotionPreference(option, reducedMotion),
+      theme === void 0 ? tokens?.fontFamily : void 0
+    );
+    if (snapshotRef.current && optionEquals(snapshotRef.current, prepared)) return;
+    if (containerRef.current) containerRef.current.dataset.rendering = "";
+    const next = withStableIds(prepared, idStateRef.current);
+    instance.setOption(next, echartSetOptionOpts(appliedRef.current, next));
+    appliedRef.current = next;
+    snapshotRef.current = snapshotOption(prepared);
+  }, [instance, option, reducedMotion, theme, tokens?.fontFamily]);
+  useEffect(() => {
+    if (!instance || instance.isDisposed()) return;
+    if (loading) instance.showLoading();
+    else instance.hideLoading();
+  }, [instance, loading]);
+  useEffect(() => {
+    if (!instance || instance.isDisposed() || !onEvents) return;
+    const entries = Object.entries(onEvents);
+    for (const [event, handler] of entries) {
+      instance.on(event, handler);
+    }
+    return () => {
+      if (instance.isDisposed()) return;
+      for (const [event, handler] of entries) {
+        instance.off(event, handler);
+      }
+    };
+  }, [instance, onEvents]);
+  const includeTitle = typeof actions === "object" ? actions.includeTitle ?? true : true;
+  const getPngDataUrl = useCallback(async () => {
+    if (!instance) return null;
+    let backgroundColor = "#ffffff";
+    for (let el = containerRef.current; el; el = el.parentElement) {
+      const bg = getComputedStyle(el).backgroundColor;
+      if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+        backgroundColor = bg;
+        break;
+      }
+    }
+    const pixelRatio = 2;
+    const dataUrl = instance.getDataURL({ type: "png", pixelRatio, backgroundColor });
+    if (!includeTitle || !exportHeader || !(exportHeader.title || exportHeader.summary) || !containerRef.current) return dataUrl;
+    try {
+      const style = getComputedStyle(containerRef.current);
+      return await pngWithHeader(
+        dataUrl,
+        exportHeader,
+        { background: backgroundColor, color: style.color, mutedColor: tokens?.mutedForeground ?? style.color, fontFamily: style.fontFamily },
+        pixelRatio
+      );
+    } catch {
+      return dataUrl;
+    }
+  }, [instance, includeTitle, exportHeader, tokens]);
+  const handleCopy = useCallback(async () => {
+    const dataUrl = await getPngDataUrl();
+    if (!dataUrl) return;
+    try {
+      const blob = await (await fetch(dataUrl)).blob();
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [getPngDataUrl]);
+  const handleDownload = useCallback(async () => {
+    const dataUrl = await getPngDataUrl();
+    if (!dataUrl) return;
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = fileName;
+    link.click();
+  }, [getPngDataUrl, fileName]);
+  const inFrame = useContext(ChartFrameContext);
+  const styleHeight = height == null ? void 0 : typeof height === "number" ? `${height}px` : height;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "echart",
+      className: cn("group relative w-full", height == null && "h-[400px]", className),
+      style: styleHeight != null ? { height: styleHeight } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            "data-slot": "echart-canvas",
+            className: "h-full w-full",
+            role: inFrame ? void 0 : "img",
+            "aria-label": inFrame ? void 0 : ariaLabel ?? "\u30C1\u30E3\u30FC\u30C8"
+          }
+        ),
+        actions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "echart-actions",
+            className: "absolute top-2 right-2 z-10 flex gap-1 pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleCopy,
+                  "aria-label": copied ? "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F" : "PNG \u3092\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC",
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleDownload,
+                  "aria-label": "PNG \u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9",
+                  children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+EChart.displayName = "EChart";
+
+export { CHART_OTHER_COLOR, ChartFrameContext, EChart, resolveChartColors, resolveFillColors, useChartSurface, useResolvedChartColors };
+//# sourceMappingURL=chunk-JXFCSF3K.js.map
+//# sourceMappingURL=chunk-JXFCSF3K.js.map