basalt-ui 1.41.0 → 2.0.1

package/dist/charts/kinds/Bars.js

@@ -1,343 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { LinePath } from "@visx/shape";
-import { memo, useMemo } from "react";
-import { assertRequiredProps } from "../../common/validate.js";
-import { VX } from "../../tokens/index.js";
-import { CartesianChart } from "../primitives/CartesianChart.js";
-import { curveFor, LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
-import { padAutoLower } from "../utils/domain.js";
-function BarsInner(props) {
-  assertRequiredProps("Bars", props, ["data", "getX", "getValue", "positiveBars"]);
-  const {
-    data,
-    height,
-    chartId,
-    getX,
-    getValue,
-    positiveBars,
-    negativeBars = [],
-    lines = [],
-    zones,
-    refLines,
-    y,
-    y2,
-    barWidthRatio = 0.6,
-    barLayout = "stacked",
-    barOpacity,
-    xTicks,
-    xTickValues,
-    formatX,
-    xLabelRotate,
-    cursorResolution,
-    tooltip,
-    margin,
-    legend,
-    ariaLabel,
-    isPending,
-    state,
-    className,
-    style
-  } = props;
-  if (process.env.NODE_ENV !== "production" && barLayout === "stacked" && y?.scale === "log") {
-    throw new Error(
-      `Bars: stacked bars cannot use a log axis (y.scale: "log") \u2014 the stack sums bar heights, and a log axis has no additive zero to sum from. Use barLayout: 'grouped' instead.`
-    );
-  }
-  const barSeries = useMemo(
-    () => [...positiveBars, ...negativeBars].map((b) => ({
-      key: b.key,
-      label: b.label,
-      color: b.color,
-      mark: "bar",
-      fillOpacity: 0.85,
-      ...b.axisSide !== void 0 && { axis: b.axisSide },
-      getValue: (d) => getValue(d, b.key),
-      ...b.formatValue !== void 0 && { formatValue: b.formatValue },
-      ...b.tooltip !== void 0 && { tooltip: b.tooltip }
-    })),
-    [positiveBars, negativeBars, getValue]
-  );
-  const lineSeries = useMemo(
-    () => lines.map((ln) => ({
-      key: ln.key,
-      label: ln.label,
-      color: ln.color,
-      mark: "line",
-      dash: ln.dashed ? "dashed" : "solid",
-      strokeWidth: ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
-      ...ln.axisSide !== void 0 && { axis: ln.axisSide },
-      getValue: (d) => getValue(d, ln.key),
-      ...ln.formatValue !== void 0 && { formatValue: ln.formatValue },
-      ...ln.tooltip !== void 0 && { tooltip: ln.tooltip },
-      ...ln.strokeOpacity !== void 0 && { strokeOpacity: ln.strokeOpacity }
-    })),
-    [lines, getValue]
-  );
-  const series = useMemo(
-    () => [...barSeries, ...lineSeries],
-    [barSeries, lineSeries]
-  );
-  const yConfig = useMemo(() => {
-    const base = y ?? {};
-    if (barLayout !== "stacked" || base.domain !== void 0 && base.domain !== "auto")
-      return base;
-    const pad = base.autoPad ?? 1.1;
-    return {
-      ...base,
-      // Visible-only, so a legend toggle shrinks the axis rather than leaving a gap.
-      domain: (rows, visible) => {
-        const shown = new Set(visible.map((s) => s.key));
-        let maxSum = 0;
-        let minSum = 0;
-        for (const d of rows) {
-          let pos = 0;
-          for (const b of positiveBars) {
-            if (!shown.has(b.key)) continue;
-            const v = getValue(d, b.key);
-            if (v !== null && !Number.isNaN(v) && v > 0) pos += v;
-          }
-          let neg = 0;
-          for (const b of negativeBars) {
-            if (!shown.has(b.key)) continue;
-            const v = getValue(d, b.key);
-            if (v !== null && !Number.isNaN(v) && v > 0) neg -= v;
-          }
-          if (pos > maxSum) maxSum = pos;
-          if (neg < minSum) minSum = neg;
-        }
-        for (const ln of lines) {
-          if ((ln.axisSide ?? "left") !== "left" || !shown.has(ln.key)) continue;
-          for (const d of rows) {
-            const v = getValue(d, ln.key);
-            if (v === null || Number.isNaN(v)) continue;
-            if (v > maxSum) maxSum = v;
-            if (v < minSum) minSum = v;
-          }
-        }
-        const upper = Math.max(maxSum, base.autoMaxFloor ?? maxSum) * pad;
-        const ceil = base.autoMinCeil ?? 0;
-        return [padAutoLower(Math.min(minSum, ceil), pad), upper];
-      }
-    };
-  }, [y, barLayout, positiveBars, negativeBars, lines, getValue]);
-  const mappedRefLines = useMemo(
-    () => refLines?.map((r) => ({
-      value: r.value,
-      color: r.color,
-      ...r.dashed !== void 0 && { dashed: r.dashed },
-      ...r.axisSide !== void 0 && { axis: r.axisSide }
-    })),
-    [refLines]
-  );
-  return /* @__PURE__ */ jsx(
-    CartesianChart,
-    {
-      data,
-      chartId,
-      getX,
-      series,
-      y: yConfig,
-      ...y2 !== void 0 && { y2 },
-      ...xTicks !== void 0 && { xTicks },
-      ...xTickValues !== void 0 && { xTickValues },
-      ...formatX !== void 0 && { formatX },
-      ...xLabelRotate !== void 0 && { xLabelRotate },
-      ...cursorResolution !== void 0 && { cursorResolution },
-      ...zones !== void 0 && { zones },
-      ...mappedRefLines !== void 0 && { refLines: mappedRefLines },
-      ...height !== void 0 && { height },
-      ...legend !== void 0 && { legend },
-      ...tooltip !== void 0 && { tooltip },
-      ...margin !== void 0 && { margin },
-      ...ariaLabel !== void 0 && { ariaLabel },
-      ...isPending !== void 0 && { isPending },
-      ...state !== void 0 && { state },
-      ...className !== void 0 && { className },
-      ...style !== void 0 && { style },
-      children: (ctx) => /* @__PURE__ */ jsx(
-        BarsMarks,
-        {
-          getX,
-          getValue,
-          positiveBars,
-          negativeBars,
-          lines,
-          barWidthRatio,
-          barLayout,
-          ...barOpacity !== void 0 && { barOpacity },
-          ctx
-        }
-      )
-    }
-  );
-}
-function BarsMarks({
-  getX,
-  getValue,
-  positiveBars,
-  negativeBars,
-  lines,
-  barWidthRatio,
-  barLayout,
-  barOpacity,
-  ctx
-}) {
-  const { data: rows, xScale, yScale, y2Scale, xMax, hidden, highlighted } = ctx;
-  const barGroups = useMemo(() => {
-    const scaleForSide2 = (side) => side === "right" && y2Scale ? y2Scale : yScale;
-    const dim2 = (key) => highlighted === null || highlighted === key ? 1 : 0.15;
-    const baselineFor = (scale) => {
-      const floor = scale.domain()[0] ?? 0;
-      const at = scale(Math.max(floor, 0));
-      return Number.isFinite(at) ? at : scale(floor);
-    };
-    const groupWidth = Math.max(xMax / Math.max(rows.length, 1) * barWidthRatio, 2);
-    const groupedBars = barLayout === "grouped" ? positiveBars.filter((b) => !hidden.has(b.key)) : [];
-    const totalWeight = groupedBars.reduce((s, b) => s + (b.weight ?? 1), 0) || 1;
-    const groupedBarWidths = groupedBars.map(
-      (b) => Math.max(groupWidth * ((b.weight ?? 1) / totalWeight), 1)
-    );
-    const groupedBarOffsets = [];
-    let cursor = 0;
-    for (const w of groupedBarWidths) {
-      groupedBarOffsets.push(cursor);
-      cursor += w;
-    }
-    return rows.map((d) => {
-      const cx = xScale(getX(d)) ?? 0;
-      const groupLeft = cx - groupWidth / 2;
-      const rects = [];
-      if (barLayout === "stacked") {
-        let posOffset = 0;
-        for (const b of positiveBars) {
-          if (hidden.has(b.key)) continue;
-          const v = getValue(d, b.key);
-          if (v === null || Number.isNaN(v) || v <= 0) continue;
-          const top = posOffset + v;
-          const yTop = yScale(top);
-          const yBottom = yScale(posOffset);
-          rects.push({
-            key: `${getX(d)}-${b.key}`,
-            x: groupLeft,
-            y: yTop,
-            width: groupWidth,
-            height: yBottom - yTop,
-            fill: b.color,
-            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
-          });
-          posOffset = top;
-        }
-        let negOffset = 0;
-        for (const b of negativeBars) {
-          if (hidden.has(b.key)) continue;
-          const v = getValue(d, b.key);
-          if (v === null || Number.isNaN(v) || v <= 0) continue;
-          const top = negOffset + v;
-          const yTop = yScale(-negOffset);
-          const yBottom = yScale(-top);
-          rects.push({
-            key: `${getX(d)}-${b.key}-neg`,
-            x: groupLeft,
-            y: yTop,
-            width: groupWidth,
-            height: yBottom - yTop,
-            fill: b.color,
-            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
-          });
-          negOffset = top;
-        }
-      } else {
-        groupedBars.forEach((b, i) => {
-          const v = getValue(d, b.key);
-          if (v === null || Number.isNaN(v) || v <= 0) return;
-          const scale = scaleForSide2(b.axisSide);
-          const yTop = scale(v);
-          const yBottom = baselineFor(scale);
-          rects.push({
-            key: `${getX(d)}-${b.key}`,
-            x: groupLeft + (groupedBarOffsets[i] ?? 0),
-            y: yTop,
-            width: groupedBarWidths[i] ?? 0,
-            // A value below a caller-pinned domain floor sits under the baseline; SVG rejects a
-            // negative height outright, so it clamps to nothing drawn.
-            height: Math.max(yBottom - yTop, 0),
-            fill: b.color,
-            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
-          });
-        });
-      }
-      return { rowKey: getX(d), rects };
-    });
-  }, [
-    rows,
-    xScale,
-    yScale,
-    y2Scale,
-    xMax,
-    hidden,
-    highlighted,
-    positiveBars,
-    negativeBars,
-    barLayout,
-    barWidthRatio,
-    barOpacity,
-    getX,
-    getValue
-  ]);
-  const lineValid = useMemo(() => {
-    const out = /* @__PURE__ */ new Map();
-    for (const ln of lines) {
-      const valid = [];
-      for (const d of rows) {
-        const v = getValue(d, ln.key);
-        if (v !== null && !Number.isNaN(v)) valid.push({ __d: d, __y: v });
-      }
-      out.set(ln.key, valid);
-    }
-    return out;
-  }, [lines, rows, getValue]);
-  const scaleForSide = (side) => side === "right" && y2Scale ? y2Scale : yScale;
-  const dim = (key) => highlighted === null || highlighted === key ? 1 : 0.15;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    barGroups.map((group) => /* @__PURE__ */ jsx("g", { children: group.rects.map((r) => /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: r.x,
-        y: r.y,
-        width: r.width,
-        height: r.height,
-        rx: 1.4,
-        fill: r.fill,
-        fillOpacity: r.fillOpacity
-      },
-      r.key
-    )) }, `bars-${group.rowKey}`)),
-    lines.map((ln) => {
-      if (hidden.has(ln.key)) return null;
-      const scale = scaleForSide(ln.axisSide);
-      const valid = lineValid.get(ln.key) ?? [];
-      if (valid.length === 0) return null;
-      return /* @__PURE__ */ jsx(
-        LinePath,
-        {
-          data: valid,
-          x: (p) => xScale(getX(p.__d)) ?? 0,
-          y: (p) => scale(p.__y),
-          stroke: ln.color,
-          strokeWidth: ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
-          strokeDasharray: ln.dashed ? VX.dashArray : void 0,
-          strokeOpacity: dim(ln.key) * (ln.strokeOpacity ?? 1),
-          curve: curveFor(ln.curve)
-        },
-        `line-${ln.key}`
-      );
-    }),
-    negativeBars.length > 0 && /* @__PURE__ */ jsx("line", { x1: 0, x2: xMax, y1: yScale(0), y2: yScale(0), stroke: VX.grid, strokeWidth: 1 })
-  ] });
-}
-const BarsMemo = memo(BarsInner);
-BarsMemo.displayName = "Bars";
-const Bars = BarsMemo;
-export {
-  Bars
-};

package/dist/charts/kinds/Donut.d.ts

@@ -1,77 +0,0 @@
-import type { ReactNode } from 'react';
-import type { BasaltProps } from '../../common/props.js';
-import type { ResponsiveChartHeight } from '../primitives/ChartFrame.js';
-import type { ChartState } from '../primitives/ChartPending.js';
-import type { SeriesKey } from '../../register.js';
-/**
- * `K` defaults to the registered `SeriesKey` union for ergonomic inference on the common case (one
- * registered series map) — pass a wider `K` (or let it infer from `data`/`colorForKey`) for a
- * multi-domain map that isn't the registered slot, no `as DonutDatum[]` cast required.
- */
-export type DonutDatum<K extends string = SeriesKey> = {
-    key: K;
-    value: number;
-};
-export type DonutProps<K extends string = SeriesKey> = BasaltProps & {
-    data: DonutDatum<K>[];
-    /** Height in px, or one per size step (`{ base, sm?, md?, lg? }`). Default 240. Forwarded
-     * unchanged; `ChartFrameProps.height` owns the law — steps resolve off the MEASURED width. */
-    height?: number | ResponsiveChartHeight;
-    colorForKey: (key: K) => string;
-    formatValue: (v: number) => string;
-    seriesLabel?: (key: string) => string;
-    centerLabel?: string;
-    centerSubLabel?: string;
-    /**
-     * Arbitrary content rendered in the ring center via an absolutely-positioned overlay, replacing
-     * `centerLabel`/`centerSubLabel` when provided. Plain elements only (Mantine-free boundary) — the
-     * overlay wrapper is `pointer-events: none` so it never steals arc hover, but a consumer can
-     * re-enable pointer events on its own inner element if it needs to be interactive.
-     *
-     * @example
-     * ```tsx
-     * <Donut
-     *   data={data}
-     *   colorForKey={colorForKey}
-     *   formatValue={formatValue}
-     *   centerContent={
-     *     <div style={{ textAlign: 'center' }}>
-     *       <div style={{ fontFamily: 'var(--basalt-font-mono)', fontSize: 20, fontWeight: 600 }}>
-     *         84%
-     *       </div>
-     *       <div style={{ fontSize: 10, textTransform: 'uppercase', opacity: 0.7 }}>on track</div>
-     *     </div>
-     *   }
-     * />
-     * ```
-     */
-    centerContent?: ReactNode;
-    innerRatio?: number;
-    padAngle?: number;
-    /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="group"`). */
-    ariaLabel?: string;
-    /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
-    isPending?: boolean;
-    /** The three "nothing to draw" states in one prop — pending → error → empty. See
-     * `ChartState`; `isPending` stays a supported alias for `state={{ pending: true }}`. */
-    state?: ChartState;
-};
-/**
- * Radial slice-share chart with a punched-out center label. Composes `ChartFrame` for a
- * categorical legend derived from the slices (one `SeriesStyle` per slice, `mark: 'bar'`) so the
- * legend can never drift from what's plotted — legend-hidden slices drop out of the ring and the
- * tooltip together, while every share is taken of ALL slices so the legend and the tooltip never
- * disagree (`docs/CHARTS-SPEC.md` §5). No crosshair — meaningless for a radial layout. Hover stays local to the pie (dimming siblings on hover) rather
- * than joining the shared cursor: a date-keyed cursor has no counterpart on a donut, and cross-kind
- * category sync (donut ↔ bar, via a generalized key) is a distinct, deliberately deferred feature.
- * Tap-to-pin, keyboard stepping and focus over the slice ring come from `useDiscreteCursor`
- * (`docs/CHARTS-SPEC.md` §4, Tooltip), the discrete counterpart of `HoverOverlay`.
- *
- * Layout law (`docs/CHARTS-SPEC.md` §5, Legend): frame W/H > 1.5 puts the legend beside the ring
- * with value and %, the ring capped at `min(h, 0.55w)`; `micro`/`compact` stack the full legend
- * under the ring, never rolled up. 7 or more slices fold the smallest into a neutral "Other".
- */
-declare function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>): import("react").JSX.Element;
-export declare const Donut: typeof DonutInner;
-export {};
-//# sourceMappingURL=Donut.d.ts.map

package/dist/charts/kinds/Donut.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Donut.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAY5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C;;;;GAIG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,IAAI,WAAW,GAAG;IACnE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;kGAC8F;IAC9F,MAAM,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAA;IACvC,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iGAAiG;IACjG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;4FACwF;IACxF,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB,CAAA;AAID;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,+BAwGrE;AAwKD,eAAO,MAAM,KAAK,EAAgB,OAAO,UAAU,CAAA"}

package/dist/charts/kinds/Donut.js

@@ -1,245 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
-import { Pie } from "@visx/shape";
-import { memo, useMemo } from "react";
-import { useChartSize } from "../hooks/useChartSize.js";
-import { useDiscreteCursor } from "../hooks/use-discrete-cursor.js";
-import { useHysteresis } from "../hooks/use-hysteresis.js";
-import { assertRequiredProps } from "../../common/validate.js";
-import { ChartTooltipFloat, TooltipBody, TooltipRow } from "../primitives/ChartTooltip.js";
-import { ChartFrame } from "../primitives/ChartFrame.js";
-import { VX } from "../../tokens/index.js";
-import { resolveContainerClass } from "../../tokens/size-classes.js";
-import { resolveFrameHeight } from "../primitives/chart-frame-layout.js";
-import {
-  foldOther,
-  resolveDonutLayout,
-  resolveDonutRadius,
-  resolveOtherKey,
-  sharePercent
-} from "./donut-layout.js";
-const identityLabel = (key) => key;
-function DonutInner(props) {
-  assertRequiredProps("Donut", props, ["data", "colorForKey"]);
-  const {
-    data,
-    height,
-    colorForKey,
-    formatValue,
-    seriesLabel = identityLabel,
-    ariaLabel,
-    isPending,
-    state,
-    className,
-    style
-  } = props;
-  const { ref, width: frameW, height: measuredH } = useChartSize();
-  const containerClass = resolveContainerClass(frameW);
-  const frameH = height === void 0 ? measuredH : resolveFrameHeight(height, containerClass);
-  const side = useHysteresis(
-    (wasSide) => resolveDonutLayout({
-      frameW,
-      frameH,
-      containerClass,
-      wasSide: height === void 0 && wasSide
-    }).side,
-    false
-  );
-  const slices = useMemo(() => {
-    const { kept, other } = foldOther(data);
-    const out = kept.map((d) => ({
-      key: d.key,
-      label: seriesLabel(d.key),
-      color: colorForKey(d.key),
-      value: d.value
-    }));
-    if (other !== null)
-      out.push({
-        key: resolveOtherKey(kept.map((d) => d.key)),
-        label: "Other",
-        color: VX.neutral,
-        value: other
-      });
-    return out;
-  }, [data, seriesLabel, colorForKey]);
-  const total = useMemo(() => slices.reduce((sum, d) => sum + d.value, 0), [slices]);
-  const series = useMemo(
-    () => slices.map((d) => ({
-      key: d.key,
-      label: side ? `${d.label} \xB7 ${formatValue(d.value)} \xB7 ${sharePercent(d.value, total)}%` : d.label,
-      color: d.color,
-      mark: "bar"
-    })),
-    [slices, side, formatValue, total]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      ...className !== void 0 && { className },
-      style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0, ...style },
-      children: /* @__PURE__ */ jsx(
-        ChartFrame,
-        {
-          series,
-          legend: { placement: side ? "right" : "bottom", maxRows: series.length, headerSlot: false },
-          ...height !== void 0 && { height },
-          ...ariaLabel !== void 0 && { ariaLabel },
-          ...isPending !== void 0 && { isPending },
-          ...state !== void 0 && { state },
-          children: (plot) => /* @__PURE__ */ jsx(
-            DonutPlot,
-            {
-              slices,
-              total,
-              side,
-              frameW,
-              plot,
-              formatValue,
-              ...props.centerLabel !== void 0 && { centerLabel: props.centerLabel },
-              ...props.centerSubLabel !== void 0 && { centerSubLabel: props.centerSubLabel },
-              ...props.centerContent !== void 0 && { centerContent: props.centerContent },
-              ...props.innerRatio !== void 0 && { innerRatio: props.innerRatio },
-              ...props.padAngle !== void 0 && { padAngle: props.padAngle }
-            }
-          )
-        }
-      )
-    }
-  );
-}
-function DonutPlot(props) {
-  const {
-    slices,
-    total,
-    plot,
-    side,
-    frameW,
-    formatValue,
-    centerLabel,
-    centerSubLabel,
-    centerContent,
-    innerRatio = 0.6,
-    padAngle = 0.01
-  } = props;
-  const { width, height, hidden } = plot;
-  const visibleData = useMemo(() => slices.filter((d) => !hidden.has(d.key)), [slices, hidden]);
-  const cursor = useDiscreteCursor({
-    targets: visibleData,
-    getKey: (d) => d.key,
-    ariaLabel: "Donut slices \u2014 use arrow keys to select, Escape to dismiss"
-  });
-  const activeKey = cursor.tip?.target.key ?? null;
-  const radius = resolveDonutRadius({ plotW: width, plotH: height, frameW, side });
-  const innerRadius = radius * innerRatio;
-  const centerX = width / 2;
-  const centerY = height / 2;
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx("svg", { width, height, ...cursor.hostProps, children: /* @__PURE__ */ jsxs(Group, { left: centerX, top: centerY, children: [
-      /* @__PURE__ */ jsx(
-        Pie,
-        {
-          data: visibleData,
-          pieValue: (d) => d.value,
-          pieSortValues: () => 0,
-          outerRadius: radius,
-          innerRadius,
-          padAngle,
-          cornerRadius: 2,
-          children: (pie) => pie.arcs.map((arc) => {
-            const key = arc.data.key;
-            return /* @__PURE__ */ jsx(
-              "g",
-              {
-                id: cursor.optionId(arc.data),
-                role: "option",
-                "aria-selected": activeKey === key,
-                "aria-label": `${arc.data.label}: ${formatValue(arc.data.value)}, ${sharePercent(arc.data.value, total)}%`,
-                ...cursor.pointerProps(arc.data),
-                style: { cursor: "pointer" },
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: pie.path(arc) || "",
-                    fill: arc.data.color,
-                    stroke: VX.surface.panel,
-                    strokeWidth: 1.5,
-                    opacity: activeKey === null || activeKey === key ? 1 : 0.4
-                  }
-                )
-              },
-              key
-            );
-          })
-        }
-      ),
-      !centerContent && centerLabel && /* @__PURE__ */ jsx(
-        "text",
-        {
-          textAnchor: "middle",
-          dominantBaseline: "middle",
-          y: centerSubLabel ? -8 : 0,
-          fill: VX.ink,
-          fontSize: VX.text.lg,
-          fontWeight: 600,
-          fontFamily: "var(--basalt-font-mono)",
-          children: centerLabel
-        }
-      ),
-      !centerContent && centerSubLabel && /* @__PURE__ */ jsx(
-        "text",
-        {
-          textAnchor: "middle",
-          dominantBaseline: "middle",
-          y: centerLabel ? 10 : 0,
-          fill: VX.ink,
-          fontSize: VX.text.micro,
-          opacity: 0.75,
-          fontFamily: "var(--basalt-font-mono)",
-          children: centerSubLabel
-        }
-      )
-    ] }) }),
-    centerContent && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          // Centering over the donut hole; charts/ is Mantine-free, so Center is unavailable here.
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none"
-        },
-        children: centerContent
-      }
-    ),
-    cursor.tip !== null && /* @__PURE__ */ jsx(ChartTooltipFloat, { anchor: cursor.tip.anchor, children: /* @__PURE__ */ jsxs(TooltipBody, { children: [
-      /* @__PURE__ */ jsx(
-        TooltipRow,
-        {
-          color: cursor.tip.target.color,
-          label: cursor.tip.target.label,
-          value: formatValue(cursor.tip.target.value),
-          shape: "bar"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TooltipRow,
-        {
-          color: VX.grid,
-          label: "Share",
-          value: `${sharePercent(cursor.tip.target.value, total)}%`,
-          shape: "bar"
-        }
-      )
-    ] }) })
-  ] });
-}
-const DonutMemo = memo(DonutInner);
-DonutMemo.displayName = "Donut";
-const Donut = DonutMemo;
-export {
-  Donut
-};