@krizaka/charts 0.0.0-stage → 0.2.0

package/dist/chunk-OB5EFDDH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/shape.ts"],"sourcesContent":["// SVG path data for the marks: lines (linear, monotone, step), areas, bars with a rounded data end, arcs. Shared by\n// the web (`<path d>`) and React Native (react-native-svg's `<Path d>`): the same geometry on both platforms.\n\nexport type Point = readonly [number, number];\nexport type Curve = \"linear\" | \"monotone\" | \"step\";\n\nconst r = (n: number) => Math.round(n * 100) / 100;\n\n/** The segments of a line, split where a value is missing (a gap stays a gap, never a fake zero). */\nexport function segments(points: readonly (Point | null)[]): Point[][] {\n  const out: Point[][] = [];\n  let current: Point[] = [];\n  for (const point of points) {\n    if (point) current.push(point);\n    else if (current.length) {\n      out.push(current);\n      current = [];\n    }\n  }\n  if (current.length) out.push(current);\n  return out;\n}\n\n/** The path of one segment. `monotone` (Fritsch–Carlson) never overshoots: a curve that never invents a peak. */\nexport function linePath(points: readonly Point[], curve: Curve = \"monotone\"): string {\n  if (points.length === 0) return \"\";\n  const [x0, y0] = points[0]!;\n  if (points.length === 1) return `M${r(x0)},${r(y0)}`;\n  if (curve === \"step\") {\n    let d = `M${r(x0)},${r(y0)}`;\n    for (let i = 1; i < points.length; i += 1) {\n      const [px] = points[i - 1]!;\n      const [x, y] = points[i]!;\n      const mid = (px + x) / 2;\n      d += `H${r(mid)}V${r(y)}H${r(x)}`;\n    }\n    return d;\n  }\n  if (curve === \"linear\" || points.length === 2) return points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${r(x)},${r(y)}`).join(\"\");\n  const tangents = monotoneTangents(points);\n  let d = `M${r(x0)},${r(y0)}`;\n  for (let i = 1; i < points.length; i += 1) {\n    const [xa, ya] = points[i - 1]!;\n    const [xb, yb] = points[i]!;\n    const h = (xb - xa) / 3;\n    d += `C${r(xa + h)},${r(ya + h * tangents[i - 1]!)} ${r(xb - h)},${r(yb - h * tangents[i]!)} ${r(xb)},${r(yb)}`;\n  }\n  return d;\n}\n\nfunction monotoneTangents(points: readonly Point[]): number[] {\n  const n = points.length;\n  const slopes: number[] = [];\n  for (let i = 0; i < n - 1; i += 1) {\n    const [xa, ya] = points[i]!;\n    const [xb, yb] = points[i + 1]!;\n    slopes.push(xb === xa ? 0 : (yb - ya) / (xb - xa));\n  }\n  const tangents = [slopes[0]!];\n  for (let i = 1; i < n - 1; i += 1) {\n    const a = slopes[i - 1]!;\n    const b = slopes[i]!;\n    tangents.push(a * b <= 0 ? 0 : (3 * a * b) / (Math.max(a, b) * 2 + Math.min(a, b)) || 0);\n  }\n  tangents.push(slopes[n - 2]!);\n  return tangents;\n}\n\n/** An area under (or between) lines: the top points left to right, then the base right to left. */\nexport function areaPath(top: readonly Point[], base: readonly Point[] | number, curve: Curve = \"monotone\"): string {\n  if (top.length === 0) return \"\";\n  const line = linePath(top, curve);\n  const bottom: Point[] = typeof base === \"number\" ? [top[top.length - 1]!, top[0]!].map(([x]) => [x, base] as Point) : [...base].reverse();\n  if (typeof base === \"number\") return `${line}L${r(bottom[0]![0])},${r(base)}L${r(bottom[1]![0])},${r(base)}Z`;\n  return `${line}L${linePath(bottom, curve).slice(1)}Z`;\n}\n\n/**\n * A bar from its baseline to its value, the data end rounded (`radius`, 4 px by default), square on the baseline.\n * `horizontal` bars grow to the right (or left for a negative value).\n */\nexport function barPath(x: number, y: number, width: number, height: number, radius = 4, horizontal = false, negative = false): string {\n  if (width <= 0 || height <= 0) return \"\";\n  const rad = Math.min(radius, horizontal ? height / 2 : width / 2, horizontal ? width : height);\n  if (!horizontal) {\n    if (!negative) {\n      // Rounded at the top, square at the baseline (bottom).\n      return `M${r(x)},${r(y + height)}V${r(y + rad)}Q${r(x)},${r(y)} ${r(x + rad)},${r(y)}H${r(x + width - rad)}Q${r(x + width)},${r(y)} ${r(x + width)},${r(y + rad)}V${r(y + height)}Z`;\n    }\n    return `M${r(x)},${r(y)}V${r(y + height - rad)}Q${r(x)},${r(y + height)} ${r(x + rad)},${r(y + height)}H${r(x + width - rad)}Q${r(x + width)},${r(y + height)} ${r(x + width)},${r(y + height - rad)}V${r(y)}Z`;\n  }\n  if (!negative) {\n    return `M${r(x)},${r(y)}H${r(x + width - rad)}Q${r(x + width)},${r(y)} ${r(x + width)},${r(y + rad)}V${r(y + height - rad)}Q${r(x + width)},${r(y + height)} ${r(x + width - rad)},${r(y + height)}H${r(x)}Z`;\n  }\n  return `M${r(x + width)},${r(y)}H${r(x + rad)}Q${r(x)},${r(y)} ${r(x)},${r(y + rad)}V${r(y + height - rad)}Q${r(x)},${r(y + height)} ${r(x + rad)},${r(y + height)}H${r(x + width)}Z`;\n}\n\n/** A point on a circle, the angle in radians from twelve o'clock, clockwise. */\nexport function polar(cx: number, cy: number, radius: number, angle: number): Point {\n  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];\n}\n\n/**\n * A ring sector (a pie slice when `inner` is 0), from `start` to `end` (radians, clockwise from twelve o'clock).\n * A full turn is drawn as two halves: an SVG arc cannot start and end on the same point.\n */\nexport function arcPath(cx: number, cy: number, inner: number, outer: number, start: number, end: number): string {\n  const sweep = end - start;\n  if (sweep <= 0 || outer <= 0) return \"\";\n  if (sweep >= Math.PI * 2 - 1e-6) {\n    const mid = start + Math.PI;\n    return `${arcPath(cx, cy, inner, outer, start, mid)}${arcPath(cx, cy, inner, outer, mid, start + Math.PI * 2)}`;\n  }\n  const large = sweep > Math.PI ? 1 : 0;\n  const [ox0, oy0] = polar(cx, cy, outer, start);\n  const [ox1, oy1] = polar(cx, cy, outer, end);\n  let d = `M${r(ox0)},${r(oy0)}A${r(outer)},${r(outer)} 0 ${large} 1 ${r(ox1)},${r(oy1)}`;\n  if (inner > 0) {\n    const [ix1, iy1] = polar(cx, cy, inner, end);\n    const [ix0, iy0] = polar(cx, cy, inner, start);\n    d += `L${r(ix1)},${r(iy1)}A${r(inner)},${r(inner)} 0 ${large} 0 ${r(ix0)},${r(iy0)}Z`;\n  } else d += `L${r(cx)},${r(cy)}Z`;\n  return d;\n}\n\n/** An open arc (a gauge's track), stroked rather than filled. */\nexport function strokeArcPath(cx: number, cy: number, radius: number, start: number, end: number): string {\n  if (end - start <= 0) return \"\";\n  const [x0, y0] = polar(cx, cy, radius, start);\n  const [x1, y1] = polar(cx, cy, radius, end);\n  return `M${r(x0)},${r(y0)}A${r(radius)},${r(radius)} 0 ${end - start > Math.PI ? 1 : 0} 1 ${r(x1)},${r(y1)}`;\n}\n"],"mappings":"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","names":["d"]}

package/dist/chunk-OIRHLJBC.js

@@ -0,0 +1,83 @@
+"use client";
+import {
+  BarChart
+} from "./chunk-WVTIKOII.js";
+import {
+  Kpi,
+  toneOf
+} from "./chunk-WBHFVBSK.js";
+import {
+  EARNINGS_LABELS,
+  direction,
+  fillIn,
+  lastChange,
+  numberOf,
+  signedPercent,
+  total
+} from "./chunk-WNUFGMS7.js";
+import {
+  valueFormatter
+} from "./chunk-XLLYNNC6.js";
+import {
+  useSettings
+} from "./chunk-JTKR7ZWP.js";
+
+// src/earnings/earnings-chart.tsx
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function EarningsChart({
+  x = "month",
+  net,
+  gross,
+  currency,
+  period = "month",
+  payoutThreshold,
+  hideSummary,
+  labels: given,
+  description,
+  data,
+  ...props
+}) {
+  const words = { ...EARNINGS_LABELS, ...given };
+  const { locale } = useSettings(props);
+  const format = { style: "money", currency };
+  const series = useMemo(
+    () => gross ? [{ key: gross, label: words.gross, color: 2 }, { key: net, label: words.net, color: 1 }] : [{ key: net, label: words.net, color: 1 }],
+    [gross, net, words.gross, words.net]
+  );
+  const values = data.map((row, i) => numberOf(row, net, i));
+  const change = lastChange(values);
+  const way = direction(change);
+  const summary = hideSummary ? null : /* @__PURE__ */ jsx(
+    Kpi,
+    {
+      value: valueFormatter(format, locale)(total(data, net)),
+      label: fillIn(words.total, { count: data.length }),
+      delta: change == null ? null : fillIn(words.change, { change: signedPercent(change, locale) }),
+      direction: way,
+      tone: toneOf(way, "up")
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      ...props,
+      data,
+      x,
+      series,
+      format,
+      xFormat: period,
+      thresholds: payoutThreshold ? [{ tone: "success", ...payoutThreshold }] : void 0,
+      description: description || summary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        description,
+        description && summary ? /* @__PURE__ */ jsx("br", {}) : null,
+        summary
+      ] }) : void 0
+    }
+  );
+}
+
+export {
+  EarningsChart
+};
+//# sourceMappingURL=chunk-OIRHLJBC.js.map

package/dist/chunk-OIRHLJBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/earnings/earnings-chart.tsx"],"sourcesContent":["\"use client\";\n// A creator's earnings per period (Orochia /earnings, the console's treasury): bars of the net amount in money minor\n// units, the total and the last period's change written above, the payout threshold as a line. A BarChart preset:\n// the money format, the period format and the words are chosen for the need.\nimport { useMemo } from \"react\";\n\nimport { BarChart } from \"../bar/bar-chart\";\nimport type { CartesianProps } from \"../cartesian/cartesian\";\nimport { valueFormatter } from \"../core/format\";\nimport type { Accessor, CategoryFormat, Datum, SeriesSpec, Threshold } from \"../core/types\";\nimport { Kpi, toneOf } from \"../needs/kpi\";\nimport { EARNINGS_LABELS, type EarningsLabels } from \"../needs/labels\";\nimport { direction, fillIn, lastChange, numberOf, signedPercent, total } from \"../needs/model\";\nimport { useSettings } from \"../web/frame\";\n\nexport interface EarningsChartProps<T extends Datum>\n  extends Omit<CartesianProps<T>, \"y\" | \"yLabel\" | \"series\" | \"format\" | \"x\" | \"xFormat\" | \"thresholds\" | \"labels\"> {\n  /** The field (or function) of the period: an ISO month (`\"2026-04\"`), a day. Default `\"month\"`. */\n  x?: Accessor<T, unknown>;\n  /** The net amount of each period, in **minor units** (cents), as the ledger stores it. */\n  net: Accessor<T, number | null | undefined>;\n  /** The gross amount (before fees), drawn beside the net when given. */\n  gross?: Accessor<T, number | null | undefined>;\n  /** The ISO 4217 currency (`\"USD\"`, `\"EUR\"`). */\n  currency: string;\n  /** How the periods are written. Default `\"month\"` (`Apr 2026`). */\n  period?: CategoryFormat;\n  /** The minimum to withdraw, drawn as a line: `{ value: 5000, label: \"Payout threshold\" }`. */\n  payoutThreshold?: Threshold;\n  /** Hide the total and the change above the bars. */\n  hideSummary?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<EarningsLabels>;\n}\n\n/** Earnings per period in money — the total, the change of the last period, the payout threshold. */\nexport function EarningsChart<T extends Datum>({\n  x = \"month\" as Accessor<T, unknown>,\n  net,\n  gross,\n  currency,\n  period = \"month\",\n  payoutThreshold,\n  hideSummary,\n  labels: given,\n  description,\n  data,\n  ...props\n}: EarningsChartProps<T>) {\n  const words = { ...EARNINGS_LABELS, ...given };\n  const { locale } = useSettings(props as CartesianProps<T>);\n  const format = { style: \"money\", currency } as const;\n  const series = useMemo<SeriesSpec<T>[]>(\n    () => (gross ? [{ key: gross, label: words.gross, color: 2 }, { key: net, label: words.net, color: 1 }] : [{ key: net, label: words.net, color: 1 }]),\n    [gross, net, words.gross, words.net],\n  );\n  const values = data.map((row, i) => numberOf(row, net, i));\n  const change = lastChange(values);\n  const way = direction(change);\n  const summary = hideSummary ? null : (\n    <Kpi\n      value={valueFormatter(format, locale)(total(data, net))}\n      label={fillIn(words.total, { count: data.length })}\n      delta={change == null ? null : fillIn(words.change, { change: signedPercent(change, locale) })}\n      direction={way}\n      tone={toneOf(way, \"up\")}\n    />\n  );\n  return (\n    <BarChart\n      {...props}\n      data={data}\n      x={x}\n      series={series}\n      format={format}\n      xFormat={period}\n      thresholds={payoutThreshold ? [{ tone: \"success\", ...payoutThreshold }] : undefined}\n      description={\n        description || summary ? (\n          <>\n            {description}\n            {description && summary ? <br /> : null}\n            {summary}\n          </>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,eAAe;AAwDpB,SAmBM,UAnBN,KAmBM,YAnBN;AAxBG,SAAS,cAA+B;AAAA,EAC7C,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,QAAQ,EAAE,GAAG,iBAAiB,GAAG,MAAM;AAC7C,QAAM,EAAE,OAAO,IAAI,YAAY,KAA0B;AACzD,QAAM,SAAS,EAAE,OAAO,SAAS,SAAS;AAC1C,QAAM,SAAS;AAAA,IACb,MAAO,QAAQ,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,OAAO,OAAO,EAAE,GAAG,EAAE,KAAK,KAAK,OAAO,MAAM,KAAK,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,OAAO,MAAM,KAAK,OAAO,EAAE,CAAC;AAAA,IACnJ,CAAC,OAAO,KAAK,MAAM,OAAO,MAAM,GAAG;AAAA,EACrC;AACA,QAAM,SAAS,KAAK,IAAI,CAAC,KAAK,MAAM,SAAS,KAAK,KAAK,CAAC,CAAC;AACzD,QAAM,SAAS,WAAW,MAAM;AAChC,QAAM,MAAM,UAAU,MAAM;AAC5B,QAAM,UAAU,cAAc,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,QAAQ,MAAM,EAAE,MAAM,MAAM,GAAG,CAAC;AAAA,MACtD,OAAO,OAAO,MAAM,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;AAAA,MACjD,OAAO,UAAU,OAAO,OAAO,OAAO,MAAM,QAAQ,EAAE,QAAQ,cAAc,QAAQ,MAAM,EAAE,CAAC;AAAA,MAC7F,WAAW;AAAA,MACX,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,EACxB;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,YAAY,kBAAkB,CAAC,EAAE,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI;AAAA,MAC1E,aACE,eAAe,UACb,iCACG;AAAA;AAAA,QACA,eAAe,UAAU,oBAAC,QAAG,IAAK;AAAA,QAClC;AAAA,SACH,IACE;AAAA;AAAA,EAER;AAEJ;","names":[]}

package/dist/chunk-PBQV3B6O.js

@@ -0,0 +1,145 @@
+"use client";
+import {
+  describeParts
+} from "./chunk-ANUCSRUN.js";
+import {
+  read
+} from "./chunk-W5FX4TU3.js";
+import {
+  arcPath,
+  polar
+} from "./chunk-OB5EFDDH.js";
+import {
+  shareFormatter,
+  valueFormatter
+} from "./chunk-XLLYNNC6.js";
+import {
+  ChartFrame,
+  Tooltip,
+  colorOf,
+  useSettings
+} from "./chunk-JTKR7ZWP.js";
+
+// src/pie/pie-chart.tsx
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PieChart(props) {
+  const { data, label, value, color, format, donut = false, centerLabel, centerValue, maxSlices = 6, otherLabel = "Other", onSelect, labelHeader, valueHeader } = props;
+  const { locale, labels } = useSettings(props);
+  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);
+  const slices = useMemo(() => {
+    const rows = data.map((datum, index) => ({ datum, index, label: read(label, datum, index), value: Math.max(0, Number(read(value, datum, index)) || 0) })).sort((a, b) => b.value - a.value);
+    const kept = rows.length > maxSlices ? rows.slice(0, maxSlices - 1) : rows;
+    const out = kept.map((row, i) => ({ ...row, color: colorOf(color ? read(color, row.datum, row.index) : void 0, i + 1) }));
+    if (rows.length > maxSlices) {
+      const rest = rows.slice(maxSlices - 1).reduce((sum, row) => sum + row.value, 0);
+      out.push({ label: otherLabel, value: rest, color: "var(--kz-text-muted)", index: -1 });
+    }
+    return out;
+  }, [data, label, value, color, maxSlices, otherLabel]);
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  const isEmpty = total <= 0;
+  const kind = donut ? "donut" : "pie";
+  const summary = useMemo(() => isEmpty ? labels.empty : describeParts(kind, slices, { labels, value: fmt.value, share: fmt.share }), [isEmpty, kind, slices, labels, fmt]);
+  const table = useMemo(
+    () => ({
+      columns: [labelHeader ?? labels.category, valueHeader ?? labels.value, "%"],
+      rows: [...slices.map((s) => [s.label, fmt.value(s.value), fmt.share(total ? s.value / total : 0)]), [labels.total, fmt.value(total), fmt.share(1)]]
+    }),
+    [slices, fmt, total, labels, labelHeader, valueHeader]
+  );
+  const [active, setActive] = useState(null);
+  const onKeyDown = (event) => {
+    const n = slices.length;
+    const moves = {
+      ArrowRight: () => ((active ?? -1) + 1) % n,
+      ArrowDown: () => ((active ?? -1) + 1) % n,
+      ArrowLeft: () => ((active ?? 0) - 1 + n) % n,
+      ArrowUp: () => ((active ?? 0) - 1 + n) % n,
+      Home: () => 0,
+      End: () => n - 1,
+      Escape: () => null
+    };
+    if (event.key === "Enter" && active !== null && onSelect) {
+      const slice = slices[active];
+      if (slice.datum) onSelect(slice.datum, slice.index);
+      return;
+    }
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    setActive(move());
+  };
+  const say = (s) => `${s.label}: ${fmt.value(s.value)} (${fmt.share(total ? s.value / total : 0)})`;
+  const legend = /* @__PURE__ */ jsx("ul", { className: "kzc-legend", "aria-hidden": true, children: slices.map((s) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("span", { className: "kzc-key", style: { background: s.color } }),
+    s.label,
+    " \xB7 ",
+    fmt.share(total ? s.value / total : 0)
+  ] }, s.label)) });
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      kind,
+      frame: props,
+      defaultHeight: 240,
+      table,
+      summary,
+      isEmpty,
+      legend: isEmpty ? null : legend,
+      announcement: active === null ? "" : say(slices[active]),
+      active: active !== null,
+      handlers: { onKeyDown, onBlur: () => setActive(null), onPointerLeave: () => setActive(null) },
+      children: (width, height) => {
+        const radius = Math.max(10, Math.min(width, height) / 2 - 6);
+        const inner = donut ? radius * 0.64 : 0;
+        const cx = width / 2;
+        const cy = height / 2;
+        let angle = 0;
+        const arcs = slices.map((s, i) => {
+          const sweep = total ? s.value / total * Math.PI * 2 : 0;
+          const start = angle;
+          angle += sweep;
+          return { s, i, start, end: angle };
+        });
+        const current = active !== null ? arcs[active] : null;
+        const mid = current ? (current.start + current.end) / 2 : 0;
+        const [tx, ty] = current ? polar(cx, cy, (radius + inner) / 2 + (donut ? 0 : radius * 0.2), mid) : [0, 0];
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("svg", { className: "kzc-svg", width, height, viewBox: `0 0 ${width} ${height}`, "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx("g", { className: "kzc-enter-pop", children: arcs.map(({ s, i, start, end }) => {
+              const lift = active === i ? 4 : 0;
+              const [dx, dy] = lift ? polar(0, 0, lift, (start + end) / 2) : [0, 0];
+              return /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: arcPath(cx + dx, cy + dy, inner, radius, start, end),
+                  className: "kzc-mark",
+                  "data-dim": active !== null && active !== i ? "" : void 0,
+                  style: { fill: s.color, stroke: "var(--kzc-surface)", strokeWidth: slices.length > 1 ? 2 : 0, strokeLinejoin: "round", cursor: onSelect ? "pointer" : void 0 },
+                  onPointerEnter: () => setActive(i),
+                  onClick: onSelect && s.datum ? () => onSelect(s.datum, s.index) : void 0
+                },
+                s.label
+              );
+            }) }),
+            donut && /* @__PURE__ */ jsxs("g", { className: "kzc-enter-fade", children: [
+              /* @__PURE__ */ jsx("text", { x: cx, y: cy - (centerLabel ? 6 : 0), textAnchor: "middle", dominantBaseline: "central", className: "kzc-strong", style: { fontSize: Math.max(14, Math.min(26, inner / 3)) }, children: centerValue ?? fmt.value(total) }),
+              centerLabel && /* @__PURE__ */ jsx("text", { x: cx, y: cy + Math.max(12, Math.min(20, inner / 4)), textAnchor: "middle", dominantBaseline: "central", children: centerLabel })
+            ] })
+          ] }),
+          current && /* @__PURE__ */ jsx(Tooltip, { x: tx, y: ty, width, title: current.s.label, rows: [{ label: fmt.share(total ? current.s.value / total : 0), value: fmt.value(current.s.value), color: current.s.color }] })
+        ] });
+      }
+    }
+  );
+}
+function DonutChart(props) {
+  return /* @__PURE__ */ jsx(PieChart, { ...props, donut: true });
+}
+
+export {
+  PieChart,
+  DonutChart
+};
+//# sourceMappingURL=chunk-PBQV3B6O.js.map

package/dist/chunk-PBQV3B6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pie/pie-chart.tsx"],"sourcesContent":["\"use client\";\n// Part of a whole: a pie, or a donut with the total in its hole. Plain SVG. The slices are sorted largest first and\n// folded into “Other” past `maxSlices` (a ninth hue is never invented); a 2 px surface gap separates them; the legend\n// carries each part's value and share, so the colour is never the only way to read it.\nimport { type KeyboardEvent, useMemo, useState } from \"react\";\n\nimport { read } from \"../core/data\";\nimport { describeParts } from \"../core/describe\";\nimport { shareFormatter, valueFormatter } from \"../core/format\";\nimport { arcPath, polar } from \"../core/shape\";\nimport type { Accessor, Datum, SeriesColor, ValueFormat } from \"../core/types\";\nimport { ChartFrame, type ChartFrameProps, useSettings } from \"../web/frame\";\nimport { colorOf, Tooltip } from \"../web/parts\";\n\nexport interface PieChartProps<T extends Datum> extends ChartFrameProps {\n  /** One row per part. */\n  data: readonly T[];\n  /** The field (or function) naming the part. */\n  label: Accessor<T, string>;\n  /** The field (or function) of its amount (≥ 0). */\n  value: Accessor<T, number>;\n  /** A part's own colour (a slot, a tone or a CSS colour); default: the palette in order of size. */\n  color?: Accessor<T, SeriesColor | undefined>;\n  /** How the amounts are written. */\n  format?: ValueFormat;\n  /** A ring rather than a pie: the total (or `centerValue`) is written in its hole. */\n  donut?: boolean;\n  /** The words under the number in the hole of a donut (“Total credits”). */\n  centerLabel?: string;\n  /** The number in the hole, written already. Default: the total. */\n  centerValue?: string;\n  /** At most this many slices; the rest fold into one, named `otherLabel`. Default 6. */\n  maxSlices?: number;\n  /** The name of the folded slice. Default “Other”. */\n  otherLabel?: string;\n  /** Called with the row when a slice is clicked (or Enter is pressed on it). */\n  onSelect?: (datum: T, index: number) => void;\n  /** The header of the parts in the data table. */\n  labelHeader?: string;\n  /** The header of the amounts in the data table. */\n  valueHeader?: string;\n}\n\ninterface Slice<T> {\n  readonly label: string;\n  readonly value: number;\n  readonly color: string;\n  readonly datum?: T;\n  readonly index: number;\n}\n\nexport function PieChart<T extends Datum>(props: PieChartProps<T>) {\n  const { data, label, value, color, format, donut = false, centerLabel, centerValue, maxSlices = 6, otherLabel = \"Other\", onSelect, labelHeader, valueHeader } = props;\n  const { locale, labels } = useSettings(props);\n  const fmt = useMemo(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);\n\n  const slices = useMemo<Slice<T>[]>(() => {\n    const rows = data\n      .map((datum, index) => ({ datum, index, label: read(label, datum, index), value: Math.max(0, Number(read(value, datum, index)) || 0) }))\n      .sort((a, b) => b.value - a.value);\n    const kept = rows.length > maxSlices ? rows.slice(0, maxSlices - 1) : rows;\n    const out: Slice<T>[] = kept.map((row, i) => ({ ...row, color: colorOf(color ? read(color, row.datum, row.index) : undefined, i + 1) }));\n    if (rows.length > maxSlices) {\n      const rest = rows.slice(maxSlices - 1).reduce((sum, row) => sum + row.value, 0);\n      out.push({ label: otherLabel, value: rest, color: \"var(--kz-text-muted)\", index: -1 });\n    }\n    return out;\n  }, [data, label, value, color, maxSlices, otherLabel]);\n\n  const total = slices.reduce((sum, s) => sum + s.value, 0);\n  const isEmpty = total <= 0;\n  const kind = donut ? \"donut\" : \"pie\";\n  const summary = useMemo(() => (isEmpty ? labels.empty : describeParts(kind, slices, { labels, value: fmt.value, share: fmt.share })), [isEmpty, kind, slices, labels, fmt]);\n  const table = useMemo(\n    () => ({\n      columns: [labelHeader ?? labels.category, valueHeader ?? labels.value, \"%\"],\n      rows: [...slices.map((s) => [s.label, fmt.value(s.value), fmt.share(total ? s.value / total : 0)]), [labels.total, fmt.value(total), fmt.share(1)]],\n    }),\n    [slices, fmt, total, labels, labelHeader, valueHeader],\n  );\n\n  const [active, setActive] = useState<number | null>(null);\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const n = slices.length;\n    const moves: Record<string, () => number | null> = {\n      ArrowRight: () => ((active ?? -1) + 1) % n,\n      ArrowDown: () => ((active ?? -1) + 1) % n,\n      ArrowLeft: () => ((active ?? 0) - 1 + n) % n,\n      ArrowUp: () => ((active ?? 0) - 1 + n) % n,\n      Home: () => 0,\n      End: () => n - 1,\n      Escape: () => null,\n    };\n    if (event.key === \"Enter\" && active !== null && onSelect) {\n      const slice = slices[active]!;\n      if (slice.datum) onSelect(slice.datum, slice.index);\n      return;\n    }\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    setActive(move());\n  };\n  const say = (s: Slice<T>) => `${s.label}: ${fmt.value(s.value)} (${fmt.share(total ? s.value / total : 0)})`;\n\n  const legend = (\n    <ul className=\"kzc-legend\" aria-hidden>\n      {slices.map((s) => (\n        <li key={s.label}>\n          <span className=\"kzc-key\" style={{ background: s.color }} />\n          {s.label} · {fmt.share(total ? s.value / total : 0)}\n        </li>\n      ))}\n    </ul>\n  );\n\n  return (\n    <ChartFrame\n      kind={kind}\n      frame={props}\n      defaultHeight={240}\n      table={table}\n      summary={summary}\n      isEmpty={isEmpty}\n      legend={isEmpty ? null : legend}\n      announcement={active === null ? \"\" : say(slices[active]!)}\n      active={active !== null}\n      handlers={{ onKeyDown, onBlur: () => setActive(null), onPointerLeave: () => setActive(null) }}\n    >\n      {(width, height) => {\n        const radius = Math.max(10, Math.min(width, height) / 2 - 6);\n        const inner = donut ? radius * 0.64 : 0;\n        const cx = width / 2;\n        const cy = height / 2;\n        let angle = 0;\n        const arcs = slices.map((s, i) => {\n          const sweep = total ? (s.value / total) * Math.PI * 2 : 0;\n          const start = angle;\n          angle += sweep;\n          return { s, i, start, end: angle };\n        });\n        const current = active !== null ? arcs[active] : null;\n        const mid = current ? (current.start + current.end) / 2 : 0;\n        const [tx, ty] = current ? polar(cx, cy, (radius + inner) / 2 + (donut ? 0 : radius * 0.2), mid) : [0, 0];\n        return (\n          <>\n            <svg className=\"kzc-svg\" width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden>\n              <g className=\"kzc-enter-pop\">\n                {arcs.map(({ s, i, start, end }) => {\n                  const lift = active === i ? 4 : 0;\n                  const [dx, dy] = lift ? polar(0, 0, lift, (start + end) / 2) : [0, 0];\n                  return (\n                    <path\n                      key={s.label}\n                      d={arcPath(cx + dx, cy + dy, inner, radius, start, end)}\n                      className=\"kzc-mark\"\n                      data-dim={active !== null && active !== i ? \"\" : undefined}\n                      style={{ fill: s.color, stroke: \"var(--kzc-surface)\", strokeWidth: slices.length > 1 ? 2 : 0, strokeLinejoin: \"round\", cursor: onSelect ? \"pointer\" : undefined }}\n                      onPointerEnter={() => setActive(i)}\n                      onClick={onSelect && s.datum ? () => onSelect(s.datum!, s.index) : undefined}\n                    />\n                  );\n                })}\n              </g>\n              {donut && (\n                <g className=\"kzc-enter-fade\">\n                  <text x={cx} y={cy - (centerLabel ? 6 : 0)} textAnchor=\"middle\" dominantBaseline=\"central\" className=\"kzc-strong\" style={{ fontSize: Math.max(14, Math.min(26, inner / 3)) }}>\n                    {centerValue ?? fmt.value(total)}\n                  </text>\n                  {centerLabel && (\n                    <text x={cx} y={cy + Math.max(12, Math.min(20, inner / 4))} textAnchor=\"middle\" dominantBaseline=\"central\">\n                      {centerLabel}\n                    </text>\n                  )}\n                </g>\n              )}\n            </svg>\n            {current && <Tooltip x={tx} y={ty} width={width} title={current.s.label} rows={[{ label: fmt.share(total ? current.s.value / total : 0), value: fmt.value(current.s.value), color: current.s.color }]} />}\n          </>\n        );\n      }}\n    </ChartFrame>\n  );\n}\n\n/** A pie with a hole: the total (or `centerValue`) and `centerLabel` in it. */\nexport function DonutChart<T extends Datum>(props: Omit<PieChartProps<T>, \"donut\">) {\n  return <PieChart {...props} donut />;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-POQIHFAZ.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-POQIHFAZ.js.map

package/dist/chunk-POQIHFAZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-PWMMXRMC.js

@@ -0,0 +1,234 @@
+"use client";
+import {
+  ChartFrame,
+  resolveColor,
+  useInView,
+  useReducedMotion,
+  useThemeVersion
+} from "./chunk-JTKR7ZWP.js";
+import {
+  sequential
+} from "./chunk-3CJHBJXA.js";
+
+// src/echarts/theme.ts
+var ROLES = {
+  text: "--kz-text-primary",
+  text2: "--kz-text-secondary",
+  text3: "--kz-text-muted",
+  grid: "--kz-border-subtle",
+  axis: "--kz-border-default",
+  surface: "--kz-surface-1",
+  surface2: "--kz-surface-2",
+  surface3: "--kz-surface-3",
+  border: "--kz-border-default",
+  accent: "--kz-accent",
+  success: "--kz-success",
+  warning: "--kz-warning",
+  danger: "--kz-danger",
+  info: "--kz-info",
+  low: "--kzc-low",
+  high: "--kzc-high"
+};
+function resolveTheme(el) {
+  const color = (name) => resolveColor(`var(${name})`, el);
+  const roles = Object.fromEntries(Object.entries(ROLES).map(([key, name]) => [key, color(name)]));
+  const palette = Array.from({ length: 8 }, (_, i) => color(`--kzc-${i + 1}`));
+  const font = getComputedStyle(el).fontFamily || "system-ui, sans-serif";
+  return { ...roles, palette, ramp: sequential(palette[0], roles.surface, 5), font };
+}
+function baseOption(theme, animate) {
+  return {
+    color: [...theme.palette],
+    backgroundColor: "transparent",
+    textStyle: { color: theme.text2, fontFamily: theme.font, fontSize: 11 },
+    animation: animate,
+    animationDuration: 700,
+    animationEasing: "cubicOut",
+    animationDurationUpdate: 300,
+    tooltip: {
+      confine: true,
+      backgroundColor: theme.surface2,
+      borderColor: theme.border,
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: { color: theme.text, fontFamily: theme.font, fontSize: 12 },
+      extraCssText: "border-radius:10px;box-shadow:var(--kz-shadow-lg);min-width:140px;"
+    }
+  };
+}
+function valueAxis(theme, formatter) {
+  return {
+    type: "value",
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { lineStyle: { color: theme.grid, width: 1 } },
+    axisLabel: { color: theme.text2, formatter }
+  };
+}
+function categoryAxis(theme, data) {
+  return {
+    type: "category",
+    data,
+    axisLine: { lineStyle: { color: theme.axis } },
+    axisTick: { show: false },
+    axisLabel: { color: theme.text2, hideOverlap: true },
+    splitLine: { show: false }
+  };
+}
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function tooltipHtml(title, rows, note) {
+  const head = title ? `<p class="kzc-tip-title">${escape(title)}</p>` : "";
+  const body = rows.map((row) => `<p class="kzc-tip-row">${row.color ? `<span class="kzc-key" style="background:${escape(row.color)}"></span>` : "<span></span>"}<span>${escape(row.label)}</span><b>${escape(row.value)}</b></p>`).join("");
+  return `${head}${body}${note ? `<p class="kzc-tip-note">${escape(note)}</p>` : ""}`;
+}
+
+// src/echarts/host.tsx
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RENDERERS = {
+  svg: () => import("./svg-BJUHYX3B.js"),
+  canvas: () => import("./canvas-4MSYDVFO.js")
+};
+var install = (module) => {
+  const fn = module?.install;
+  if (typeof fn === "function") fn();
+};
+function EChartHost({ kind, frame, defaultHeight, table, summary, isEmpty, legend, engine, build, items = [], onItem }) {
+  const instance = useRef(null);
+  const [active, setActive] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const renderer = frame.renderer ?? "svg";
+  const onKeyDown = (event) => {
+    const n = items.length;
+    if (!n) return;
+    if (event.key === "Enter" && active !== null && onItem) {
+      onItem(items[active]);
+      return;
+    }
+    const moves = {
+      ArrowRight: () => ((active ?? -1) + 1) % n,
+      ArrowDown: () => ((active ?? -1) + 1) % n,
+      ArrowLeft: () => ((active ?? 0) - 1 + n) % n,
+      ArrowUp: () => ((active ?? 0) - 1 + n) % n,
+      Home: () => 0,
+      End: () => n - 1,
+      Escape: () => null
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    setActive(move());
+  };
+  const exportImage = (format) => {
+    const chart = instance.current;
+    if (!chart) return null;
+    const dom = chart.getDom();
+    const background = resolveTheme(dom).surface;
+    return chart.getDataURL({ type: format === "svg" && renderer === "svg" ? "svg" : "png", pixelRatio: 2, backgroundColor: background });
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      kind,
+      frame: { ...frame, error: frame.error ?? (failed || void 0) },
+      defaultHeight,
+      table,
+      summary,
+      isEmpty,
+      legend,
+      announcement: active === null ? "" : items[active]?.text ?? "",
+      handlers: { onKeyDown, onBlur: () => setActive(null) },
+      navigable: items.length > 0,
+      exportImage,
+      children: (width, height) => /* @__PURE__ */ jsx(
+        Host,
+        {
+          width,
+          height,
+          renderer,
+          engine,
+          build,
+          active: active === null ? null : items[active] ?? null,
+          instance,
+          onItem,
+          onFail: () => setFailed(true)
+        }
+      )
+    }
+  );
+}
+function Host({ width, height, renderer, engine, build, active, instance, onItem, onFail }) {
+  const ref = useRef(null);
+  const near = useInView(ref, { once: true, margin: "200px" });
+  const reduced = useReducedMotion();
+  const themeVersion = useThemeVersion();
+  const [ready, setReady] = useState(false);
+  const [drawn, setDrawn] = useState(false);
+  const size = useRef({ width, height });
+  const itemRef = useRef(onItem);
+  const failRef = useRef(onFail);
+  useEffect(() => {
+    size.current = { width, height };
+    itemRef.current = onItem;
+    failRef.current = onFail;
+  });
+  useEffect(() => {
+    if (!near) return void 0;
+    let alive = true;
+    Promise.all([engine(), RENDERERS[renderer]()]).then(
+      ([module, painter]) => {
+        if (!alive || !ref.current) return;
+        install(module);
+        painter.install();
+        const { init } = painter;
+        const chart = init(ref.current, null, { renderer, ...size.current });
+        chart.on("finished", () => setDrawn(true));
+        chart.on("click", (params) => {
+          const p = params;
+          if (p.seriesIndex != null && p.dataIndex != null) itemRef.current?.({ seriesIndex: p.seriesIndex, dataIndex: p.dataIndex });
+        });
+        instance.current = chart;
+        setReady(true);
+      },
+      () => alive && failRef.current()
+    );
+    return () => {
+      alive = false;
+      instance.current?.dispose();
+      instance.current = null;
+      setReady(false);
+    };
+  }, [near, renderer, engine, instance]);
+  useEffect(() => {
+    if (ready) instance.current?.resize({ width, height });
+  }, [ready, width, height, instance]);
+  useEffect(() => {
+    const chart = instance.current;
+    if (!ready || !chart || !ref.current) return;
+    const option = build(resolveTheme(ref.current), { width, height });
+    chart.setOption({ ...option, animation: !reduced && option.animation !== false }, { notMerge: true });
+  }, [ready, build, themeVersion, reduced, width, height, instance]);
+  useEffect(() => {
+    const chart = instance.current;
+    if (!ready || !chart) return;
+    chart.dispatchAction({ type: "downplay" });
+    if (active) {
+      const target = { seriesIndex: active.seriesIndex, dataIndex: active.dataIndex, ...active.dataType ? { dataType: active.dataType } : {} };
+      chart.dispatchAction({ type: "highlight", ...target });
+      chart.dispatchAction({ type: "showTip", ...target });
+    } else chart.dispatchAction({ type: "hideTip" });
+  }, [ready, active, instance]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !drawn && /* @__PURE__ */ jsx("div", { className: "kzc-skeleton", "aria-hidden": true, children: [0.55, 0.8, 0.45, 0.95, 0.7, 0.6].map((h, i) => /* @__PURE__ */ jsx("i", { style: { height: `${h * 100}%` } }, i)) }),
+    /* @__PURE__ */ jsx("div", { ref, className: "kzc-host", "data-pending": drawn ? void 0 : "", "aria-hidden": true })
+  ] });
+}
+
+export {
+  baseOption,
+  valueAxis,
+  categoryAxis,
+  tooltipHtml,
+  EChartHost
+};
+//# sourceMappingURL=chunk-PWMMXRMC.js.map

package/dist/chunk-PWMMXRMC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/echarts/theme.ts","../src/echarts/host.tsx"],"sourcesContent":["\"use client\";\n// The ECharts side of the theme: the --kz-* roles and the palette's variables resolved to plain colours on the chart's\n// own element (a canvas has no CSS variables) — so a `.brand-<id>` ancestor, a `.theme-light` island and the\n// chart's `data-brand` all apply — and the option pieces every chart shares (text, axes, grid, tooltip).\nimport type { EChartsCoreOption } from \"echarts/core\";\n\nimport { sequential } from \"../core/palette\";\nimport { resolveColor } from \"../web/frame\";\n\nexport interface ResolvedTheme {\n  readonly text: string;\n  readonly text2: string;\n  readonly text3: string;\n  readonly grid: string;\n  readonly axis: string;\n  readonly surface: string;\n  readonly surface2: string;\n  readonly surface3: string;\n  readonly border: string;\n  readonly accent: string;\n  readonly success: string;\n  readonly warning: string;\n  readonly danger: string;\n  readonly info: string;\n  /** The categorical palette, slot 1 first. */\n  readonly palette: readonly string[];\n  /** A sequential ramp of the brand hue (5 steps, near the surface → full). */\n  readonly ramp: readonly string[];\n  /** The diverging poles. */\n  readonly low: string;\n  readonly high: string;\n  readonly font: string;\n}\n\nconst ROLES = {\n  text: \"--kz-text-primary\",\n  text2: \"--kz-text-secondary\",\n  text3: \"--kz-text-muted\",\n  grid: \"--kz-border-subtle\",\n  axis: \"--kz-border-default\",\n  surface: \"--kz-surface-1\",\n  surface2: \"--kz-surface-2\",\n  surface3: \"--kz-surface-3\",\n  border: \"--kz-border-default\",\n  accent: \"--kz-accent\",\n  success: \"--kz-success\",\n  warning: \"--kz-warning\",\n  danger: \"--kz-danger\",\n  info: \"--kz-info\",\n  low: \"--kzc-low\",\n  high: \"--kzc-high\",\n} as const;\n\n/** The theme as the browser resolves it on `el` (call again after a theme change). */\nexport function resolveTheme(el: Element): ResolvedTheme {\n  const color = (name: string) => resolveColor(`var(${name})`, el);\n  const roles = Object.fromEntries(Object.entries(ROLES).map(([key, name]) => [key, color(name)])) as Record<keyof typeof ROLES, string>;\n  const palette = Array.from({ length: 8 }, (_, i) => color(`--kzc-${i + 1}`));\n  const font = getComputedStyle(el).fontFamily || \"system-ui, sans-serif\";\n  return { ...roles, palette, ramp: sequential(palette[0]!, roles.surface, 5), font };\n}\n\n/** The option every ECharts chart starts from: colours, text, the tooltip's surface, motion. */\nexport function baseOption(theme: ResolvedTheme, animate: boolean): EChartsCoreOption {\n  return {\n    color: [...theme.palette],\n    backgroundColor: \"transparent\",\n    textStyle: { color: theme.text2, fontFamily: theme.font, fontSize: 11 },\n    animation: animate,\n    animationDuration: 700,\n    animationEasing: \"cubicOut\",\n    animationDurationUpdate: 300,\n    tooltip: {\n      confine: true,\n      backgroundColor: theme.surface2,\n      borderColor: theme.border,\n      borderWidth: 1,\n      padding: [8, 10],\n      textStyle: { color: theme.text, fontFamily: theme.font, fontSize: 12 },\n      extraCssText: \"border-radius:10px;box-shadow:var(--kz-shadow-lg);min-width:140px;\",\n    },\n  };\n}\n\n/** A value axis: recessive, hairline grid, text-secondary labels. */\nexport function valueAxis(theme: ResolvedTheme, formatter: (v: number) => string): Record<string, unknown> {\n  return {\n    type: \"value\",\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: theme.grid, width: 1 } },\n    axisLabel: { color: theme.text2, formatter },\n  };\n}\n\n/** A category axis: a baseline in the axis colour, no ticks. */\nexport function categoryAxis(theme: ResolvedTheme, data: readonly string[]): Record<string, unknown> {\n  return {\n    type: \"category\",\n    data,\n    axisLine: { lineStyle: { color: theme.axis } },\n    axisTick: { show: false },\n    axisLabel: { color: theme.text2, hideOverlap: true },\n    splitLine: { show: false },\n  };\n}\n\nconst escape = (text: string) => text.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c]!);\n\n/** The tooltip's content in the package's markup (`kzc-tip-*`): a title, rows of key · name · value, a note. */\nexport function tooltipHtml(title: string | undefined, rows: readonly { label: string; value: string; color?: string }[], note?: string): string {\n  const head = title ? `<p class=\"kzc-tip-title\">${escape(title)}</p>` : \"\";\n  const body = rows\n    .map((row) => `<p class=\"kzc-tip-row\">${row.color ? `<span class=\"kzc-key\" style=\"background:${escape(row.color)}\"></span>` : \"<span></span>\"}<span>${escape(row.label)}</span><b>${escape(row.value)}</b></p>`)\n    .join(\"\");\n  return `${head}${body}${note ? `<p class=\"kzc-tip-note\">${escape(note)}</p>` : \"\"}`;\n}\n","\"use client\";\n// The ECharts host behind Radar, Heatmap, Calendar, Sankey, Funnel, Candlestick, Treemap, Scatter and <Chart>: the same\n// frame as the SVG charts (title, summary, data table, keyboard, states, export), and an engine that is loaded only\n// when the chart comes near the screen — `echarts/core`, the one chart type and its components, one renderer (SVG by\n// default; canvas for large volumes). The option is rebuilt from the resolved theme on every theme change; motion\n// follows the reader's preference; the chart is disposed with the component.\nimport type { EChartsCoreOption, EChartsType } from \"echarts/core\";\nimport { type KeyboardEvent, type ReactNode, type RefObject, useEffect, useRef, useState } from \"react\";\n\nimport type { ChartKind } from \"../core/labels\";\nimport { ChartFrame, type ChartFrameProps, type TableModel } from \"../web/frame\";\nimport { useInView, useReducedMotion, useThemeVersion } from \"../web/hooks\";\nimport { type ResolvedTheme, resolveTheme } from \"./theme\";\n\nexport type Renderer = \"svg\" | \"canvas\";\n\n/** What the keyboard walks: one ECharts data item, and what it says. */\nexport interface WalkItem {\n  readonly seriesIndex: number;\n  readonly dataIndex: number;\n  /** A graph's link (`edge`) rather than its node: Sankey's flows. */\n  readonly dataType?: \"node\" | \"edge\";\n  readonly text: string;\n}\n\nexport interface EngineProps {\n  /** `svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks. */\n  renderer?: Renderer;\n}\n\ninterface HostProps {\n  readonly kind: ChartKind;\n  readonly frame: ChartFrameProps & EngineProps;\n  readonly defaultHeight?: number;\n  readonly table: TableModel;\n  readonly summary: string;\n  readonly isEmpty: boolean;\n  readonly legend?: ReactNode;\n  /** Loads the chart type and its components (a dynamic import of `./engines/<type>`), whose `install` registers them. */\n  readonly engine: () => Promise<unknown>;\n  /** The option, from the resolved theme and the size. Memoise it: a new function redraws. */\n  readonly build: (theme: ResolvedTheme, size: { width: number; height: number }) => EChartsCoreOption;\n  readonly items?: readonly WalkItem[];\n  /** A click (or Enter) on an item. */\n  readonly onItem?: (item: { seriesIndex: number; dataIndex: number }) => void;\n}\n\ntype Init = (el: HTMLElement, theme: null, options: { renderer: Renderer; width: number; height: number }) => EChartsType;\ntype RendererModule = { init: Init; install: () => void };\n\nconst RENDERERS: Record<Renderer, () => Promise<RendererModule>> = {\n  svg: () => import(\"./engines/svg\") as Promise<RendererModule>,\n  canvas: () => import(\"./engines/canvas\") as Promise<RendererModule>,\n};\n\n/** Calls the `install` of an engine module (a typed chart's), if it has one (a `<Chart modules>` function may not). */\nconst install = (module: unknown) => {\n  const fn = (module as { install?: unknown } | null)?.install;\n  if (typeof fn === \"function\") fn();\n};\n\nexport function EChartHost({ kind, frame, defaultHeight, table, summary, isEmpty, legend, engine, build, items = [], onItem }: HostProps) {\n  const instance = useRef<EChartsType | null>(null);\n  const [active, setActive] = useState<number | null>(null);\n  const [failed, setFailed] = useState(false);\n  const renderer = frame.renderer ?? \"svg\";\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const n = items.length;\n    if (!n) return;\n    if (event.key === \"Enter\" && active !== null && onItem) {\n      onItem(items[active]!);\n      return;\n    }\n    const moves: Record<string, () => number | null> = {\n      ArrowRight: () => ((active ?? -1) + 1) % n,\n      ArrowDown: () => ((active ?? -1) + 1) % n,\n      ArrowLeft: () => ((active ?? 0) - 1 + n) % n,\n      ArrowUp: () => ((active ?? 0) - 1 + n) % n,\n      Home: () => 0,\n      End: () => n - 1,\n      Escape: () => null,\n    };\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    setActive(move());\n  };\n\n  const exportImage = (format: \"png\" | \"svg\") => {\n    const chart = instance.current;\n    if (!chart) return null;\n    const dom = chart.getDom();\n    const background = resolveTheme(dom).surface;\n    return chart.getDataURL({ type: format === \"svg\" && renderer === \"svg\" ? \"svg\" : \"png\", pixelRatio: 2, backgroundColor: background });\n  };\n\n  return (\n    <ChartFrame\n      kind={kind}\n      frame={{ ...frame, error: frame.error ?? (failed || undefined) }}\n      defaultHeight={defaultHeight}\n      table={table}\n      summary={summary}\n      isEmpty={isEmpty}\n      legend={legend}\n      announcement={active === null ? \"\" : (items[active]?.text ?? \"\")}\n      handlers={{ onKeyDown, onBlur: () => setActive(null) }}\n      navigable={items.length > 0}\n      exportImage={exportImage}\n    >\n      {(width, height) => (\n        <Host\n          width={width}\n          height={height}\n          renderer={renderer}\n          engine={engine}\n          build={build}\n          active={active === null ? null : (items[active] ?? null)}\n          instance={instance}\n          onItem={onItem}\n          onFail={() => setFailed(true)}\n        />\n      )}\n    </ChartFrame>\n  );\n}\n\ninterface InnerProps {\n  width: number;\n  height: number;\n  renderer: Renderer;\n  engine: () => Promise<unknown>;\n  build: HostProps[\"build\"];\n  active: WalkItem | null;\n  instance: RefObject<EChartsType | null>;\n  onItem?: HostProps[\"onItem\"];\n  onFail: () => void;\n}\n\nfunction Host({ width, height, renderer, engine, build, active, instance, onItem, onFail }: InnerProps) {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const near = useInView(ref, { once: true, margin: \"200px\" });\n  const reduced = useReducedMotion();\n  const themeVersion = useThemeVersion();\n  const [ready, setReady] = useState(false);\n  const [drawn, setDrawn] = useState(false);\n  // The latest size and callbacks, read by the loader without restarting it.\n  const size = useRef({ width, height });\n  const itemRef = useRef(onItem);\n  const failRef = useRef(onFail);\n  useEffect(() => {\n    size.current = { width, height };\n    itemRef.current = onItem;\n    failRef.current = onFail;\n  });\n\n  // Load the engine once the chart is near the screen; init; dispose with the component.\n  useEffect(() => {\n    if (!near) return undefined;\n    let alive = true;\n    Promise.all([engine(), RENDERERS[renderer]()]).then(\n      ([module, painter]) => {\n        if (!alive || !ref.current) return;\n        install(module);\n        painter.install();\n        const { init } = painter;\n        const chart = init(ref.current, null, { renderer, ...size.current });\n        chart.on(\"finished\", () => setDrawn(true));\n        chart.on(\"click\", (params) => {\n          const p = params as { seriesIndex?: number; dataIndex?: number };\n          if (p.seriesIndex != null && p.dataIndex != null) itemRef.current?.({ seriesIndex: p.seriesIndex, dataIndex: p.dataIndex });\n        });\n        instance.current = chart;\n        setReady(true);\n      },\n      () => alive && failRef.current(),\n    );\n    return () => {\n      alive = false;\n      instance.current?.dispose();\n      instance.current = null;\n      setReady(false);\n    };\n  }, [near, renderer, engine, instance]);\n\n  useEffect(() => {\n    if (ready) instance.current?.resize({ width, height });\n  }, [ready, width, height, instance]);\n\n  // The option: rebuilt from the theme resolved on the chart's element, on every change of data, size or theme.\n  useEffect(() => {\n    const chart = instance.current;\n    if (!ready || !chart || !ref.current) return;\n    const option = build(resolveTheme(ref.current), { width, height });\n    chart.setOption({ ...option, animation: !reduced && (option.animation as boolean | undefined) !== false }, { notMerge: true });\n  }, [ready, build, themeVersion, reduced, width, height, instance]);\n\n  // The keyboard's active item: ECharts' own tooltip and highlight.\n  useEffect(() => {\n    const chart = instance.current;\n    if (!ready || !chart) return;\n    chart.dispatchAction({ type: \"downplay\" });\n    if (active) {\n      const target = { seriesIndex: active.seriesIndex, dataIndex: active.dataIndex, ...(active.dataType ? { dataType: active.dataType } : {}) };\n      chart.dispatchAction({ type: \"highlight\", ...target });\n      chart.dispatchAction({ type: \"showTip\", ...target });\n    } else chart.dispatchAction({ type: \"hideTip\" });\n  }, [ready, active, instance]);\n\n  return (\n    <>\n      {!drawn && (\n        <div className=\"kzc-skeleton\" aria-hidden>\n          {[0.55, 0.8, 0.45, 0.95, 0.7, 0.6].map((h, i) => (\n            <i key={i} style={{ height: `${h * 100}%` }} />\n          ))}\n        </div>\n      )}\n      <div ref={ref} className=\"kzc-host\" data-pending={drawn ? undefined : \"\"} aria-hidden />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}