@cascivo/charts 0.18.0 → 1.0.0

package/dist/node/sparkline.js

@@ -0,0 +1,61 @@
+"use client";
+import { i as e, l as t, t as n } from "./chart-frame.module-CkOcXGSL.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/core/mini-frame.tsx
+var o = {
+	position: "absolute",
+	insetInlineStart: "-9999px",
+	inlineSize: "1px",
+	blockSize: "1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap"
+};
+function s({ title: e, width: t, height: r, className: s, fallback: c, children: l }) {
+	return /* @__PURE__ */ a("div", {
+		className: [n.frame, s].filter(Boolean).join(" "),
+		"data-plain": "",
+		children: [/* @__PURE__ */ i("svg", {
+			role: "img",
+			"aria-label": e,
+			width: t,
+			height: r,
+			viewBox: `0 0 ${t} ${r}`,
+			children: l
+		}), c && /* @__PURE__ */ i("div", {
+			className: n.fallback,
+			style: o,
+			children: c
+		})]
+	});
+}
+//#endregion
+//#region src/charts/sparkline/sparkline-lite.tsx
+function c({ data: n, width: o = 120, height: c = 32, label: l, ariaLabel: u, color: d = "var(--cascivo-chart-1)", endDot: f = !0, className: p }) {
+	let m = (() => {
+		if (n.length === 0) return [];
+		let e = t([0, n.length - 1], [2, o - 2]), r = Math.min(...n), i = Math.max(...n), a = t([r === i ? r - 1 : r, i], [c - 2, 2]);
+		return n.map((t, n) => [e.map(n), a.map(t)]);
+	})(), h = m[m.length - 1];
+	return /* @__PURE__ */ i(s, {
+		title: l ?? u,
+		width: o,
+		height: c,
+		...p === void 0 ? {} : { className: p },
+		children: m.length > 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("path", {
+			d: e(m, "monotone"),
+			fill: "none",
+			stroke: d,
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), f && h && /* @__PURE__ */ i("circle", {
+			cx: h[0],
+			cy: h[1],
+			r: 2.5,
+			fill: d
+		})] })
+	});
+}
+//#endregion
+export { c as Sparkline };

package/dist/sparkline.d.ts

@@ -0,0 +1,43 @@
+interface SparklineLiteBaseProps {
+  data: readonly number[];
+  /**
+   * SVG width in px. **This chart is fixed-width by default** — it is a compact, inline
+   * chart meant to sit in a table cell or beside a label, so omitting `width` gives you
+   * 120px rather than a container-filling chart.
+   *
+   * @defaultValue `120`
+   */
+  width?: number;
+  height?: number;
+  color?: string;
+  /**
+   * Show dot at last data point
+   *
+   * @defaultValue `true`
+   */
+  endDot?: boolean;
+  className?: string;
+}
+/**
+ * Exactly one of `label` / `ariaLabel` is required — a chart with no accessible name is a
+ * bug, so this stays enforced by the type. `ariaLabel` is the catalog's convention for an
+ * invisible accessible name; `Sparkline` predates it and shipped `label`, so both work.
+ */
+type SparklineLiteProps = SparklineLiteBaseProps & ({
+  label: string;
+  ariaLabel?: never;
+} | {
+  ariaLabel: string;
+  label?: never;
+});
+declare function Sparkline({
+  data,
+  width,
+  height,
+  label,
+  ariaLabel,
+  color,
+  endDot,
+  className
+}: SparklineLiteProps): import("react").JSX.Element;
+export { Sparkline, type SparklineLiteProps as SparklineProps };

package/dist/sparkline.js

@@ -0,0 +1,62 @@
+"use client";
+import './charts.css';
+import { i as e, l as t, t as n } from "./chart-frame.module-CkOcXGSL.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/core/mini-frame.tsx
+var o = {
+	position: "absolute",
+	insetInlineStart: "-9999px",
+	inlineSize: "1px",
+	blockSize: "1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap"
+};
+function s({ title: e, width: t, height: r, className: s, fallback: c, children: l }) {
+	return /* @__PURE__ */ a("div", {
+		className: [n.frame, s].filter(Boolean).join(" "),
+		"data-plain": "",
+		children: [/* @__PURE__ */ i("svg", {
+			role: "img",
+			"aria-label": e,
+			width: t,
+			height: r,
+			viewBox: `0 0 ${t} ${r}`,
+			children: l
+		}), c && /* @__PURE__ */ i("div", {
+			className: n.fallback,
+			style: o,
+			children: c
+		})]
+	});
+}
+//#endregion
+//#region src/charts/sparkline/sparkline-lite.tsx
+function c({ data: n, width: o = 120, height: c = 32, label: l, ariaLabel: u, color: d = "var(--cascivo-chart-1)", endDot: f = !0, className: p }) {
+	let m = (() => {
+		if (n.length === 0) return [];
+		let e = t([0, n.length - 1], [2, o - 2]), r = Math.min(...n), i = Math.max(...n), a = t([r === i ? r - 1 : r, i], [c - 2, 2]);
+		return n.map((t, n) => [e.map(n), a.map(t)]);
+	})(), h = m[m.length - 1];
+	return /* @__PURE__ */ i(s, {
+		title: l ?? u,
+		width: o,
+		height: c,
+		...p === void 0 ? {} : { className: p },
+		children: m.length > 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("path", {
+			d: e(m, "monotone"),
+			fill: "none",
+			stroke: d,
+			strokeWidth: 1.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), f && h && /* @__PURE__ */ i("circle", {
+			cx: h[0],
+			cy: h[1],
+			r: 2.5,
+			fill: d
+		})] })
+	});
+}
+//#endregion
+export { c as Sparkline };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/charts",
-  "version": "0.18.0",
+  "version": "1.0.0",
   "private": false,
   "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": [
@@ -38,6 +38,12 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "node": "./dist/node/sparkline.js",
+      "import": "./dist/sparkline.js",
+      "default": "./dist/sparkline.js"
+    },
     "./styles.css": "./dist/charts.css"
   },
   "publishConfig": {
@@ -45,8 +51,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.18.0",
-    "@cascivo/i18n": "^0.18.0"
+    "@cascivo/core": "^1.0.0",
+    "@cascivo/i18n": "^1.0.0"
   },
   "devDependencies": {
     "@preact/signals": "^2",

package/readme.body.md

@@ -63,6 +63,20 @@ The charts are signal-driven. In a plain React app (no Babel signals transform),
 from `@cascivo/core` as the first statement of any component that reads a signal during render. The
 docs app (Preact) does not need this.
 
+## One sparkline, without the engine
+
+`import { Sparkline } from '@cascivo/charts'` pulls in the whole charting engine — tooltips, voronoi hit-testing, a canvas layer, zoom/pan, a toolbox, PNG/SVG export — because `Sparkline` is built on the same frame as every other chart. An adopter measured 44.87 kB / 14.84 kB gzip for a single trend line on a landing page.
+
+For a page that wants a sparkline and draws no other charts, there is a subpath that does not:
+
+```tsx
+import { Sparkline } from '@cascivo/charts/sparkline' // ~3.5 kB gzip, no engine
+```
+
+Identical props, identical markup, identical styling — asserted by a DOM-parity test, and the size is held by a budget in CI. **One difference: no hover tooltip**, because the tooltip is what requires the engine.
+
+Use the main entry when the page draws other charts anyway: the engine is already paid for and the subpath saves nothing.
+
 ## Coloring
 
 By default every slice/series/layer is colored from the positional palette