@cascivo/charts 0.4.0 → 0.5.0

package/README.md

@@ -3,7 +3,7 @@
 <div align="center">
   <a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
   <h1>@cascivo/charts</h1>
-  <p><strong>Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies</strong></p>
+  <p><strong>Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies. Colors come from @cascivo/themes; components from @cascivo/react. Docs offline: npx @cascivo/docs</strong></p>
 
 [![npm](https://img.shields.io/npm/v/%40cascivo%2Fcharts?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/charts)
 [![downloads](https://img.shields.io/npm/dm/%40cascivo%2Fcharts?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/charts)
@@ -18,6 +18,8 @@
 
 Accessible, signal-driven chart library for cascivo — AreaChart, BarChart, LineChart, Sparkline, Heatmap, and more. All charts are keyboard-navigable with `aria-live` tooltips. CVD-safe palettes (Okabe-Ito, oklch) verified in CI across all 12 themes.
 
+> **Docs offline?** The full cascivo reference ships as an npm package — `npx -y @cascivo/docs`, no website needed.
+
 ## Install
 
 ```sh
@@ -49,6 +51,24 @@ export function Traffic() {
 Charts are CSS-token-themed: drop them inside any element carrying a `data-theme` (or import a
 theme stylesheet) and they pick up the same palette, radii, and typography as the rest of cascivo.
 
+### Sizing — responsive by default
+
+**Omit `width`** and the chart fills and tracks its container (a `ResizeObserver`
+watches the slot), so a chart drops cleanly into a responsive `Card` or grid cell with
+no measuring on your part. `height` defaults to `300` (px); set it to change the aspect.
+
+Pass an explicit `width` only for a fixed-size export — and even then it is **clamped to
+the container** (`max-inline-size: 100%`), so an over-wide `width` scales down instead of
+overflowing and clipping data. To size another element to match a chart, or to build a
+custom chart, use the exported `useChartSize()` hook.
+
+```tsx
+<Card>
+  <LineChart data={data} />           {/* fills the card, resizes with it */}
+</Card>
+<LineChart data={data} height={160} /> {/* shorter, still full-width */}
+```
+
 > **Vite SSR (TanStack Start, Remix, vite-ssr, workerd)?** Like the rest of cascivo, the
 > chart CSS ships as side-effect imports a bare server loader can't resolve — mark
 > `ssr: { noExternal: [/^@cascivo\//] }` (the pattern already covers `@cascivo/charts`) and

package/dist/charts.css

@@ -1,2 +1,2 @@
-@layer cascivo.component{._frame_1doa7_2{inline-size:100%;position:relative}@media (prefers-reduced-motion:no-preference){._frame_1doa7_2>svg{animation:_cascivo-chart-in_1doa7_1 var(--cascivo-chart-anim-dur,.32s) var(--cascivo-chart-anim-ease,ease-out) both}@keyframes _cascivo-chart-in_1doa7_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}._frame_1doa7_2 svg :is(path,rect,circle,line)[data-series],._frame_1doa7_2 svg path[data-link],._frame_1doa7_2 svg path[data-depth],._frame_1doa7_2 svg rect[data-day]{transition-property:var(--cascivo-chart-anim-props,opacity, fill, fill-opacity);transition-duration:var(--cascivo-chart-anim-dur,.24s);transition-timing-function:var(--cascivo-chart-anim-ease,ease)}._frame_1doa7_2[data-no-anim]>svg{animation:none}._frame_1doa7_2[data-no-anim] svg :is(path,rect,circle,line)[data-series],._frame_1doa7_2[data-no-anim] svg path[data-link],._frame_1doa7_2[data-no-anim] svg path[data-depth],._frame_1doa7_2[data-no-anim] svg rect[data-day]{transition:none}}._fallback_1doa7_53{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_zczeh_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_zczeh_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-font-size-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_zczeh_9[data-state=off]{opacity:.4}._swatch_zczeh_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}}
+@layer cascivo.component{._frame_1xxqo_2{inline-size:100%;position:relative}._frame_1xxqo_2>svg{block-size:auto;max-inline-size:100%}@media (prefers-reduced-motion:no-preference){._frame_1xxqo_2>svg{animation:_cascivo-chart-in_1xxqo_1 var(--cascivo-chart-anim-dur,.32s) var(--cascivo-chart-anim-ease,ease-out) both}@keyframes _cascivo-chart-in_1xxqo_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}._frame_1xxqo_2 svg :is(path,rect,circle,line)[data-series],._frame_1xxqo_2 svg path[data-link],._frame_1xxqo_2 svg path[data-depth],._frame_1xxqo_2 svg rect[data-day]{transition-property:var(--cascivo-chart-anim-props,opacity, fill, fill-opacity);transition-duration:var(--cascivo-chart-anim-dur,.24s);transition-timing-function:var(--cascivo-chart-anim-ease,ease)}._frame_1xxqo_2[data-no-anim]>svg{animation:none}._frame_1xxqo_2[data-no-anim] svg :is(path,rect,circle,line)[data-series],._frame_1xxqo_2[data-no-anim] svg path[data-link],._frame_1xxqo_2[data-no-anim] svg path[data-depth],._frame_1xxqo_2[data-no-anim] svg rect[data-day]{transition:none}}._fallback_1xxqo_62{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_zczeh_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_zczeh_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-font-size-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_zczeh_9[data-state=off]{opacity:.4}._swatch_zczeh_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -765,7 +765,15 @@ interface ZoomConfig {
 interface ChartFrameProps {
   title: string;
   description?: string | undefined;
+  /**
+   * Fixed SVG width in px. **Omit it (the default) for a responsive chart** — the
+   * frame fills and tracks its container's width via `ResizeObserver`. Set a fixed
+   * width only for a fixed-size export or thumbnail; even then it is clamped to the
+   * container (`max-inline-size: 100%`) so it can never overflow its card.
+   */
   width?: number | undefined;
+  /** SVG height in px. Defaults to 300 (48 in `plain` mode). Unlike `width`, height
+   * does not track the container — set it to change the chart's aspect. */
   height?: number | undefined;
   fallback?: ReactNode;
   children: (size: {
@@ -847,6 +855,20 @@ interface ChartSize {
   width: number;
   height: number;
 }
+/**
+ * Measure a container and track its size in signals. **Every cascivo chart already
+ * uses this internally** — charts are responsive by default and fill their
+ * container, so you do NOT need this to make a chart responsive (just omit the
+ * chart's `width`). Reach for it only to size *another* element to match a chart,
+ * or to build a custom chart on the same measurement primitive.
+ *
+ * Returns `{ ref, width, height }`: spread `ref` onto the element to measure; read
+ * `width.value` / `height.value` (they update on resize via a `ResizeObserver`,
+ * deferred one frame to avoid the "ResizeObserver loop" warning). Under SSR (no
+ * `ResizeObserver`) it falls back to a single `getBoundingClientRect()` read, so
+ * the first paint has a sensible size. `defaultWidth` seeds the signal only until
+ * the first real measurement lands.
+ */
 declare function useChartSize(defaultWidth?: number, defaultHeight?: number): {
   ref: React.RefObject<HTMLDivElement | null>;
   width: import('@preact/signals-react').Signal<number>;
@@ -1272,7 +1294,12 @@ interface AreaChartProps<Datum = {
   y: number;
 }> {
   series: readonly AreaChartSeries<Datum>[];
-  x: (d: Datum) => number;
+  /**
+   * X-value accessor. Return a `number` for a numeric axis, or a `Date` for a
+   * time axis — when the values are Dates the chart uses a time scale and formats
+   * ticks as dates (parity with `LineChart`). One x-domain per chart.
+   */
+  x: (d: Datum) => number | Date;
   /**
    * Y-value accessor, applied to **every** series' data unless a series provides
    * its own `y`. There is one x-domain per chart, so `x` is chart-level only; to

package/dist/index.js

@@ -337,7 +337,7 @@ function R(e, t, n) {
 	}
 	return r;
 }
-function ee(e, t, n, r, i) {
+function z(e, t, n, r, i) {
 	if (e.length === 0) return e;
 	let a = [], o = (e) => (e[0] - r) * t + (e[1] - i) * n;
 	for (let t = 0; t < e.length; t++) {
@@ -349,7 +349,7 @@ function ee(e, t, n, r, i) {
 	}
 	return a;
 }
-function te(e, t) {
+function ee(e, t) {
 	let n = [
 		[t.x0, t.y0],
 		[t.x1, t.y0],
@@ -361,21 +361,21 @@ function te(e, t) {
 		for (let n = 0; n < e.length && i.length > 0; n++) {
 			if (n === r) continue;
 			let a = e[n];
-			i = ee(i, a[0] - t[0], a[1] - t[1], (t[0] + a[0]) / 2, (t[1] + a[1]) / 2);
+			i = z(i, a[0] - t[0], a[1] - t[1], (t[0] + a[0]) / 2, (t[1] + a[1]) / 2);
 		}
 		return i;
 	});
 }
-function z(e) {
+function B(e) {
 	return e.length === 0 ? "" : `M${e.map((e) => `${e[0]},${e[1]}`).join("L")}Z`;
 }
 //#endregion
 //#region src/engine/stats.ts
-function B(e) {
+function V(e) {
 	let t = e.length, n = e[Math.floor(t * .25)] ?? 0;
 	return (e[Math.floor(t * .75)] ?? 0) - n;
 }
-function V(e, t) {
+function te(e, t) {
 	if (e.length === 0) return [];
 	let n = [...e].sort((e, t) => e - t), r = n.length, i = n[0] ?? 0, a = n[r - 1] ?? 0;
 	if (i === a) return [{
@@ -386,7 +386,7 @@ function V(e, t) {
 	let o;
 	if (t !== void 0 && t > 0) o = t;
 	else {
-		let e = 2 * B(n) * r ** (-1 / 3);
+		let e = 2 * V(n) * r ** (-1 / 3);
 		o = Math.ceil(e > 0 ? (a - i) / e : Math.sqrt(r)), o = Math.max(1, Math.min(o, 200));
 	}
 	let s = (a - i) / o, c = Array.from({ length: o }, (e, t) => ({
@@ -915,9 +915,9 @@ var Ve = {
 	bottom: 2,
 	left: 2
 }, Ue = {
-	frame: "_frame_1doa7_2",
-	"cascivo-chart-in": "_cascivo-chart-in_1doa7_1",
-	fallback: "_fallback_1doa7_53"
+	frame: "_frame_1xxqo_2",
+	"cascivo-chart-in": "_cascivo-chart-in_1xxqo_1",
+	fallback: "_fallback_1xxqo_62"
 };
 //#endregion
 //#region src/core/data-point.ts
@@ -1141,9 +1141,9 @@ var at = {
 };
 function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, children: h, className: g, "data-state": _, emptyLabel: v, plain: y, tooltip: b, onSelect: x, hover: S = "rect", renderer: C = "svg", paint: w, zoom: T, toolbox: E, onRestore: D, transition: O, onBeforeDraw: k, onAfterDraw: A }) {
 	o();
-	let j = s(), M = `${j}-desc`, N = `${j}-live`, { ref: P, width: F, height: I } = Be(n ?? 400, r), L = i(null), ee = i(!1), te = c(null), z = c(null), B = c(null), V = c(null);
+	let j = s(), M = `${j}-desc`, N = `${j}-live`, { ref: P, width: F, height: I } = Be(n ?? 400, r), L = i(null), z = i(!1), ee = c(null), B = c(null), V = c(null), te = c(null);
 	a(() => {
-		let e = V.current;
+		let e = te.current;
 		if (!e || !T) return;
 		let t = (t) => {
 			t.preventDefault();
@@ -1154,7 +1154,7 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 	});
 	let H = () => {
 		T && (T.window.value = [0, Math.max(0, T.count - 1)]);
-	}, U = n ?? F.value, W = r ?? I.value, G = E === !0 ? {} : E || null, K = () => z.current ? nt(z.current) : null, q = () => {
+	}, U = n ?? F.value, W = r ?? I.value, G = E === !0 ? {} : E || null, K = () => B.current ? nt(B.current) : null, q = () => {
 		let t = K();
 		t && it(t, `${e || "chart"}.svg`);
 	}, ne = () => {
@@ -1174,9 +1174,9 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 	}) : b;
 	a(() => {
 		let e = L.value;
-		if (!Y || !te.current) return;
+		if (!Y || !ee.current) return;
 		let t = e === null ? void 0 : Y.points[e];
-		te.current.textContent = t ? (Y.format ?? We)(t) : "";
+		ee.current.textContent = t ? (Y.format ?? We)(t) : "";
 	});
 	let re = {
 		position: "absolute",
@@ -1213,10 +1213,10 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 					onPng: ne,
 					onSvg: q,
 					onToggleData: () => {
-						ee.value = !ee.value;
+						z.value = !z.value;
 					},
 					onRestore: J,
-					showData: ee.value
+					showData: z.value
 				})
 			}),
 			X && /* @__PURE__ */ f(qe, {
@@ -1227,7 +1227,7 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 				paint: w
 			}),
 			/* @__PURE__ */ p("svg", {
-				ref: z,
+				ref: B,
 				role: "img",
 				"aria-label": e,
 				"aria-describedby": t ? M : void 0,
@@ -1268,7 +1268,7 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 				style: at,
 				children: m
 			}),
-			G && ee.value && m && /* @__PURE__ */ f("div", {
+			G && z.value && m && /* @__PURE__ */ f("div", {
 				"data-data-view": "",
 				style: { overflowX: "auto" },
 				children: m
@@ -1277,7 +1277,7 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 				Y !== void 0 && /* @__PURE__ */ p(d, { children: [
 					/* @__PURE__ */ f("span", {
 						id: N,
-						ref: te,
+						ref: ee,
 						"aria-live": "polite",
 						style: {
 							position: "absolute",
@@ -1347,21 +1347,21 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 					children: u(l.charts.resetZoom)
 				}),
 				/* @__PURE__ */ f("div", {
-					ref: V,
+					ref: te,
 					role: "application",
 					"aria-label": T ? "Chart — arrow keys navigate points; + and - zoom, 0 resets, drag to pan" : "Chart data — use arrow keys to navigate points",
 					tabIndex: 0,
 					style: re,
 					onPointerDown: (e) => {
-						T && (B.current = {
+						T && (V.current = {
 							x: e.clientX,
 							win: [...T.window.value]
 						}, e.currentTarget.setPointerCapture(e.pointerId));
 					},
 					onPointerMove: (e) => {
-						if (T && B.current && e.buttons === 1) {
-							let t = e.currentTarget.getBoundingClientRect(), n = B.current.win[1] - B.current.win[0] + 1, r = e.clientX - B.current.x, i = t.width ? -(r / t.width) * n : 0;
-							T.window.value = Ze(B.current.win, T.count, i);
+						if (T && V.current && e.buttons === 1) {
+							let t = e.currentTarget.getBoundingClientRect(), n = V.current.win[1] - V.current.win[0] + 1, r = e.clientX - V.current.x, i = t.width ? -(r / t.width) * n : 0;
+							T.window.value = Ze(V.current.win, T.count, i);
 							return;
 						}
 						if (!Y || !Y.points.length) return;
@@ -1369,10 +1369,10 @@ function Q({ title: e, description: t, width: n, height: r = 300, fallback: m, c
 						L.value = Y.mode === "axis" ? Ke(Y.points, n, r, "x") : S === "voronoi" ? R(Y.points.map((e) => [e.cx, e.cy]), n, r) : Ke(Y.points, n, r, "xy");
 					},
 					onPointerUp: () => {
-						B.current = null;
+						V.current = null;
 					},
 					onPointerLeave: () => {
-						B.current = null, Y && (L.value = null);
+						V.current = null, Y && (L.value = null);
 					},
 					onKeyDown: (e) => {
 						if (T) {
@@ -2222,9 +2222,9 @@ var Xt = Array.from({ length: 8 }, (e, t) => `var(--cascivo-chart-${t + 1})`);
 function Zt(e) {
 	return [Math.min(0, ...e), Math.max(...e)];
 }
-function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monotone", width: u, height: h, xTicks: g = 5, yTicks: _ = 5, legend: v, tooltip: y, formatTooltip: b, className: x, plain: C, annotations: E, labels: D, connectNulls: O, onSelect: k, brush: A, dataZoom: j, zoom: M, syncId: N, tooltipMode: P, secondAxis: F, decimate: I, toolbox: L, transition: R, onBeforeDraw: ee, onAfterDraw: te }) {
+function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monotone", width: u, height: h, xTicks: g = 5, yTicks: _ = 5, legend: v, tooltip: y, formatTooltip: b, className: x, plain: C, annotations: E, labels: D, connectNulls: O, onSelect: k, brush: A, dataZoom: j, zoom: M, syncId: N, tooltipMode: P, secondAxis: F, decimate: I, toolbox: L, transition: R, onBeforeDraw: z, onAfterDraw: ee }) {
 	o();
-	let z = i(/* @__PURE__ */ new Set()), B = C ? null : xt(D), V = I === !0 ? {
+	let B = i(/* @__PURE__ */ new Set()), V = C ? null : xt(D), te = I === !0 ? {
 		method: "lttb",
 		threshold: 1e3
 	} : I ? {
@@ -2281,7 +2281,7 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 						for (let r = 0; r < e; r++) {
 							let e = [], i = 0, a = 0, o = Infinity, s = "";
 							K.forEach((n, c) => {
-								if (z.value.has(n.id)) return;
+								if (B.value.has(n.id)) return;
 								let l = n.data[r];
 								if (l === void 0) return;
 								let f = X(n)(l);
@@ -2307,7 +2307,7 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 							format: (e) => `${e.label}: ${(e.segments ?? []).map((e) => `${e.label} ${e.value}`).join(", ")}`
 						};
 					}
-					let f = K.flatMap((e) => z.value.has(e.id) ? [] : e.data.flatMap((n, r) => {
+					let f = K.flatMap((e) => B.value.has(e.id) ? [] : e.data.flatMap((n, r) => {
 						let i = X(e)(n);
 						if (!Number.isFinite(i)) return [];
 						let a = t(n), o = s.map(a), c = u(e).map(i), l = a instanceof Date ? a.toLocaleDateString() : String(a);
@@ -2338,8 +2338,8 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 					W.value = [0, Math.max(0, H - 1)];
 				} : void 0,
 				transition: R,
-				onBeforeDraw: ee,
-				onAfterDraw: te,
+				onBeforeDraw: z,
+				onAfterDraw: ee,
 				children: ({ width: e, height: n }) => {
 					let r = e - J.left - J.right, i = n - J.top - J.bottom, a = Math.min(...ce ? Z.map((e) => e.getTime()) : Z), o = Math.max(...ce ? Z.map((e) => e.getTime()) : Z), s = ce ? S([new Date(a), new Date(o)], [0, r]) : m([a, o], [0, r]), c = m(Zt(ae), [i, 0]), u = q ? m(Zt(oe), [i, 0]) : c;
 					return /* @__PURE__ */ f("g", { children: /* @__PURE__ */ p("g", {
@@ -2358,16 +2358,16 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 								innerH: i
 							}),
 							K.map((e, n) => {
-								if (z.value.has(e.id)) return null;
+								if (B.value.has(e.id)) return null;
 								let r = e.color ?? Xt[n % Xt.length], i = e.axis === "right" ? u : c, a = (e) => s.map(e);
-								if (V && e.data.length > V.threshold) {
+								if (te && e.data.length > te.threshold) {
 									let n = [];
 									for (let r of e.data) {
 										let o = X(e)(r);
 										Number.isFinite(o) && n.push([a(t(r)), i.map(o)]);
 									}
 									return /* @__PURE__ */ f("path", {
-										d: T(Ie(n, V.threshold, V.method).map((e) => [e[0], e[1]]), l),
+										d: T(Ie(n, te.threshold, te.method).map((e) => [e[0], e[1]]), l),
 										fill: "none",
 										stroke: r,
 										strokeWidth: 2,
@@ -2388,12 +2388,12 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									"data-series": e.id
-								}, n)), B && e.data.map((t, n) => {
+								}, n)), V && e.data.map((t, n) => {
 									let r = o[n];
 									return r ? /* @__PURE__ */ f(St, {
 										x: r[0],
 										y: r[1] - 8,
-										text: B.format(X(e)(t))
+										text: V.format(X(e)(t))
 									}, n) : null;
 								})] }, e.id);
 							}),
@@ -2440,7 +2440,7 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 					label: e.label,
 					color: e.color ?? Xt[t % Xt.length]
 				})),
-				hidden: z
+				hidden: B
 			})
 		]
 	});
@@ -2448,37 +2448,40 @@ function Qt({ series: e, x: t, y: n, title: r, description: s, curve: l = "monot
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
 var $t = { fillOpacity: "var(--cascivo-chart-fill-opacity, 0.25)" }, en = Array.from({ length: 8 }, (e, t) => `var(--cascivo-chart-${t + 1})`);
-function tn({ series: e, x: t, y: n, title: r, description: l, stacked: u = !1, curve: h = "monotone", fill: g = "solid", patternKind: _, width: v, height: y, xTicks: b = 5, yTicks: x = 5, legend: S, tooltip: C, className: w, plain: E, annotations: D, labels: O, onSelect: k, brush: A, dataZoom: j, zoom: M, syncId: P, tooltipMode: I, secondAxis: L, decimate: R, toolbox: ee }) {
+function tn({ series: e, x: t, y: n, title: r, description: l, stacked: u = !1, curve: h = "monotone", fill: g = "solid", patternKind: _, width: v, height: y, xTicks: b = 5, yTicks: x = 5, legend: C, tooltip: w, className: E, plain: D, annotations: O, labels: k, onSelect: A, brush: j, dataZoom: M, zoom: P, syncId: I, tooltipMode: L, secondAxis: R, decimate: z, toolbox: ee }) {
 	o();
-	let te = s(), z = i(/* @__PURE__ */ new Set()), B = E ? null : xt(O), V = R === !0 ? {
+	let B = s(), V = i(/* @__PURE__ */ new Set()), te = D ? null : xt(k), H = z === !0 ? {
 		method: "lttb",
 		threshold: 1e3
-	} : R ? {
-		method: R.method ?? "lttb",
-		threshold: R.threshold ?? 1e3
-	} : null, H = e.reduce((e, t) => Math.max(e, t.data.length), 0), U = (A || j || M || P !== void 0) && H > 0, W = i([0, Math.max(0, H - 1)]), G = c(null);
-	P && !G.current && (G.current = st(P)), a(() => () => {
-		P && ct(P);
+	} : z ? {
+		method: z.method ?? "lttb",
+		threshold: z.threshold ?? 1e3
+	} : null, U = e.reduce((e, t) => Math.max(e, t.data.length), 0), W = (j || M || P || I !== void 0) && U > 0, G = i([0, Math.max(0, U - 1)]), K = c(null);
+	I && !K.current && (K.current = st(I)), a(() => () => {
+		I && ct(I);
 	}), a(() => {
-		let e = G.current;
+		let e = K.current;
 		if (!e) return;
-		let t = e.window.value, n = W.peek();
-		t && (t[0] !== n[0] || t[1] !== n[1]) && (W.value = t);
+		let t = e.window.value, n = G.peek();
+		t && (t[0] !== n[0] || t[1] !== n[1]) && (G.value = t);
 	}), a(() => {
-		let e = G.current;
+		let e = K.current;
 		if (!e) return;
-		let t = W.value, n = e.window.peek();
+		let t = G.value, n = e.window.peek();
 		(!n || n[0] !== t[0] || n[1] !== t[1]) && (e.window.value = t);
 	});
-	let K = U ? e.map((e) => ({
+	let q = W ? e.map((e) => ({
 		...e,
-		data: e.data.slice(W.value[0], W.value[1] + 1)
-	})) : e, q = !E && !u && K.some((e) => e.axis === "right"), ne = E ? He : Ve, J = q ? {
-		...ne,
+		data: e.data.slice(G.value[0], G.value[1] + 1)
+	})) : e, ne = !D && !u && q.some((e) => e.axis === "right"), J = D ? He : Ve, Y = ne ? {
+		...J,
 		right: 60
-	} : ne, Y = y ?? (E ? 48 : 300), re = E ? !1 : S ?? K.length > 1, X = (e) => e.y ?? n, Z = (K[0]?.data ?? []).map((e) => t(e)), ie = (q ? K.filter((e) => e.axis !== "right") : K).flatMap((e) => e.data.map((t) => X(e)(t))), ae = q ? K.filter((e) => e.axis === "right").flatMap((e) => e.data.map((t) => X(e)(t))) : [];
-	Yt("AreaChart", () => [...ie, ...ae]);
-	let oe = Z.length > 0, se = oe ? Math.min(...Z) : 0, ce = oe ? Math.max(...Z) : 1, le = u ? 0 : Math.min(0, ...ie), ue = Math.max(...u ? (K[0]?.data ?? []).map((e, t) => K.reduce((e, n) => e + X(n)(n.data[t]), 0)) : ie), de = q ? Math.min(0, ...ae) : le, fe = q ? Math.max(...ae) : ue;
+	} : J, re = y ?? (D ? 48 : 300), X = D ? !1 : C ?? q.length > 1, Z = (e) => e.y ?? n, ie = (q[0]?.data ?? []).map((e) => t(e)), ae = (ne ? q.filter((e) => e.axis !== "right") : q).flatMap((e) => e.data.map((t) => Z(e)(t))), oe = ne ? q.filter((e) => e.axis === "right").flatMap((e) => e.data.map((t) => Z(e)(t))) : [];
+	Yt("AreaChart", () => [...ae, ...oe]);
+	let se = ie.length > 0, ce = se && ie[0] instanceof Date, le = ie.map((e) => e instanceof Date ? e.getTime() : e), ue = se ? Math.min(...le) : 0, de = se ? Math.max(...le) : 1, fe = (e) => ce ? S([new Date(ue), new Date(de)], [0, e]) : m([ue, de], [0, e]), pe = (e, n) => e.map(t(n)), me = (e) => {
+		let n = t(e);
+		return n instanceof Date ? n.toLocaleDateString() : String(n);
+	}, he = u ? 0 : Math.min(0, ...ae), ge = Math.max(...u ? (q[0]?.data ?? []).map((e, t) => q.reduce((e, n) => e + Z(n)(n.data[t]), 0)) : ae), _e = ne ? Math.min(0, ...oe) : he, ve = ne ? Math.max(...oe) : ge;
 	return /* @__PURE__ */ p("div", {
 		style: {
 			display: "flex",
@@ -2490,136 +2493,136 @@ function tn({ series: e, x: t, y: n, title: r, description: l, stacked: u = !1,
 				title: r,
 				description: l,
 				width: v,
-				height: Y,
+				height: re,
 				fallback: /* @__PURE__ */ p("table", { children: [
 					/* @__PURE__ */ f("caption", { children: r }),
-					/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("th", { children: "X" }), K.map((e) => /* @__PURE__ */ f("th", { children: e.label }, e.id))] }) }),
-					/* @__PURE__ */ f("tbody", { children: (K[0]?.data ?? []).map((e, n) => /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("td", { children: K[0] ? String(t(K[0].data[n])) : "" }), K.map((e) => /* @__PURE__ */ f("td", { children: e.data[n] == null ? "" : X(e)(e.data[n]) }, e.id))] }, n)) })
+					/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("th", { children: "X" }), q.map((e) => /* @__PURE__ */ f("th", { children: e.label }, e.id))] }) }),
+					/* @__PURE__ */ f("tbody", { children: (q[0]?.data ?? []).map((e, t) => /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("td", { children: q[0] ? me(q[0].data[t]) : "" }), q.map((e) => /* @__PURE__ */ f("td", { children: e.data[t] == null ? "" : Z(e)(e.data[t]) }, e.id))] }, t)) })
 				] }),
-				className: w,
-				"data-state": oe ? void 0 : "empty",
-				plain: E,
-				tooltip: C !== !1 && oe ? ({ width: e, height: n }) => {
-					if (C === !1 || !oe) return;
-					let r = e - J.left - J.right, i = n - J.top - J.bottom, a = m([se, ce], [0, r]), o = m([le, ue], [i, 0]), s = q ? m([de, fe], [i, 0]) : o, c = (e) => e.axis === "right" ? s : o;
-					if (I === "axis") {
-						let e = K.reduce((e, t) => Math.max(e, t.data.length), 0), n = [];
-						for (let r = 0; r < e; r++) {
-							let e = [], i = Infinity, o = "", s = J.left;
-							K.forEach((n, l) => {
-								if (z.value.has(n.id)) return;
-								let u = n.data[r];
-								if (u === void 0) return;
-								let d = X(n)(u);
-								Number.isFinite(d) && (s = J.left + a.map(t(u)), i = Math.min(i, c(n).map(d)), o = String(t(u)), e.push({
-									label: n.label,
-									value: d,
-									color: n.color ?? en[l % en.length]
+				className: E,
+				"data-state": se ? void 0 : "empty",
+				plain: D,
+				tooltip: w !== !1 && se ? ({ width: e, height: t }) => {
+					if (w === !1 || !se) return;
+					let n = e - Y.left - Y.right, r = t - Y.top - Y.bottom, i = fe(n), a = m([he, ge], [r, 0]), o = ne ? m([_e, ve], [r, 0]) : a, s = (e) => e.axis === "right" ? o : a;
+					if (L === "axis") {
+						let e = q.reduce((e, t) => Math.max(e, t.data.length), 0), t = [];
+						for (let n = 0; n < e; n++) {
+							let e = [], r = Infinity, a = "", o = Y.left;
+							q.forEach((t, c) => {
+								if (V.value.has(t.id)) return;
+								let l = t.data[n];
+								if (l === void 0) return;
+								let u = Z(t)(l);
+								Number.isFinite(u) && (o = Y.left + pe(i, l), r = Math.min(r, s(t).map(u)), a = me(l), e.push({
+									label: t.label,
+									value: u,
+									color: t.color ?? en[c % en.length]
 								}));
-							}), e.length !== 0 && n.push({
-								id: `x-${r}`,
-								cx: s,
-								cy: J.top + (i === Infinity ? 0 : i),
-								label: o,
-								value: o,
+							}), e.length !== 0 && t.push({
+								id: `x-${n}`,
+								cx: o,
+								cy: Y.top + (r === Infinity ? 0 : r),
+								label: a,
+								value: a,
 								segments: e
 							});
 						}
 						return {
-							points: n,
+							points: t,
 							mode: "axis",
 							format: (e) => `${e.label}: ${(e.segments ?? []).map((e) => `${e.label} ${e.value}`).join(", ")}`
 						};
 					}
-					return { points: K.flatMap((e) => z.value.has(e.id) ? [] : e.data.map((n, r) => ({
-						id: `${e.id}-${r}`,
-						cx: J.left + a.map(t(n)),
-						cy: J.top + c(e).map(X(e)(n)),
-						label: String(t(n)),
-						value: X(e)(n),
+					return { points: q.flatMap((e) => V.value.has(e.id) ? [] : e.data.map((t, n) => ({
+						id: `${e.id}-${n}`,
+						cx: Y.left + pe(i, t),
+						cy: Y.top + s(e).map(Z(e)(t)),
+						label: me(t),
+						value: Z(e)(t),
 						seriesId: e.id
 					}))) };
 				} : void 0,
-				onSelect: k,
-				zoom: M && H > 1 ? {
-					window: W,
-					count: H
+				onSelect: A,
+				zoom: P && U > 1 ? {
+					window: G,
+					count: U
 				} : void 0,
 				toolbox: ee,
-				onRestore: U ? () => {
-					W.value = [0, Math.max(0, H - 1)];
+				onRestore: W ? () => {
+					G.value = [0, Math.max(0, U - 1)];
 				} : void 0,
-				children: ({ width: e, height: n }) => {
-					let r = e - J.left - J.right, i = n - J.top - J.bottom, a = m([se, ce], [0, r]), o = m([le, ue], [i, 0]), s = q ? m([de, fe], [i, 0]) : o, c = [];
-					return u && (c = F(K.map((e) => e.data.map((t) => X(e)(t))))), /* @__PURE__ */ p("g", { children: [g !== "solid" && /* @__PURE__ */ f(Dt, {
-						prefix: te,
+				children: ({ width: e, height: t }) => {
+					let n = e - Y.left - Y.right, r = t - Y.top - Y.bottom, i = fe(n), a = m([he, ge], [r, 0]), o = ne ? m([_e, ve], [r, 0]) : a, s = [];
+					return u && (s = F(q.map((e) => e.data.map((t) => Z(e)(t))))), /* @__PURE__ */ p("g", { children: [g !== "solid" && /* @__PURE__ */ f(Dt, {
+						prefix: B,
 						fill: g,
 						patternKind: _,
-						series: K.map((e, t) => ({
+						series: q.map((e, t) => ({
 							id: e.id,
 							color: e.color ?? en[t % en.length]
 						}))
 					}), /* @__PURE__ */ p("g", {
-						transform: `translate(${J.left},${J.top})`,
+						transform: `translate(${Y.left},${Y.top})`,
 						children: [
-							!E && /* @__PURE__ */ f(pt, {
-								scale: o,
+							!D && /* @__PURE__ */ f(pt, {
+								scale: a,
 								orientation: "y",
-								length: r,
+								length: n,
 								tickCount: x
 							}),
-							!E && vt(D, {
-								xScale: a,
-								yScale: o,
-								innerW: r,
-								innerH: i
+							!D && vt(O, {
+								xScale: i,
+								yScale: a,
+								innerW: n,
+								innerH: r
 							}),
-							K.map((e, n) => {
-								if (z.value.has(e.id)) return null;
-								let r = e.color ?? en[n % en.length], i, l;
-								if (u && c[n]) {
-									let s = c[n];
-									i = e.data.map((e, n) => [a.map(t(e)), o.map(s[n][1])]);
-									let u = e.data.map((e, n) => [a.map(t(e)), o.map(s[n][0])]);
-									l = o.map(0);
-									let d = T(i, h), m = u[u.length - 1], _ = u[0], v = [...u].reverse().map(([e, t]) => `L${e},${t}`).join(""), y = `${d}L${m[0]},${m[1]}${v}L${_[0]},${_[1]}Z`;
+							q.map((e, t) => {
+								if (V.value.has(e.id)) return null;
+								let n = e.color ?? en[t % en.length], r, c;
+								if (u && s[t]) {
+									let o = s[t];
+									r = e.data.map((e, t) => [pe(i, e), a.map(o[t][1])]);
+									let l = e.data.map((e, t) => [pe(i, e), a.map(o[t][0])]);
+									c = a.map(0);
+									let u = T(r, h), d = l[l.length - 1], m = l[0], _ = [...l].reverse().map(([e, t]) => `L${e},${t}`).join(""), v = `${u}L${d[0]},${d[1]}${_}L${m[0]},${m[1]}Z`;
 									return /* @__PURE__ */ p("g", {
 										"data-series": e.id,
 										children: [
 											/* @__PURE__ */ f("path", {
-												d: y,
-												fill: Et(te, e.id, g, r),
+												d: v,
+												fill: Et(B, e.id, g, n),
 												style: g === "solid" ? $t : void 0,
 												stroke: "none"
 											}),
 											/* @__PURE__ */ f("path", {
-												d: T(i, h),
+												d: T(r, h),
 												fill: "none",
-												stroke: r,
+												stroke: n,
 												strokeWidth: 2
 											}),
-											B && i.map((t, n) => /* @__PURE__ */ f(St, {
+											te && r.map((t, n) => /* @__PURE__ */ f(St, {
 												x: t[0],
 												y: t[1] - 8,
-												text: B.format(X(e)(e.data[n]))
+												text: te.format(Z(e)(e.data[n]))
 											}, n))
 										]
 									}, e.id);
 								} else {
-									let n = e.axis === "right" ? s : o;
-									if (i = e.data.map((r) => [a.map(t(r)), n.map(X(e)(r))]), l = n.map(0), V && i.length > V.threshold) {
-										let t = Ie(i, V.threshold, V.method).map((e) => [e[0], e[1]]);
+									let t = e.axis === "right" ? o : a;
+									if (r = e.data.map((n) => [pe(i, n), t.map(Z(e)(n))]), c = t.map(0), H && r.length > H.threshold) {
+										let t = Ie(r, H.threshold, H.method).map((e) => [e[0], e[1]]);
 										return /* @__PURE__ */ p("g", {
 											"data-series": e.id,
 											children: [/* @__PURE__ */ f("path", {
-												d: N(t, l, h),
-												fill: Et(te, e.id, g, r),
+												d: N(t, c, h),
+												fill: Et(B, e.id, g, n),
 												style: g === "solid" ? $t : void 0,
 												stroke: "none"
 											}), /* @__PURE__ */ f("path", {
 												d: T(t, h),
 												fill: "none",
-												stroke: r,
+												stroke: n,
 												strokeWidth: 2
 											})]
 										}, e.id);
@@ -2628,70 +2631,70 @@ function tn({ series: e, x: t, y: n, title: r, description: l, stacked: u = !1,
 										"data-series": e.id,
 										children: [
 											/* @__PURE__ */ f("path", {
-												d: N(i, l, h),
-												fill: Et(te, e.id, g, r),
+												d: N(r, c, h),
+												fill: Et(B, e.id, g, n),
 												style: g === "solid" ? $t : void 0,
 												stroke: "none"
 											}),
 											/* @__PURE__ */ f("path", {
-												d: T(i, h),
+												d: T(r, h),
 												fill: "none",
-												stroke: r,
+												stroke: n,
 												strokeWidth: 2
 											}),
-											B && i.map((t, n) => /* @__PURE__ */ f(St, {
+											te && r.map((t, n) => /* @__PURE__ */ f(St, {
 												x: t[0],
 												y: t[1] - 8,
-												text: B.format(X(e)(e.data[n]))
+												text: te.format(Z(e)(e.data[n]))
 											}, n))
 										]
 									}, e.id);
 								}
 							}),
-							!E && /* @__PURE__ */ p(d, { children: [
+							!D && /* @__PURE__ */ p(d, { children: [
 								/* @__PURE__ */ f($, {
-									scale: a,
+									scale: i,
 									orientation: "x",
-									length: r,
+									length: n,
 									tickCount: b,
-									transform: `translate(0,${i})`
+									transform: `translate(0,${r})`
 								}),
 								/* @__PURE__ */ f($, {
-									scale: o,
+									scale: a,
 									orientation: "y",
-									length: i,
+									length: r,
 									tickCount: x
 								}),
-								q && /* @__PURE__ */ f($, {
-									scale: s,
+								ne && /* @__PURE__ */ f($, {
+									scale: o,
 									orientation: "y",
-									length: i,
+									length: r,
 									tickCount: x,
-									transform: `translate(${r},0)`,
-									...L?.format ? { format: (e) => L.format(Number(e)) } : {}
+									transform: `translate(${n},0)`,
+									...R?.format ? { format: (e) => R.format(Number(e)) } : {}
 								})
 							] })
 						]
 					})] });
 				}
 			}),
-			A && !j && H > 1 && /* @__PURE__ */ f(Pt, {
-				count: H,
-				window: W,
+			j && !M && U > 1 && /* @__PURE__ */ f(Pt, {
+				count: U,
+				window: G,
 				label: "Range"
 			}),
-			j && H > 1 && /* @__PURE__ */ f(Ft, {
-				count: H,
-				window: W,
+			M && U > 1 && /* @__PURE__ */ f(Ft, {
+				count: U,
+				window: G,
 				label: "Range"
 			}),
-			re && /* @__PURE__ */ f(Kt, {
-				series: K.map((e, t) => ({
+			X && /* @__PURE__ */ f(Kt, {
+				series: q.map((e, t) => ({
 					id: e.id,
 					label: e.label,
 					color: e.color ?? en[t % en.length]
 				})),
-				hidden: z
+				hidden: V
 			})
 		]
 	});
@@ -2705,13 +2708,13 @@ function rn(e) {
 }
 function an({ series: e, x: t, y: n, title: r, description: a, orientation: c = "vertical", mode: l = "grouped", width: u, height: h, xTicks: _ = 5, yTicks: v = 5, xLabelEvery: y, legend: b, tooltip: x, tooltipFormat: S, className: C, plain: w, annotations: T, labels: E, onSelect: D, fill: O = "solid", patternKind: k }) {
 	o();
-	let A = s(), j = w ? null : xt(E), M = i(/* @__PURE__ */ new Set()), N = w ? He : Ve, P = h ?? (w ? 48 : 300), I = w ? !1 : b ?? e.length > 1, L = (e) => e.y ?? n, R = (e[0]?.data ?? []).map((e) => t(e)), ee = e.flatMap((e) => e.data.map((t) => L(e)(t))), te = R.length > 0, z = l === "stacked" || l === "percent", B = R.map((t, n) => e.reduce((e, t) => e + L(t)(t.data[n]), 0)), V = () => {
+	let A = s(), j = w ? null : xt(E), M = i(/* @__PURE__ */ new Set()), N = w ? He : Ve, P = h ?? (w ? 48 : 300), I = w ? !1 : b ?? e.length > 1, L = (e) => e.y ?? n, R = (e[0]?.data ?? []).map((e) => t(e)), z = e.flatMap((e) => e.data.map((t) => L(e)(t))), ee = R.length > 0, B = l === "stacked" || l === "percent", V = R.map((t, n) => e.reduce((e, t) => e + L(t)(t.data[n]), 0)), te = () => {
 		let t = F(e.map((e) => e.data.map((t) => L(e)(t))));
 		return l === "percent" ? t.map((e) => e.map(([e, t], n) => {
-			let r = B[n] || 1;
+			let r = V[n] || 1;
 			return [e / r, t / r];
 		})) : t;
-	}, H = z ? 0 : Math.min(0, ...ee), U = te ? Math.max(...B) : 1, W = l === "percent" ? 1 : l === "stacked" ? U : Math.max(1, ...ee), G = l === "percent" ? (e) => `${Math.round(Number(e) * 100)}%` : void 0;
+	}, H = B ? 0 : Math.min(0, ...z), U = ee ? Math.max(...V) : 1, W = l === "percent" ? 1 : l === "stacked" ? U : Math.max(1, ...z), G = l === "percent" ? (e) => `${Math.round(Number(e) * 100)}%` : void 0;
 	return /* @__PURE__ */ p("div", {
 		style: {
 			display: "flex",
@@ -2729,13 +2732,13 @@ function an({ series: e, x: t, y: n, title: r, description: a, orientation: c =
 				/* @__PURE__ */ f("tbody", { children: R.map((t, n) => /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("td", { children: t }), e.map((e) => /* @__PURE__ */ f("td", { children: e.data[n] == null ? "" : L(e)(e.data[n]) }, e.id))] }, t)) })
 			] }),
 			className: C,
-			"data-state": te ? void 0 : "empty",
+			"data-state": ee ? void 0 : "empty",
 			plain: w,
-			tooltip: x && te ? ({ width: n, height: r }) => {
-				if (!x || !te) return;
+			tooltip: x && ee ? ({ width: n, height: r }) => {
+				if (!x || !ee) return;
 				let i = n - N.left - N.right, a = r - N.top - N.bottom, o = c === "vertical", s = g(R, o ? [0, i] : [0, a], .2), u = m([H, W], o ? [a, 0] : [0, i]), d = e.filter((e) => !M.value.has(e.id)), f = [];
-				z && (f = V());
-				let p = z && !S, h = R.map((t, n) => {
+				B && (f = te());
+				let p = B && !S, h = R.map((t, n) => {
 					let r = d.map((t) => ({
 						label: t.label,
 						value: L(t)(t.data[n]),
@@ -2749,7 +2752,7 @@ function an({ series: e, x: t, y: n, title: r, description: a, orientation: c =
 					let r = e.indexOf(n), i = l === "grouped" ? s.bandwidth / d.length : s.bandwidth;
 					return n.data.map((e, a) => {
 						let c = s.map(t(e)) ?? 0, m, g;
-						if (z && f[r]) {
+						if (B && f[r]) {
 							let e = f[r][a];
 							m = e[1], g = e[0];
 						} else m = L(n)(e), g = H;
@@ -2773,7 +2776,7 @@ function an({ series: e, x: t, y: n, title: r, description: a, orientation: c =
 			onSelect: D,
 			children: ({ width: n, height: r }) => {
 				let i = n - N.left - N.right, a = r - N.top - N.bottom, o = c === "vertical", s = g(R, o ? [0, i] : [0, a], .2), u = m([H, W], o ? [a, 0] : [0, i]), h = e.filter((e) => !M.value.has(e.id)), b = [];
-				return z && (b = V()), /* @__PURE__ */ p("g", { children: [O !== "solid" && /* @__PURE__ */ f(Dt, {
+				return B && (b = te()), /* @__PURE__ */ p("g", { children: [O !== "solid" && /* @__PURE__ */ f(Dt, {
 					prefix: A,
 					fill: O,
 					patternKind: k,
@@ -2806,13 +2809,13 @@ function an({ series: e, x: t, y: n, title: r, description: a, orientation: c =
 							let i = n.color ?? nn[e.indexOf(n) % nn.length], a = e.indexOf(n), c = l === "grouped" ? s.bandwidth / h.length : s.bandwidth;
 							return n.data.map((e, d) => {
 								let m = s.map(t(e)) ?? 0, h, g;
-								if (z && b[a]) {
+								if (B && b[a]) {
 									let e = b[a][d];
 									h = e[1], g = e[0];
 								} else h = L(n)(e), g = H;
 								let _ = m + (l === "grouped" ? r * c : 0), v = Math.min(u.map(h), u.map(g)), y = Math.abs(u.map(h) - u.map(g)), x = null;
 								if (j) {
-									let t = j.format(L(n)(e)), r = _ + c / 2, i = z || y < 18 || v < 14;
+									let t = j.format(L(n)(e)), r = _ + c / 2, i = B || y < 18 || v < 14;
 									if (o) x = /* @__PURE__ */ f(St, {
 										x: r,
 										y: i ? v + 13 : v - 4,
@@ -2829,7 +2832,7 @@ function an({ series: e, x: t, y: n, title: r, description: a, orientation: c =
 											tone: i ? "muted" : "default"
 										});
 									}
-									z && y < 14 && (x = null);
+									B && y < 14 && (x = null);
 								}
 								return /* @__PURE__ */ p("g", { children: [o ? /* @__PURE__ */ f("rect", {
 									x: _,
@@ -3030,7 +3033,7 @@ function un({ series: e, title: t, description: n, r = 4, width: a, height: s, x
 	let w = i(/* @__PURE__ */ new Set()), T = _ ? He : Ve, E = s ?? (_ ? 48 : 300), D = _ ? !1 : u ?? e.length > 1, O = e.reduce((e, t) => e + t.data.length, 0), k = !S && (x === "canvas" || x === "auto" && O > 2e3), A = i([S?.min ?? 0, S?.max ?? 1]), j = i(/* @__PURE__ */ new Set()), M = (t, { width: n, height: i }) => {
 		let a = n - T.left - T.right, o = i - T.top - T.bottom;
 		if (a <= 0 || o <= 0) return;
-		let s = m([I, L], [0, a]), c = m([R, ee], [o, 0]);
+		let s = m([I, L], [0, a]), c = m([R, z], [o, 0]);
 		e.forEach((e, n) => {
 			if (!w.value.has(e.id)) {
 				t.fillStyle = Je(t, e.color ?? ln[n % ln.length]), t.globalAlpha = .7;
@@ -3040,7 +3043,7 @@ function un({ series: e, title: t, description: n, r = 4, width: a, height: s, x
 				}
 			}
 		}), t.globalAlpha = 1;
-	}, N = e.flatMap((e) => e.data.map((e) => e.x)), P = e.flatMap((e) => e.data.map((e) => e.y)), F = N.length > 0, I = F ? Math.min(...N) : 0, L = F ? Math.max(...N) : 1, R = F ? Math.min(0, ...P) : 0, ee = F ? Math.max(...P) : 1;
+	}, N = e.flatMap((e) => e.data.map((e) => e.x)), P = e.flatMap((e) => e.data.map((e) => e.y)), F = N.length > 0, I = F ? Math.min(...N) : 0, L = F ? Math.max(...N) : 1, R = F ? Math.min(0, ...P) : 0, z = F ? Math.max(...P) : 1;
 	return /* @__PURE__ */ p("div", {
 		style: {
 			display: "flex",
@@ -3071,7 +3074,7 @@ function un({ series: e, title: t, description: n, r = 4, width: a, height: s, x
 				plain: _,
 				tooltip: h !== !1 && F ? ({ width: t, height: n }) => {
 					if (h === !1 || !F) return;
-					let r = t - T.left - T.right, i = n - T.top - T.bottom, a = m([I, L], [0, r]), o = m([R, ee], [i, 0]);
+					let r = t - T.left - T.right, i = n - T.top - T.bottom, a = m([I, L], [0, r]), o = m([R, z], [i, 0]);
 					return { points: e.flatMap((e) => w.value.has(e.id) ? [] : e.data.map((t, n) => ({
 						id: `${e.id}-${n}`,
 						cx: T.left + a.map(t.x),
@@ -3090,7 +3093,7 @@ function un({ series: e, title: t, description: n, r = 4, width: a, height: s, x
 					A.value = [S.min, S.max], j.value = /* @__PURE__ */ new Set();
 				} : void 0,
 				children: ({ width: t, height: n }) => {
-					let i = t - T.left - T.right, a = n - T.top - T.bottom, o = m([I, L], [0, i]), s = m([R, ee], [a, 0]);
+					let i = t - T.left - T.right, a = n - T.top - T.bottom, o = m([I, L], [0, i]), s = m([R, z], [a, 0]);
 					return /* @__PURE__ */ f("g", { children: /* @__PURE__ */ p("g", {
 						transform: `translate(${T.left},${T.top})`,
 						children: [
@@ -3368,7 +3371,7 @@ function hn({ value: e, label: t, delta: n, deltaLabel: r, icon: i, sparkline: a
 //#region src/charts/histogram/histogram.tsx
 function gn({ data: e, bins: t, title: n, label: r, description: i, width: a, height: s, className: c, plain: l }) {
 	o();
-	let u = l ? He : Ve, h = s ?? (l ? 48 : 300), g = V(e, t), _ = g.reduce((e, t) => Math.max(e, t.count), 0);
+	let u = l ? He : Ve, h = s ?? (l ? 48 : 300), g = te(e, t), _ = g.reduce((e, t) => Math.max(e, t.count), 0);
 	return /* @__PURE__ */ f(Q, {
 		title: n,
 		description: i,
@@ -4988,4 +4991,4 @@ function Qn({ value: e, min: t = 0, max: n = 100, thresholds: r, unit: i = "", s
 	});
 }
 //#endregion
-export { tn as AreaChart, $ as Axis, an as BarChart, vn as Boxplot, Pt as Brush, Sn as BubbleChart, Mn as Bullet, qn as Calendar, Jn as Candlestick, qe as CanvasLayer, Dt as ChartDefs, Q as ChartFrame, Cn as ComboChart, Ve as DEFAULT_MARGINS, St as DataLabel, Ft as DataZoom, In as Funnel, Qn as Gauge, kt as Glyph, pt as GridLines, wn as Heatmap, gn as Histogram, hn as Kpi, Kt as Legend, Qt as LineChart, pn as Meter, He as PLAIN_MARGINS, cn as PieChart, Xn as Polar, An as Radar, Pn as RadialBar, Hn as Sankey, un as ScatterChart, dn as Sparkline, Rn as Stream, Bn as Sunburst, Nt as Text, et as Toolbox, En as Treemap, Wt as VisualMap, lt as _syncGroupCount, Ee as aggregate, be as angleBand, yt as annotationSummary, P as arcPath, N as areaPath, g as bandScale, De as bin, V as binValues, ze as bindStream, H as boxStats, z as cellPath, Ie as decimate, he as divergingRamp, it as download, Me as encode, Ne as encodeCategory, U as extent, Et as fillFor, Se as filter, st as getSyncGroup, Ot as glyphPath, wt as gradientId, Qe as isZoomed, T as linePath, m as linearScale, ie as linkPath, v as logScale, Pe as lttb, Ht as mapVisual, X as maxDepth, Fe as minmax, L as nearestIndex, h as niceTicks, Ze as panWindow, re as partition, Tt as patternId, Vt as pieceIndex, ye as polarPoint, C as quantize, xe as radiusScale, ve as rampLightness, ge as rampOf, _e as rampStops, Ae as regression, ct as releaseSyncGroup, _t as renderAnnotation, vt as renderAnnotations, Je as resolveColor, xt as resolveLabels, Z as sankeyLayout, me as sequentialRamp, nt as serializeSvg, we as sort, w as splitDefined, _ as sqrtScale, q as squarify, F as stackSeries, J as streamExtent, ne as streamLayout, Y as sumValue, rt as svgToPngBlob, S as timeScale, I as toStackedSeries, Be as useChartSize, Re as useStreamSeries, Ut as visualVisible, te as voronoiCells, R as voronoiFind, Mt as wrapText, Xe as zoomWindow };
+export { tn as AreaChart, $ as Axis, an as BarChart, vn as Boxplot, Pt as Brush, Sn as BubbleChart, Mn as Bullet, qn as Calendar, Jn as Candlestick, qe as CanvasLayer, Dt as ChartDefs, Q as ChartFrame, Cn as ComboChart, Ve as DEFAULT_MARGINS, St as DataLabel, Ft as DataZoom, In as Funnel, Qn as Gauge, kt as Glyph, pt as GridLines, wn as Heatmap, gn as Histogram, hn as Kpi, Kt as Legend, Qt as LineChart, pn as Meter, He as PLAIN_MARGINS, cn as PieChart, Xn as Polar, An as Radar, Pn as RadialBar, Hn as Sankey, un as ScatterChart, dn as Sparkline, Rn as Stream, Bn as Sunburst, Nt as Text, et as Toolbox, En as Treemap, Wt as VisualMap, lt as _syncGroupCount, Ee as aggregate, be as angleBand, yt as annotationSummary, P as arcPath, N as areaPath, g as bandScale, De as bin, te as binValues, ze as bindStream, H as boxStats, B as cellPath, Ie as decimate, he as divergingRamp, it as download, Me as encode, Ne as encodeCategory, U as extent, Et as fillFor, Se as filter, st as getSyncGroup, Ot as glyphPath, wt as gradientId, Qe as isZoomed, T as linePath, m as linearScale, ie as linkPath, v as logScale, Pe as lttb, Ht as mapVisual, X as maxDepth, Fe as minmax, L as nearestIndex, h as niceTicks, Ze as panWindow, re as partition, Tt as patternId, Vt as pieceIndex, ye as polarPoint, C as quantize, xe as radiusScale, ve as rampLightness, ge as rampOf, _e as rampStops, Ae as regression, ct as releaseSyncGroup, _t as renderAnnotation, vt as renderAnnotations, Je as resolveColor, xt as resolveLabels, Z as sankeyLayout, me as sequentialRamp, nt as serializeSvg, we as sort, w as splitDefined, _ as sqrtScale, q as squarify, F as stackSeries, J as streamExtent, ne as streamLayout, Y as sumValue, rt as svgToPngBlob, S as timeScale, I as toStackedSeries, Be as useChartSize, Re as useStreamSeries, Ut as visualVisible, ee as voronoiCells, R as voronoiFind, Mt as wrapText, Xe as zoomWindow };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cascivo/charts",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
-  "description": "Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies",
+  "description": "Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies. Colors come from @cascivo/themes; components from @cascivo/react. Docs offline: npx @cascivo/docs",
   "keywords": [
     "cascivo",
     "charts",
@@ -44,8 +44,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.5.1",
-    "@cascivo/i18n": "^0.2.9"
+    "@cascivo/core": "^0.5.2",
+    "@cascivo/i18n": "^0.2.10"
   },
   "devDependencies": {
     "@preact/signals": "^2",

package/readme.body.md

@@ -1,5 +1,7 @@
 Accessible, signal-driven chart library for cascivo — AreaChart, BarChart, LineChart, Sparkline, Heatmap, and more. All charts are keyboard-navigable with `aria-live` tooltips. CVD-safe palettes (Okabe-Ito, oklch) verified in CI across all {{count.themes}} themes.
 
+> **Docs offline?** The full cascivo reference ships as an npm package — `npx -y @cascivo/docs`, no website needed.
+
 ## Install
 
 ```sh
@@ -31,6 +33,24 @@ export function Traffic() {
 Charts are CSS-token-themed: drop them inside any element carrying a `data-theme` (or import a
 theme stylesheet) and they pick up the same palette, radii, and typography as the rest of cascivo.
 
+### Sizing — responsive by default
+
+**Omit `width`** and the chart fills and tracks its container (a `ResizeObserver`
+watches the slot), so a chart drops cleanly into a responsive `Card` or grid cell with
+no measuring on your part. `height` defaults to `300` (px); set it to change the aspect.
+
+Pass an explicit `width` only for a fixed-size export — and even then it is **clamped to
+the container** (`max-inline-size: 100%`), so an over-wide `width` scales down instead of
+overflowing and clipping data. To size another element to match a chart, or to build a
+custom chart, use the exported `useChartSize()` hook.
+
+```tsx
+<Card>
+  <LineChart data={data} />           {/* fills the card, resizes with it */}
+</Card>
+<LineChart data={data} height={160} /> {/* shorter, still full-width */}
+```
+
 > **Vite SSR (TanStack Start, Remix, vite-ssr, workerd)?** Like the rest of cascivo, the
 > chart CSS ships as side-effect imports a bare server loader can't resolve — mark
 > `ssr: { noExternal: [/^@cascivo\//] }` (the pattern already covers `@cascivo/charts`) and