@x12i/charts 1.0.0 → 1.1.0

package/dist/react.js

@@ -0,0 +1,1271 @@
+"use client";
+import {
+  AXIS_FONT_SIZE,
+  TICK_PADDING,
+  TICK_SIZE,
+  buildChartModel,
+  categoricalTones,
+  chartToCsv,
+  chartToTable,
+  createFormatters,
+  dashArrays,
+  describeModel,
+  describeTarget,
+  divergingColor,
+  formatMessage,
+  hitTest,
+  isNavKey,
+  isOpenMarker,
+  isRtlLocale,
+  layoutChart,
+  markerPath,
+  navigate,
+  pointInfo,
+  rampGradient,
+  resolveMessages,
+  resolveRenderer,
+  sequentialColor,
+  targetById,
+  themeColorsFromTokens,
+  toEChartsOption,
+  toneVarName,
+  tooltipFor
+} from "./chunk-U3U6ZV7A.js";
+
+// src/react/chart.tsx
+import {
+  useCallback as useCallback3,
+  useId,
+  useMemo as useMemo4,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+import { Badge } from "@x12i/ui";
+
+// src/react/config.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var ChartConfigContext = createContext({});
+function mergeMessages(base, override) {
+  if (!base) return override;
+  if (!override) return base;
+  return { ...base, ...override, markNames: { ...base.markNames, ...override.markNames } };
+}
+function ChartConfigProvider({ children, locale, messages, direction, datasets, loadEcharts, target }) {
+  const parent = useContext(ChartConfigContext);
+  const value = useMemo(
+    () => ({
+      locale: locale ?? parent.locale,
+      direction: direction ?? parent.direction,
+      datasets: datasets ?? parent.datasets,
+      loadEcharts: loadEcharts ?? parent.loadEcharts,
+      target: target ?? parent.target,
+      messages: mergeMessages(parent.messages, messages)
+    }),
+    [parent, locale, messages, direction, datasets, loadEcharts, target]
+  );
+  return /* @__PURE__ */ jsx(ChartConfigContext.Provider, { value, children });
+}
+function useChartConfig() {
+  return useContext(ChartConfigContext);
+}
+
+// src/react/echarts-plot.tsx
+import { useEffect, useRef, useState } from "react";
+import { VisuallyHidden } from "@x12i/ui";
+
+// src/react/states.tsx
+import { Button, Spinner } from "@x12i/ui";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ChartState({ kind, message, height, onRetry, retryLabel, overlay }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-kit": "chart-state",
+      "data-state": kind,
+      "data-overlay": overlay ? "true" : void 0,
+      role: kind === "error" ? "alert" : "status",
+      "aria-busy": kind === "loading" ? true : void 0,
+      style: { minBlockSize: height },
+      children: [
+        kind === "loading" ? /* @__PURE__ */ jsx2(Spinner, { size: "md" }) : null,
+        /* @__PURE__ */ jsx2("p", { "data-kit-slot": "state-message", children: message }),
+        kind === "error" && onRetry ? /* @__PURE__ */ jsx2(Button, { size: "sm", variant: "outline", tone: "neutral", onClick: onRetry, children: retryLabel }) : null
+      ]
+    }
+  );
+}
+
+// src/react/theme-colors.ts
+import { cssVarName, themeNames } from "@x12i/tokens";
+var SEQUENTIAL_STEPS = 9;
+function themeAt(element) {
+  const attribute = element?.closest("[data-theme]")?.getAttribute("data-theme") ?? (typeof document === "undefined" ? null : document.documentElement.getAttribute("data-theme"));
+  return themeNames.includes(attribute ?? "") ? attribute : "light";
+}
+var toneNames = ["accent", "muted", "reference", "good", "warning", "critical", ...categoricalTones];
+function readThemeColors(element) {
+  const fallback = themeColorsFromTokens(themeAt(element));
+  if (!element || typeof getComputedStyle !== "function") return fallback;
+  const style = getComputedStyle(element);
+  const read = (name, backup) => style.getPropertyValue(name).trim() || backup;
+  const tones = { ...fallback.tones };
+  for (const tone of toneNames) tones[tone] = read(toneVarName(tone), fallback.tones[tone]);
+  const ramp = (kind, backup) => Array.from(
+    { length: SEQUENTIAL_STEPS },
+    (_, i) => read(cssVarName(`color.${kind}.${i + 1}`), backup[i] ?? "")
+  );
+  return {
+    tones,
+    text: read(cssVarName("color.text.primary"), fallback.text),
+    textSecondary: read(cssVarName("color.text.secondary"), fallback.textSecondary),
+    axis: read(cssVarName("color.chart.axis"), fallback.axis),
+    grid: read(cssVarName("color.chart.grid"), fallback.grid),
+    surface: read(cssVarName("color.bg.surface"), fallback.surface),
+    border: read(cssVarName("color.border.default"), fallback.border),
+    accent: read(cssVarName("color.accent.default"), fallback.accent),
+    sequential: ramp("sequential", fallback.sequential),
+    diverging: ramp("diverging", fallback.diverging),
+    fontFamily: read(cssVarName("font.family.sans"), fallback.fontFamily)
+  };
+}
+
+// src/react/echarts-plot.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function EChartsPlot({
+  model,
+  messageInput,
+  messages,
+  locale,
+  hidden,
+  width,
+  height,
+  loader,
+  animate,
+  name,
+  description,
+  idPrefix,
+  onUnavailable
+}) {
+  const hostRef = useRef(null);
+  const instanceRef = useRef(null);
+  const loaderRef = useRef(loader);
+  const unavailableRef = useRef(onUnavailable);
+  const [status, setStatus] = useState("loading");
+  const [themeVersion, setThemeVersion] = useState(0);
+  useEffect(() => {
+    loaderRef.current = loader;
+    unavailableRef.current = onUnavailable;
+  });
+  useEffect(() => {
+    let cancelled = false;
+    const host = hostRef.current;
+    loaderRef.current().then((module) => {
+      if (cancelled || !host) return;
+      instanceRef.current = module.init(host, null, { renderer: "canvas" });
+      setStatus("ready");
+    }).catch(() => {
+      if (cancelled) return;
+      setStatus("unavailable");
+      unavailableRef.current("missing");
+    });
+    return () => {
+      cancelled = true;
+      instanceRef.current?.dispose();
+      instanceRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || typeof MutationObserver === "undefined") return void 0;
+    const observer = new MutationObserver(() => setThemeVersion((version) => version + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+    const scoped = host.closest("[data-theme]");
+    if (scoped && scoped !== document.documentElement) observer.observe(scoped, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (status !== "ready" || !instance) return;
+    const option = toEChartsOption(model, {
+      colors: readThemeColors(hostRef.current),
+      locale,
+      messages: messageInput,
+      hidden,
+      animate
+    });
+    if (!option) {
+      unavailableRef.current("unsupported");
+      return;
+    }
+    instance.setOption(option, { notMerge: true });
+  }, [status, model, hidden, themeVersion, locale, messageInput, animate]);
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (status !== "ready" || !instance) return;
+    instance.resize({ ...width !== void 0 ? { width } : {}, height });
+  }, [status, width, height]);
+  const descriptionId = `${idPrefix}-description`;
+  return /* @__PURE__ */ jsxs2("div", { "data-kit": "chart-stage", "data-canvas": status, children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: hostRef,
+        "data-kit": "chart-canvas",
+        role: "img",
+        "aria-label": name,
+        "aria-describedby": descriptionId,
+        style: { blockSize: height }
+      }
+    ),
+    status === "loading" ? /* @__PURE__ */ jsx3(ChartState, { kind: "loading", message: messages.canvasLoading, height, overlay: true }) : null,
+    /* @__PURE__ */ jsx3(VisuallyHidden, { id: descriptionId, children: description })
+  ] });
+}
+
+// src/react/echarts-loader.ts
+var defaultEChartsLoader = () => import("echarts");
+
+// src/react/hooks.ts
+import { useCallback, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect2 : useLayoutEffect;
+function useElementWidth(ref, explicit) {
+  const [width, setWidth] = useState2(void 0);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || explicit !== void 0) return void 0;
+    const read = () => {
+      const next = Math.round(element.getBoundingClientRect().width);
+      if (next > 0) setWidth((previous) => previous === next ? previous : next);
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(read);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, explicit]);
+  return explicit ?? width;
+}
+function directionAttribute(element) {
+  const value = element?.getAttribute("dir");
+  return value === "rtl" || value === "ltr" ? value : void 0;
+}
+function useDirection(ref, explicit, locale) {
+  const [fromPage, setFromPage] = useState2(void 0);
+  useIsomorphicLayoutEffect(() => {
+    if (explicit || typeof document === "undefined") return void 0;
+    const element = ref.current;
+    const read = () => {
+      const host2 = element?.parentElement?.closest("[dir]") ?? null;
+      setFromPage(directionAttribute(host2) ?? directionAttribute(document.documentElement));
+    };
+    read();
+    if (typeof MutationObserver === "undefined") return void 0;
+    const observer = new MutationObserver(read);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"] });
+    const host = element?.parentElement?.closest("[dir]");
+    if (host && host !== document.documentElement) observer.observe(host, { attributes: true, attributeFilter: ["dir"] });
+    return () => observer.disconnect();
+  }, [ref, explicit]);
+  const fromLocale = isRtlLocale(locale) ? "rtl" : void 0;
+  const direction = explicit ?? fromPage ?? fromLocale ?? "ltr";
+  const attribute = explicit ?? (fromPage ? void 0 : fromLocale);
+  return { direction, attribute };
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState2(false);
+  useEffect2(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
+  return reduced;
+}
+function useHiddenIds(controlled, initial, onChange) {
+  const [internal, setInternal] = useState2(() => [...initial]);
+  const ids = controlled ?? internal;
+  const set = useMemo2(() => new Set(ids), [ids]);
+  const onChangeRef = useRef2(onChange);
+  useIsomorphicLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  const update = useCallback(
+    (next) => {
+      if (controlled === void 0) setInternal(next);
+      onChangeRef.current?.(next);
+    },
+    [controlled]
+  );
+  return [set, update];
+}
+function safeId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+
+// src/react/glyph.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var GLYPH_WIDTH = 20;
+var GLYPH_HEIGHT = 12;
+var SWATCH_WIDTH = 14;
+function PatternDefs({ prefix, indices }) {
+  if (indices.length === 0) return null;
+  const line = (d) => /* @__PURE__ */ jsx4("path", { d, "data-kit": "chart-pattern-line" });
+  const tiles = {
+    0: { size: 6, body: line("M-1,1L1,-1M0,6L6,0M5,7L7,5") },
+    1: { size: 6, body: line("M-1,5L1,7M0,0L6,6M5,-1L7,1") },
+    2: { size: 6, body: /* @__PURE__ */ jsx4("circle", { cx: 3, cy: 3, r: 1, "data-kit": "chart-pattern-dot" }) },
+    3: { size: 6, body: line("M0,3H6") },
+    4: { size: 6, body: line("M3,0V6") },
+    5: { size: 6, body: line("M0,3H6M3,0V6") },
+    6: { size: 8, body: line("M-1,1L1,-1M0,8L8,0M7,9L9,7") },
+    7: {
+      size: 6,
+      body: /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx4("rect", { x: 0, y: 0, width: 3, height: 3, "data-kit": "chart-pattern-dot" }),
+        /* @__PURE__ */ jsx4("rect", { x: 3, y: 3, width: 3, height: 3, "data-kit": "chart-pattern-dot" })
+      ] })
+    }
+  };
+  return /* @__PURE__ */ jsx4("defs", { children: indices.map((index) => {
+    const tile = tiles[index % 8];
+    return /* @__PURE__ */ jsx4("pattern", { id: `${prefix}-p${index}`, patternUnits: "userSpaceOnUse", width: tile.size, height: tile.size, children: tile.body }, index);
+  }) });
+}
+function Glyph({ tone, glyph, marker, dash, pattern, patternPrefix }) {
+  const middle = GLYPH_HEIGHT / 2;
+  const shape = marker;
+  const open = isOpenMarker(shape);
+  const overlay = (x, y, width, height) => pattern >= 0 ? /* @__PURE__ */ jsx4("rect", { x, y, width, height, fill: `url(#${patternPrefix}-p${pattern})`, "data-kit": "chart-pattern" }) : null;
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      viewBox: `0 0 ${GLYPH_WIDTH} ${GLYPH_HEIGHT}`,
+      width: GLYPH_WIDTH,
+      height: GLYPH_HEIGHT,
+      "aria-hidden": "true",
+      focusable: "false",
+      "data-kit": "chart-glyph",
+      "data-glyph": glyph,
+      "data-tone": tone,
+      children: [
+        glyph === "line" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4("path", { d: `M0,${middle}H${GLYPH_WIDTH}`, "data-kit": "chart-glyph-line", ...dash ? { strokeDasharray: dash } : {} }),
+          /* @__PURE__ */ jsx4("path", { d: markerPath(shape, GLYPH_WIDTH / 2, middle, 3.5), "data-kit": "chart-glyph-marker", "data-open": open ? "true" : void 0 })
+        ] }) : null,
+        glyph === "area" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4("rect", { x: 0, y: 2, width: GLYPH_WIDTH, height: GLYPH_HEIGHT - 2, "data-kit": "chart-glyph-area" }),
+          overlay(0, 2, GLYPH_WIDTH, GLYPH_HEIGHT - 2),
+          /* @__PURE__ */ jsx4("path", { d: `M0,2H${GLYPH_WIDTH}`, "data-kit": "chart-glyph-line" })
+        ] }) : null,
+        glyph === "bar" || glyph === "slice" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(
+            "rect",
+            {
+              x: (GLYPH_WIDTH - SWATCH_WIDTH) / 2,
+              y: 1,
+              width: SWATCH_WIDTH,
+              height: GLYPH_HEIGHT - 2,
+              "data-kit": "chart-glyph-fill"
+            }
+          ),
+          overlay((GLYPH_WIDTH - SWATCH_WIDTH) / 2, 1, SWATCH_WIDTH, GLYPH_HEIGHT - 2)
+        ] }) : null,
+        glyph === "point" ? /* @__PURE__ */ jsx4("path", { d: markerPath(shape, GLYPH_WIDTH / 2, middle, 4), "data-kit": "chart-glyph-marker", "data-open": open ? "true" : void 0 }) : null
+      ]
+    }
+  );
+}
+
+// src/react/legend.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChartLegend({ entries, label, position, patternPrefix, onToggle }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": label, "data-kit": "chart-legend", "data-position": position, children: /* @__PURE__ */ jsx5("ul", { "data-kit-slot": "legend-list", children: entries.map((entry) => {
+    const glyph = /* @__PURE__ */ jsx5(
+      Glyph,
+      {
+        tone: entry.tone,
+        glyph: entry.glyph,
+        marker: entry.marker,
+        dash: entry.dash,
+        pattern: entry.pattern,
+        patternPrefix
+      }
+    );
+    return /* @__PURE__ */ jsx5("li", { "data-kit-slot": "legend-item", children: entry.toggle ? /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        "data-kit": "chart-legend-button",
+        "data-hidden": entry.visible ? void 0 : "true",
+        "aria-pressed": entry.visible,
+        onClick: (event) => onToggle?.(entry, event),
+        children: [
+          glyph,
+          /* @__PURE__ */ jsx5("span", { "data-kit-slot": "legend-label", children: entry.label })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs4("span", { "data-kit": "chart-legend-key", children: [
+      glyph,
+      /* @__PURE__ */ jsx5("span", { "data-kit-slot": "legend-label", children: entry.label })
+    ] }) }, entry.id);
+  }) }) });
+}
+function ColorScaleLegend({ kind, min, max, label }) {
+  return /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": label, "data-kit": "chart-scale", "data-ramp": kind, children: [
+    /* @__PURE__ */ jsx5("span", { "data-kit-slot": "scale-min", children: min }),
+    /* @__PURE__ */ jsx5("span", { "data-kit-slot": "scale-ramp", "aria-hidden": "true", style: { backgroundImage: rampGradient(kind) } }),
+    /* @__PURE__ */ jsx5("span", { "data-kit-slot": "scale-max", children: max })
+  ] });
+}
+
+// src/react/plot.tsx
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { VisuallyHidden as VisuallyHidden2 } from "@x12i/ui";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var RTL_SCRIPT = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+var ABOVE_OFFSET = -3;
+var BELOW_OFFSET = 11;
+var MIDDLE_OFFSET = 4;
+var FOCUS_OUTSET = 2;
+function textDirection(text, numeric) {
+  const rtl = !numeric && RTL_SCRIPT.test(text);
+  return { direction: rtl ? "rtl" : "ltr", flip: rtl };
+}
+function physicalAnchor(anchor, flip) {
+  if (!flip) return anchor;
+  return anchor === "start" ? "end" : anchor === "end" ? "start" : anchor;
+}
+function offsetFor(baseline) {
+  return baseline === "above" ? ABOVE_OFFSET : baseline === "below" ? BELOW_OFFSET : MIDDLE_OFFSET;
+}
+function Label({ label }) {
+  const { direction, flip } = textDirection(label.text, label.numeric);
+  return /* @__PURE__ */ jsx6(
+    "text",
+    {
+      x: label.x,
+      y: label.y + offsetFor(label.baseline),
+      textAnchor: physicalAnchor(label.anchor, flip),
+      direction,
+      "data-kit": "chart-label",
+      "data-label-kind": label.kind,
+      "data-tone": label.tone,
+      children: label.text
+    }
+  );
+}
+function Axis({ axis, plot }) {
+  const { line, orient } = axis;
+  const vertical = orient === "left" || orient === "right";
+  const sign = orient === "left" || orient === "top" ? -1 : 1;
+  const visibleTicks = axis.ticks.filter((tick) => tick.visible);
+  return /* @__PURE__ */ jsxs5("g", { "data-kit": "chart-axis", "data-axis": axis.id, "data-orient": orient, children: [
+    axis.id === "x" ? /* @__PURE__ */ jsx6("line", { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, "data-kit": "chart-axis-line" }) : null,
+    visibleTicks.map((tick) => {
+      const tickLine = vertical ? { x1: line.x1, y1: tick.position, x2: line.x1 + sign * TICK_SIZE, y2: tick.position } : { x1: tick.position, y1: line.y1, x2: tick.position, y2: line.y1 + sign * TICK_SIZE };
+      const gap = TICK_SIZE + TICK_PADDING;
+      let x;
+      let y;
+      if (vertical) {
+        x = line.x1 + sign * gap;
+        y = tick.position + MIDDLE_OFFSET;
+      } else {
+        x = tick.position;
+        y = line.y1 + sign * gap + (sign > 0 ? axis.labelAngle === 0 ? AXIS_FONT_SIZE * 0.8 : AXIS_FONT_SIZE * 0.35 : 0);
+      }
+      const text = String(tick.label);
+      const { direction, flip } = textDirection(text, axis.numeric);
+      const anchor = physicalAnchor(axis.labelAnchor, flip);
+      return /* @__PURE__ */ jsxs5("g", { "data-kit": "chart-tick", children: [
+        axis.grid ? vertical ? /* @__PURE__ */ jsx6(
+          "line",
+          {
+            x1: plot.x,
+            y1: tick.position,
+            x2: plot.x + plot.width,
+            y2: tick.position,
+            "data-kit": "chart-grid",
+            "data-zero": tick.value === 0 ? "true" : void 0
+          }
+        ) : /* @__PURE__ */ jsx6(
+          "line",
+          {
+            x1: tick.position,
+            y1: plot.y,
+            x2: tick.position,
+            y2: plot.y + plot.height,
+            "data-kit": "chart-grid",
+            "data-zero": tick.value === 0 ? "true" : void 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx6("line", { ...tickLine, "data-kit": "chart-tick-mark" }),
+        /* @__PURE__ */ jsx6(
+          "text",
+          {
+            x,
+            y,
+            textAnchor: anchor,
+            direction,
+            "data-kit": "chart-tick-label",
+            ...axis.labelAngle !== 0 && !vertical ? { transform: `rotate(${axis.labelAngle} ${x} ${y})` } : {},
+            children: text
+          }
+        )
+      ] }, String(tick.value));
+    }),
+    axis.title && axis.titlePosition ? /* @__PURE__ */ jsx6(
+      "text",
+      {
+        x: axis.titlePosition.x,
+        y: axis.titlePosition.y,
+        textAnchor: "middle",
+        direction: textDirection(axis.title, false).direction,
+        "data-kit": "chart-axis-title",
+        ...axis.titlePosition.rotate !== 0 ? { transform: `rotate(${axis.titlePosition.rotate} ${axis.titlePosition.x} ${axis.titlePosition.y})` } : {},
+        children: axis.title
+      }
+    ) : null
+  ] });
+}
+var KIND_ORDER = {
+  area: 0,
+  bar: 1,
+  cell: 1,
+  arc: 1,
+  connector: 2,
+  stem: 2,
+  line: 3,
+  point: 4
+};
+function cellFill(mark) {
+  const t = mark.t ?? 0;
+  return mark.ramp === "diverging" ? divergingColor(t) : sequentialColor(t);
+}
+function MarkView({ mark, active, patternPrefix }) {
+  const common = {
+    "data-tone": mark.tone,
+    "data-series": mark.styleIndex,
+    "data-muted": mark.muted ? "true" : void 0,
+    "data-highlighted": mark.highlighted ? "true" : void 0,
+    "data-breach": mark.breach ? "true" : void 0,
+    "data-active": active ? "true" : void 0,
+    "data-role": mark.role,
+    "data-mark-id": mark.id
+  };
+  const overlayFill = mark.pattern >= 0 ? `url(#${patternPrefix}-p${mark.pattern})` : void 0;
+  switch (mark.kind) {
+    case "bar":
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("rect", { x: mark.x, y: mark.y, width: mark.width, height: mark.height, "data-kit": "chart-bar", ...common }),
+        overlayFill ? /* @__PURE__ */ jsx6("rect", { x: mark.x, y: mark.y, width: mark.width, height: mark.height, fill: overlayFill, "data-kit": "chart-pattern" }) : null
+      ] });
+    case "cell":
+      return /* @__PURE__ */ jsx6(
+        "rect",
+        {
+          x: mark.x,
+          y: mark.y,
+          width: mark.width,
+          height: mark.height,
+          style: { fill: cellFill(mark) },
+          "data-kit": "chart-cell",
+          ...common
+        }
+      );
+    case "area":
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("path", { d: mark.d, "data-kit": "chart-area", ...common }),
+        overlayFill ? /* @__PURE__ */ jsx6("path", { d: mark.d, fill: overlayFill, "data-kit": "chart-pattern" }) : null
+      ] });
+    case "arc":
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("path", { d: mark.d, "data-kit": "chart-arc", ...common }),
+        overlayFill ? /* @__PURE__ */ jsx6("path", { d: mark.d, fill: overlayFill, "data-kit": "chart-pattern" }) : null
+      ] });
+    case "line":
+      return /* @__PURE__ */ jsx6("path", { d: mark.d, "data-kit": "chart-line", ...mark.dash ? { strokeDasharray: mark.dash } : {}, ...common });
+    case "stem":
+    case "connector":
+      return /* @__PURE__ */ jsx6(
+        "line",
+        {
+          x1: mark.x1,
+          y1: mark.y1,
+          x2: mark.x2,
+          y2: mark.y2,
+          "data-kit": mark.kind === "stem" ? "chart-stem" : "chart-connector",
+          ...common
+        }
+      );
+    case "point": {
+      const shape = mark.shape ?? "circle";
+      const open = isOpenMarker(shape) ? "true" : void 0;
+      if (shape === "circle") {
+        return /* @__PURE__ */ jsx6("circle", { cx: mark.cx, cy: mark.cy, r: mark.r, "data-kit": "chart-point", ...common });
+      }
+      return /* @__PURE__ */ jsx6("path", { d: markerPath(shape, mark.cx ?? 0, mark.cy ?? 0, mark.r ?? 4), "data-kit": "chart-point", "data-open": open, ...common });
+    }
+    default:
+      return null;
+  }
+}
+function AnnotationView({ annotation }) {
+  const common = {
+    "data-tone": annotation.tone,
+    "data-threshold": annotation.threshold ? "true" : void 0
+  };
+  return /* @__PURE__ */ jsxs5("g", { "data-kit": "chart-annotation", "data-annotation": annotation.kind, ...common, children: [
+    annotation.kind === "line" ? /* @__PURE__ */ jsx6("line", { x1: annotation.x1, y1: annotation.y1, x2: annotation.x2, y2: annotation.y2, "data-kit": "chart-annotation-line" }) : null,
+    annotation.kind === "band" || annotation.kind === "forecast" ? /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x: annotation.box?.x,
+        y: annotation.box?.y,
+        width: annotation.box?.width,
+        height: annotation.box?.height,
+        "data-kit": "chart-annotation-band",
+        "data-forecast": annotation.kind === "forecast" ? "true" : void 0
+      }
+    ) : null,
+    annotation.kind === "point" ? /* @__PURE__ */ jsx6("circle", { cx: annotation.cx, cy: annotation.cy, r: 5, "data-kit": "chart-annotation-point" }) : null,
+    annotation.label ? /* @__PURE__ */ jsx6(Label, { label: annotation.label }) : null
+  ] });
+}
+function FocusRing({ shape }) {
+  if (shape.kind === "circle") {
+    return /* @__PURE__ */ jsx6("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, "data-kit": "chart-focus" });
+  }
+  if (shape.kind === "rect") {
+    return /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x: shape.x - FOCUS_OUTSET,
+        y: shape.y - FOCUS_OUTSET,
+        width: shape.width + FOCUS_OUTSET * 2,
+        height: shape.height + FOCUS_OUTSET * 2,
+        "data-kit": "chart-focus"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6("path", { d: shape.d, transform: `translate(${shape.tx ?? 0} ${shape.ty ?? 0})`, "data-kit": "chart-focus" });
+}
+var EDGE_SHARE = 0.25;
+function Tooltip({
+  content,
+  target,
+  layout,
+  patternPrefix
+}) {
+  const left = target.x / layout.width * 100;
+  const top = target.y / layout.height * 100;
+  const align = left < EDGE_SHARE * 100 ? "start" : left > (1 - EDGE_SHARE) * 100 ? "end" : "center";
+  const placement = top < 40 ? "below" : "above";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-kit": "chart-tooltip",
+      "data-placement": placement,
+      "data-align": align,
+      "aria-hidden": "true",
+      style: { left: `${left}%`, top: `${top}%` },
+      children: [
+        /* @__PURE__ */ jsx6("div", { "data-kit-slot": "tooltip-title", children: content.title }),
+        /* @__PURE__ */ jsx6("ul", { "data-kit-slot": "tooltip-rows", children: content.rows.map((row) => /* @__PURE__ */ jsxs5("li", { "data-kit-slot": "tooltip-row", "data-active": row.active ? "true" : void 0, children: [
+          /* @__PURE__ */ jsx6(Glyph, { tone: row.tone, glyph: row.glyph, marker: row.marker, dash: row.dash, pattern: row.pattern, patternPrefix }),
+          /* @__PURE__ */ jsx6("span", { "data-kit-slot": "tooltip-label", children: row.label }),
+          /* @__PURE__ */ jsx6("span", { "data-kit-slot": "tooltip-value", children: row.value }),
+          row.note ? /* @__PURE__ */ jsx6("span", { "data-kit-slot": "tooltip-note", children: row.note }) : null
+        ] }, row.id)) })
+      ]
+    }
+  );
+}
+function Plot({
+  model,
+  layout,
+  fmts,
+  name,
+  description,
+  idPrefix,
+  interactive,
+  tooltip,
+  animate,
+  onPointActivate,
+  onActivePointChange
+}) {
+  const svgRef = useRef3(null);
+  const pointerDown = useRef3(false);
+  const [active, setActive] = useState3(null);
+  const [announcement, setAnnouncement] = useState3("");
+  const messages = fmts.messages;
+  const canInteract = interactive && layout.targets.length > 0;
+  const descriptionId = `${idPrefix}-description`;
+  const patternPrefix = `${idPrefix}-pattern`;
+  const target = active ? targetById(layout, active.id) : void 0;
+  const content = useMemo3(
+    () => target && tooltip ? tooltipFor(model, layout, target, fmts) : null,
+    [model, layout, fmts, target, tooltip]
+  );
+  const lastNotified = useRef3(null);
+  const select = useCallback2(
+    (next, source) => {
+      const nextId = next?.id ?? null;
+      if (!next) {
+        setActive(null);
+        setAnnouncement("");
+      } else {
+        setActive((previous) => previous && previous.id === next.id && previous.source === source ? previous : { id: next.id, source });
+        if (source === "keyboard") setAnnouncement(describeTarget(model, layout, next, fmts));
+      }
+      if (lastNotified.current !== nextId) {
+        lastNotified.current = nextId;
+        onActivePointChange?.(next ? pointInfo(model, next, fmts) : null);
+      }
+    },
+    [model, layout, fmts, onActivePointChange]
+  );
+  const pointerTarget = (event) => {
+    const svg = svgRef.current;
+    if (!svg) return null;
+    const rect = svg.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return null;
+    const x = (event.clientX - rect.left) * (layout.width / rect.width);
+    const y = (event.clientY - rect.top) * (layout.height / rect.height);
+    return hitTest(layout, x, y);
+  };
+  const onPointerMove = (event) => {
+    if (!canInteract || event.pointerType === "touch") return;
+    const hit = pointerTarget(event);
+    if (hit) select(hit, "pointer");
+    else if (active?.source === "pointer") select(null, "pointer");
+  };
+  const onPointerDown = (event) => {
+    pointerDown.current = true;
+    if (!canInteract) return;
+    const hit = pointerTarget(event);
+    if (hit) select(hit, "pointer");
+  };
+  const onPointerUp = (event) => {
+    if (!canInteract || !onPointActivate) return;
+    const hit = pointerTarget(event);
+    const info = hit ? pointInfo(model, hit, fmts) : null;
+    if (info) onPointActivate(info, event);
+  };
+  const onStageLeave = (event) => {
+    if (event.pointerType === "touch") return;
+    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+    if (active?.source === "pointer") select(null, "pointer");
+  };
+  const onFocus = () => {
+    if (!canInteract) return;
+    if (pointerDown.current) {
+      pointerDown.current = false;
+      return;
+    }
+    const start = (active && targetById(layout, active.id)) ?? layout.targets[0];
+    select(start, "keyboard");
+  };
+  const onBlur = (event) => {
+    pointerDown.current = false;
+    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+    if (active) select(null, "keyboard");
+  };
+  const onKeyDown = (event) => {
+    if (!canInteract || event.altKey || event.ctrlKey || event.metaKey) return;
+    pointerDown.current = false;
+    if (isNavKey(event.key)) {
+      event.preventDefault();
+      const nextId = navigate(layout, active?.id ?? null, event.key);
+      select(targetById(layout, nextId), "keyboard");
+      return;
+    }
+    if (event.key === "Escape") {
+      if (active) {
+        event.preventDefault();
+        select(null, "keyboard");
+      }
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && target && onPointActivate) {
+      event.preventDefault();
+      const info = pointInfo(model, target, fmts);
+      if (info) onPointActivate(info, event);
+    }
+  };
+  const marks = useMemo3(
+    () => [...layout.marks].sort((a, b) => (KIND_ORDER[a.kind] ?? 0) - (KIND_ORDER[b.kind] ?? 0)),
+    [layout.marks]
+  );
+  const bands = layout.annotations.filter((annotation) => annotation.kind === "band" || annotation.kind === "forecast");
+  const notes = layout.annotations.filter((annotation) => annotation.kind !== "band" && annotation.kind !== "forecast");
+  const isActiveMark = (mark) => !!target && mark.point >= 0 && mark.point === target.point && (mark.series === target.series || mark.series === -1 && target.kind === "slice");
+  const keyboardActive = active?.source === "keyboard" ? target : void 0;
+  return /* @__PURE__ */ jsxs5("div", { "data-kit": "chart-stage", onPointerLeave: canInteract ? onStageLeave : void 0, children: [
+    /* @__PURE__ */ jsxs5(
+      "svg",
+      {
+        ref: svgRef,
+        viewBox: `0 0 ${layout.width} ${layout.height}`,
+        width: layout.width,
+        height: layout.height,
+        "data-kit": "chart-svg",
+        "data-mark": layout.mark,
+        "data-animate": animate ? "true" : void 0,
+        "data-interactive": canInteract ? "true" : void 0,
+        "data-activatable": canInteract && onPointActivate ? "true" : void 0,
+        focusable: canInteract ? "true" : "false",
+        ...canInteract ? {
+          role: "application",
+          tabIndex: 0,
+          "aria-roledescription": messages.chartRoleDescription,
+          onPointerMove,
+          onPointerDown,
+          onPointerUp,
+          onFocus,
+          onBlur,
+          onKeyDown
+        } : { role: "img" },
+        "aria-label": name,
+        "aria-describedby": descriptionId,
+        children: [
+          /* @__PURE__ */ jsx6(PatternDefs, { prefix: patternPrefix, indices: layout.patterns }),
+          /* @__PURE__ */ jsx6("g", { "data-kit": "chart-bands", "aria-hidden": "true", children: bands.map((annotation) => /* @__PURE__ */ jsx6(AnnotationView, { annotation }, annotation.id)) }),
+          /* @__PURE__ */ jsx6("g", { "data-kit": "chart-axes", "aria-hidden": "true", children: layout.axes.map((axis) => /* @__PURE__ */ jsx6(Axis, { axis, plot: layout.plot }, axis.id)) }),
+          /* @__PURE__ */ jsx6("g", { "data-kit": "chart-marks", "aria-hidden": "true", children: marks.map((mark) => /* @__PURE__ */ jsx6(MarkView, { mark, active: isActiveMark(mark), patternPrefix }, mark.id)) }),
+          /* @__PURE__ */ jsx6("g", { "data-kit": "chart-notes", "aria-hidden": "true", children: notes.map((annotation) => /* @__PURE__ */ jsx6(AnnotationView, { annotation }, annotation.id)) }),
+          /* @__PURE__ */ jsx6("g", { "data-kit": "chart-labels", "aria-hidden": "true", children: layout.labels.map((label) => /* @__PURE__ */ jsx6(Label, { label }, label.id)) }),
+          target && layout.crosshair !== "none" ? /* @__PURE__ */ jsx6("g", { "data-kit": "chart-crosshair", "aria-hidden": "true", children: layout.crosshair === "x" ? /* @__PURE__ */ jsx6("line", { x1: target.x, y1: layout.plot.y, x2: target.x, y2: layout.plot.y + layout.plot.height }) : /* @__PURE__ */ jsx6("line", { x1: layout.plot.x, y1: target.y, x2: layout.plot.x + layout.plot.width, y2: target.y }) }) : null,
+          keyboardActive ? /* @__PURE__ */ jsx6("g", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(FocusRing, { shape: keyboardActive.focus }) }) : null
+        ]
+      }
+    ),
+    content && target ? /* @__PURE__ */ jsx6(Tooltip, { content, target, layout, patternPrefix }) : null,
+    /* @__PURE__ */ jsx6(VisuallyHidden2, { id: descriptionId, children: description }),
+    /* @__PURE__ */ jsx6(VisuallyHidden2, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+  ] });
+}
+
+// src/react/chart.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 640;
+var MIN_WIDTH = 120;
+var DEFAULT_HEIGHT = 320;
+var SPARKLINE_HEIGHT = 48;
+var SPARKLINE_WIDTH = 160;
+var GAUGE_HEIGHT = 220;
+function defaultChartHeight(mark) {
+  if (mark === "sparkline") return SPARKLINE_HEIGHT;
+  if (mark === "gauge" || mark === "progress-ring") return GAUGE_HEIGHT;
+  return DEFAULT_HEIGHT;
+}
+function canvasLegend(model, hidden) {
+  if (model.slices.length > 0) {
+    return model.slices.map((slice) => ({
+      id: slice.id,
+      label: slice.label,
+      series: null,
+      tone: slice.style.tone,
+      marker: slice.style.marker,
+      dash: void 0,
+      glyph: "slice",
+      pattern: -1,
+      visible: !hidden.has(slice.id),
+      toggle: true
+    }));
+  }
+  return model.series.map((series, index) => {
+    const kind = model.mark === "combo" ? series.mark : model.mark;
+    const glyph = kind === "bar" || kind === "histogram" || kind === "waterfall" || kind === "lollipop" ? "bar" : kind === "area" ? "area" : kind === "scatter" || kind === "bubble" ? "point" : "line";
+    return {
+      id: series.id,
+      label: series.label,
+      series: index,
+      tone: series.style.tone,
+      marker: series.style.marker,
+      dash: dashArrays[series.style.dash],
+      glyph,
+      pattern: -1,
+      visible: !hidden.has(series.id),
+      toggle: true
+    };
+  });
+}
+function Chart(props) {
+  const { spec, className, style, id } = props;
+  const config = useChartConfig();
+  const locale = props.locale ?? config.locale;
+  const messageInput = useMemo4(() => mergeMessages(config.messages, props.messages), [config.messages, props.messages]);
+  const datasets = props.datasets ?? config.datasets;
+  const model = useMemo4(() => buildChartModel(spec, { datasets, messages: messageInput }), [spec, datasets, messageInput]);
+  const fmts = useMemo4(() => createFormatters(model, { locale, messages: messageInput }), [model, locale, messageInput]);
+  const messages = fmts.messages;
+  const rootRef = useRef4(null);
+  const explicitDirection = props.dir ?? config.direction ?? (spec.direction && spec.direction !== "auto" ? spec.direction : void 0);
+  const { direction, attribute } = useDirection(rootRef, explicitDirection, locale);
+  const measured = useElementWidth(rootRef, props.width);
+  const fallbackWidth = model.mark === "sparkline" ? SPARKLINE_WIDTH : DEFAULT_WIDTH;
+  const width = Math.max(MIN_WIDTH, measured ?? fallbackWidth);
+  const height = props.height ?? defaultChartHeight(model.mark);
+  const reducedMotion = usePrefersReducedMotion();
+  const idPrefix = `kit-chart-${safeId(useId())}`;
+  const initialHidden = props.defaultHiddenSeries ?? model.series.filter((series) => series.hidden).map((series) => series.id);
+  const [hidden, setHidden] = useHiddenIds(props.hiddenSeries, initialHidden, props.onHiddenSeriesChange);
+  const target = props.target ?? config.target ?? "screen";
+  const renderer = resolveRenderer({
+    renderer: props.renderer ?? spec.renderer,
+    mark: model.mark,
+    pointCount: model.pointCount,
+    target
+  });
+  const [canvasFailure, setCanvasFailure] = useState4(null);
+  const onCanvasUnavailable = useCallback3((reason) => setCanvasFailure(reason), []);
+  const canvas = renderer === "canvas" && canvasFailure === null && model.status === "ok";
+  const layout = useMemo4(
+    () => canvas || model.status !== "ok" ? null : layoutChart(model, { width, height, rtl: direction === "rtl", locale, messages: messageInput, hidden }),
+    [canvas, model, width, height, direction, locale, messageInput, hidden]
+  );
+  const description = useMemo4(
+    () => describeModel(model, { locale, messages: messageInput, hidden }),
+    [model, locale, messageInput, hidden]
+  );
+  const legendEntries = useMemo4(
+    () => layout ? layout.legend : canvas ? canvasLegend(model, hidden) : [],
+    [layout, canvas, model, hidden]
+  );
+  const legendSetting = spec.legend?.show ?? "auto";
+  const showLegend = legendSetting === true || legendSetting === "auto" && legendEntries.length > 1;
+  const onToggle = (entry, event) => {
+    const toggleable = legendEntries.filter((candidate) => candidate.toggle).map((candidate) => candidate.id);
+    const modifier = event.shiftKey || event.ctrlKey || event.metaKey;
+    if (spec.interactions?.legendIsolate && !modifier) {
+      const visible = toggleable.filter((candidate) => !hidden.has(candidate));
+      const isolated = visible.length === 1 && visible[0] === entry.id;
+      setHidden(isolated ? [] : toggleable.filter((candidate) => candidate !== entry.id));
+      return;
+    }
+    const next = new Set(hidden);
+    if (next.has(entry.id)) next.delete(entry.id);
+    else next.add(entry.id);
+    setHidden([...next]);
+  };
+  const markName = messages.markNames[model.mark] ?? model.mark;
+  const allHidden = layout ? layout.allHidden : canvas && legendEntries.length > 0 && legendEntries.every((entry) => !entry.visible);
+  const statusKind = props.loading ? "loading" : props.error ? "error" : model.status !== "ok" ? model.status : allHidden ? "all-hidden" : "ok";
+  let body;
+  if (props.loading) {
+    body = /* @__PURE__ */ jsx7(ChartState, { kind: "loading", message: messages.loading, height });
+  } else if (props.error) {
+    body = /* @__PURE__ */ jsx7(ChartState, { kind: "error", message: messages.error, height, onRetry: props.onRetry, retryLabel: messages.retry });
+  } else if (model.status === "missing-data") {
+    body = /* @__PURE__ */ jsx7(
+      ChartState,
+      {
+        kind: "missing-data",
+        message: formatMessage(messages.missingDataset, { ref: model.missingRef ?? "" }, locale),
+        height
+      }
+    );
+  } else if (model.status === "unsupported") {
+    body = /* @__PURE__ */ jsx7(ChartState, { kind: "unsupported", message: formatMessage(messages.unsupportedMark, { mark: markName }, locale), height });
+  } else if (model.status === "empty") {
+    body = /* @__PURE__ */ jsx7(ChartState, { kind: "empty", message: messages.empty, height });
+  } else if (canvas && allHidden) {
+    body = /* @__PURE__ */ jsx7("p", { "data-kit": "chart-note", role: "status", children: messages.allSeriesHidden });
+  } else if (canvas) {
+    body = /* @__PURE__ */ jsx7(
+      EChartsPlot,
+      {
+        model,
+        messages,
+        messageInput,
+        locale,
+        hidden,
+        width: props.width,
+        height,
+        loader: props.loadEcharts ?? config.loadEcharts ?? defaultEChartsLoader,
+        animate: !reducedMotion,
+        name: description.name,
+        description: description.text,
+        idPrefix,
+        onUnavailable: onCanvasUnavailable
+      }
+    );
+  } else if (layout) {
+    body = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      allHidden ? /* @__PURE__ */ jsx7("p", { "data-kit": "chart-note", role: "status", children: messages.allSeriesHidden }) : null,
+      /* @__PURE__ */ jsx7(
+        Plot,
+        {
+          model,
+          layout,
+          fmts,
+          name: description.name,
+          description: description.text,
+          idPrefix,
+          interactive: props.interactive ?? true,
+          tooltip: props.tooltip ?? spec.interactions?.tooltip !== false,
+          animate: !reducedMotion,
+          onPointActivate: props.onPointActivate,
+          onActivePointChange: props.onActivePointChange
+        }
+      )
+    ] });
+  } else {
+    body = null;
+  }
+  const hasPlot = statusKind === "ok" || statusKind === "all-hidden";
+  const legendPosition = spec.legend?.position ?? "bottom";
+  const legend = hasPlot && showLegend ? /* @__PURE__ */ jsx7(
+    ChartLegend,
+    {
+      entries: legendEntries,
+      label: messages.legend,
+      position: legendPosition,
+      patternPrefix: `${idPrefix}-pattern`,
+      onToggle
+    }
+  ) : null;
+  const scale = layout?.colorScale;
+  const colorScale = hasPlot && scale ? /* @__PURE__ */ jsx7(
+    ColorScaleLegend,
+    {
+      kind: scale.kind,
+      min: fmts.value(0)(scale.min),
+      max: fmts.value(0)(scale.max),
+      label: spec.value?.title ?? spec.color?.title ?? messages.columnValue
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref: rootRef,
+      id,
+      className,
+      style,
+      dir: attribute,
+      "data-kit": "chart",
+      "data-mark": model.mark,
+      "data-renderer": canvas ? "canvas" : "svg",
+      "data-state": statusKind,
+      children: [
+        canvasFailure !== null && renderer === "canvas" ? /* @__PURE__ */ jsx7("p", { "data-kit": "chart-note", role: "status", children: canvasFailure === "missing" ? messages.canvasMissing : messages.canvasUnsupported }) : null,
+        hasPlot && model.dualAxis ? /* @__PURE__ */ jsx7("div", { "data-kit": "chart-warning", children: /* @__PURE__ */ jsx7(Badge, { variant: "soft", tone: "warning", children: messages.dualAxisWarning }) }) : null,
+        legendPosition === "top" ? legend : null,
+        body,
+        legendPosition === "bottom" ? legend : null,
+        colorScale
+      ]
+    }
+  );
+}
+function SvgChart(props) {
+  return /* @__PURE__ */ jsx7(Chart, { ...props, renderer: "svg" });
+}
+function EChartsChart(props) {
+  return /* @__PURE__ */ jsx7(Chart, { ...props, renderer: "canvas" });
+}
+
+// src/react/frame.tsx
+import { createElement, useId as useId3, useMemo as useMemo6, useState as useState5 } from "react";
+import { Button as Button2 } from "@x12i/ui";
+
+// src/react/data-table.tsx
+import { useId as useId2, useMemo as useMemo5 } from "react";
+import { VisuallyHidden as VisuallyHidden3 } from "@x12i/ui";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChartDataTable({ spec, datasets, locale, messages, maxRows = 200, hidden = false, className, id }) {
+  const config = useChartConfig();
+  const merged = useMemo5(() => mergeMessages(config.messages, messages), [config.messages, messages]);
+  const resolvedLocale = locale ?? config.locale;
+  const resolvedDatasets = datasets ?? config.datasets;
+  const table = useMemo5(
+    () => chartToTable(spec, { datasets: resolvedDatasets, locale: resolvedLocale, messages: merged }),
+    [spec, resolvedDatasets, resolvedLocale, merged]
+  );
+  const text = resolveMessages(merged);
+  const captionId = `kit-chart-table-${safeId(useId2())}`;
+  const rows = table.rows.slice(0, maxRows);
+  const truncated = table.rows.length > rows.length;
+  const content = /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      id,
+      className,
+      "data-kit": "chart-table",
+      "data-hidden": hidden ? "true" : void 0,
+      ...hidden ? {} : { role: "region", tabIndex: 0, "aria-labelledby": captionId },
+      children: [
+        /* @__PURE__ */ jsxs7("table", { "data-kit": "chart-table-element", children: [
+          /* @__PURE__ */ jsx8("caption", { id: captionId, children: table.caption }),
+          /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: table.columns.map((column) => /* @__PURE__ */ jsx8("th", { scope: "col", "data-numeric": column.numeric ? "true" : void 0, children: column.label }, column.key)) }) }),
+          /* @__PURE__ */ jsx8("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx8("tr", { children: row.map((cell, cellIndex) => {
+            const column = table.columns[cellIndex];
+            const numeric = column?.numeric ? "true" : void 0;
+            return cellIndex === 0 ? /* @__PURE__ */ jsx8("th", { scope: "row", "data-numeric": numeric, children: cell.text }, column?.key ?? cellIndex) : /* @__PURE__ */ jsx8("td", { "data-numeric": numeric, children: cell.text }, column?.key ?? cellIndex);
+          }) }, rowIndex)) })
+        ] }),
+        truncated ? /* @__PURE__ */ jsx8("p", { "data-kit-slot": "table-note", children: formatMessage(text.tableTruncated, { shown: rows.length, total: table.rows.length }, resolvedLocale) }) : null
+      ]
+    }
+  );
+  return hidden ? /* @__PURE__ */ jsx8(VisuallyHidden3, { asChild: true, children: content }) : content;
+}
+
+// src/react/icons.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Icon({ children }) {
+  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 16 16", width: 16, height: 16, "aria-hidden": "true", focusable: "false", "data-kit": "chart-icon", children });
+}
+function TableIcon() {
+  return /* @__PURE__ */ jsx9(Icon, { children: /* @__PURE__ */ jsx9("path", { d: "M2,3H14V13H2Z M2,6.5H14 M2,9.75H14 M6,3V13" }) });
+}
+function ChartIcon() {
+  return /* @__PURE__ */ jsx9(Icon, { children: /* @__PURE__ */ jsx9("path", { d: "M2,2V14H14 M5,11V8 M8,11V5 M11,11V7" }) });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ jsx9(Icon, { children: /* @__PURE__ */ jsx9("path", { d: "M8,2V10 M5,7L8,10L11,7 M3,13H13" }) });
+}
+
+// src/react/frame.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function slug(title) {
+  const base = title.toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+  return base || "chart";
+}
+function downloadCsv(csv, fileName) {
+  if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+  const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${fileName}.csv`;
+  anchor.hidden = true;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function ChartFrame({
+  headingLevel = 3,
+  toolbar = true,
+  actions,
+  view: viewProp,
+  defaultView = "chart",
+  onViewChange,
+  tableMaxRows,
+  csvFileName,
+  onDownload,
+  variant = "plain",
+  className,
+  style,
+  id,
+  ...chartProps
+}) {
+  const { spec } = chartProps;
+  const config = useChartConfig();
+  const locale = chartProps.locale ?? config.locale;
+  const datasets = chartProps.datasets ?? config.datasets;
+  const messageInput = useMemo6(() => mergeMessages(config.messages, chartProps.messages), [config.messages, chartProps.messages]);
+  const messages = resolveMessages(messageInput);
+  const [internalView, setInternalView] = useState5(defaultView);
+  const view = viewProp ?? internalView;
+  const uid = safeId(useId3());
+  const titleId = `kit-chart-title-${uid}`;
+  const bodyId = `kit-chart-body-${uid}`;
+  const showTable = spec.a11y.table !== false;
+  const setView = (next) => {
+    if (viewProp === void 0) setInternalView(next);
+    onViewChange?.(next);
+  };
+  const download = () => {
+    const csv = chartToCsv(spec, { datasets, locale, messages: messageInput, bom: true });
+    const name = csvFileName ?? slug(spec.title);
+    if (onDownload) onDownload(csv, name);
+    else downloadCsv(csv, name);
+  };
+  const tableVisible = showTable && view === "table";
+  return /* @__PURE__ */ jsxs8("figure", { id, className, style, "data-kit": "chart-frame", "data-variant": variant, "data-view": tableVisible ? "table" : "chart", children: [
+    /* @__PURE__ */ jsxs8("figcaption", { "data-kit-slot": "frame-caption", children: [
+      createElement(`h${headingLevel}`, { id: titleId, "data-kit-slot": "frame-title" }, spec.title),
+      spec.subtitle ? /* @__PURE__ */ jsx10("p", { "data-kit-slot": "frame-subtitle", children: spec.subtitle }) : null
+    ] }),
+    toolbar ? /* @__PURE__ */ jsxs8("div", { role: "group", "aria-label": messages.toolbar, "data-kit": "chart-toolbar", children: [
+      showTable ? /* @__PURE__ */ jsxs8(
+        Button2,
+        {
+          size: "sm",
+          variant: "ghost",
+          tone: "neutral",
+          "aria-controls": bodyId,
+          onClick: () => setView(tableVisible ? "chart" : "table"),
+          children: [
+            tableVisible ? /* @__PURE__ */ jsx10(ChartIcon, {}) : /* @__PURE__ */ jsx10(TableIcon, {}),
+            tableVisible ? messages.viewAsChart : messages.viewAsTable
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs8(Button2, { size: "sm", variant: "ghost", tone: "neutral", onClick: download, children: [
+        /* @__PURE__ */ jsx10(DownloadIcon, {}),
+        messages.downloadCsv
+      ] }),
+      actions
+    ] }) : null,
+    /* @__PURE__ */ jsxs8("div", { id: bodyId, "data-kit-slot": "frame-body", children: [
+      /* @__PURE__ */ jsx10("div", { "data-kit-slot": "frame-chart", hidden: tableVisible, children: /* @__PURE__ */ jsx10(Chart, { ...chartProps }) }),
+      showTable ? /* @__PURE__ */ jsx10(
+        ChartDataTable,
+        {
+          spec,
+          datasets,
+          locale,
+          messages: messageInput,
+          hidden: !tableVisible,
+          ...tableMaxRows !== void 0 ? { maxRows: tableMaxRows } : {}
+        }
+      ) : null
+    ] }),
+    spec.source ? /* @__PURE__ */ jsx10("p", { "data-kit-slot": "frame-source", children: spec.source }) : null
+  ] });
+}
+function ChartCard(props) {
+  return /* @__PURE__ */ jsx10(ChartFrame, { ...props, variant: "card" });
+}
+
+// src/react/grid.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function ChartGrid({ children, columns, label, className, style }) {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className,
+      style: { ...columns ? { "--_columns": columns } : {}, ...style },
+      "data-kit": "chart-grid-layout",
+      "data-fixed": columns ? "true" : void 0,
+      ...label ? { role: "group", "aria-label": label } : {},
+      children
+    }
+  );
+}
+export {
+  Chart,
+  ChartCard,
+  ChartConfigProvider,
+  ChartDataTable,
+  ChartFrame,
+  ChartGrid,
+  ChartLegend,
+  ChartState,
+  ColorScaleLegend,
+  EChartsChart,
+  SvgChart,
+  defaultChartHeight,
+  defaultEChartsLoader,
+  mergeMessages,
+  readThemeColors,
+  themeAt,
+  useChartConfig
+};
+//# sourceMappingURL=react.js.map