basalt-ui 1.21.0 → 1.23.0

package/dist/charts/kinds/BandStrip.js

@@ -0,0 +1,218 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@visx/group";
+import { memo, useMemo } from "react";
+import { VX, alpha } from "../../tokens/index.js";
+import { useBandPlot } from "../hooks/useBandPlot.js";
+import { AxisBottomDate } from "../primitives/Axes.js";
+import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
+import {
+  ChartTooltipFloat,
+  TooltipBody,
+  TooltipHeader,
+  TooltipRow
+} from "../primitives/ChartTooltip.js";
+import { Crosshair } from "../primitives/Crosshair.js";
+import { HatchPattern, hatchFill, hatchSizeFor } from "../primitives/HatchPattern.js";
+import { HoverOverlay } from "../primitives/HoverOverlay.js";
+import { fmtAxisDate } from "../utils/format.js";
+const DEFAULT_MARKER_INSET = 6;
+function BandStripInner(props) {
+  const { series, chartId, height, fill, legend, ariaLabel, isPending } = props;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      series,
+      chartId,
+      ...height !== void 0 && { height },
+      ...fill !== void 0 && { fill },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      legend: resolveLegend(legend),
+      children: (plot) => /* @__PURE__ */ jsx(BandStripPlot, { ...props, plot })
+    }
+  );
+}
+function BandStripPlot(props) {
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    getBand,
+    formatX = fmtAxisDate,
+    xTickValues,
+    fold,
+    cursorResolution = "leading",
+    tooltip,
+    absentState,
+    margin: marginOverride,
+    ariaLabel,
+    plot
+  } = props;
+  const { hidden } = plot;
+  const styleByKey = useMemo(() => new Map(series.map((s) => [s.key, s])), [series]);
+  const band = useBandPlot({
+    data,
+    chartId,
+    getX,
+    formatX,
+    width: plot.width,
+    cursorResolution,
+    ...fold !== void 0 && { fold },
+    ...xTickValues !== void 0 && { xTickValues },
+    ...marginOverride !== void 0 && { margin: marginOverride },
+    ...tooltip !== void 0 && { tooltip }
+  });
+  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band;
+  const stripHeight = Math.max(plot.height - margin.top - margin.bottom, 1);
+  const hatchId = `${chartId}-band-absent`;
+  const absentColor = (absentState === void 0 ? void 0 : styleByKey.get(absentState)?.color) ?? VX.neutral;
+  const rects = useMemo(() => {
+    const out = [];
+    bands.forEach((d, i) => {
+      const span = getBand(d);
+      const style = styleByKey.get(span.state);
+      if (style === void 0 || hidden.has(span.state)) return;
+      const absent = clampFraction(span.absentFraction);
+      const measuredWidth = bandWidth * (1 - absent);
+      const hatchWidth = bandWidth - measuredWidth;
+      const x = i * step;
+      const markerKey = span.marker?.state ?? span.state;
+      const markerColor = styleByKey.get(markerKey)?.color;
+      const inset = span.marker?.inset ?? DEFAULT_MARKER_INSET;
+      out.push(
+        /* @__PURE__ */ jsxs("g", { children: [
+          measuredWidth > 0 && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x,
+              y: 0,
+              width: measuredWidth,
+              height: stripHeight,
+              rx: 1,
+              fill: span.fill ?? alpha(style.color, style.fillOpacity ?? 1),
+              pointerEvents: "none"
+            }
+          ),
+          hatchWidth > 0 && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: x + measuredWidth,
+              y: 0,
+              width: hatchWidth,
+              height: stripHeight,
+              rx: 1,
+              fill: hatchFill(hatchId),
+              pointerEvents: "none"
+            }
+          ),
+          span.marker !== void 0 && markerColor !== void 0 && measuredWidth > 0 && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x,
+              y: inset,
+              width: measuredWidth,
+              height: Math.max(stripHeight - 2 * inset, 2),
+              rx: 1,
+              fill: markerColor,
+              pointerEvents: "none"
+            }
+          )
+        ] }, getX(d))
+      );
+    });
+    return out;
+  }, [bands, getBand, getX, styleByKey, hidden, bandWidth, step, stripHeight, hatchId]);
+  if (plotWidth <= 0 || bands.length === 0) return null;
+  const cfg = tooltip === false ? void 0 : tooltip;
+  const badge = cfg?.label === void 0 || point === null ? null : cfg.label(point);
+  const row = point === null ? null : deriveBandRow(getBand(point), styleByKey, hidden, point);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("svg", { ref: band.svgRef, width: plot.width, height: plot.height, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+        HatchPattern,
+        {
+          id: hatchId,
+          color: absentColor,
+          opacity: 0.7,
+          size: hatchSizeFor(bandWidth)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+        rects,
+        crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: stripHeight }),
+        /* @__PURE__ */ jsx(
+          AxisBottomDate,
+          {
+            top: stripHeight,
+            scale,
+            tickValues: band.tickValues,
+            tickFormat: (v) => formatX(String(v))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HoverOverlay,
+          {
+            width: plotWidth,
+            height: stripHeight,
+            onMove: cursor.onPointerMove,
+            onLeave: cursor.onPointerLeave,
+            onKeyDown: cursor.onKeyDown,
+            onBlur: cursor.onBlur,
+            valueMax: Math.max(bands.length - 1, 0),
+            ...point !== null && {
+              valueNow: bands.indexOf(point),
+              valueText: formatX(getX(point))
+            },
+            ...ariaLabel !== void 0 && { ariaLabel }
+          }
+        )
+      ] })
+    ] }),
+    band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
+      /* @__PURE__ */ jsx(
+        TooltipHeader,
+        {
+          date: getX(point),
+          ...cfg?.formatHeader !== void 0 && {
+            format: (key) => cfg.formatHeader?.(key, point) ?? key
+          },
+          ...badge !== null && { label: badge.text, labelColor: badge.color }
+        }
+      ),
+      /* @__PURE__ */ jsxs(TooltipBody, { children: [
+        cfg?.prependRows?.(point, { hidden }),
+        row !== null && /* @__PURE__ */ jsx(
+          TooltipRow,
+          {
+            color: row.color,
+            label: row.label,
+            value: row.value,
+            shape: row.shape,
+            dashed: row.dashed
+          }
+        ),
+        cfg?.extraRows?.(point, { hidden })
+      ] })
+    ] })
+  ] });
+}
+function clampFraction(value) {
+  if (value === void 0 || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value, 0), 1);
+}
+function deriveBandRow(span, styleByKey, hidden, datum) {
+  const style = styleByKey.get(span.state);
+  if (style === void 0 || style.tooltip === false || hidden.has(span.state)) return null;
+  return {
+    color: style.color,
+    label: style.label,
+    value: style.formatValue?.(datum) ?? "",
+    shape: style.mark === "line" ? "line" : "bar",
+    dashed: style.dash === "dashed"
+  };
+}
+const BandStrip = memo(BandStripInner);
+export {
+  BandStrip
+};

package/dist/charts/kinds/BandStrip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BandStrip.test.d.ts.map

package/dist/charts/kinds/BandStrip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BandStrip.test.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/BandStrip.test.tsx"],"names":[],"mappings":""}

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

@@ -87,8 +87,12 @@ export type BarsProps<T> = {
     barLayout?: 'stacked' | 'grouped';
     /** Per-bar opacity override. Receives the data point + bar key. Default 0.85. */
     barOpacity?: (d: T, key: string) => number;
-    /** X tick count override. Default: as many as fit. */
+    /** Exact number of x ticks. Default: as many as fit. Ignored when `xTickValues` is set. */
     xTicks?: number;
+    /** Which domain keys get a tick, from the full key list and the resolved plot width. Takes
+     * precedence over `xTicks` — see `CartesianChartProps.xTickValues` for why a count is not
+     * always enough. */
+    xTickValues?: (keys: readonly string[], xMax: number) => readonly string[];
     /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
     formatX?: (key: string) => string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Bars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Bars.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Bars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/Bars.tsx"],"names":[],"mappings":"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"}

package/dist/charts/kinds/Bars.js

@@ -24,6 +24,7 @@ function BarsInner(props) {
     barLayout = "stacked",
     barOpacity,
     xTicks,
+    xTickValues,
     formatX,
     cursorResolution,
     tooltip,
@@ -128,6 +129,7 @@ function BarsInner(props) {
       y: yConfig,
       ...y2 !== void 0 && { y2 },
       ...xTicks !== void 0 && { xTicks },
+      ...xTickValues !== void 0 && { xTickValues },
       ...formatX !== void 0 && { formatX },
       ...cursorResolution !== void 0 && { cursorResolution },
       ...zones !== void 0 && { zones },

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

@@ -0,0 +1,93 @@
+import type { ChartMargin } from '../../tokens/index.js';
+import type { CursorResolution } from '../cursor/resolve.js';
+import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot.js';
+import type { ChartLegendConfig, ChartSeries } from '../series.js';
+/** One of the two panes. Each resolves its own domain — that is the whole point of the kind. */
+export type MirroredBarPane = {
+    /** Key of the `series` entry this pane draws: its colour, its legend entry, its tooltip row. */
+    key: string;
+    /**
+     * The pane's upper bound. `'auto'` (default) is its own visible maximum; a number pins it.
+     *
+     * A pane has no LOWER bound to configure — a mirrored bar's length is its magnitude measured
+     * from the shared baseline, so the pane's zero IS the baseline. That is also why the two panes
+     * never share a domain: an upload an order of magnitude below its download flattens to a line
+     * along the baseline on a shared scale, and it is the half that explains a stalled call.
+     */
+    max?: number | 'auto';
+    /** When `max` is `'auto'`: floors the upper bound, so a quiet window doesn't amplify noise to
+     * full height. */
+    autoMaxFloor?: number;
+    /** Tick count for this pane's own axis. Default 3. */
+    ticks?: number;
+    /** Tick + tooltip formatter for this pane. A pane's axis is in its OWN units — one shared
+     * formatter would be wrong for at least one of them whenever the two differ. */
+    format: (v: number) => string;
+};
+export type MirroredBarsProps<T> = {
+    data: readonly T[];
+    chartId: string;
+    /** Extracts the x-domain key — a slot start, hence the `'leading'` cursor default. */
+    getX: (d: T) => string;
+    /**
+     * The single source of truth for bar colours, legend entries and tooltip rows. `up.key` and
+     * `down.key` name two of these; any further entry is legend-only (give it `getValue: () => null`)
+     * — which is how ABSENCE gets named, and it has to be: a hatched bar is the one mark on this
+     * chart a reader cannot decode from either axis.
+     */
+    series: readonly ChartSeries<T>[];
+    /** The pane drawn ABOVE the baseline. */
+    up: MirroredBarPane;
+    /** The pane drawn BELOW the baseline. */
+    down: MirroredBarPane;
+    /** The up pane's share of the bar band. Default 0.35 — the mirrored pair is usually asymmetric,
+     * and splitting evenly spends most of the chart on empty space above the smaller half. */
+    upFraction?: number;
+    /**
+     * 0..1 of this bar's width no source sample covers, hatched across the FULL band height.
+     *
+     * Full height, both panes, deliberately: a hatch drawn on one pane only reads as "that half
+     * measured zero", which is the measured-and-idle state absence must stay distinguishable from.
+     */
+    getAbsentFraction?: (d: T) => number;
+    /** Per-datum bar opacity — a real but qualified measurement (a short bucket, a partial interval)
+     * drawn dimmer. Default 1. */
+    getBarOpacity?: (d: T) => number;
+    /** Fixed height in px, forwarded to `ChartFrame`. Default 240. */
+    height?: number;
+    fill?: boolean;
+    formatX?: (key: string) => string;
+    xTickValues?: (keys: readonly string[], plotWidth: number) => readonly string[];
+    fold?: BandFold<T>;
+    /** Default `'leading'` — see `BandStripProps.cursorResolution`. */
+    cursorResolution?: CursorResolution;
+    tooltip?: BandTooltipConfig<T> | false;
+    legend?: ChartLegendConfig | false;
+    /** Series key whose colour the absence hatch is drawn in. Default `VX.neutral`. */
+    absentState?: string;
+    margin?: Partial<ChartMargin>;
+    ariaLabel?: string;
+    isPending?: boolean;
+};
+/**
+ * Two bar panes over ONE x scale and one cursor, mirrored around a shared baseline, each in its
+ * own independent domain.
+ *
+ * **Why not `DualPanel`.** `DualPanel`'s two panes are a LINE pane and a signed-histogram pane: it
+ * requires `series` to be line series it draws with `LinePath`, and its bottom pane takes a single
+ * signed `getBar` over one symmetric `[-maxAbs, maxAbs]` scale. Neither half fits. Two independent
+ * magnitudes mirrored around a baseline are not one signed quantity — a 220 kB/s down and a 20 kB/s
+ * up are two readings, not `+220` and `−20` of one — and forcing them onto one scale is exactly the
+ * flattening this shape exists to avoid. Bending `DualPanel` to cover it would mean a
+ * `topMark: 'line' | 'bars'` switch, a second value accessor, and a per-pane domain law that
+ * contradicts its symmetric one: a fork of its internals wearing one name. It composes the same
+ * `useBandPlot` choreography instead, which is where the sharing actually belongs.
+ */
+declare function MirroredBarsInner<T>(props: MirroredBarsProps<T>): import("react").JSX.Element;
+/**
+ * Hand-memoized: React Compiler does not process the shipped dist, so the hot kind is wrapped in
+ * `React.memo` to retain the auto-memoization it had as source (parity with `DualPanel`).
+ */
+export declare const MirroredBars: typeof MirroredBarsInner;
+export {};
+//# sourceMappingURL=MirroredBars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MirroredBars.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MirroredBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAcvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG;IAC5B,gGAAgG;IAChG,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;sBACkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;oFACgF;IAChF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IACjC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,sFAAsF;IACtF,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;;;;;OAKG;IACH,MAAM,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACjC,yCAAyC;IACzC,EAAE,EAAE,eAAe,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,eAAe,CAAA;IACrB;8FAC0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACpC;kCAC8B;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,MAAM,EAAE,CAAA;IAC/E,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAClB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAKD;;;;;;;;;;;;;GAaG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAgBxD;AAmUD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAA"}

package/dist/charts/kinds/MirroredBars.js

@@ -0,0 +1,315 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Group } from "@visx/group";
+import { scaleLinear } from "@visx/scale";
+import { memo, useMemo } from "react";
+import { VX, alpha } from "../../tokens/index.js";
+import { useBandPlot } from "../hooks/useBandPlot.js";
+import { probeAxisLabels } from "../layout/auto-margin.js";
+import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
+import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
+import {
+  ChartTooltipFloat,
+  TooltipBody,
+  TooltipHeader,
+  TooltipRow
+} from "../primitives/ChartTooltip.js";
+import { Crosshair } from "../primitives/Crosshair.js";
+import { HatchPattern, hatchFill, hatchSizeFor } from "../primitives/HatchPattern.js";
+import { HoverOverlay } from "../primitives/HoverOverlay.js";
+import { deriveTooltipRows } from "../series.js";
+import { fmtAxisDate } from "../utils/format.js";
+const DEFAULT_UP_FRACTION = 0.35;
+const DEFAULT_PANE_TICKS = 3;
+function MirroredBarsInner(props) {
+  const { series, chartId, height, fill, legend, ariaLabel, isPending } = props;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      series,
+      chartId,
+      ...height !== void 0 && { height },
+      ...fill !== void 0 && { fill },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      legend: resolveLegend(legend),
+      children: (plot) => /* @__PURE__ */ jsx(MirroredBarsPlot, { ...props, plot })
+    }
+  );
+}
+function MirroredBarsPlot(props) {
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    up,
+    down,
+    upFraction = DEFAULT_UP_FRACTION,
+    getAbsentFraction,
+    getBarOpacity,
+    formatX = fmtAxisDate,
+    xTickValues,
+    fold,
+    cursorResolution = "leading",
+    tooltip,
+    absentState,
+    margin: marginOverride,
+    ariaLabel,
+    plot
+  } = props;
+  const { hidden } = plot;
+  const seriesByKey = useMemo(() => new Map(series.map((s) => [s.key, s])), [series]);
+  const upSeries = seriesByKey.get(up.key);
+  const downSeries = seriesByKey.get(down.key);
+  const upVisible = upSeries !== void 0 && !hidden.has(up.key);
+  const downVisible = downSeries !== void 0 && !hidden.has(down.key);
+  const upMax = usePaneMax(data, upSeries, up, upVisible);
+  const downMax = usePaneMax(data, downSeries, down, downVisible);
+  const upTicks = up.ticks ?? DEFAULT_PANE_TICKS;
+  const downTicks = down.ticks ?? DEFAULT_PANE_TICKS;
+  const leftLabels = useMemo(() => {
+    const labels = [];
+    if (upVisible) {
+      labels.push(
+        ...probeAxisLabels({ domain: [0, upMax], ticks: upTicks, format: up.format }).labels
+      );
+    }
+    if (downVisible) {
+      labels.push(
+        ...probeAxisLabels({ domain: [0, downMax], ticks: downTicks, format: down.format }).labels
+      );
+    }
+    return labels;
+  }, [upVisible, downVisible, upMax, downMax, upTicks, downTicks, up.format, down.format]);
+  const band = useBandPlot({
+    data,
+    chartId,
+    getX,
+    formatX,
+    width: plot.width,
+    cursorResolution,
+    leftLabels,
+    ...fold !== void 0 && { fold },
+    ...xTickValues !== void 0 && { xTickValues },
+    ...marginOverride !== void 0 && { margin: marginOverride },
+    ...tooltip !== void 0 && { tooltip }
+  });
+  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band;
+  const barBand = Math.max(plot.height - margin.top - margin.bottom, 2);
+  const upHeight = Math.max(Math.round(barBand * upFraction), 1);
+  const downHeight = Math.max(barBand - upHeight, 1);
+  const baseline = upHeight;
+  const upScale = useMemo(
+    () => scaleLinear({ domain: [0, upMax], range: [0, upHeight] }),
+    [upMax, upHeight]
+  );
+  const downScale = useMemo(
+    () => scaleLinear({ domain: [0, downMax], range: [0, downHeight] }),
+    [downMax, downHeight]
+  );
+  const upAxisScale = useMemo(
+    () => scaleLinear({ domain: [upMax, 0], range: [0, upHeight] }),
+    [upMax, upHeight]
+  );
+  const hatchId = `${chartId}-mirrored-absent`;
+  const absentColor = (absentState === void 0 ? void 0 : seriesByKey.get(absentState)?.color) ?? VX.neutral;
+  const drawnUp = upVisible ? upSeries : void 0;
+  const drawnDown = downVisible ? downSeries : void 0;
+  const bars = useMemo(() => {
+    const out = [];
+    bands.forEach((d, i) => {
+      const x = i * step;
+      const absent = clampFraction(getAbsentFraction?.(d));
+      const measuredWidth = bandWidth * (1 - absent);
+      const hatchWidth = bandWidth - measuredWidth;
+      const opacity = getBarOpacity?.(d) ?? 1;
+      const upValue = finiteOrNull(drawnUp?.getValue(d));
+      const downValue = finiteOrNull(drawnDown?.getValue(d));
+      out.push(
+        /* @__PURE__ */ jsxs("g", { children: [
+          measuredWidth > 0 && drawnUp !== void 0 && upValue !== null && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x,
+              y: baseline - upScale(upValue),
+              width: measuredWidth,
+              height: Math.max(upScale(upValue), upValue > 0 ? 1 : 0),
+              fill: alpha(drawnUp.color, opacity),
+              pointerEvents: "none"
+            }
+          ),
+          measuredWidth > 0 && drawnDown !== void 0 && downValue !== null && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x,
+              y: baseline,
+              width: measuredWidth,
+              height: Math.max(downScale(downValue), downValue > 0 ? 1 : 0),
+              fill: alpha(drawnDown.color, opacity),
+              pointerEvents: "none"
+            }
+          ),
+          hatchWidth > 0 && /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: x + measuredWidth,
+              y: 0,
+              width: hatchWidth,
+              height: barBand,
+              fill: hatchFill(hatchId),
+              pointerEvents: "none"
+            }
+          )
+        ] }, getX(d))
+      );
+    });
+    return out;
+  }, [
+    bands,
+    step,
+    bandWidth,
+    barBand,
+    baseline,
+    getX,
+    getAbsentFraction,
+    getBarOpacity,
+    drawnUp,
+    drawnDown,
+    upScale,
+    downScale,
+    hatchId
+  ]);
+  if (plotWidth <= 0 || bands.length === 0) return null;
+  const cfg = tooltip === false ? void 0 : tooltip;
+  const badge = cfg?.label === void 0 || point === null ? null : cfg.label(point);
+  const visibleSeries = series.filter((s) => !hidden.has(s.key)).map((s) => {
+    if (s.formatValue !== void 0) return s;
+    if (s.key === up.key) return { ...s, formatValue: (v) => up.format(v) };
+    if (s.key === down.key) return { ...s, formatValue: (v) => down.format(v) };
+    return s;
+  });
+  const rows = point === null ? [] : deriveTooltipRows(visibleSeries, point, down.format);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("svg", { ref: band.svgRef, width: plot.width, height: plot.height, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+        HatchPattern,
+        {
+          id: hatchId,
+          color: absentColor,
+          opacity: 0.7,
+          size: hatchSizeFor(bandWidth)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+        bars,
+        upVisible && /* @__PURE__ */ jsx(
+          AxisLeftNumeric,
+          {
+            scale: upAxisScale,
+            numTicks: upTicks,
+            tickFormat: (v) => up.format(Number(v))
+          }
+        ),
+        downVisible && /* @__PURE__ */ jsx(Group, { top: baseline, children: /* @__PURE__ */ jsx(
+          AxisLeftNumeric,
+          {
+            scale: downScale,
+            numTicks: downTicks,
+            tickFormat: (v) => down.format(Number(v))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: 0,
+            x2: plotWidth,
+            y1: baseline,
+            y2: baseline,
+            stroke: VX.axisStroke,
+            strokeWidth: 1
+          }
+        ),
+        crosshairX !== null && /* @__PURE__ */ jsx(Crosshair, { x: crosshairX, top: 0, bottom: barBand }),
+        /* @__PURE__ */ jsx(
+          AxisBottomDate,
+          {
+            top: barBand,
+            scale,
+            tickValues: band.tickValues,
+            tickFormat: (v) => formatX(String(v))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HoverOverlay,
+          {
+            width: plotWidth,
+            height: barBand,
+            onMove: cursor.onPointerMove,
+            onLeave: cursor.onPointerLeave,
+            onKeyDown: cursor.onKeyDown,
+            onBlur: cursor.onBlur,
+            valueMax: Math.max(bands.length - 1, 0),
+            ...point !== null && {
+              valueNow: bands.indexOf(point),
+              valueText: formatX(getX(point))
+            },
+            ...ariaLabel !== void 0 && { ariaLabel }
+          }
+        )
+      ] })
+    ] }),
+    band.showTooltip && point !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: band.tooltipAnchor, ariaLive: band.ariaLive, children: [
+      /* @__PURE__ */ jsx(
+        TooltipHeader,
+        {
+          date: getX(point),
+          ...cfg?.formatHeader !== void 0 && {
+            format: (key) => cfg.formatHeader?.(key, point) ?? key
+          },
+          ...badge !== null && { label: badge.text, labelColor: badge.color }
+        }
+      ),
+      /* @__PURE__ */ jsxs(TooltipBody, { children: [
+        cfg?.prependRows?.(point, { hidden }),
+        rows.map((row) => /* @__PURE__ */ jsx(
+          TooltipRow,
+          {
+            color: row.color,
+            label: row.label,
+            value: row.value,
+            shape: row.shape,
+            dashed: row.dashed,
+            ...row.strokeWidth !== void 0 && { strokeWidth: row.strokeWidth }
+          },
+          row.key
+        )),
+        cfg?.extraRows?.(point, { hidden })
+      ] })
+    ] })
+  ] });
+}
+function clampFraction(value) {
+  if (value === void 0 || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value, 0), 1);
+}
+function finiteOrNull(v) {
+  return v === null || v === void 0 || Number.isNaN(v) ? null : v;
+}
+function usePaneMax(data, paneSeries, pane, visible) {
+  return useMemo(() => {
+    if (pane.max !== void 0 && pane.max !== "auto") return pane.max || 1;
+    if (!visible || paneSeries === void 0) return 1;
+    let max = 0;
+    for (const d of data) {
+      const v = paneSeries.getValue(d);
+      if (v === null || Number.isNaN(v)) continue;
+      if (v > max) max = v;
+    }
+    const floored = pane.autoMaxFloor === void 0 ? max : Math.max(max, pane.autoMaxFloor);
+    return floored || 1;
+  }, [data, paneSeries, pane.max, pane.autoMaxFloor, visible]);
+}
+const MirroredBars = memo(MirroredBarsInner);
+export {
+  MirroredBars
+};