basalt-ui 1.41.0 → 2.0.0

package/dist/charts/panel.js

@@ -0,0 +1,123 @@
+import { jsx } from "react/jsx-runtime";
+import { crosshair } from "@tanstack/charts/crosshair";
+import { tooltip as tooltipHost } from "@tanstack/charts/tooltip";
+import { portal } from "@tanstack/charts/tooltip/portal";
+import { alignX, composeViews, grid } from "@tanstack/charts/view";
+import { useCallback } from "react";
+import { ChartShell } from "./CartesianChart.js";
+import { defaultFormatX, utcHeaderDate, visibleSeries, xGuide, yGuide } from "./compile.js";
+import { cursorBinding, sourceOnlyFocus } from "./cursor.js";
+import { CHART_THEME, CROSSHAIR } from "./theme.js";
+const { background: _background, focusRing: _focusRing, ...PANE_THEME } = CHART_THEME;
+const MIN_PANE_SHARE = 0.02;
+const paneY = (opts) => ({
+  scale: opts.scale,
+  ...yGuide({
+    cfg: { ticks: opts.ticks },
+    axis: { domain: opts.domain, format: opts.format },
+    cls: opts.cls,
+    side: "left",
+    grid: true
+  })
+});
+const paneX = (opts) => ({
+  scale: opts.scale,
+  ...xGuide({ model: opts.model, xTicks: void 0, format: opts.format, cls: opts.cls })
+});
+function rowsOf(data, x, s) {
+  return data.map((d) => {
+    const v = s.getValue(d);
+    return { x: x(d), y: v === null || !Number.isFinite(v) ? null : v, series: s.key, datum: d };
+  });
+}
+function paneView(build) {
+  return {
+    chart: (ctx) => {
+      const { marks, scales } = build(ctx);
+      return {
+        marks: [...marks, crosshair({ x: CROSSHAIR, y: false })],
+        scales,
+        theme: PANE_THEME,
+        clip: true
+      };
+    }
+  };
+}
+function sourceOf(point, owned) {
+  const datum = point.datum;
+  if (typeof datum === "object" && datum !== null && "datum" in datum && "series" in datum) {
+    const row = datum;
+    if (owned.has(row.series)) return { x: point.xValue, d: row.datum };
+  }
+  return { x: point.xValue, d: datum };
+}
+function panelDefinition(props, ctx, plan) {
+  const { series, formatX, cursorGroup, cursorResolution = "nearest" } = props;
+  const { hidden, chartId } = ctx;
+  const tooltip = props.tooltip === false ? void 0 : props.tooltip;
+  const top = Number.isFinite(plan.topFraction) ? Math.min(Math.max(plan.topFraction, MIN_PANE_SHARE), 1 - MIN_PANE_SHARE) : 0.5;
+  const composed = composeViews({
+    views: { top: paneView(plan.top), bottom: paneView(plan.bottom) },
+    layout: grid({
+      rows: [
+        { id: "top", grow: top },
+        { id: "bottom", grow: 1 - top }
+      ],
+      columns: [{ id: "main", grow: 1 }],
+      gap: plan.gap,
+      cells: { top: { row: "top", column: "main" }, bottom: { row: "bottom", column: "main" } }
+    }),
+    links: [alignX("top", "bottom")]
+  });
+  const owned = new Set(series.map((s) => s.key));
+  const visible = visibleSeries(series, hidden);
+  const hiddenSeries = series.filter((s) => !visible.includes(s));
+  const header = (v, d) => {
+    if (tooltip?.formatHeader) return tooltip.formatHeader(v, d);
+    if (v instanceof Date && !formatX) return utcHeaderDate(v);
+    return formatX ? formatX(v) : defaultFormatX(v);
+  };
+  return {
+    chart: () => composed,
+    focus: tooltip?.onFollow ? "group-x" : sourceOnlyFocus(cursorGroup, chartId),
+    maxFocusDistance: Number.POSITIVE_INFINITY,
+    cursor: cursorBinding({
+      group: cursorGroup,
+      chartId,
+      keys: plan.keys,
+      mode: cursorResolution,
+      pin: ctx.coarse
+    }),
+    tooltip: props.tooltip === false ? false : {
+      use: tooltipHost,
+      portal,
+      anchor: "group-center",
+      content: (points) => {
+        const primary = points[0];
+        if (!primary) return { rows: [] };
+        const { x, d } = sourceOf(primary, owned);
+        const extra = tooltip?.rows?.(d, { visible, hidden: hiddenSeries }) ?? [];
+        return { title: header(x, d), rows: [...plan.rows(d), ...extra] };
+      }
+    }
+  };
+}
+function PanelRung(props) {
+  const { plan, byWidth, formatX, cursorGroup, cursorResolution, tooltip, ...shell } = props;
+  const { series } = shell;
+  const compile = useCallback(
+    (ctx) => panelDefinition(
+      { series, formatX, cursorGroup, cursorResolution, tooltip },
+      ctx,
+      plan({ hidden: ctx.hidden, highlighted: ctx.highlighted, width: ctx.width })
+    ),
+    [series, formatX, cursorGroup, cursorResolution, tooltip, plan]
+  );
+  return /* @__PURE__ */ jsx(ChartShell, { ...shell, compile, ...byWidth !== void 0 && { byWidth } });
+}
+export {
+  PanelRung,
+  paneX,
+  paneY,
+  rowsOf
+};

package/dist/charts/scales.d.ts

@@ -0,0 +1,44 @@
+import { scaleLinear } from '@tanstack/charts/scales/linear';
+import { scaleLog } from 'd3-scale';
+import type { ChartPositionScaleOptions } from '@tanstack/charts/types/core';
+import type { AxisConfig, ChartSeries, ChartX, XZoneSpec } from './types.js';
+/** Pad AWAY from zero: a positive floor moves down, a negative one further down; zero stays. */
+export declare function padAutoLower(candidate: number, pad: number): number;
+/** The mirror of {@link padAutoLower}: a positive ceiling moves up, a negative one toward zero. */
+export declare function padAutoUpper(candidate: number, pad: number): number;
+/**
+ * One y axis' domain. `extraBounds` are the finite zone and reference-line values pinned to this
+ * axis — a target past the data must stay inside the plot. Infinite bounds clamp to the domain by
+ * definition and are ignored. The 1.x law, unchanged (`resolveAxisDomain`).
+ */
+export declare function resolveYDomain<T>(cfg: AxisConfig<T> | undefined, data: readonly T[], series: readonly ChartSeries<T>[], extraBounds?: readonly number[]): readonly [number, number];
+/** A configured y scale instance for a resolved domain. */
+export declare function yScaleFor<T>(cfg: AxisConfig<T> | undefined, domain: readonly [number, number]): ReturnType<typeof scaleLinear> | ReturnType<typeof scaleLog<number, number>>;
+export type XKind = 'date' | 'number' | 'string';
+/** The value type `x` returns, read off the first row (a chart's x is homogeneous by type). */
+export declare function xKindOf(values: readonly ChartX[]): XKind;
+/** Distinct x values in data order (dates by timestamp). */
+export declare function distinctX<X extends ChartX>(values: readonly X[]): X[];
+/**
+ * The x scale and the normalized position of any x value inside the plot (0 = left edge, 1 = right
+ * edge). Zones and x-zones are drawn on a hidden `[0, 1]` scale from those fractions, so a band
+ * spans the plot exactly whatever the x scale is.
+ */
+export type XScaleModel<X extends ChartX> = {
+    kind: XKind;
+    band: boolean;
+    /** Goes straight into `scales.x.scale`. */
+    scale: ChartPositionScaleOptions['scale'];
+    values: readonly X[];
+    /** Center of `x` as a plot fraction; `null` for a value the scale does not contain. */
+    fraction: (x: X) => number | null;
+    /** Half a sample step, as a plot fraction (the `'edge'` widening). */
+    halfStep: number;
+    /** Continuous scales: the domain as numbers (ms for dates), and the median sample step. */
+    extent?: readonly [number, number];
+    step: number;
+};
+export declare function xScaleFor<X extends ChartX>(raw: readonly X[], band: boolean): XScaleModel<X>;
+/** An x-zone's [left, right] as plot fractions, clamped to the plot; `null` when it is empty. */
+export declare function xZoneFractions<X extends ChartX>(zone: XZoneSpec<X>, model: XScaleModel<X>): readonly [number, number] | null;
+//# sourceMappingURL=scales.d.ts.map

package/dist/charts/scales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../src/charts/scales.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAY,MAAM,UAAU,CAAA;AAC7C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzE,gGAAgG;AAChG,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGnE;AAED,mGAAmG;AACnG,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGnE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9B,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,EACjC,WAAW,GAAE,SAAS,MAAM,EAAO,GAClC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAiC3B;AAED,2DAA2D;AAC3D,wBAAgB,SAAS,CAAC,CAAC,EACzB,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,EAC9B,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAQ9E;AAED,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEhD,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,KAAK,CAKxD;AAID,4DAA4D;AAC5D,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,EAAE,CAUrE;AAQD;;;;GAIG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;IAC1C,IAAI,EAAE,KAAK,CAAA;IACX,IAAI,EAAE,OAAO,CAAA;IACb,2CAA2C;IAC3C,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAA;IACzC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAA;IACpB,uFAAuF;IACvF,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,CAAA;IACjC,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAA;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAID,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAoF5F;AAED,iGAAiG;AACjG,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAClB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAOlC"}

package/dist/charts/scales.js

@@ -0,0 +1,163 @@
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scalePoint } from "@tanstack/charts/scales/point";
+import { scaleLog, scaleUtc } from "d3-scale";
+const DEFAULT_AUTO_PAD = 1.1;
+function padAutoLower(candidate, pad) {
+  if (candidate === 0) return 0;
+  return candidate > 0 ? candidate / pad : candidate * pad;
+}
+function padAutoUpper(candidate, pad) {
+  if (candidate === 0) return 0;
+  return candidate > 0 ? candidate * pad : candidate / pad;
+}
+function resolveYDomain(cfg, data, series, extraBounds = []) {
+  const domain = cfg?.domain ?? "auto";
+  if (Array.isArray(domain)) return domain;
+  if (typeof domain === "function") return domain(data, series);
+  const isLog = cfg?.scale === "log";
+  let min = Infinity;
+  let max = -Infinity;
+  const take = (v) => {
+    if (v === null || !Number.isFinite(v)) return;
+    if (isLog && v <= 0) return;
+    if (v < min) min = v;
+    if (v > max) max = v;
+  };
+  for (const d of data) for (const s of series) take(s.getValue(d));
+  for (const v of extraBounds) take(v);
+  const pad = cfg?.autoPad ?? DEFAULT_AUTO_PAD;
+  if (isLog) {
+    if (min === Infinity) return [1, 10];
+    if (min === max) return [min / pad, max * pad];
+    return [min / pad, padAutoUpper(Math.max(max, cfg?.autoMaxFloor ?? -Infinity), pad)];
+  }
+  if (min === Infinity) return [0, cfg?.autoMaxFloor ?? 1];
+  const upper = padAutoUpper(Math.max(max, cfg?.autoMaxFloor ?? -Infinity), pad);
+  const lower = padAutoLower(Math.min(min, cfg?.autoMinCeil ?? 0), pad);
+  if (lower === upper) return [Math.min(lower, 0), upper === 0 ? 1 : upper * pad];
+  return [lower, upper];
+}
+function yScaleFor(cfg, domain) {
+  const extent = [domain[0], domain[1]];
+  if (cfg?.scale === "log") {
+    const log = scaleLog().domain(extent);
+    return cfg.nice ? log.nice() : log;
+  }
+  const linear = scaleLinear().domain(extent);
+  return cfg?.nice ? linear.nice() : linear;
+}
+function xKindOf(values) {
+  const first = values[0];
+  if (first instanceof Date) return "date";
+  if (typeof first === "number") return "number";
+  return "string";
+}
+const keyOf = (v) => v instanceof Date ? v.getTime() : v;
+function distinctX(values) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const v of values) {
+    const k = keyOf(v);
+    if (seen.has(k)) continue;
+    seen.add(k);
+    out.push(v);
+  }
+  return out;
+}
+const POINT_PADDING = 0.5;
+const BAND_PADDING_INNER = 0.2;
+const BAND_PADDING_OUTER = 0.1;
+const DAY_MS = 864e5;
+function xScaleFor(raw, band) {
+  const values = distinctX(raw);
+  const kind = xKindOf(values);
+  const n = values.length;
+  if (band || kind === "string") {
+    const keys = values;
+    const index = new Map(keys.map((k, i) => [keyOf(k), i]));
+    if (band) {
+      const step2 = 1 / Math.max(1, n - BAND_PADDING_INNER + 2 * BAND_PADDING_OUTER);
+      const scale2 = scaleBand().domain(keys).paddingInner(BAND_PADDING_INNER).paddingOuter(BAND_PADDING_OUTER);
+      return {
+        kind,
+        band: true,
+        scale: scale2,
+        values: keys,
+        halfStep: step2 / 2,
+        step: 1,
+        fraction: (x) => {
+          const i = index.get(keyOf(x));
+          if (i === void 0) return null;
+          return step2 * (BAND_PADDING_OUTER + i + (1 - BAND_PADDING_INNER) / 2);
+        }
+      };
+    }
+    const step = 1 / Math.max(1, n - 1 + 2 * POINT_PADDING);
+    return {
+      kind,
+      band: false,
+      scale: scalePoint().domain(keys).padding(POINT_PADDING),
+      values: keys,
+      halfStep: step / 2,
+      step: 1,
+      fraction: (x) => {
+        const i = index.get(keyOf(x));
+        return i === void 0 ? null : step * (POINT_PADDING + i);
+      }
+    };
+  }
+  const nums = values.map((v) => v instanceof Date ? v.getTime() : v);
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const v of nums) {
+    if (Number.isNaN(v)) {
+      lo = hi = NaN;
+      break;
+    }
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  if (!Number.isFinite(lo)) [lo, hi] = [0, 1];
+  if (lo === hi) {
+    const half = kind === "date" ? DAY_MS / 2 : 0.5;
+    lo -= half;
+    hi += half;
+  }
+  const span = hi - lo;
+  const sorted = nums.toSorted((a, b) => a - b);
+  const gaps = sorted.slice(1).map((v, i) => v - sorted[i]);
+  const medianGap = gaps.length ? gaps.toSorted((a, b) => a - b)[gaps.length >> 1] : 0;
+  const scale = kind === "date" ? scaleUtc().domain([new Date(lo), new Date(hi)]) : scaleLinear().domain([lo, hi]);
+  return {
+    kind,
+    band: false,
+    scale,
+    values,
+    halfStep: medianGap / span / 2,
+    extent: [lo, hi],
+    step: medianGap,
+    fraction: (x) => {
+      const v = x instanceof Date ? x.getTime() : x;
+      return typeof v === "number" && Number.isFinite(v) ? (v - lo) / span : null;
+    }
+  };
+}
+function xZoneFractions(zone, model) {
+  const widen = zone.align === "edge" ? model.halfStep : 0;
+  const from = zone.from === void 0 ? 0 : (model.fraction(zone.from) ?? 0) - widen;
+  const to = zone.to === void 0 ? 1 : (model.fraction(zone.to) ?? 1) + widen;
+  const left = Math.max(0, Math.min(from, to));
+  const right = Math.min(1, Math.max(from, to));
+  return right > left ? [left, right] : null;
+}
+export {
+  distinctX,
+  padAutoLower,
+  padAutoUpper,
+  resolveYDomain,
+  xKindOf,
+  xScaleFor,
+  xZoneFractions,
+  yScaleFor
+};

package/dist/charts/sizing.d.ts

@@ -0,0 +1,12 @@
+import type { RefCallback } from 'react';
+/** Server and first-paint width before the host measures (TanStack `initialWidth`): the regular
+ * class, so SSR markup and the first client frame agree. Only the svg's internal geometry follows
+ * the real width; the box around it is already final. */
+export declare const INITIAL_WIDTH = 640;
+/** Measures the width of the element `ref` lands on (`0` until measured, e.g. on the server). */
+export declare function useChartSize(): {
+    ref: RefCallback<HTMLElement>;
+    width: number;
+    coarse: boolean;
+};
+//# sourceMappingURL=sizing.d.ts.map

package/dist/charts/sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/charts/sizing.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAIxC;;yDAEyD;AACzD,eAAO,MAAM,aAAa,MAAM,CAAA;AAEhC,iGAAiG;AACjG,wBAAgB,YAAY,IAAI;IAC9B,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,OAAO,CAAA;CAChB,CA0BA"}

package/dist/charts/sizing.js

@@ -0,0 +1,33 @@
+import { useCallback, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../common/isomorphic-layout-effect.js";
+import { useCoarsePointer } from "../common/use-media-query.js";
+const INITIAL_WIDTH = 640;
+function useChartSize() {
+  const [width, setWidth] = useState(0);
+  const [node, setNode] = useState(null);
+  const coarse = useCoarsePointer();
+  const last = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!node) return;
+    const read = (w) => {
+      const rounded = Math.round(w);
+      if (rounded === last.current) return;
+      last.current = rounded;
+      setWidth(rounded);
+    };
+    read(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) read(entry.contentRect.width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  const ref = useCallback((el) => setNode(el), []);
+  return { ref, width, coarse };
+}
+export {
+  INITIAL_WIDTH,
+  useChartSize
+};

package/dist/charts/state.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The "nothing to draw" placeholders: pending → error → empty, in that precedence. One renderer for
+ * the chart chrome and `ChartCard`, so a pending card and a pending chart read the same.
+ */
+import type { ReactElement, ReactNode } from 'react';
+import type { ChartBoxHeight } from './box.js';
+import type { ChartState } from './types.js';
+export type ResolvedChartState = 'pending' | 'error' | 'empty' | null;
+export declare function resolveChartState(state: ChartState | undefined): ResolvedChartState;
+/** Fills the same {@link ChartBox} the chart will, so a pending, failed or empty chart (and a
+ * `<Suspense>` fallback built from one) occupies the final chart's height. */
+export declare function ChartPlaceholder(props: {
+    state: ChartState | undefined;
+    height?: ChartBoxHeight;
+    action?: ReactNode;
+}): ReactElement | null;
+//# sourceMappingURL=state.d.ts.map

package/dist/charts/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/charts/state.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAInE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAA;AAErE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,kBAAkB,CAMnF;AAsBD;8EAC8E;AAC9E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,KAAK,EAAE,UAAU,GAAG,SAAS,CAAA;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,GAAG,YAAY,GAAG,IAAI,CAgCtB"}

package/dist/charts/state.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toErrorMessage } from "../common/errors.js";
+import { VX } from "../tokens/index.js";
+import { ChartBox, stateClass } from "./box.js";
+function resolveChartState(state) {
+  if (!state) return null;
+  if (state.pending) return "pending";
+  if (state.error) return "error";
+  if (state.empty) return "empty";
+  return null;
+}
+const boxStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  color: VX.axis,
+  fontSize: VX.text.xs,
+  textAlign: "center"
+};
+const pendingStyle = {
+  ...boxStyle,
+  borderRadius: VX.radiusCtrl,
+  background: `linear-gradient(90deg, transparent, ${VX.surface.subtle}, transparent)`
+};
+const emptyLabel = (state) => typeof state?.empty === "string" ? state.empty : "No data";
+function ChartPlaceholder(props) {
+  const kind = resolveChartState(props.state);
+  if (kind === null) return null;
+  const style = kind === "pending" ? pendingStyle : boxStyle;
+  const fit = (node) => /* @__PURE__ */ jsx(ChartBox, { height: props.height, children: node });
+  if (kind === "pending")
+    return fit(
+      /* @__PURE__ */ jsx("output", { "aria-label": "Loading chart", "aria-busy": "true", className: stateClass, style })
+    );
+  const label = kind === "error" ? toErrorMessage(props.state?.error, "The chart failed to load.") : emptyLabel(props.state);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    props.action
+  ] });
+  if (kind === "error")
+    return fit(
+      /* @__PURE__ */ jsx("div", { role: "alert", "data-basalt-chart-state": kind, className: stateClass, style, children: body })
+    );
+  return fit(
+    /* @__PURE__ */ jsx("output", { "data-basalt-chart-state": kind, className: stateClass, style, children: body })
+  );
+}
+export {
+  ChartPlaceholder,
+  resolveChartState
+};

package/dist/charts/theme.d.ts

@@ -1,21 +1,40 @@
-import type { ReactNode } from 'react';
-type ColorScheme = 'light' | 'dark';
-export type VxTheme = {
-    colorScheme: ColorScheme;
-    line: string;
-    line2: string;
-    axis: string;
-    axisStroke: string;
-    tooltipBg: string;
-    tooltipText: string;
-    tooltipMuted: string;
-    tooltipBorder: string;
-    tooltipShadow: string;
+/**
+ * The `--vx-*` → TanStack Charts bridge (`docs/V2-SPEC.md` § 9.5). Two halves, both CSS-variable
+ * references, so a scheme switch repaints without rebuilding a definition:
+ *
+ *  - `CHART_THEME` goes into every definition's `theme` (scene paint: guides, grid, focus ring).
+ *  - `CHART_ENGINE_VARS` (`--ts-chart-*`: palette, tooltip, crosshair halo) is one `:root` block
+ *    (`chartEngineCss`) inside `styles.css`. Not on the host element: the tooltip portal's fallback
+ *    reparents the tooltip under `<body>`, out of the host's inheritance. Not in `buildPaletteCss`:
+ *    that emitter stays engine-agnostic.
+ */
+import type { ChartTheme } from '@tanstack/charts/types/core';
+export declare const CHART_THEME: Partial<ChartTheme>;
+export declare const CHART_ENGINE_VARS: Readonly<Record<`--ts-chart-${string}`, string>>;
+/**
+ * The charts layer's stylesheet block: one `:root` rule. `styles.css` carries the same declarations
+ * (formatter-laid-out) between two generated markers — `scripts/gen-chart-css.ts` writes them from this
+ * function's output, and `engine.test.tsx` fails on drift, whitespace aside — so the
+ * source tree a Vite alias or the layout fixture serves and the published `dist/styles.css` agree.
+ */
+export declare function chartEngineCss(): string;
+/** Guide paint every definition shares — the tokens are pre-mixed, so nothing dilutes them. */
+export declare const AXIS_LINE: {
+    readonly stroke: "var(--vx-axis-stroke)";
+    readonly strokeOpacity: 1;
 };
-export declare function VxThemeProvider({ colorScheme, children, }: {
-    colorScheme: ColorScheme;
-    children: ReactNode;
-}): import("react").JSX.Element;
-export declare function useVxTheme(): VxTheme;
-export {};
+export declare const GRID_LINE: {
+    readonly strokeDasharray: "2 3";
+    readonly strokeOpacity: 1;
+};
+export declare const CROSSHAIR: {
+    readonly stroke: "var(--vx-crosshair)";
+    readonly strokeOpacity: 1;
+    readonly strokeDasharray: "3 3";
+};
+export declare const DASH: "6 4";
+/** The default plotted stroke: the redesign's 1.9px line overlay. */
+export declare const LINE_STROKE_WIDTH = 1.9;
+/** A series' opacity multiplier while ANOTHER legend entry is hovered (one value for every kind). */
+export declare const DIMMED = 0.25;
 //# sourceMappingURL=theme.d.ts.map

package/dist/charts/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/charts/theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAEnC,MAAM,MAAM,OAAO,GAAG;IACpB,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAqBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,WAAW,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;CACpB,+BAGA;AAED,wBAAgB,UAAU,IAAI,OAAO,CAIpC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/charts/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAG7D,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,UAAU,CAa3C,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,cAAc,MAAM,EAAE,EAAE,MAAM,CAAC,CAe9E,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAGvC;AAED,+FAA+F;AAC/F,eAAO,MAAM,SAAS;;;CAAuD,CAAA;AAC7E,eAAO,MAAM,SAAS;;;CAAwD,CAAA;AAC9E,eAAO,MAAM,SAAS;;;;CAA8E,CAAA;AACpG,eAAO,MAAM,IAAI,OAAe,CAAA;AAChC,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,MAAM,CAAA;AACpC,qGAAqG;AACrG,eAAO,MAAM,MAAM,OAAO,CAAA"}

package/dist/charts/theme.js

@@ -1,30 +1,52 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
-const REFS = {
-  line: "var(--vx-line)",
-  line2: "var(--vx-line2)",
-  axis: "var(--vx-axis)",
-  axisStroke: "var(--vx-axis-stroke)",
-  tooltipBg: "var(--vx-tooltip-bg)",
-  tooltipText: "var(--vx-tooltip-text)",
-  tooltipMuted: "var(--vx-tooltip-muted)",
-  tooltipBorder: "var(--vx-tooltip-border)",
-  tooltipShadow: "var(--vx-tooltip-shadow)"
+import { VX } from "../tokens/index.js";
+const CHART_THEME = {
+  foreground: "var(--vx-ink2)",
+  muted: "var(--vx-axis)",
+  grid: "var(--vx-grid)",
+  background: "transparent",
+  palette: [
+    "var(--ts-chart-1)",
+    "var(--ts-chart-2)",
+    "var(--ts-chart-3)",
+    "var(--ts-chart-4)",
+    "var(--ts-chart-5)",
+    "var(--ts-chart-6)"
+  ]
 };
-const VxThemeContext = createContext(null);
-function VxThemeProvider({
-  colorScheme,
-  children
-}) {
-  const value = useMemo(() => ({ colorScheme, ...REFS }), [colorScheme]);
-  return /* @__PURE__ */ jsx(VxThemeContext.Provider, { value, children });
-}
-function useVxTheme() {
-  const ctx = useContext(VxThemeContext);
-  if (!ctx) throw new Error("useVxTheme must be used inside <VxThemeProvider>");
-  return ctx;
+const CHART_ENGINE_VARS = {
+  "--ts-chart-1": "var(--vx-line)",
+  "--ts-chart-2": "var(--vx-accent)",
+  "--ts-chart-3": "var(--vx-fill-cyan)",
+  "--ts-chart-4": "var(--vx-fill-orange)",
+  "--ts-chart-5": "var(--vx-fill-grape)",
+  "--ts-chart-6": "var(--vx-fill-lime)",
+  "--ts-chart-tooltip-background": "var(--vx-tooltip-bg)",
+  "--ts-chart-tooltip-color": "var(--vx-tooltip-text)",
+  "--ts-chart-tooltip-border": "var(--vx-tooltip-border)",
+  "--ts-chart-tooltip-shadow": "var(--vx-tooltip-shadow)",
+  "--ts-chart-tooltip-border-radius": "var(--vx-radius-ctrl)",
+  "--ts-chart-crosshair-label-halo": "var(--vx-surface-panel)",
+  "--ts-chart-crosshair-marker-fill": "var(--vx-surface-panel)",
+  "--ts-chart-focus-fill": "var(--vx-surface-panel)"
+};
+function chartEngineCss() {
+  const decls = Object.entries(CHART_ENGINE_VARS).map(([name, value]) => `${name}:${value}`);
+  return `:root{${decls.join(";")}}`;
 }
+const AXIS_LINE = { stroke: VX.axisStroke, strokeOpacity: 1 };
+const GRID_LINE = { strokeDasharray: "2 3", strokeOpacity: 1 };
+const CROSSHAIR = { stroke: VX.crosshair, strokeOpacity: 1, strokeDasharray: "3 3" };
+const DASH = VX.dashArray;
+const LINE_STROKE_WIDTH = 1.9;
+const DIMMED = 0.25;
 export {
-  VxThemeProvider,
-  useVxTheme
+  AXIS_LINE,
+  CHART_ENGINE_VARS,
+  CHART_THEME,
+  CROSSHAIR,
+  DASH,
+  DIMMED,
+  GRID_LINE,
+  LINE_STROKE_WIDTH,
+  chartEngineCss
 };