@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/charts/barChartGeometry.d.ts

@@ -1,126 +1,178 @@
-import { buildValueScale } from "./chartScales";
-import { BarChartNormalization, BarCorners } from "./types";
-import type { BarChartGroupDatum, ChartPalette } from "./types";
 /**
- * Rectangle with one pair of corners rounded.
+ * @internal Bar chart geometry (BarChart; `layoutBars` is reused by Sparkline). Flattens the
+ * group → bar → component hierarchy into a flat array of rectangles plus one hit band per group,
+ * so the component body is a `.map()` with no nested loops or running accumulators.
  *
- * The radius is clamped to half the height as well as half the width, so a very
- * short bar renders as a symmetric cap instead of a lopsided half-pill.
+ * Pure: no React, no theme access. Colors arrive through a resolver callback so this module never
+ * has to know how the palette maps to tokens. Values equal to a scale step come from `SPACE` /
+ * `RADIUS` (through `constants.ts`); widths, ratios and thresholds are geometry, not spacing.
  */
-export declare function roundedRectPath(x: number, y: number, width: number, height: number, radius: number, corners: BarCorners): string;
+import type { Hex } from "../theme/tokens/types.js";
+import type { ChartSeriesColor } from "./chartPalette.js";
+import type { ChartPalette } from "./types.js";
+/** @internal Ceiling on one bar's width: past it the width stops carrying information (1.x). */
+export declare const MAX_BAR_WIDTH = 44;
+/** @internal Which pair of a rectangle's corners carries the radius. */
+export declare enum BarCorners {
+    /** Cap for a bar growing up from the baseline. */
+    TOP = "TOP",
+    /** Cap for a bar growing down from the baseline. */
+    BOTTOM = "BOTTOM",
+    /** Interior stack segment: square on both ends. */
+    NONE = "NONE"
+}
+/** @internal How bar values are scaled before drawing (BarChart's `BarChartNormalization`, structurally). */
+export type BarGeometryNormalization = "NONE" | "PERCENT";
+/** @internal One stacked segment (BarChart's `BarChartComponentDatum`, structurally). */
+export interface BarGeometryComponent<TComponentKey extends string> {
+    /** Segment key. */
+    key: TComponentKey;
+    /** Segment label. */
+    label: string;
+    /** Segment value. */
+    value: number;
+    /** Palette slot override. */
+    color?: ChartPalette | undefined;
+    /** Raw color override. */
+    hex?: Hex | undefined;
+}
+/** @internal One bar (BarChart's `BarChartBarDatum`, structurally). */
+export interface BarGeometryBar<TMetric extends string, TComponentKey extends string> {
+    /** Series key. */
+    metric: TMetric;
+    /** Segments, stacked in array order outward from the baseline. */
+    components: BarGeometryComponent<TComponentKey>[];
+}
+/** @internal One category (BarChart's `BarChartGroupDatum`, structurally). */
+export interface BarGeometryGroup<TMetric extends string, TComponentKey extends string> {
+    /** Raw category label. */
+    label: string;
+    /** Bars, left to right. */
+    bars: BarGeometryBar<TMetric, TComponentKey>[];
+}
+/** @internal Whole-pixel spacing of one category: every bar the same width, every gap the same. */
+export interface BarSlotLayout {
+    /** Px between neighbouring bars in the group. */
+    barGap: number;
+    /** Px width of each bar (≥ 1). */
+    barWidth: number;
+    /** Px from the band's left edge to the first bar (centers the group in its band). */
+    offset: number;
+}
 /**
- * Signed value domain across every group.
- *
- * Percent-normalized charts always span 0–1, so the axis is stable no matter
- * what the underlying totals are.
+ * @internal Lays `barCount` bars into a category band `step` px wide. Both gaps are proportional,
+ * so a narrow chart keeps its bars instead of its air: the category gap is `CATEGORY_GAP_RATIO` of
+ * the band, the in-group gap `BAR_GAP_RATIO` of a bar slot, each rounded and clamped to its floor
+ * and ceiling. Bar widths and gaps are whole pixels: bars round to the nearest pixel (unless that
+ * would push the category gap under its floor) and the remainder joins the category gap. When even the floors do not fit, the gaps give way before a bar drops below 1px.
  */
-export declare function getBarValueDomain<TMetric extends string, TComponentKey extends string>(groups: BarChartGroupDatum<TMetric, TComponentKey>[], normalization: BarChartNormalization): [number, number];
+export declare function layoutBarSlot(step: number, barCount: number): BarSlotLayout;
 /**
- * A single rendered rectangle.
- *
- * The geometry layer flattens the group/bar/component hierarchy into an array
- * of these, so rendering is a plain `.map()` with no nested loops or
- * accumulators in the component body.
+ * @internal `count` bars laid across `width` with `gap` between them, each 80% of its slot (capped
+ * at `MAX_BAR_WIDTH`) and centered in it: Sparkline's bar mark, in its stretched `0 0 100 100`
+ * viewBox, where pixels are unknown (so no whole-pixel snapping).
+ */
+export declare function layoutBars(count: number, width: number, gap: number): {
+    x: number;
+    width: number;
+}[];
+/**
+ * @internal A rectangle with one pair of corners rounded. The radius is clamped to half the height
+ * as well as half the width, so a very short bar renders as a symmetric cap.
  */
-export interface BarChartRect<TMetric extends string, TComponentKey extends string = string> {
-    /**
-     * React key: `${groupIndex}:${barIndex}:${componentKey}`.
-     *
-     * Deliberately index-based rather than label-based — group labels are free to
-     * repeat, and duplicated keys would silently drop rectangles.
-     */
+export declare function roundedRectPath(x: number, y: number, width: number, height: number, radius: number, corners: BarCorners): string;
+/** @internal Signed extent of every bar's stacked total; `[0, 1]` when percent-normalized. */
+export declare function getBarValueDomain(groups: BarGeometryGroup<string, string>[], normalization: BarGeometryNormalization): [number, number];
+/** @internal `true` when any bar holds more than one component (the color and legend grammar). */
+export declare function isBarChartStacked(groups: BarGeometryGroup<string, string>[]): boolean;
+/** @internal One rendered rectangle. */
+export interface BarChartRect<TMetric extends string, TComponentKey extends string> {
+    /** React key: `${groupIndex}:${barIndex}:${componentKey}` (labels may repeat; indices do not). */
     id: string;
+    /** Category index. */
     groupIndex: number;
+    /** Bar index within the group. */
+    barIndex: number;
+    /** The bar's metric. */
     metric: TMetric;
+    /** The segment's key. */
     componentKey: TComponentKey;
-    /** The component's label, carried through for the tooltip. */
+    /** The segment's label. */
     label: string;
     /** The raw value, before any normalization. */
     value: number;
+    /** Left edge, plot coordinates. */
     x: number;
+    /** Top edge, plot coordinates. */
     y: number;
+    /** Width. */
     width: number;
+    /** Height. */
     height: number;
-    /** Resolved from the theme — never a raw hex from consumer data. */
-    color: string;
-    /** Interior stack segments get {@link BarCorners.NONE}. */
+    /** Resolved color. */
+    color: ChartSeriesColor;
+    /** Which corners are rounded (interior stack segments: none). */
     corners: BarCorners;
-    /** Corner radius in px, reduced for narrow bars so the curve can't dominate. */
+    /** Corner radius: smaller for narrow bars. */
     radius: number;
 }
-/**
- * A category's invisible hit target and tooltip anchor.
- *
- * Hit testing happens per group rather than per rectangle: a two-pixel bar is
- * then exactly as hoverable as a two-hundred-pixel one, and moving the pointer
- * between segments inside one group fires nothing, so the tooltip stays put
- * instead of jumping between segment tops.
- */
+/** @internal A category's hit band and tooltip anchor; bands tile the plot edge to edge. */
 export interface BarChartGroupBand {
+    /** Category index. */
     groupIndex: number;
+    /** Raw label. */
     label: string;
-    /** Tiles edge to edge with its neighbours, so there are no dead gutters. */
+    /** Left edge. */
     x: number;
+    /** Top edge (0). */
     y: number;
+    /** Band width: the category step, snapped to whole pixels. */
     width: number;
+    /** Band height (the plot height). */
     height: number;
-    /** Group centre, at the top of its tallest bar. Stable while hovering. */
+    /** Group center. */
     anchorX: number;
+    /** Top of the group's tallest bar. */
     anchorY: number;
 }
-export interface BarChartGeometry<TMetric extends string, TComponentKey extends string = string> {
+/** @internal The finished geometry. */
+export interface BarChartGeometry<TMetric extends string, TComponentKey extends string> {
     /** Every rendered rectangle, in draw order. */
     rects: BarChartRect<TMetric, TComponentKey>[];
-    /** One hit target per group, tiling the plot with no gaps. */
+    /** One band per group. */
     bands: BarChartGroupBand[];
-    /** The resolved value scale, shared with the axis. */
-    valueScale: ReturnType<typeof buildValueScale>;
-}
-interface BuildBarChartGeometryArgs<TMetric extends string, TComponentKey extends string> {
-    groups: BarChartGroupDatum<TMetric, TComponentKey>[];
-    plotWidth: number;
-    plotHeight: number;
-    normalization: BarChartNormalization;
-    /**
-     * Whether the chart as a whole is stacked.
-     *
-     * Chart-wide, not per bar, because it decides the *colour rule* and the legend
-     * lists one domain for the whole chart. Deriving it per bar would colour a
-     * single-component bar by metric while the legend named components.
-     */
-    isStacked: boolean;
-    /**
-     * The final value domain, already overridden, zeroed and niced.
-     *
-     * Resolved by the caller rather than here, because the left gutter is sized
-     * from the tick labels and therefore needs the domain before the plot — and
-     * hence this builder — exists.
-     */
-    domain: [number, number];
-    /**
-     * Maps one segment to a concrete color.
-     *
-     * The geometry deliberately does not decide the rule — it only reports what
-     * it knows about the segment. Whether a stack is coloured by component or a
-     * group by metric is a presentation question, and it needs the `series`
-     * record to answer, which this module has no business importing.
-     */
-    resolveColor: (args: ResolveBarColorArgs<TMetric>) => string;
-    /**
-     * Minimum rendered length for a stack segment, in px. `0` disables it.
-     *
-     * See the prop of the same name on `BarChart` for what it costs.
-     */
-    minSegmentLength: number;
+    /** Value → y, shared with the axis. */
+    valueScale: (value: number) => number;
+    /** Exact category step (band widths are this, snapped to whole pixels). */
+    step: number;
 }
+/** @internal What the color resolver is told about a segment. */
 export interface ResolveBarColorArgs<TMetric extends string> {
+    /** The bar's metric. */
     metric: TMetric;
     /** Index of the component within its bar. */
     componentIndex: number;
-    /** True when the *chart* is stacked — see the option of the same name. */
-    isStacked: boolean;
-    /** The component's own palette override, if it declared one. */
-    explicit?: ChartPalette;
+    /** The segment's palette override. */
+    explicit?: ChartPalette | undefined;
+    /** The segment's raw color override. */
+    hex?: Hex | undefined;
+}
+/** @internal Inputs of `buildBarChartGeometry`. */
+export interface BuildBarChartGeometryArgs<TMetric extends string, TComponentKey extends string> {
+    /** Categories. */
+    groups: BarGeometryGroup<TMetric, TComponentKey>[];
+    /** Plot width. */
+    plotWidth: number;
+    /** Plot height. */
+    plotHeight: number;
+    /** Raw or percent. */
+    normalization: BarGeometryNormalization;
+    /** The resolved value domain (overridden, zeroed, niced). */
+    domain: [number, number];
+    /** Maps one segment to its color (the chart decides the grammar). */
+    resolveColor: (args: ResolveBarColorArgs<TMetric>) => ChartSeriesColor;
+    /** Minimum rendered length of a stack segment, px; 0 disables. */
+    minSegmentLength: number;
 }
-export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string = string>({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;
-export {};
+/** @internal Builds a bar chart's rectangles and bands. */
+export declare function buildBarChartGeometry<TMetric extends string, TComponentKey extends string>({ groups, plotWidth, plotHeight, normalization, domain, resolveColor, minSegmentLength, }: BuildBarChartGeometryArgs<TMetric, TComponentKey>): BarChartGeometry<TMetric, TComponentKey>;

package/dist/charts/barChartGeometry.js

@@ -1,44 +1,76 @@
-import { BarChartNormalization, BarCorners } from "./types.js";
-import { BAR_WIDTH_RATIO, MAX_GAP_SHARE } from "./constants.js";
-import { buildValueScale, sanitizeValue } from "./chartScales.js";
+import { BAR_GAP_RATIO, BAR_RADIUS, BAR_RADIUS_NARROW, CATEGORY_GAP_RATIO, MAX_BAR_GAP, MAX_CATEGORY_GAP, MIN_BAR_LENGTH, MIN_CATEGORY_GAP, STACK_SEGMENT_GAP } from "./constants.js";
+import { buildValueScale, clamp, sanitizeValue } from "./chartScales.js";
 //#region src/charts/barChartGeometry.ts
+/** @internal Ceiling on one bar's width: past it the width stops carrying information (1.x). */
+var MAX_BAR_WIDTH = 44;
+/** Share of its slot a Sparkline bar fills; the rest is air (1.x). Sparkline only. */
+var SPARKLINE_BAR_WIDTH_RATIO = .8;
+/** Ceiling on a Sparkline gap, as a share of a slot, so a long series keeps its bars (1.x). */
+var SPARKLINE_MAX_GAP_SHARE = .3;
+/** @internal Which pair of a rectangle's corners carries the radius. */
+var BarCorners = /* @__PURE__ */ function(BarCorners) {
+	/** Cap for a bar growing up from the baseline. */
+	BarCorners["TOP"] = "TOP";
+	/** Cap for a bar growing down from the baseline. */
+	BarCorners["BOTTOM"] = "BOTTOM";
+	/** Interior stack segment: square on both ends. */
+	BarCorners["NONE"] = "NONE";
+	return BarCorners;
+}({});
 /**
-* Pick gap sizes from how crowded the chart is.
-*
-* Sparse charts stay roomy regardless of width; once there are enough bars to
-* matter, the gaps tighten as the plot narrows.
+* @internal Lays `barCount` bars into a category band `step` px wide. Both gaps are proportional,
+* so a narrow chart keeps its bars instead of its air: the category gap is `CATEGORY_GAP_RATIO` of
+* the band, the in-group gap `BAR_GAP_RATIO` of a bar slot, each rounded and clamped to its floor
+* and ceiling. Bar widths and gaps are whole pixels: bars round to the nearest pixel (unless that
+* would push the category gap under its floor) and the remainder joins the category gap. When even the floors do not fit, the gaps give way before a bar drops below 1px.
 */
-function getBarSpacing(plotWidth, totalBars) {
-	if (totalBars < 13 || plotWidth > 650) return {
-		groupGap: 24,
-		barGap: 6
-	};
-	if (plotWidth > 500) return {
-		groupGap: 16,
-		barGap: 4
-	};
+function layoutBarSlot(step, barCount) {
+	const count = Math.max(1, barCount);
+	let categoryGap = clamp(Math.round(step * CATEGORY_GAP_RATIO), MIN_CATEGORY_GAP, MAX_CATEGORY_GAP);
+	if (step - categoryGap < count) categoryGap = Math.max(0, Math.floor(step - count));
+	const available = step - categoryGap;
+	let barGap = count > 1 ? clamp(Math.round(available / count * BAR_GAP_RATIO), 1, MAX_BAR_GAP) : 0;
+	if (count > 1 && available - (count - 1) * barGap < count) barGap = Math.max(0, Math.floor((available - count) / (count - 1)));
+	const exact = (available - (count - 1) * barGap) / count;
+	const rounded = Math.round(exact);
+	const barWidth = clamp(step - (count * rounded + (count - 1) * barGap) >= Math.min(MIN_CATEGORY_GAP, categoryGap) ? rounded : Math.floor(exact), 1, 44);
+	const barsWidth = count * barWidth + (count - 1) * barGap;
 	return {
-		groupGap: 12,
-		barGap: 3
+		barGap,
+		barWidth,
+		offset: (step - barsWidth) / 2
 	};
 }
 /**
-* Rectangle with one pair of corners rounded.
-*
-* The radius is clamped to half the height as well as half the width, so a very
-* short bar renders as a symmetric cap instead of a lopsided half-pill.
+* @internal `count` bars laid across `width` with `gap` between them, each 80% of its slot (capped
+* at `MAX_BAR_WIDTH`) and centered in it: Sparkline's bar mark, in its stretched `0 0 100 100`
+* viewBox, where pixels are unknown (so no whole-pixel snapping).
+*/
+function layoutBars(count, width, gap) {
+	if (count <= 0 || width <= 0) return [];
+	const effectiveGap = Math.min(gap, width / count * SPARKLINE_MAX_GAP_SHARE);
+	const slot = (width - (count - 1) * effectiveGap) / count;
+	const barWidth = Math.max(1, Math.min(slot * SPARKLINE_BAR_WIDTH_RATIO, 44));
+	return Array.from({ length: count }, (_, index) => ({
+		x: index * (slot + effectiveGap) + (slot - barWidth) / 2,
+		width: barWidth
+	}));
+}
+/**
+* @internal A rectangle with one pair of corners rounded. The radius is clamped to half the height
+* as well as half the width, so a very short bar renders as a symmetric cap.
 */
 function roundedRectPath(x, y, width, height, radius, corners) {
-	const r = corners === BarCorners.NONE ? 0 : Math.max(0, Math.min(radius, width / 2, height / 2));
+	const r = corners === "NONE" ? 0 : Math.max(0, Math.min(radius, width / 2, height / 2));
 	if (r === 0) return `M${x},${y} h${width} v${height} h${-width} z`;
-	if (corners === BarCorners.TOP) return [
+	if (corners === "TOP") return [
 		`M${x},${y + r}`,
 		`a${r},${r} 0 0 1 ${r},${-r}`,
 		`h${width - 2 * r}`,
 		`a${r},${r} 0 0 1 ${r},${r}`,
 		`v${height - r}`,
 		`h${-width}`,
-		`z`
+		"z"
 	].join(" ");
 	return [
 		`M${x},${y}`,
@@ -47,16 +79,13 @@ function roundedRectPath(x, y, width, height, radius, corners) {
 		`a${r},${r} 0 0 1 ${-r},${r}`,
 		`h${-(width - 2 * r)}`,
 		`a${r},${r} 0 0 1 ${-r},${-r}`,
-		`z`
+		"z"
 	].join(" ");
 }
 /**
-* Turn one bar's components into stacked `[from, to]` intervals.
-*
-* Positive and negative values accumulate on separate cursors, which is what
-* lets a bar mixing both stack upward and downward from the baseline without
-* any special-casing downstream — and is also why percent normalization is a
-* one-line division rather than a second code path.
+* One bar's components as stacked `[from, to]` intervals. Positive and negative values accumulate
+* on separate cursors, so a bar mixing both stacks up and down from the baseline; percent
+* normalization is then one division.
 */
 function stackComponents(values, normalization) {
 	let positiveCursor = 0;
@@ -79,7 +108,7 @@ function stackComponents(values, normalization) {
 			to
 		};
 	});
-	if (normalization !== BarChartNormalization.PERCENT) return intervals;
+	if (normalization !== "PERCENT") return intervals;
 	const magnitude = positiveCursor - negativeCursor;
 	if (magnitude === 0) return intervals;
 	return intervals.map((interval) => ({
@@ -88,14 +117,9 @@ function stackComponents(values, normalization) {
 		to: interval.to / magnitude
 	}));
 }
-/**
-* Signed value domain across every group.
-*
-* Percent-normalized charts always span 0–1, so the axis is stable no matter
-* what the underlying totals are.
-*/
+/** @internal Signed extent of every bar's stacked total; `[0, 1]` when percent-normalized. */
 function getBarValueDomain(groups, normalization) {
-	if (normalization === BarChartNormalization.PERCENT) return [0, 1];
+	if (normalization === "PERCENT") return [0, 1];
 	let min = 0;
 	let max = 0;
 	for (const group of groups) for (const bar of group.bars) {
@@ -106,59 +130,51 @@ function getBarValueDomain(groups, normalization) {
 			if (value >= 0) positive += value;
 			else negative += value;
 		}
-		if (positive > max) max = positive;
-		if (negative < min) min = negative;
+		max = Math.max(max, positive);
+		min = Math.min(min, negative);
 	}
 	return [min, max];
 }
+/** @internal `true` when any bar holds more than one component (the color and legend grammar). */
+function isBarChartStacked(groups) {
+	return groups.some((group) => group.bars.some((bar) => bar.components.length > 1));
+}
 /**
-* Grow every under-sized segment to its minimum, paying for it out of the
-* segments that have room to spare.
-*
-* `lengths` and `minima` are one side of one stack, in baseline-outward order.
-* Returns `null` when nothing needs doing, and — deliberately — also when the
-* bill cannot be paid: if the surplus across the whole side is smaller than the
-* total deficit, every segment would end up pinned at its minimum and the bar
-* would no longer be a picture of its data. A stack that crowded is telling the
-* caller to drop the minimum or fold the tail into an "Other" component, and
-* silently redrawing it as a ladder of equal blocks would hide that.
+* Grows every under-sized segment of one stack side to its minimum, paid for by the segments with
+* room to spare, in proportion to their slack. Returns `null` when nothing needs doing, and also
+* when the bill cannot be paid (every segment would be pinned at the minimum and the bar would no
+* longer describe its data).
 */
 function distributeMinSegmentLengths(lengths, minima) {
 	const result = [...lengths];
 	let deficit = 0;
 	let surplus = 0;
 	lengths.forEach((length, index) => {
-		if (length < minima[index]) {
-			deficit += minima[index] - length;
-			result[index] = minima[index];
-		} else surplus += length - minima[index];
+		const minimum = minima[index] ?? 0;
+		if (length < minimum) {
+			deficit += minimum - length;
+			result[index] = minimum;
+		} else surplus += length - minimum;
 	});
 	if (deficit === 0 || surplus < deficit) return null;
 	const donors = result.map((length, index) => ({
 		index,
-		slack: length - minima[index]
+		slack: length - (minima[index] ?? 0)
 	})).filter((donor) => donor.slack > 0).sort((a, b) => b.slack - a.slack);
 	let remainingSlack = surplus;
 	for (const donor of donors) {
 		if (deficit <= 0) break;
 		const share = Math.min(donor.slack, Math.ceil(donor.slack / remainingSlack * deficit));
-		result[donor.index] -= share;
+		result[donor.index] = (result[donor.index] ?? 0) - share;
 		remainingSlack -= donor.slack;
 		deficit -= share;
 	}
 	return result;
 }
 /**
-* Snapped pixel spans for one bar's segments, with {@link minSegmentLength}
-* enforced.
-*
-* The enforcement re-lays the affected side of the stack *cumulatively* from the
-* baseline outward, rather than nudging each segment's own edges. That is the
-* only way to grow a sliver without breaking the invariant the rounding above
-* exists to protect: each segment starts exactly where the previous one ended,
-* so there is still one shared edge per seam and no overlap. And because the
-* redistribution is zero-sum, the side's total extent is unchanged — the cap
-* still lands on the same axis value it did before.
+* Snapped pixel spans for one bar's segments with `minSegmentLength` enforced. Enforcement re-lays
+* the affected side cumulatively from the baseline outward, so each segment still starts where the
+* previous one ended and the side's total extent is unchanged.
 */
 function resolveSegmentExtents(intervals, valueScale, minSegmentLength) {
 	const extents = intervals.map(({ from, to }) => ({
@@ -171,14 +187,19 @@ function resolveSegmentExtents(intervals, valueScale, minSegmentLength) {
 			interval,
 			index
 		})).filter(({ interval }) => Math.sign(interval.value) === sign).map(({ index }) => index);
-		if (indices.length === 0) return;
-		const adjusted = distributeMinSegmentLengths(indices.map((index) => Math.abs(extents[index].fromY - extents[index].toY)), indices.map((_, position) => position === 0 ? minSegmentLength : minSegmentLength + 2));
+		const firstIndex = indices[0];
+		if (firstIndex === void 0) return;
+		const adjusted = distributeMinSegmentLengths(indices.map((index) => {
+			const extent = extents[index];
+			return extent ? Math.abs(extent.fromY - extent.toY) : 0;
+		}), indices.map((_, position) => position === 0 ? minSegmentLength : minSegmentLength + STACK_SEGMENT_GAP));
 		if (!adjusted) return;
 		const direction = sign > 0 ? -1 : 1;
-		const first = extents[indices[0]];
+		const first = extents[firstIndex];
+		if (!first) return;
 		let cursor = sign > 0 ? first.fromY : first.toY;
 		indices.forEach((index, position) => {
-			const next = cursor + direction * adjusted[position];
+			const next = cursor + direction * (adjusted[position] ?? 0);
 			extents[index] = {
 				fromY: cursor,
 				toY: next
@@ -190,32 +211,29 @@ function resolveSegmentExtents(intervals, valueScale, minSegmentLength) {
 	adjustSide(-1);
 	return extents;
 }
-function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, isStacked, domain, resolveColor, minSegmentLength }) {
-	const valueScale = buildValueScale(domain, [plotHeight, 0]);
+/** @internal Builds a bar chart's rectangles and bands. */
+function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, domain, resolveColor, minSegmentLength }) {
+	const scale = buildValueScale(domain, [plotHeight, 0]);
+	const valueScale = (value) => scale(value);
 	const baselineY = valueScale(0);
 	const rects = [];
 	const bands = [];
 	if (groups.length === 0 || plotWidth <= 0 || plotHeight <= 0) return {
 		rects,
 		bands,
-		valueScale
+		valueScale,
+		step: 0
 	};
-	const { groupGap, barGap } = getBarSpacing(plotWidth, groups.reduce((sum, group) => sum + group.bars.length, 0));
 	const step = plotWidth / groups.length;
-	const effectiveGroupGap = Math.min(groupGap, step * MAX_GAP_SHARE);
-	const groupWidth = Math.max(1, step - effectiveGroupGap);
 	groups.forEach((group, groupIndex) => {
-		const bandX = groupIndex * step;
-		const groupX = bandX + (step - groupWidth) / 2;
-		const barCount = Math.max(1, group.bars.length);
-		const effectiveBarGap = Math.min(barGap, groupWidth / barCount * MAX_GAP_SHARE);
-		const slotWidth = (groupWidth - (barCount - 1) * effectiveBarGap) / barCount;
-		const barWidth = Math.max(1, Math.min(slotWidth * BAR_WIDTH_RATIO, 44));
-		const radius = barWidth < 40 ? 2 : 4;
-		const barsStartX = groupX + (groupWidth - (barCount * barWidth + (barCount - 1) * effectiveBarGap)) / 2;
+		const bandX = Math.round(groupIndex * step);
+		const bandWidth = Math.round((groupIndex + 1) * step) - bandX;
+		const { barGap, barWidth, offset } = layoutBarSlot(step, Math.max(1, group.bars.length));
+		const radius = barWidth < 40 ? BAR_RADIUS_NARROW : BAR_RADIUS;
+		const barsStartX = Math.round(groupIndex * step + offset);
 		let groupTopY = baselineY;
 		group.bars.forEach((bar, barIndex) => {
-			const barX = barsStartX + barIndex * (barWidth + effectiveBarGap);
+			const barX = barsStartX + barIndex * (barWidth + barGap);
 			const values = bar.components.map((component) => sanitizeValue(component.value));
 			const intervals = stackComponents(values, normalization);
 			const isStackedBar = bar.components.length > 1;
@@ -235,20 +253,22 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 				}
 			});
 			bar.components.forEach((component, componentIndex) => {
-				const { value } = intervals[componentIndex];
-				if (value === 0) return;
+				const interval = intervals[componentIndex];
+				const extent = extents[componentIndex];
+				if (!interval || !extent || interval.value === 0) return;
+				const { value } = interval;
 				const isNegative = value < 0;
 				const isCap = componentIndex === (isNegative ? lastNegative : lastPositive);
-				const { fromY, toY } = extents[componentIndex];
-				const topY = Math.min(fromY, toY);
-				const rawHeight = Math.abs(fromY - toY);
-				const shave = componentIndex === (isNegative ? firstNegative : firstPositive) ? 0 : 2;
-				const height = Math.max(isStackedBar ? 0 : 2, rawHeight - shave);
+				const topY = Math.min(extent.fromY, extent.toY);
+				const rawHeight = Math.abs(extent.fromY - extent.toY);
+				const shave = componentIndex === (isNegative ? firstNegative : firstPositive) ? 0 : STACK_SEGMENT_GAP;
+				const height = Math.max(isStackedBar ? 0 : MIN_BAR_LENGTH, rawHeight - shave);
 				const y = isNegative ? topY + shave : topY;
 				if (!isNegative && y < groupTopY) groupTopY = y;
 				rects.push({
 					id: `${groupIndex}:${barIndex}:${component.key}`,
 					groupIndex,
+					barIndex,
 					metric: bar.metric,
 					componentKey: component.key,
 					label: component.label,
@@ -260,10 +280,10 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 					color: resolveColor({
 						metric: bar.metric,
 						componentIndex,
-						isStacked,
-						explicit: component.color
+						explicit: component.color,
+						hex: component.hex
 					}),
-					corners: isCap ? isNegative ? BarCorners.BOTTOM : BarCorners.TOP : BarCorners.NONE,
+					corners: isCap ? isNegative ? "BOTTOM" : "TOP" : "NONE",
 					radius
 				});
 			});
@@ -273,17 +293,18 @@ function buildBarChartGeometry({ groups, plotWidth, plotHeight, normalization, i
 			label: group.label,
 			x: bandX,
 			y: 0,
-			width: step,
+			width: bandWidth,
 			height: plotHeight,
-			anchorX: bandX + step / 2,
+			anchorX: groupIndex * step + step / 2,
 			anchorY: groupTopY
 		});
 	});
 	return {
 		rects,
 		bands,
-		valueScale
+		valueScale,
+		step
 	};
 }
 //#endregion
-export { buildBarChartGeometry, getBarValueDomain, roundedRectPath };
+export { BarCorners, MAX_BAR_WIDTH, buildBarChartGeometry, getBarValueDomain, isBarChartStacked, layoutBarSlot, layoutBars, roundedRectPath };