@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/ink.d.ts

@@ -0,0 +1,127 @@
+export interface DataPoint {
+    x: number;
+    y: number;
+}
+export interface PixelPoint {
+    x: number;
+    y: number;
+}
+/** Freehand stroke, stored in data units so it stays on its data when the chart is resized. */
+export interface InkStroke {
+    kind: "stroke";
+    id: number;
+    color: string;
+    points: DataPoint[];
+}
+/** Two points whose difference is measured. */
+export interface InkRuler {
+    kind: "ruler";
+    id: number;
+    a: DataPoint;
+    b: DataPoint;
+}
+export type InkItem = InkStroke | InkRuler;
+export interface InkState {
+    items: InkItem[];
+    /** Items taken back by undo, most recent last; a new item empties it. */
+    redo: InkItem[];
+}
+export type InkAction = {
+    type: "add";
+    item: InkItem;
+} | {
+    type: "undo";
+} | {
+    type: "redo";
+} | {
+    type: "clear";
+};
+export declare const EMPTY_INK: InkState;
+export declare function inkReducer(state: InkState, action: InkAction): InkState;
+/** Drops points closer than `minDistance` to the previous kept one; the last point is always kept. */
+export declare function thinPoints<P extends PixelPoint>(points: readonly P[], minDistance: number): P[];
+/** Moving average over three points, `passes` times; the ends stay where the pen started and stopped. */
+export declare function smoothPoints<P extends PixelPoint>(points: readonly P[], passes?: number): P[];
+/**
+ * SVG path through the points as a Catmull-Rom spline converted to cubic Béziers: smooth, passing
+ * through every point. One point becomes a dot, two a straight line.
+ */
+export declare function smoothPath(points: readonly PixelPoint[]): string;
+/** The pen path of a stroke given in pixels: thinned, smoothed, then splined. */
+export declare function inkPath(points: readonly PixelPoint[], minDistance?: number): string;
+export interface Measure {
+    dx: number;
+    dy: number;
+    /** dy / dx, `null` for a vertical ruler. */
+    slope: number | null;
+    /** Change of y as a percentage of the start, `null` when the start is 0. */
+    percent: number | null;
+}
+/** Difference between two points of the chart, in data units. */
+export declare function measureSegment(a: DataPoint, b: DataPoint): Measure;
+/** Elapsed time as a short text: "3 d", "2.5 h", "40 min". */
+export declare function formatDuration(ms: number): string;
+/** A signed number with its sign always shown: "+4", "-2.5", "0". */
+export declare function signed(value: number, format?: (value: number) => string): string;
+export interface AxisMap {
+    toPixel: (value: number) => number;
+    fromPixel: (pixel: number) => number;
+}
+/**
+ * Piecewise-linear map between data values and pixels, given matching samples (e.g. the center of
+ * each category and its index or time). Outside the samples it continues the nearest segment.
+ */
+export declare function createAxisMap(pixels: readonly number[], values: readonly number[]): AxisMap;
+/**
+ * Conversions of a plot. On a vertical chart `toX` / `fromX` map the category (or time) axis to pixels
+ * along x and `toY` / `fromY` the value axis along y. On a horizontal bar chart the categories run
+ * top to bottom: `toX` / `fromX` still map the category axis (now to pixels along y) and `toY` / `fromY`
+ * the value axis (now to pixels along x). A data point is always `{ x: category, y: value }`.
+ */
+export interface PlotAxes {
+    horizontal?: boolean;
+    width: number;
+    height: number;
+    xKind: "index" | "time";
+    toX: (value: number) => number;
+    fromX: (pixel: number) => number;
+    toY: (value: number) => number;
+    fromY: (pixel: number) => number;
+}
+/** Plot-relative pixel of a data point, whichever way the plot is laid out. */
+export declare function plotToPixel(plot: PlotAxes, point: DataPoint): PixelPoint;
+/** Data point under a plot-relative pixel, clamped to the plot box. */
+export declare function pixelToPlot(plot: PlotAxes, pixel: PixelPoint): DataPoint;
+/** Visible data window of a plot, for the keyboard cursor. */
+export declare function plotDomain(plot: PlotAxes): CursorDomain;
+export type CursorKey = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown";
+/** Visible data window of a plot, which the keyboard cursor moves inside. */
+export interface CursorDomain {
+    x: readonly [number, number];
+    y: readonly [number, number];
+    /** "index": x moves one category at a time; "time": by a fiftieth of the window. */
+    xKind: "index" | "time";
+}
+/** Where the crosshair appears when a plot is focused: the middle of the window. */
+export declare function startCursor(domain: CursorDomain): DataPoint;
+/**
+ * One arrow-key step of the crosshair in data units: a category on index axes (a fiftieth of the
+ * window on time axes) and a fiftieth of the value window vertically; `big` moves five times as far.
+ * It never leaves the window. On a horizontal plot (`horizontal`) left and right move the value and
+ * up and down the category (down is the next one, as the categories run top to bottom).
+ */
+export declare function moveCursor(cursor: DataPoint, key: CursorKey, big: boolean, domain: CursorDomain, horizontal?: boolean): DataPoint;
+/**
+ * What a key does with the points collected so far. The ruler needs two points and commits on the
+ * second; the pen collects vertices with Space and Enter finishes (the cursor becomes the last vertex).
+ */
+export type CursorAction = {
+    type: "pending";
+    points: DataPoint[];
+} | {
+    type: "commit";
+    points: DataPoint[];
+} | {
+    type: "cancel";
+};
+export declare function cursorAction(tool: "ruler" | "ink", key: " " | "Enter" | "Escape", points: readonly DataPoint[], cursor: DataPoint): CursorAction;

package/dist/charts/core/ink.js

@@ -0,0 +1,178 @@
+const EMPTY_INK = { items: [], redo: [] };
+function inkReducer(state, action) {
+  switch (action.type) {
+    case "add":
+      return { items: [...state.items, action.item], redo: [] };
+    case "undo": {
+      const last = state.items[state.items.length - 1];
+      return last ? { items: state.items.slice(0, -1), redo: [...state.redo, last] } : state;
+    }
+    case "redo": {
+      const next = state.redo[state.redo.length - 1];
+      return next ? { items: [...state.items, next], redo: state.redo.slice(0, -1) } : state;
+    }
+    case "clear":
+      return state.items.length === 0 && state.redo.length === 0 ? state : EMPTY_INK;
+  }
+}
+function thinPoints(points, minDistance) {
+  if (points.length <= 2) return points.slice();
+  const out = [points[0]];
+  for (let i = 1; i < points.length - 1; i += 1) {
+    const point = points[i];
+    const previous = out[out.length - 1];
+    if (Math.hypot(point.x - previous.x, point.y - previous.y) >= minDistance) out.push(point);
+  }
+  out.push(points[points.length - 1]);
+  return out;
+}
+function smoothPoints(points, passes = 2) {
+  let current = points.slice();
+  for (let pass = 0; pass < passes && current.length > 2; pass += 1) {
+    const source = current;
+    current = source.map(
+      (point, i) => i === 0 || i === source.length - 1 ? point : {
+        ...point,
+        x: (source[i - 1].x + point.x + source[i + 1].x) / 3,
+        y: (source[i - 1].y + point.y + source[i + 1].y) / 3
+      }
+    );
+  }
+  return current;
+}
+const round = (value) => Math.round(value * 10) / 10;
+function smoothPath(points) {
+  const first = points[0];
+  if (!first) return "";
+  if (points.length === 1) return `M${round(first.x)},${round(first.y)}h0`;
+  let d = `M${round(first.x)},${round(first.y)}`;
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+    d += `C${round(p1.x + (p2.x - p0.x) / 6)},${round(p1.y + (p2.y - p0.y) / 6)} ${round(p2.x - (p3.x - p1.x) / 6)},${round(p2.y - (p3.y - p1.y) / 6)} ${round(p2.x)},${round(p2.y)}`;
+  }
+  return d;
+}
+function inkPath(points, minDistance = 3) {
+  return smoothPath(smoothPoints(thinPoints(points, minDistance), 2));
+}
+function measureSegment(a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return {
+    dx,
+    dy,
+    slope: dx === 0 ? null : dy / dx,
+    percent: a.y === 0 ? null : dy / Math.abs(a.y) * 100
+  };
+}
+const UNITS = [
+  ["d", 864e5],
+  ["h", 36e5],
+  ["min", 6e4],
+  ["s", 1e3]
+];
+function formatDuration(ms) {
+  const size = Math.abs(ms);
+  for (const [unit, length] of UNITS) {
+    if (size >= length) return `${round(ms / length)} ${unit}`;
+  }
+  return `${Math.round(ms)} ms`;
+}
+function signed(value, format = (v) => String(round(v))) {
+  if (value === 0) return format(0);
+  return `${value > 0 ? "+" : "-"}${format(Math.abs(value))}`;
+}
+function createAxisMap(pixels, values) {
+  const n = Math.min(pixels.length, values.length);
+  const interpolate = (from, to, x) => {
+    if (n === 0) return 0;
+    if (n === 1) return to[0];
+    let i = 0;
+    while (i < n - 2 && x > from[i + 1]) i += 1;
+    const x0 = from[i];
+    const x1 = from[i + 1];
+    const t = x1 === x0 ? 0 : (x - x0) / (x1 - x0);
+    return to[i] + (to[i + 1] - to[i]) * t;
+  };
+  return {
+    toPixel: (value) => interpolate(values, pixels, value),
+    fromPixel: (pixel) => interpolate(pixels, values, pixel)
+  };
+}
+function plotToPixel(plot, point) {
+  return plot.horizontal ? { x: plot.toY(point.y), y: plot.toX(point.x) } : { x: plot.toX(point.x), y: plot.toY(point.y) };
+}
+function pixelToPlot(plot, pixel) {
+  const px = Math.min(plot.width, Math.max(0, pixel.x));
+  const py = Math.min(plot.height, Math.max(0, pixel.y));
+  return plot.horizontal ? { x: plot.fromX(py), y: plot.fromY(px) } : { x: plot.fromX(px), y: plot.fromY(py) };
+}
+function plotDomain(plot) {
+  return plot.horizontal ? {
+    x: [plot.fromX(0), plot.fromX(plot.height)],
+    y: [plot.fromY(0), plot.fromY(plot.width)],
+    xKind: plot.xKind
+  } : {
+    x: [plot.fromX(0), plot.fromX(plot.width)],
+    y: [plot.fromY(plot.height), plot.fromY(0)],
+    xKind: plot.xKind
+  };
+}
+const clampTo = (value, [a, b]) => Math.min(Math.max(a, b), Math.max(Math.min(a, b), value));
+function startCursor(domain) {
+  const x = (domain.x[0] + domain.x[1]) / 2;
+  return {
+    x: domain.xKind === "index" ? clampTo(Math.round(x), domain.x) : x,
+    y: (domain.y[0] + domain.y[1]) / 2
+  };
+}
+function moveCursor(cursor, key, big, domain, horizontal = false) {
+  const factor = big ? 5 : 1;
+  const xStep = domain.xKind === "index" ? 1 : Math.abs(domain.x[1] - domain.x[0]) / 50;
+  const yStep = Math.abs(domain.y[1] - domain.y[0]) / 50;
+  if (horizontal) {
+    const sideways = key === "ArrowLeft" || key === "ArrowRight";
+    const forward = key === "ArrowRight" || key === "ArrowDown";
+    const sign2 = forward ? 1 : -1;
+    return sideways ? { ...cursor, y: clampTo(cursor.y + sign2 * yStep * factor, domain.y) } : { ...cursor, x: clampTo(cursor.x + sign2 * xStep * factor, domain.x) };
+  }
+  const sign = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
+  if (key === "ArrowLeft" || key === "ArrowRight") {
+    return { ...cursor, x: clampTo(cursor.x + sign * xStep * factor, domain.x) };
+  }
+  return { ...cursor, y: clampTo(cursor.y + sign * yStep * factor, domain.y) };
+}
+function cursorAction(tool, key, points, cursor) {
+  if (key === "Escape") return { type: "cancel" };
+  if (tool === "ruler") {
+    const first = points[0];
+    if (!first) return { type: "pending", points: [cursor] };
+    if (first.x === cursor.x && first.y === cursor.y) return { type: "pending", points: [first] };
+    return { type: "commit", points: [first, cursor] };
+  }
+  if (key === " ") return { type: "pending", points: [...points, cursor] };
+  const last = points[points.length - 1];
+  const all = last && last.x === cursor.x && last.y === cursor.y ? [...points] : [...points, cursor];
+  return all.length >= 2 ? { type: "commit", points: all } : { type: "pending", points: all };
+}
+export {
+  EMPTY_INK,
+  createAxisMap,
+  cursorAction,
+  formatDuration,
+  inkPath,
+  inkReducer,
+  measureSegment,
+  moveCursor,
+  pixelToPlot,
+  plotDomain,
+  plotToPixel,
+  signed,
+  smoothPath,
+  smoothPoints,
+  startCursor,
+  thinPoints
+};

package/dist/charts/core/legend.d.ts

@@ -0,0 +1,23 @@
+export type LegendShape = "line" | "dashed" | "square" | "dot";
+export interface LegendItem {
+    id: string;
+    name: string;
+    color: string;
+    shape?: LegendShape;
+    hidden?: boolean;
+}
+export interface ChartLegendProps {
+    items: readonly LegendItem[];
+    /** Click toggles a series. Omit for a read-only legend. */
+    onToggle?: (id: string) => void;
+    /** Hover or focus of an item, `null` when leaving: used to dim the other series. */
+    onHighlight?: (id: string | null) => void;
+    align?: "start" | "end" | "center";
+    className?: string;
+}
+/**
+ * Series legend. Each item is a toggle button (`aria-pressed`), so hiding a
+ * series works with mouse, touch and keyboard; hovering or focusing one dims
+ * the rest of the chart.
+ */
+export declare function ChartLegend({ items, onToggle, onHighlight, align, className, }: ChartLegendProps): import("react").JSX.Element;

package/dist/charts/core/legend.js

@@ -0,0 +1,79 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function Swatch({ color, shape = "square" }) {
+  if (shape === "line" || shape === "dashed") {
+    return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "16", height: "8", className: "shrink-0 overflow-visible", children: /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: "1",
+        x2: "15",
+        y1: "4",
+        y2: "4",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeDasharray: shape === "dashed" ? "3 3.5" : void 0,
+        style: { stroke: color }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("size-2.5 shrink-0", shape === "dot" ? "rounded-pill" : "rounded-[3px]"),
+      style: { background: color }
+    }
+  );
+}
+function ChartLegend({
+  items,
+  onToggle,
+  onHighlight,
+  align = "start",
+  className
+}) {
+  const visibleCount = items.filter((item) => !item.hidden).length;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "m-0 flex list-none flex-wrap gap-x-1 gap-y-0.5 p-0",
+        align === "end" && "justify-end",
+        align === "center" && "justify-center",
+        className
+      ),
+      children: items.map((item) => {
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Swatch, { color: item.color, shape: item.shape }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: item.name })
+        ] });
+        const itemClass = cn(
+          "inline-flex max-w-[220px] items-center gap-1.5 rounded-pill px-2 py-1 font-semibold text-[12px] text-ink-2 transition-[opacity,background-color] duration-150",
+          item.hidden && "opacity-45 [&>span:last-child]:line-through"
+        );
+        return /* @__PURE__ */ jsx("li", { children: onToggle ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !item.hidden,
+            disabled: !item.hidden && visibleCount <= 1,
+            onClick: () => onToggle(item.id),
+            onPointerEnter: () => onHighlight?.(item.id),
+            onPointerLeave: () => onHighlight?.(null),
+            onFocus: () => onHighlight?.(item.id),
+            onBlur: () => onHighlight?.(null),
+            className: cn(
+              itemClass,
+              "cursor-pointer border-0 bg-transparent hover:bg-surface-2 hover:text-ink disabled:cursor-default disabled:hover:bg-transparent"
+            ),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: itemClass, children: content }) }, item.id);
+      })
+    }
+  );
+}
+export {
+  ChartLegend
+};

package/dist/charts/core/motion.d.ts

@@ -0,0 +1,33 @@
+import { type RefObject } from "react";
+/** True when the user asked the OS for less motion. False on the server. */
+export declare function useReducedMotion(): boolean;
+export declare const EASE_OUT = "cubic-bezier(.22,1,.36,1)";
+/** Cubic ease-out for `requestAnimationFrame` transitions, `t` in 0..1. */
+export declare function easeOutCubic(t: number): number;
+export interface EntryAnimationOptions {
+    /** Skip the animation entirely. */
+    disabled?: boolean;
+    /** Changing the key replays the animation (e.g. when the data set changes). */
+    replayKey?: unknown;
+}
+/**
+ * Plays an entry animation once per `replayKey` with the Web Animations API.
+ * `play` receives the root element and starts whatever animations it needs.
+ * Nothing runs under `prefers-reduced-motion`, on the server, or in browsers
+ * without `Element.animate`, so the static final state is always the default.
+ */
+export declare function useEntryAnimation<T extends Element>(ref: RefObject<T | null>, play: (root: T) => void, { disabled, replayKey }?: EntryAnimationOptions): void;
+/** Reveals children left to right by scaling a clip rectangle. */
+export declare function revealClip(element: Element, duration?: number, delay?: number): void;
+/** Fades an element in. */
+export declare function fadeIn(element: Element, duration?: number, delay?: number): void;
+/**
+ * Eases a displayed number towards `target` (cubic ease-out). Starts from
+ * `from` on mount, then from wherever it currently is when `target` changes.
+ * Returns `target` at once under `prefers-reduced-motion` or `disabled`.
+ */
+export declare function useAnimatedNumber(target: number, { from, duration, disabled, }?: {
+    from?: number;
+    duration?: number;
+    disabled?: boolean;
+}): number;

package/dist/charts/core/motion.js

@@ -0,0 +1,81 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const media = window.matchMedia(QUERY);
+    setReduced(media.matches);
+    const onChange = () => setReduced(media.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+const EASE_OUT = "cubic-bezier(.22,1,.36,1)";
+function easeOutCubic(t) {
+  return 1 - (1 - t) ** 3;
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && !!window.matchMedia?.(QUERY).matches;
+}
+function useEntryAnimation(ref, play, { disabled = false, replayKey } = {}) {
+  useEffect(() => {
+    const root = ref.current;
+    if (disabled || !root || typeof root.animate !== "function" || prefersReducedMotion()) return;
+    play(root);
+  }, [disabled, replayKey]);
+}
+function revealClip(element, duration = 900, delay = 0) {
+  element.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+    duration,
+    delay,
+    easing: EASE_OUT,
+    fill: "backwards"
+  });
+}
+function fadeIn(element, duration = 400, delay = 0) {
+  element.animate([{ opacity: 0 }, { opacity: 1 }], {
+    duration,
+    delay,
+    easing: "ease-out",
+    fill: "backwards"
+  });
+}
+function useAnimatedNumber(target, {
+  from = 0,
+  duration = 900,
+  disabled = false
+} = {}) {
+  const [value, setValue] = useState(disabled ? target : from);
+  const current = useRef(value);
+  current.current = value;
+  useEffect(() => {
+    if (disabled || prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
+      setValue(target);
+      return;
+    }
+    const start = current.current;
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const progress = Math.min(1, (now - startedAt) / duration);
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(start + (target - start) * eased);
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, duration, disabled]);
+  return value;
+}
+export {
+  EASE_OUT,
+  easeOutCubic,
+  fadeIn,
+  revealClip,
+  useAnimatedNumber,
+  useEntryAnimation,
+  useReducedMotion
+};

package/dist/charts/core/palette.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Series colors. The first series always wears the brand (`accent-word`, a
+ * readable tone of the active `data-accent` palette); the rest come from the
+ * categorical `chart-cat-*` tokens, tuned separately for light and dark.
+ * Values are CSS `var()` references, so apply them through `style`, never as
+ * SVG presentation attributes.
+ */
+export declare const CHART_PALETTE: readonly ["var(--accent-word)", "var(--chart-cat-1)", "var(--chart-cat-2)", "var(--chart-cat-3)", "var(--chart-cat-4)", "var(--chart-cat-5)", "var(--chart-cat-6)", "var(--chart-cat-7)"];
+/** Color for the series at `index`, unless the series brings its own. */
+export declare function seriesColor(index: number, override?: string): string;
+/** Direction of change: `chart-up` and `chart-down` tokens, `chart-total` when flat or a total. */
+export declare const DIRECTION_COLORS: {
+    readonly up: "var(--chart-up)";
+    readonly down: "var(--chart-down)";
+    readonly flat: "var(--chart-total)";
+};
+export type ChartDirection = keyof typeof DIRECTION_COLORS;
+/** `up` / `down` / `flat` for a change; changes within `epsilon` count as flat. */
+export declare function directionOf(delta: number, epsilon?: number): ChartDirection;
+export type ChartTone = "neutral" | "accent" | "danger" | "warning" | "success";
+/** Stroke/text color and soft fill for annotations and status marks. */
+export declare const TONE_COLORS: Record<ChartTone, {
+    ink: string;
+    soft: string;
+}>;
+/** Base hue of a monochrome chart: the active brand accent. */
+export declare const MONOCHROME_BASE = "var(--accent-word)";
+/**
+ * Shade `step` of `count` in one hue: step 0 is the full color, the last
+ * step the palest tint (40%), mixed towards the surface so it works in both
+ * themes. `count` of 1 gives the full color.
+ */
+export declare function monochromeShade(step: number, count: number, base?: string): string;
+/**
+ * Shades for `values`, darkest on the largest value, so rank reads as
+ * intensity. Returns one color per input, in input order.
+ */
+export declare function monochromeByValue(values: readonly number[], base?: string): string[];

package/dist/charts/core/palette.js

@@ -0,0 +1,52 @@
+const CHART_PALETTE = [
+  "var(--accent-word)",
+  "var(--chart-cat-1)",
+  "var(--chart-cat-2)",
+  "var(--chart-cat-3)",
+  "var(--chart-cat-4)",
+  "var(--chart-cat-5)",
+  "var(--chart-cat-6)",
+  "var(--chart-cat-7)"
+];
+function seriesColor(index, override) {
+  return override ?? CHART_PALETTE[index % CHART_PALETTE.length];
+}
+const DIRECTION_COLORS = {
+  up: "var(--chart-up)",
+  down: "var(--chart-down)",
+  flat: "var(--chart-total)"
+};
+function directionOf(delta, epsilon = 0) {
+  return delta > epsilon ? "up" : delta < -epsilon ? "down" : "flat";
+}
+const TONE_COLORS = {
+  neutral: { ink: "var(--ink-3)", soft: "var(--surface-2)" },
+  accent: { ink: "var(--accent-ink)", soft: "var(--accent-soft)" },
+  danger: { ink: "var(--danger)", soft: "var(--danger-soft)" },
+  warning: { ink: "var(--warning)", soft: "var(--warning-soft)" },
+  success: { ink: "var(--success)", soft: "var(--success-soft)" }
+};
+const MONOCHROME_BASE = "var(--accent-word)";
+function monochromeShade(step, count, base = MONOCHROME_BASE) {
+  const last = Math.max(1, count - 1);
+  const share = Math.round(100 - Math.min(Math.max(step, 0), last) / last * 60);
+  return share >= 100 ? base : `color-mix(in oklab, ${base} ${share}%, var(--surface))`;
+}
+function monochromeByValue(values, base = MONOCHROME_BASE) {
+  const order = values.map((value, index) => ({ value, index })).sort((a, b) => b.value - a.value || a.index - b.index);
+  const out = new Array(values.length);
+  order.forEach((entry, rank) => {
+    out[entry.index] = monochromeShade(rank, values.length, base);
+  });
+  return out;
+}
+export {
+  CHART_PALETTE,
+  DIRECTION_COLORS,
+  MONOCHROME_BASE,
+  TONE_COLORS,
+  directionOf,
+  monochromeByValue,
+  monochromeShade,
+  seriesColor
+};

package/dist/charts/core/path.d.ts

@@ -0,0 +1,40 @@
+/** SVG path builders. All coordinates are in pixels. */
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * `smooth` is a monotone cubic; the `step*` curves hold a value until the next
+ * sample (`step-after`), jump to it early (`step-before`) or change halfway (`step`).
+ */
+export type Curve = "linear" | "smooth" | "step" | "step-before" | "step-after";
+/** Splits a sequence at `null` gaps into drawable runs. */
+export declare function segments(points: ReadonlyArray<Point | null>): Point[][];
+/**
+ * Tangents for a monotone cubic through `points` (Fritsch–Butland): the curve
+ * never overshoots between two samples, so a peak in the data is a peak on screen.
+ */
+export declare function monotoneTangents(points: readonly Point[]): number[];
+/**
+ * Commands through `points`. The first command is `M`, or `L` when `join` is
+ * true, so the run can extend a path already in progress (areas).
+ */
+export declare function curveCommands(points: readonly Point[], curve: Curve, join?: boolean): string;
+/** Line through the points; `null` entries break the line. */
+export declare function linePath(points: ReadonlyArray<Point | null>, curve?: Curve): string;
+/**
+ * Closed area between a top and a bottom edge sampled at the same x positions
+ * (`bottom[i]` pairs with `top[i]`). A `null` in `top` breaks the area.
+ */
+export declare function areaPath(top: ReadonlyArray<Point | null>, bottom: ReadonlyArray<Point>, curve?: Curve): string;
+export interface CornerRadii {
+    tl: number;
+    tr: number;
+    br: number;
+    bl: number;
+}
+/** Rectangle with an independent radius per corner, clamped to fit. */
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, radii: CornerRadii): string;
+export type BarEnd = "top" | "bottom" | "left" | "right" | "all" | "none";
+/** Bar rounded only at its value end, the way the eye reads the bar's length. */
+export declare function barPath(x: number, y: number, width: number, height: number, radius: number, end: BarEnd): string;