basalt-ui 1.41.0 → 2.0.1

package/dist/charts/MirroredBars.d.ts

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+import type { CartesianChartProps, ChartSeries, ChartX } from './types.js';
+/** One of the two panes. */
+export type MirroredBarPane = {
+    /** The `series` entry this pane draws: its colour, legend entry and tooltip row. A key naming no
+     * entry throws: the pane would vanish, which reads as a measured zero. */
+    key: string;
+    /** The pane's upper bound. `'auto'` (default) is its own visible maximum; a number pins it. */
+    max?: number | 'auto';
+    /** When `'auto'`: floors the upper bound, so a quiet window does not amplify noise to full height. */
+    autoMaxFloor?: number;
+    /** Tick count for this pane's own axis. Default 3. */
+    ticks?: number;
+    /** Tick and tooltip formatter, in the pane's OWN units. */
+    format: (v: number) => string;
+};
+/** A bar series. Any entry that is neither pane is legend-only (give it `getValue: () => null`). */
+export type MirroredBarsSeries<T> = Pick<ChartSeries<T>, 'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note'>;
+export type MirroredBarsProps<T, X extends ChartX = ChartX> = Pick<CartesianChartProps<T, X>, 'ariaLabel' | 'data' | 'x' | 'formatX' | 'legend' | 'height' | 'state' | 'cursorGroup' | 'tooltip' | 'className' | 'style'> & {
+    /** The single source of colours, legend entries and tooltip rows. */
+    series: readonly MirroredBarsSeries<T>[];
+    /** Drawn above the baseline. */
+    up: MirroredBarPane;
+    /** Drawn below the baseline. */
+    down: MirroredBarPane;
+    /** The up pane's share of the height. Default 0.35: the pair is usually asymmetric. */
+    upFraction?: number;
+    /** 0..1 of a bar's width that no source sample covers, drawn neutral across both panes. */
+    getAbsentFraction?: (d: T) => number;
+    /** Per-datum bar opacity: a real but qualified measurement (a short bucket) drawn dimmer. */
+    getBarOpacity?: (d: T) => number;
+    /**
+     * Collapse adjacent data where one band per datum would be sub-pixel. `merge` is the consumer's
+     * (max, sum, or a rate from summed parts) and must keep `group[0]`'s x, the slot start.
+     */
+    fold?: {
+        minBandPx?: number;
+        merge: (group: T[]) => T;
+    };
+    /** Default `'leading'`: x is a slot's start. */
+    cursorResolution?: CartesianChartProps<T, X>['cursorResolution'];
+};
+export declare function MirroredBars<T, X extends ChartX = ChartX>(props: MirroredBarsProps<T, X>): ReactElement;
+//# sourceMappingURL=MirroredBars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../src/charts/MirroredBars.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AASzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAW,MAAM,SAAS,CAAA;AAEhF,4BAA4B;AAC5B,MAAM,MAAM,eAAe,GAAG;IAC5B;8EAC0E;IAC1E,GAAG,EAAE,MAAM,CAAA;IACX,+FAA+F;IAC/F,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CACtC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACvB,WAAW,GACX,MAAM,GACN,GAAG,GACH,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,CACV,GAAG;IACF,qEAAqE;IACrE,MAAM,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAA;IACxC,gCAAgC;IAChC,EAAE,EAAE,eAAe,CAAA;IACnB,gCAAgC;IAChC,IAAI,EAAE,eAAe,CAAA;IACrB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC,6FAA6F;IAC7F,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;KAAE,CAAA;IACvD,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;CACjE,CAAA;AAgDD,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC7B,YAAY,CAuKd"}

package/dist/charts/MirroredBars.js

@@ -0,0 +1,190 @@
+import { jsx } from "react/jsx-runtime";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { rect } from "@tanstack/charts/rect";
+import { ruleY } from "@tanstack/charts/rule";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { useCallback, useMemo } from "react";
+import { VX, alpha } from "../tokens/index.js";
+import { resolveContainerClass } from "../tokens/size-classes.js";
+import { defaultFormatX, defaultNumberFormat, visibleSeries } from "./compile.js";
+import { barMark, emphasis } from "./marks.js";
+import { PanelRung, paneX, paneY, rowsOf } from "./panel.js";
+import { xScaleFor } from "./scales.js";
+import { rowX } from "./types.js";
+const DEFAULT_UP_FRACTION = 0.35;
+const DEFAULT_PANE_TICKS = 3;
+const DEFAULT_MIN_BAND_PX = 3;
+const BAR_OPACITY = 1;
+const BAND_FILL = 0.8;
+const clamp01 = (v) => v === void 0 || !Number.isFinite(v) ? 0 : Math.min(Math.max(v, 0), 1);
+function fold(data, cap, merge) {
+  if (cap <= 0) return [];
+  if (data.length <= cap) return [...data];
+  const size = Math.ceil(data.length / cap);
+  const out = [];
+  for (let i = 0; i < data.length; i += size) out.push(merge(data.slice(i, i + size)));
+  return out;
+}
+function paneMax(pane, s, data, on) {
+  if (pane.max !== void 0 && pane.max !== "auto") return pane.max || 1;
+  if (!on) return 1;
+  let max = 0;
+  for (const d of data) {
+    const v = s.getValue(d);
+    if (v !== null && Number.isFinite(v)) max = Math.max(max, v);
+  }
+  return Math.max(max, pane.autoMaxFloor ?? 0) || 1;
+}
+function assertPaneKey(side, key, series) {
+  const found = series.find((s) => s.key === key);
+  if (found) return found;
+  throw new Error(
+    `[basalt] MirroredBars: ${side}.key "${key}" names no \`series\` entry (known: ${series.map((s) => s.key).join(", ")}): the pane would silently vanish, which reads as a measured zero.`
+  );
+}
+function MirroredBars(props) {
+  const { data, x, series, up, down, upFraction = DEFAULT_UP_FRACTION, ...more } = props;
+  const { getAbsentFraction, getBarOpacity, fold: foldConfig, cursorResolution = "leading" } = more;
+  const { getAbsentFraction: _a, getBarOpacity: _b, fold: _f, cursorResolution: _c, ...rung } = more;
+  const { formatX } = rung;
+  const bars = useMemo(
+    () => series.map((s) => ({ ...s, mark: "bar" })),
+    [series]
+  );
+  const plan = useCallback(
+    ({ hidden, highlighted, width }) => {
+      const upSeries = assertPaneKey("up", up.key, bars);
+      const downSeries = assertPaneKey("down", down.key, bars);
+      const drawn = foldConfig ? fold(
+        data,
+        Math.floor(width / (foldConfig.minBandPx ?? DEFAULT_MIN_BAND_PX)),
+        foldConfig.merge
+      ) : data;
+      const model = xScaleFor(drawn.map(x), true);
+      const visible = visibleSeries(bars, hidden);
+      const upOn = visible.includes(upSeries);
+      const downOn = visible.includes(downSeries);
+      const format = (v) => formatX ? formatX(v) : defaultFormatX(v);
+      const upMax = paneMax(up, upSeries, drawn, upOn);
+      const downMax = paneMax(down, downSeries, drawn, downOn);
+      const bandWidth = 2 * model.halfStep * BAND_FILL;
+      const bandScale = () => xScaleFor(drawn.map(x), true).scale;
+      const pane = (side, cfg, s, on, max) => ({ width: w }) => {
+        const cls = resolveContainerClass(w);
+        const domain = side === "up" ? [0, max] : [max, 0];
+        const rows = on ? rowsOf(drawn, x, s) : [];
+        const opacity = (d) => (getBarOpacity?.(d) ?? BAR_OPACITY) * emphasis(highlighted, s);
+        const left = (row) => (model.fraction(row.x) ?? 0) - bandWidth / 2;
+        const absent = (d) => clamp01(getAbsentFraction?.(d));
+        const measured = rows.filter(
+          (r) => r.y !== null && absent(r.datum) > 0 && absent(r.datum) < 1
+        );
+        const byOpacity = (rs) => {
+          const groups = /* @__PURE__ */ new Map();
+          for (const r of rs) {
+            const o = opacity(r.datum);
+            const group = groups.get(o);
+            if (group) group.push(r);
+            else groups.set(o, [r]);
+          }
+          return [...groups];
+        };
+        const gaps = (on ? drawn : []).flatMap((d, i) => {
+          const a = absent(d);
+          const row = rows[i] ?? { x: x(d), y: null, series: s.key, datum: d };
+          return a > 0 ? [{ row, a }] : [];
+        });
+        return {
+          marks: [
+            ruleY([0], {
+              id: "baseline",
+              stroke: VX.axisStroke,
+              strokeOpacity: 1,
+              strokeWidth: 1
+            }),
+            barMark(rows, {
+              id: `${side}-bars`,
+              x: rowX,
+              y: "y",
+              fill: (row) => absent(row.datum) > 0 ? "transparent" : alpha(s.color, opacity(row.datum))
+            }),
+            // A rect's fill is constant, so one mark per distinct opacity.
+            ...byOpacity(measured).map(
+              ([o, group]) => decorative(
+                rect(group, {
+                  id: `${side}-measured-${o}`,
+                  x1: (r) => left(r),
+                  x2: (r) => left(r) + bandWidth * (1 - absent(r.datum)),
+                  y1: () => 0,
+                  y2: (r) => r.y ?? 0,
+                  xScale: "zx",
+                  fill: alpha(s.color, o),
+                  inset: 0
+                })
+              )
+            ),
+            decorative(
+              rect(gaps, {
+                id: `${side}-absent`,
+                x1: ({ row, a }) => left(row) + bandWidth * (1 - a),
+                x2: ({ row }) => left(row) + bandWidth,
+                y1: () => 0,
+                y2: () => max,
+                xScale: "zx",
+                fill: VX.neutral,
+                inset: 0
+              })
+            )
+          ],
+          scales: {
+            x: side === "down" ? paneX({ scale: bandScale(), model, format, cls }) : { scale: bandScale(), axis: false },
+            y: paneY({
+              scale: scaleLinear().domain(domain),
+              domain,
+              format: cfg.format,
+              ticks: cfg.ticks ?? DEFAULT_PANE_TICKS,
+              cls
+            }),
+            zx: { channel: "x", scale: scaleLinear().domain([0, 1]), axis: false }
+          }
+        };
+      };
+      return {
+        keys: model.values,
+        top: pane("up", up, upSeries, upOn, upMax),
+        bottom: pane("down", down, downSeries, downOn, downMax),
+        topFraction: upFraction,
+        gap: 0,
+        rows: (d) => {
+          const out = [];
+          for (const s of visible) {
+            const v = s.getValue(d);
+            if (s.tooltip === false || v === null || !Number.isFinite(v)) continue;
+            const fallback = s.key === up.key ? up.format : s.key === down.key ? down.format : defaultNumberFormat;
+            out.push({
+              label: s.note === void 0 ? s.label : `${s.label} \xB7 ${s.note}`,
+              value: s.formatValue ? s.formatValue(v, d) : fallback(v),
+              color: s.color,
+              ...highlighted === s.key && { active: true }
+            });
+          }
+          return out;
+        }
+      };
+    },
+    [data, x, bars, up, down, upFraction, getAbsentFraction, getBarOpacity, foldConfig, formatX]
+  );
+  return /* @__PURE__ */ jsx(
+    PanelRung,
+    {
+      ...rung,
+      series: bars,
+      plan,
+      byWidth: foldConfig !== void 0,
+      cursorResolution
+    }
+  );
+}
+export {
+  MirroredBars
+};

package/dist/charts/Sparkline.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+import type { BasaltProps } from '../common/props.js';
+export type SparklineProps = BasaltProps & {
+    /** The accessible name. Required: a chart without one is an unlabeled image. */
+    ariaLabel: string;
+    data: readonly number[];
+    /** Height in px. */
+    height: number;
+    /** Width in px. Default: the container's, measured by the host. */
+    width?: number;
+    /** Default `'line'`. */
+    mark?: 'line' | 'bar';
+    /** A `VX.*` ref or a series token. Default `VX.faint`. */
+    color?: string;
+    /** Paints the last point in `emphasisColor` — the one reading a trend beside a KPI is for. */
+    emphasizeLast?: boolean;
+    /** Default `VX.accent`. */
+    emphasisColor?: string;
+};
+/** `useId` output (`«r1»`, `:r1:`) is not a safe SVG id fragment. */
+export declare function Sparkline(props: SparklineProps): ReactElement;
+//# sourceMappingURL=Sparkline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/charts/Sparkline.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAQlD,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAiGD,qEAAqE;AAErE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAsC7D"}

package/dist/charts/Sparkline.js

@@ -0,0 +1,129 @@
+import { jsx } from "react/jsx-runtime";
+import { dot } from "@tanstack/charts/dot";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { lineY } from "@tanstack/charts/line";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { useId, useMemo } from "react";
+import { VX } from "../tokens/index.js";
+import { chartCurve } from "./curves.js";
+import { barMark } from "./marks.js";
+import { ChartEngine, idPrefixOf } from "./host.js";
+import { CHART_THEME } from "./theme.js";
+const LINE_WIDTH = 1.6;
+const DOT_R = 2.5;
+const BAR_GAP = 0.15;
+const finite = (v) => Number.isFinite(v) ? v : null;
+function extent(rows) {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const r of rows) {
+    if (r.v === null) continue;
+    if (r.v < lo) lo = r.v;
+    if (r.v > hi) hi = r.v;
+  }
+  return lo <= hi ? [lo, hi] : null;
+}
+function compileSparkline(rows, [lo, hi], mark, color, emphasisColor) {
+  const last = rows.at(-1);
+  return {
+    chart: () => {
+      if (mark === "bar") {
+        return {
+          marks: [
+            barMark(rows, {
+              id: "bars",
+              x: "i",
+              y: "v",
+              fill: (r) => emphasisColor !== null && r.i === rows.length - 1 ? emphasisColor : color
+            })
+          ],
+          scales: {
+            x: {
+              scale: scaleBand().domain(rows.map((r) => r.i)).padding(BAR_GAP),
+              axis: false
+            },
+            y: {
+              scale: scaleLinear().domain([Math.min(lo, 0), Math.max(hi, 0) || 1]),
+              axis: false
+            }
+          },
+          theme: CHART_THEME,
+          guides: false,
+          margin: 0
+        };
+      }
+      const pad = (hi - lo) * 0.1 || 1;
+      const xPad = emphasisColor === null ? 0 : (rows.length - 1) * 0.04 || 0.5;
+      return {
+        marks: [
+          lineY(rows, {
+            id: "line",
+            x: "i",
+            y: "v",
+            stroke: color,
+            strokeWidth: LINE_WIDTH,
+            curve: chartCurve("monotone")
+          }),
+          ...emphasisColor !== null && last !== void 0 && last.v !== null ? [
+            decorative(
+              dot([last], { id: "last", x: "i", y: "v", r: DOT_R, fill: emphasisColor })
+            )
+          ] : []
+        ],
+        scales: {
+          x: {
+            scale: scaleLinear().domain([-xPad, Math.max(rows.length - 1, 1) + xPad]),
+            axis: false
+          },
+          y: { scale: scaleLinear().domain([lo - pad, hi + pad]), axis: false }
+        },
+        theme: CHART_THEME,
+        guides: false,
+        margin: 0
+      };
+    }
+  };
+}
+function Sparkline(props) {
+  const {
+    ariaLabel,
+    data,
+    height,
+    width,
+    mark = "line",
+    color = VX.faint,
+    emphasizeLast = false,
+    emphasisColor = VX.accent,
+    className,
+    style
+  } = props;
+  const id = useId();
+  const definition = useMemo(() => {
+    const rows = data.map((v, i) => ({ i, v: finite(v) }));
+    const range = extent(rows);
+    if (range === null) return null;
+    return compileSparkline(rows, range, mark, color, emphasizeLast ? emphasisColor : null);
+  }, [data, mark, color, emphasizeLast, emphasisColor]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-basalt-sparkline": "",
+      ...className !== void 0 && { className },
+      style: { width: width ?? "100%", height, minWidth: 0, ...style },
+      children: definition !== null && /* @__PURE__ */ jsx(
+        ChartEngine,
+        {
+          definition,
+          ariaLabel,
+          height,
+          idPrefix: idPrefixOf(id, "spark"),
+          coarse: false
+        }
+      )
+    }
+  );
+}
+export {
+  Sparkline
+};

package/dist/charts/StackedArea.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from 'react';
+import type { CartesianChartProps, ChartSeries, ChartX } from './types.js';
+/** A band. Stacked areas read the left axis and draw no line, so the line fields are absent. */
+export type StackedAreaBand<T> = Pick<ChartSeries<T>, 'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note'> & {
+    /** Default 0.85. */
+    fillOpacity?: number;
+};
+export type StackedAreaProps<T, X extends ChartX = ChartX> = Omit<CartesianChartProps<T, X>, 'marks' | 'y' | 'y2' | 'series'> & {
+    /** The bands, bottom to top. */
+    series: readonly StackedAreaBand<T>[];
+    /** No `scale`: a log axis has no additive zero to stack from. */
+    y?: Omit<NonNullable<CartesianChartProps<T, X>['y']>, 'scale'>;
+};
+export declare function StackedArea<T, X extends ChartX = ChartX>(props: StackedAreaProps<T, X>): ReactElement;
+//# sourceMappingURL=StackedArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedArea.d.ts","sourceRoot":"","sources":["../../src/charts/StackedArea.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,mBAAmB,EAAc,WAAW,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAIhG,gGAAgG;AAChG,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CACnC,WAAW,CAAC,CAAC,CAAC,EACd,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAChG,GAAG;IACF,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,QAAQ,CAChC,GAAG;IACF,gCAAgC;IAChC,MAAM,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACrC,iEAAiE;IACjE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;CAC/D,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,EACtD,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,YAAY,CAqCd"}

package/dist/charts/StackedArea.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { areaY } from "@tanstack/charts/area";
+import { stack } from "@tanstack/charts/stack";
+import { useCallback, useMemo } from "react";
+import { CartesianRung } from "./CartesianChart.js";
+import { chartCurve } from "./curves.js";
+import { emphasis } from "./marks.js";
+import { rowX } from "./types.js";
+const DEFAULT_BAND_OPACITY = 0.85;
+function StackedArea(props) {
+  const { series: bands, ...rest } = props;
+  const series = useMemo(
+    () => bands.map((s) => ({ ...s, mark: "bar" })),
+    [bands]
+  );
+  const marks = useCallback((plot) => {
+    const visible = plot.visible;
+    if (visible.length === 0) return [];
+    const byKey = new Map(visible.map((s) => [s.key, s]));
+    const h = plot.highlighted;
+    const columns = visible.map((s) => plot.rows(s.key));
+    const dense = columns[0]?.map((_, i) => columns.every((col) => col[i]?.y !== null)) ?? [];
+    const rows = columns.flatMap((col) => col.map((r, i) => dense[i] ? r : { ...r, y: null }));
+    return [
+      areaY(rows, {
+        id: "bands",
+        x: rowX,
+        y: "y",
+        z: "series",
+        fill: (r) => {
+          const s = byKey.get(r.series);
+          if (!s) return "transparent";
+          const pct = Math.round((s.fillOpacity ?? DEFAULT_BAND_OPACITY) * emphasis(h, s) * 100);
+          return `color-mix(in srgb, ${s.color} ${pct}%, transparent)`;
+        },
+        fillOpacity: 1,
+        curve: chartCurve("monotone"),
+        layout: stack({ order: visible.map((s) => s.key) })
+      })
+    ];
+  }, []);
+  return /* @__PURE__ */ jsx(CartesianRung, { ...rest, series, marks, reverseRows: true, stack: "stacked" });
+}
+export {
+  StackedArea
+};

package/dist/charts/box.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The CSS-owned chart box (`chart-box.module.css`): the single element whose height the page lays
+ * out around. A chart, its pending placeholder and a `ChartCard` fallback all render inside one, so a
+ * `<Suspense>` fallback occupies exactly the box the chart will. Knows no engine, no legend, no card.
+ */
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ResponsiveChartHeight } from './types.js';
+/** `undefined` is the height law; a number is fixed; `'fill'` is the parent's height. */
+export type ChartBoxHeight = number | ResponsiveChartHeight | 'fill' | undefined;
+/** Height = width × ratio, per container class, clamped to {@link HEIGHT_MIN}–{@link HEIGHT_MAX}. */
+export declare const HEIGHT_RATIO: {
+    readonly micro: 0.5;
+    readonly compact: 0.62;
+    readonly regular: 0.5;
+    readonly wide: 0.4;
+};
+export declare const HEIGHT_MIN = 160;
+export declare const HEIGHT_MAX = 420;
+/**
+ * A stated height at or under this makes the enclosing `ChartCard` render its short header (the
+ * subtitle folds, the KPI numeral drops to `lg`, the top inset trims): the card is then under
+ * ~280 px once the header's own ~100 px is added. Written onto the box as `data-basalt-chart-short`,
+ * from the prop, so the server HTML already says it and CSS (`:has`) applies it — no height
+ * measurement, nothing to flip after hydration.
+ */
+export declare const SHORT_CHART_HEIGHT = 180;
+/** The four custom properties the stylesheet selects between by the frame's container class. */
+export type ChartBoxVars = CSSProperties & Record<'--bc-micro' | '--bc-compact' | '--bc-regular' | '--bc-wide', string>;
+export declare function chartBoxVars(height: Exclude<ChartBoxHeight, 'fill'>): ChartBoxVars;
+/** `data-basalt-chart-short`: a stated height at or under {@link SHORT_CHART_HEIGHT}. */
+export declare const isShortChart: (height: ChartBoxHeight) => boolean;
+export declare function ChartBox(props: {
+    height?: ChartBoxHeight;
+    className?: string;
+    children: ReactNode;
+}): ReactElement;
+export declare const stateClass: string;
+//# sourceMappingURL=box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/charts/box.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD,yFAAyF;AACzF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,qBAAqB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEhF,qGAAqG;AACrG,eAAO,MAAM,YAAY;;;;;CAAkE,CAAA;AAC3F,eAAO,MAAM,UAAU,MAAM,CAAA;AAC7B,eAAO,MAAM,UAAU,MAAM,CAAA;AAE7B;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAA;AAYrC,gGAAgG;AAChG,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,MAAM,CAAC,YAAY,GAAG,cAAc,GAAG,cAAc,GAAG,WAAW,EAAE,MAAM,CAAC,CAAA;AAiB9E,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG,YAAY,CAQlF;AAED,yFAAyF;AACzF,eAAO,MAAM,YAAY,GAAI,QAAQ,cAAc,KAAG,OACiB,CAAA;AAEvE,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,YAAY,CAmBf;AAED,eAAO,MAAM,UAAU,QAAgB,CAAA"}

package/dist/charts/box.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../common/props.js";
+import classes from "./chart-box.module.css";
+const HEIGHT_RATIO = { micro: 0.5, compact: 0.62, regular: 0.5, wide: 0.4 };
+const HEIGHT_MIN = 160;
+const HEIGHT_MAX = 420;
+const SHORT_CHART_HEIGHT = 180;
+const statedMax = (height) => {
+  if (typeof height === "number") return height;
+  if (typeof height !== "object") return void 0;
+  return Math.max(height.base, height.regular ?? 0, height.wide ?? 0);
+};
+const px = (n) => `${n}px`;
+const law = (ratio) => `clamp(${px(HEIGHT_MIN)}, ${ratio * 100}cqw, ${px(HEIGHT_MAX)})`;
+function classHeights(height) {
+  if (height === void 0) {
+    return [
+      law(HEIGHT_RATIO.micro),
+      law(HEIGHT_RATIO.compact),
+      law(HEIGHT_RATIO.regular),
+      law(HEIGHT_RATIO.wide)
+    ];
+  }
+  if (typeof height === "number") return [px(height), px(height), px(height), px(height)];
+  const regular = height.regular ?? height.base;
+  return [px(height.base), px(height.base), px(regular), px(height.wide ?? regular)];
+}
+function chartBoxVars(height) {
+  const [micro, compact, regular, wide] = classHeights(height);
+  return {
+    "--bc-micro": micro,
+    "--bc-compact": compact,
+    "--bc-regular": regular,
+    "--bc-wide": wide
+  };
+}
+const isShortChart = (height) => (statedMax(height) ?? Number.POSITIVE_INFINITY) <= SHORT_CHART_HEIGHT;
+function ChartBox(props) {
+  const { height, className, children } = props;
+  const fill = height === "fill";
+  return (
+    // `data-basalt-box` is the hook `ChartCard` uses to tell a chart body from a measured one; a
+    // fill box states no height of its own, so it reads `fill` and the card still measures.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(classes.frame, fill && classes.fillFrame),
+        "data-basalt-box": fill ? "fill" : "",
+        ...isShortChart(height) && { "data-basalt-chart-short": "" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(classes.box, fill && classes.fill, className),
+            ...!fill && { style: chartBoxVars(height) },
+            children
+          }
+        )
+      }
+    )
+  );
+}
+const stateClass = classes.state;
+export {
+  ChartBox,
+  HEIGHT_MAX,
+  HEIGHT_MIN,
+  HEIGHT_RATIO,
+  SHORT_CHART_HEIGHT,
+  chartBoxVars,
+  isShortChart,
+  stateClass
+};

package/dist/charts/card-context.d.ts

@@ -0,0 +1,3 @@
+export declare const ChartCardContext: import("react").Context<boolean>;
+export declare const useInChartCard: () => boolean;
+//# sourceMappingURL=card-context.d.ts.map

package/dist/charts/card-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-context.d.ts","sourceRoot":"","sources":["../../src/charts/card-context.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB,kCAAuB,CAAA;AAEpD,eAAO,MAAM,cAAc,QAAO,OAAuC,CAAA"}

package/dist/charts/card-context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const ChartCardContext = createContext(false);
+const useInChartCard = () => useContext(ChartCardContext);
+export {
+  ChartCardContext,
+  useInChartCard
+};

package/dist/charts/chart-box.module.css

@@ -0,0 +1,64 @@
+/*
+ * The chart box — the one place a chart's height is decided (docs/V2-SPEC.md § 9.6, W10 SSR
+ * contract). The box is sized by CSS from its container's own width, so the server HTML, the first
+ * paint and the hydrated page all agree before any script runs; the engine MEASURES this box, it
+ * is never handed a height. Only the svg's internal geometry may change after hydration.
+ *
+ * `box.tsx` writes the four per-class heights as `--bc-*`; the unnamed container queries below pick
+ * one by the frame's inline size. The literals are CONTAINER_CLASSES (a query cannot read a custom
+ * property); `breakpoint-literals.test.ts` pins them. Mantine-free: `src/charts/**` imports no
+ * `@mantine/*`.
+ */
+
+.frame {
+  container-type: inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.box {
+  position: relative;
+  height: var(--bc-micro);
+}
+
+@container (min-width: 240px) {
+  .box {
+    height: var(--bc-compact);
+  }
+}
+
+@container (min-width: 480px) {
+  .box {
+    height: var(--bc-regular);
+  }
+}
+
+@container (min-width: 800px) {
+  .box {
+    height: var(--bc-wide);
+  }
+}
+
+/* A coarse pointer never gets a chart taller than 45% of the viewport (small viewport: a
+ * collapsing mobile URL bar must not resize it). */
+@media (pointer: coarse) {
+  .box {
+    max-height: 45svh;
+  }
+}
+
+/* Fills its parent (a Heatmap that matches a sibling's height): the frame and the box both take the
+ * parent's definite height, or a percentage on the auto-height frame would resolve to nothing. */
+.fillFrame {
+  height: 100%;
+}
+
+.fill {
+  height: 100%;
+  max-height: none;
+}
+
+.state {
+  width: 100%;
+  height: 100%;
+}