@tangle-network/charts 0.9.1 → 0.11.0

package/README.md

@@ -302,6 +302,12 @@ Selection is controlled by bucket ID. Hover, focus, click, Enter, Space and touc
 
 **Provenance and extraction boundary.** Sparkline comes from `tangle-network/agent-app`, `src/web-react/sparkline.tsx` and its tests at `a8947683a050394d13848bb7e4cbbe7cf08d208e`. Stacked SVG rendering and select-never-toggle regressions come from merged ADC [PR #8746](https://github.com/tangle-network/agent-dev-container/pull/8746), `products/platform/web/src/client/components/UsageChartSvg.tsx` and `UsageChart.test.tsx` at `a1c3958fd73a3894d4515f9dc476dae9ace30ce0`. Platform's aggregation, currency/product/category functions, legend composition and portal-tooltip positioning are **not** copied. The persistent readout and native pointer popover avoid a new React DOM peer. This is not a new universal usage-chart API, a zero-baseline replacement for SpendCard's sparkline, or a consumer migration; Platform and Agent App are not edited.
 
+### Thousands of dots: `DotMap` and `unitDotLayout`
+
+`unitDotLayout(groups, width, height)` places one dot per item in a rectangle per group, the rectangles a squarified treemap sized by count, so a fleet of 6,000 runs reads as its groups first and its items second with no item hidden in an aggregate. It returns the rectangles, every item's `x, y` (interleaved, groups in input order) and a radius per item from its group's cell.
+
+`DotMap` draws those positions, or a semantic map's `x, y`, on one canvas: wheel or pinch zooms about the pointer, drag pans, a click selects, double-click or `0` fits, and `+ - ←→↑↓` work from the keyboard. Colours are palette indexes (`colors: Uint8Array` into `palette`, CSS colours or custom properties), so a lens change repaints without a new layout; `dimmed` greys filtered points, `radii` may vary per point (a dot sized by its run's hours inside its cell), and `labels` name clusters without overlapping. Hit tests use a uniform grid, one path is filled per colour, and the canvas records its last frame's draw time in `data-frame-ms`. The caller owns hover text (`describe`), selection, the legend and the details.
+
 ### React and package-boundary checks
 
 ```sh

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as IntervalMethod, C as BreakdownInput, D as Exclusion, E as Estimate, F as Tier, I as TierCounts, L as isRefusal, M as RateRow, N as Refusal, O as Figure, P as Setup, S as YTick, T as CostBasis, _ as MarkVerdict, a as timeline, b as YScale, c as OUTCOME_ORDER, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, j as MatrixCell, k as Interval, l as TickOutcome, m as ChartBand, n as TimelineOptions, o as CHECKER_HUES, p as BandKind, r as TimelineSpan, s as OUTCOME_COLORS, t as TimelineLane, u as checkerColor, v as MarkerShape, w as ComparisonRow, x as YTarget, y as XCategory } from "./timeline-CNHABOS1.js";
+import { A as IntervalMethod, C as BreakdownInput, D as Exclusion, E as Estimate, F as Tier, I as TierCounts, L as isRefusal, M as RateRow, N as Refusal, O as Figure, P as Setup, S as YTick, T as CostBasis, _ as MarkVerdict, a as timeline, b as YScale, c as OUTCOME_ORDER, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, j as MatrixCell, k as Interval, l as TickOutcome, m as ChartBand, n as TimelineOptions, o as CHECKER_HUES, p as BandKind, r as TimelineSpan, s as OUTCOME_COLORS, t as TimelineLane, u as checkerColor, v as MarkerShape, w as ComparisonRow, x as YTarget, y as XCategory } from "./timeline-irTei5Fl.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -232,6 +232,10 @@ interface TimeSeriesOptions {
   bands?: ChartBand[];
   /** What each point `marker` stands for, such as `{ circle: "check", diamond: "gate" }`, named in the figure's key. */
   markers?: Partial<Record<MarkerShape, string>>;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
+  /** false leaves out the series legend under the plot, for a caller that names its series itself. The verdict key stays. */
+  legend?: boolean;
   id?: string;
 }
 export declare function timeSeries(rows: TimeSeriesRow[], o: TimeSeriesOptions): Figure | Refusal;
@@ -291,8 +295,53 @@ interface SmallMultiplesOptions {
   markers?: Partial<Record<MarkerShape, string>>;
   formatX?: (value: number) => string;
   formatY?: (value: number) => string;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
   id?: string;
 }
 export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;
 //#endregion
-export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
+//#region src/unit-dots.d.ts
+/**
+ * Unit dots: one dot per item, packed in a rectangle per group, the rectangles laid out as a squarified treemap sized
+ * by count. A fleet of 6,000 runs reads as its groups first and its items second, with no item hidden in an
+ * aggregate. Positions are in layout units (the `width` and `height` given); a canvas scales them to its pixels.
+ */
+interface DotGroup {
+  id: string;
+  label: string;
+  /** Items in this group; their positions come out in group order, then item order within the group. */
+  count: number;
+}
+interface DotGroupRect {
+  id: string;
+  label: string;
+  count: number;
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+interface UnitDotLayout {
+  rects: DotGroupRect[];
+  /** x, y of every item, interleaved, groups in input order. */
+  positions: Float32Array;
+  /** Each item's dot radius in layout units: one size per group, from its cell. */
+  radii: Float32Array;
+}
+interface UnitDotOptions {
+  /** Space between rectangles. Default 6. */
+  gap?: number;
+  /** Space above each rectangle's dots for its label. Default 16. */
+  header?: number;
+  /** The largest dot radius, so a group of three is not three giant discs. Default 6. */
+  maxRadius?: number;
+}
+/**
+ * Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+ * items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+ * treemap places larger groups first.
+ */
+export declare function unitDotLayout(groups: DotGroup[], width: number, height: number, o?: UnitDotOptions): UnitDotLayout;
+//#endregion
+export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as esc, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as capitalize, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as wrap, b as TIERS_BEST_FIRST, d as drawGroups, et as fitLines, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textWidth, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as plural, o as checkerColor, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as textBlock, s as EVENTS_READ, t as timeline, tt as listJoin, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-BAwebuqb.js";
+import { $ as capitalize, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as wideWidth, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as textWidth, b as TIERS_BEST_FIRST, d as drawGroups, et as esc, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textBlock, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as listJoin, o as checkerColor, ot as wrap, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as plural, s as EVENTS_READ, t as timeline, tt as fitLines, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-ApeJgFac.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -2701,7 +2701,7 @@ function timeSeries(rows, o) {
 		lede: `${measured.length} of ${flat.length} positions have a recorded value.${stripped.length ? ` ${stripped.length} recorded ${plural(stripped.length, "verdict")} without a value ${stripped.length === 1 ? "sits" : "sit"} in the strip under the plot.` : ""}`,
 		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${recorded ? " A filled mark is a pass, an outline a fail, a dashed outline undecided; * is not comparable with the goal and ? of unknown comparability; ×n counts the recorded rows a mark stands for." : ""}${stripped.length ? ` Hatched squares under the plot are verdicts recorded without a value (${stripName}).` : ""}${o.y.targets?.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${groups ? " Brackets above the plot group positions, such as one run's releases." : ""}${hasEvents ? ` ${EVENTS_READ}` : ""}`,
 		svg: {
-			wide: plot(rows, o, 720, xLabel, yLabel, grid, facts, stripName),
+			wide: plot(rows, o, wideWidth(o.width), xLabel, yLabel, grid, facts, stripName),
 			narrow: plot(rows, o, 358, xLabel, yLabel, grid, facts, stripName),
 			interactive: true
 		},
@@ -2835,7 +2835,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 		marks += wrapSeries(lines);
 		points += wrapSeries(own);
 		const legendKey = `${row.label}\u0000${row.colorIndex ?? `s${seriesIndex}`}`;
-		if (legend.has(legendKey)) continue;
+		if (o.legend === false || legend.has(legendKey)) continue;
 		legend.add(legendKey);
 		const label = wrap(row.label, right - left - 32, 12, "sans", 8);
 		marks += wrapSeries(`<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + (rows.length > 1 ? `<path class="tgc-series-key" d="${markerPath(row.colorIndex !== void 0 ? "circle" : MARKER_SHAPES[ord % MARKER_SHAPES.length], left + 12, legendY - 4, 3.5)}"/>` : "")) + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
@@ -3015,7 +3015,7 @@ function smallMultiples(panels, o) {
 		lede: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} have data${ended.length ? `; ${ended.length} ended before the window closed` : ""}.`,
 		read: `Each panel is one ${noun} on ${o.shared === "both" ? "the same x and y axes" : "the same x axis; y axes differ per panel"}. Hatched panels have no data and name the reason. A vertical rule with a cross marks where a line ended.${recorded ? " A filled mark is a pass, an outline a fail; * is not comparable with the goal and ? of unknown comparability; ✓ marks a solve and ✕ a failing candidate." : ""}${targets.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${panels.some((p) => p.scale === "log") ? " Log-scale panels say so in their y labels." : ""}`,
 		svg: {
-			wide: draw(panels, o, 720, xLabel, yLabelOf, marksOf),
+			wide: draw(panels, o, wideWidth(o.width), xLabel, yLabelOf, marksOf),
 			narrow: draw(panels, o, 358, xLabel, yLabelOf, marksOf)
 		},
 		table: table(`${capitalize(o.y.label)} by ${o.x.label} and ${noun}`, [
@@ -3183,4 +3183,139 @@ function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
 	return svgRoot(width, height + key.height, body + key.svg);
 }
 //#endregion
-export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };
+//#region src/unit-dots.ts
+/** Squarified treemap (Bruls, Huizing and van Wijk) of positive values, largest first, into the rectangle. */
+function squarify(values, x, y, w, h) {
+	const out = new Array(values.length);
+	const total = values.reduce((sum, value) => sum + value, 0);
+	if (!total) return values.map(() => [
+		x,
+		y,
+		0,
+		0
+	]);
+	const scale = w * h / total;
+	let i = 0;
+	while (i < values.length) {
+		const side = Math.min(w, h);
+		let row = [i];
+		let rowSum = values[i] * scale;
+		const worst = (sum, items) => {
+			const areas = items.map((k) => values[k] * scale);
+			const max = Math.max(...areas), min = Math.min(...areas);
+			return Math.max(side * side * max / (sum * sum), sum * sum / (side * side * min));
+		};
+		let j = i + 1;
+		while (j < values.length) {
+			const next = rowSum + values[j] * scale;
+			if (worst(next, [...row, j]) > worst(rowSum, row)) break;
+			row = [...row, j];
+			rowSum = next;
+			j++;
+		}
+		const thickness = rowSum / side;
+		let offset = 0;
+		for (const k of row) {
+			const length = values[k] * scale / thickness;
+			out[k] = w >= h ? [
+				x,
+				y + offset,
+				thickness,
+				length
+			] : [
+				x + offset,
+				y,
+				length,
+				thickness
+			];
+			offset += length;
+		}
+		if (w >= h) {
+			x += thickness;
+			w -= thickness;
+		} else {
+			y += thickness;
+			h -= thickness;
+		}
+		i = j;
+	}
+	return out;
+}
+/**
+* Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+* items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+* treemap places larger groups first.
+*/
+function unitDotLayout(groups, width, height, o = {}) {
+	const gap = o.gap ?? 6, header = o.header ?? 16, maxRadius = o.maxRadius ?? 6;
+	const order = groups.map((group, index) => ({
+		group,
+		index
+	})).filter(({ group }) => group.count > 0).sort((a, b) => b.group.count - a.group.count);
+	const totalItems = order.reduce((sum, item) => sum + item.group.count, 0) || 1;
+	const headerShare = header * width * .25 / (width * height) * totalItems;
+	const boxes = squarify(order.map(({ group }) => group.count + headerShare), 0, 0, width, height);
+	const rects = new Array(groups.length);
+	const total = groups.reduce((sum, group) => sum + Math.max(0, group.count), 0);
+	const positions = new Float32Array(total * 2);
+	const radii = new Float32Array(total);
+	const startOf = [];
+	let start = 0;
+	for (const group of groups) {
+		startOf.push(start);
+		start += Math.max(0, group.count);
+	}
+	order.forEach(({ group, index }, k) => {
+		const [bx, by, bw, bh] = boxes[k];
+		const x0 = bx + gap / 2, y0 = by + gap / 2, x1 = bx + bw - gap / 2, y1 = by + bh - gap / 2;
+		rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: group.count,
+			x0,
+			y0,
+			x1,
+			y1
+		};
+		const innerW = Math.max(1, x1 - x0 - 4), innerH = Math.max(1, y1 - y0 - header - 2);
+		let best = {
+			cols: 1,
+			cell: 0
+		};
+		const ideal = Math.max(1, Math.round(Math.sqrt(group.count * innerW / innerH)));
+		for (let cols = Math.max(1, ideal - 2); cols <= ideal + 2; cols++) {
+			const rows = Math.ceil(group.count / cols);
+			const cell = Math.min(innerW / cols, innerH / rows);
+			if (cell > best.cell) best = {
+				cols,
+				cell
+			};
+		}
+		const r = Math.min(maxRadius, best.cell * .4);
+		for (let item = 0; item < group.count; item++) {
+			const col = item % best.cols, row = Math.floor(item / best.cols);
+			const p = startOf[index] + item;
+			positions[p * 2] = x0 + 2 + (col + .5) * best.cell;
+			positions[p * 2 + 1] = y0 + header + (row + .5) * best.cell;
+			radii[p] = r;
+		}
+	});
+	groups.forEach((group, index) => {
+		if (!rects[index]) rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: 0,
+			x0: 0,
+			y0: 0,
+			x1: 0,
+			y1: 0
+		};
+	});
+	return {
+		rects,
+		positions,
+		radii
+	};
+}
+//#endregion
+export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline, unitDotLayout };

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { N as Refusal, O as Figure, S as YTick, _ as MarkVerdict, b as YScale, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, l as TickOutcome, m as ChartBand, n as TimelineOptions, p as BandKind, r as TimelineSpan, t as TimelineLane, v as MarkerShape, x as YTarget, y as XCategory } from "../timeline-CNHABOS1.js";
+import { N as Refusal, O as Figure, S as YTick, _ as MarkVerdict, b as YScale, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, l as TickOutcome, m as ChartBand, n as TimelineOptions, p as BandKind, r as TimelineSpan, t as TimelineLane, v as MarkerShape, x as YTarget, y as XCategory } from "../timeline-irTei5Fl.js";
 import { ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -248,12 +248,19 @@ export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, mark
 }): import("react").JSX.Element;
 //#endregion
 //#region src/react/figure-view.d.ts
+/** A figure drawn for a width: FigureView calls it with its container's measured width (at least 720 px). */
+type FigureAtWidth = (width: number) => Figure | Refusal;
 interface FigureViewProps {
-  figure: Figure | Refusal;
+  /**
+   * A figure, or a function that draws one for a width. With a function the wide render is drawn at the container's
+   * width, in 32 px steps, so its text and marks keep their set size on a wide page instead of being scaled up from 720.
+   * Memoize the function: a new function redraws the figure.
+   */
+  figure: Figure | Refusal | FigureAtWidth;
   /** `chart` (default) keeps the lede, reading and method in the disclosure; `report` also shows the finding and lede. */
   presentation?: 'chart' | 'report';
 }
-export declare function FigureView({ figure, presentation }: FigureViewProps): import("react").JSX.Element;
+export declare function FigureView({ figure: given, presentation }: FigureViewProps): import("react").JSX.Element;
 //#endregion
 //#region src/react/timeline-view.d.ts
 interface TimelineViewProps {
@@ -265,4 +272,50 @@ interface TimelineViewProps {
 }
 export declare function TimelineView({ lanes, options, defaultCollapsed, presentation }: TimelineViewProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, Figure, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+//#region src/react/dot-map.d.ts
+interface DotMapRect {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  label: string;
+  /** Shown after the label, such as the group's count. */
+  note?: string;
+}
+interface DotMapLabel {
+  x: number;
+  y: number;
+  text: string;
+}
+interface DotMapProps {
+  /** x and y of every point in layout units, interleaved. */
+  positions: Float32Array;
+  /** Each point's radius in layout units, or one radius for all. */
+  radii: Float32Array | number;
+  /** Each point's palette index. */
+  colors: Uint8Array;
+  /** CSS colours (custom properties allowed) by palette index. */
+  palette: readonly string[];
+  /** The box the positions are laid out in: [x0, y0, x1, y1]. The map fits it on first draw and on reset. */
+  extent: readonly [number, number, number, number];
+  /** Group rectangles drawn under the points, labelled at their top left. */
+  rects?: readonly DotMapRect[];
+  /** Labels drawn over the points, such as cluster names at their centroids. */
+  labels?: readonly DotMapLabel[];
+  /** 1 dims a point (filtered out); dimmed points draw first and faint. */
+  dimmed?: Uint8Array | null;
+  selected?: number | null;
+  /** Radius floor in screen pixels, so a dense semantic map stays visible zoomed out. Default 1.2. */
+  minPixelRadius?: number;
+  onHover?: (index: number | null) => void;
+  onSelect?: (index: number | null) => void;
+  /** Text for a point's hover card. */
+  describe?: (index: number) => string;
+  height?: number;
+  ariaLabel: string;
+}
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+export declare const DOT_MAP_CATEGORIES: readonly string[];
+export declare function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius, onHover, onSelect, describe, height, ariaLabel }: DotMapProps): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-BAwebuqb.js";
+import { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-ApeJgFac.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -1626,8 +1626,10 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 //#region src/react/figure-view.tsx
 /** Embeds a static Figure or Refusal in React: the wide or phone render chosen by the container's width, the data
 * table in a disclosure. The SVG and table strings come from this library's figure functions, which escape input. */
-function FigureView({ figure, presentation = "chart" }) {
+function FigureView({ figure: given, presentation = "chart" }) {
 	const [ref, width] = useWidth();
+	const drawn = width >= 720 ? Math.floor(width / 32) * 32 : 720;
+	const figure = useMemo(() => typeof given === "function" ? given(drawn) : given, [given, drawn]);
 	if (isRefusal(figure)) return /* @__PURE__ */ jsx("p", {
 		className: "ov-refusal",
 		role: "note",
@@ -1698,9 +1700,10 @@ function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
 	const [collapsed, setCollapsed] = useState(defaultCollapsed);
 	const box = useRef(null);
 	const refocus = useRef(null);
-	const figure = useMemo(() => timeline(lanes, {
+	const figure = useMemo(() => (width) => timeline(lanes, {
 		...options,
-		collapsed
+		collapsed,
+		width
 	}), [
 		lanes,
 		options,
@@ -1733,4 +1736,435 @@ function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/dot-map.tsx
+/**
+* A canvas of many dots (thousands of runs or agents) that pans and zooms at 60 fps: unit dots in group rectangles
+* (`unitDotLayout`) or a semantic map's x/y. Colours are palette indexes, so a lens change repaints without a new
+* layout; the caller owns hover and selection and draws its own legend and details.
+*/
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+const DOT_MAP_CATEGORIES = Object.freeze([
+	"var(--chart-category-1)",
+	"var(--chart-category-2)",
+	"var(--chart-category-3)",
+	"var(--chart-category-other)"
+]);
+/** Resolves CSS colours (including custom properties and light-dark()) to what the page computes, for the canvas. */
+function resolveColors(host, palette) {
+	const probe = document.createElement("span");
+	probe.style.display = "none";
+	host.appendChild(probe);
+	const out = palette.map((color) => {
+		probe.style.color = "";
+		probe.style.color = color;
+		return getComputedStyle(probe).color || color;
+	});
+	probe.remove();
+	return out;
+}
+/** A uniform grid over the layout, for hit tests in constant time per pointer move. */
+function gridIndex(positions, extent, cell) {
+	const [x0, y0, x1, y1] = extent;
+	const cols = Math.max(1, Math.ceil((x1 - x0) / cell));
+	const rows = Math.max(1, Math.ceil((y1 - y0) / cell));
+	const cells = /* @__PURE__ */ new Map();
+	for (let i = 0; i < positions.length / 2; i++) {
+		const c = Math.min(cols - 1, Math.max(0, Math.floor((positions[i * 2] - x0) / cell)));
+		const key = Math.min(rows - 1, Math.max(0, Math.floor((positions[i * 2 + 1] - y0) / cell))) * cols + c;
+		const list = cells.get(key);
+		if (list) list.push(i);
+		else cells.set(key, [i]);
+	}
+	return {
+		cols,
+		rows,
+		cell,
+		cells,
+		x0,
+		y0
+	};
+}
+function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius = 1.2, onHover, onSelect, describe, height = 560, ariaLabel }) {
+	const box = useRef(null);
+	const canvas = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height
+	});
+	const view = useRef({
+		scale: 1,
+		tx: 0,
+		ty: 0
+	});
+	const fitted = useRef("");
+	const frame = useRef(0);
+	const [hover, setHover] = useState(null);
+	const colorsResolved = useRef([]);
+	const count = positions.length / 2;
+	const maxRadius = useMemo(() => typeof radii === "number" ? radii : radii.reduce((max, r) => r > max ? r : max, 0), [radii]);
+	const index = useMemo(() => gridIndex(positions, extent, Math.max(maxRadius * 2, (extent[2] - extent[0]) / 200)), [
+		positions,
+		extent,
+		maxRadius
+	]);
+	useEffect(() => {
+		if (!box.current) return;
+		const observer = new ResizeObserver(([entry]) => setSize({
+			width: Math.floor(entry.contentRect.width),
+			height
+		}));
+		observer.observe(box.current);
+		return () => observer.disconnect();
+	}, [height]);
+	const fit = useCallback(() => {
+		const [x0, y0, x1, y1] = extent;
+		const pad = 8;
+		const scale = Math.min((size.width - 16) / Math.max(1e-9, x1 - x0), (size.height - 16) / Math.max(1e-9, y1 - y0));
+		view.current = {
+			scale,
+			tx: pad - x0 * scale + (size.width - 16 - (x1 - x0) * scale) / 2,
+			ty: pad - y0 * scale + (size.height - 16 - (y1 - y0) * scale) / 2
+		};
+	}, [extent, size]);
+	const draw = useCallback(() => {
+		frame.current = 0;
+		const element = canvas.current;
+		if (!element || !size.width) return;
+		const started = performance.now();
+		const dpr = window.devicePixelRatio || 1;
+		if (element.width !== Math.round(size.width * dpr) || element.height !== Math.round(size.height * dpr)) {
+			element.width = Math.round(size.width * dpr);
+			element.height = Math.round(size.height * dpr);
+		}
+		const ctx = element.getContext("2d");
+		if (!ctx) return;
+		if (!colorsResolved.current.length && box.current) colorsResolved.current = resolveColors(box.current, palette);
+		const { scale, tx, ty } = view.current;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, size.width, size.height);
+		const style = box.current ? getComputedStyle(box.current) : null;
+		const ink = style?.color || "#888";
+		if (rects?.length) {
+			ctx.lineWidth = 1;
+			ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+			for (const rect of rects) {
+				if (rect.x1 <= rect.x0) continue;
+				const x = rect.x0 * scale + tx, y = rect.y0 * scale + ty, w = (rect.x1 - rect.x0) * scale, h = (rect.y1 - rect.y0) * scale;
+				if (x > size.width || y > size.height || x + w < 0 || y + h < 0) continue;
+				ctx.globalAlpha = .35;
+				ctx.strokeStyle = ink;
+				ctx.strokeRect(x + .5, y + .5, w, h);
+				if (w > 36) {
+					ctx.globalAlpha = .8;
+					ctx.fillStyle = ink;
+					const text = rect.note ? `${rect.label} · ${rect.note}` : rect.label;
+					ctx.save();
+					ctx.beginPath();
+					ctx.rect(x, y, w - 4, 16);
+					ctx.clip();
+					ctx.fillText(text, x + 4, y + 12);
+					ctx.restore();
+				}
+			}
+			ctx.globalAlpha = 1;
+		}
+		const paths = /* @__PURE__ */ new Map();
+		const faint = new Path2D();
+		const r0 = typeof radii === "number" ? radii : 0;
+		for (let i = 0; i < count; i++) {
+			const x = positions[i * 2] * scale + tx;
+			const y = positions[i * 2 + 1] * scale + ty;
+			if (x < -8 || y < -8 || x > size.width + 8 || y > size.height + 8) continue;
+			const r = Math.max(minPixelRadius, (typeof radii === "number" ? r0 : radii[i]) * scale);
+			const path = dimmed?.[i] ? faint : paths.get(colors[i]) ?? paths.set(colors[i], new Path2D()).get(colors[i]);
+			path.moveTo(x + r, y);
+			path.arc(x, y, r, 0, Math.PI * 2);
+		}
+		ctx.globalAlpha = .18;
+		ctx.fillStyle = ink;
+		ctx.fill(faint);
+		ctx.globalAlpha = .92;
+		for (const [color, path] of paths) {
+			ctx.fillStyle = colorsResolved.current[color] ?? ink;
+			ctx.fill(path);
+		}
+		ctx.globalAlpha = 1;
+		if (selected !== null && selected !== void 0 && selected < count) {
+			const x = positions[selected * 2] * scale + tx, y = positions[selected * 2 + 1] * scale + ty;
+			const r = Math.max(4, (typeof radii === "number" ? r0 : radii[selected]) * scale + 3);
+			ctx.lineWidth = 2;
+			ctx.strokeStyle = ink;
+			ctx.beginPath();
+			ctx.arc(x, y, r, 0, Math.PI * 2);
+			ctx.stroke();
+		}
+		if (labels?.length) {
+			ctx.font = "600 12px ui-sans-serif, system-ui, sans-serif";
+			ctx.textAlign = "center";
+			ctx.lineWidth = 3;
+			const surface = style?.getPropertyValue("--dot-map-surface").trim() || style?.backgroundColor || "#161616";
+			const taken = [];
+			for (const label of labels) {
+				const x = label.x * scale + tx, y = label.y * scale + ty;
+				if (x < 0 || y < 0 || x > size.width || y > size.height) continue;
+				const w = ctx.measureText(label.text).width;
+				const box4 = [
+					x - w / 2 - 2,
+					y - 10,
+					x + w / 2 + 2,
+					y + 4
+				];
+				if (taken.some(([a, b, c, d]) => box4[0] < c && box4[2] > a && box4[1] < d && box4[3] > b)) continue;
+				taken.push(box4);
+				ctx.strokeStyle = surface;
+				ctx.strokeText(label.text, x, y);
+				ctx.fillStyle = ink;
+				ctx.fillText(label.text, x, y);
+			}
+			ctx.textAlign = "start";
+		}
+		element.dataset.frameMs = (performance.now() - started).toFixed(2);
+	}, [
+		size,
+		positions,
+		radii,
+		colors,
+		palette,
+		rects,
+		labels,
+		dimmed,
+		selected,
+		count,
+		minPixelRadius
+	]);
+	const schedule = useCallback(() => {
+		if (!frame.current) frame.current = requestAnimationFrame(draw);
+	}, [draw]);
+	useEffect(() => {
+		colorsResolved.current = [];
+	}, [palette]);
+	useEffect(() => {
+		if (!size.width) return;
+		const key = `${extent.join(",")}:${size.width}x${size.height}`;
+		if (fitted.current !== key) {
+			fit();
+			fitted.current = key;
+		}
+		schedule();
+	}, [
+		size,
+		extent,
+		fit,
+		schedule
+	]);
+	useEffect(() => schedule(), [schedule]);
+	useEffect(() => () => cancelAnimationFrame(frame.current), []);
+	const pick = useCallback((clientX, clientY) => {
+		const element = canvas.current;
+		if (!element) return null;
+		const bounds = element.getBoundingClientRect();
+		const { scale, tx, ty } = view.current;
+		const lx = (clientX - bounds.left - tx) / scale;
+		const ly = (clientY - bounds.top - ty) / scale;
+		const c = Math.floor((lx - index.x0) / index.cell);
+		const r = Math.floor((ly - index.y0) / index.cell);
+		let best = null;
+		let bestD = Infinity;
+		const reach = Math.max(1, Math.ceil(6 / (scale * index.cell)));
+		for (let dr = -reach; dr <= reach; dr++) for (let dc = -reach; dc <= reach; dc++) {
+			if (c + dc < 0 || r + dr < 0 || c + dc >= index.cols || r + dr >= index.rows) continue;
+			for (const i of index.cells.get((r + dr) * index.cols + (c + dc)) ?? []) {
+				const dx = positions[i * 2] - lx, dy = positions[i * 2 + 1] - ly;
+				const d = dx * dx + dy * dy;
+				const hit = Math.max(6 / scale, typeof radii === "number" ? radii : radii[i]);
+				if (d < bestD && d <= hit * hit) {
+					bestD = d;
+					best = i;
+				}
+			}
+		}
+		return best;
+	}, [
+		index,
+		positions,
+		radii
+	]);
+	const drag = useRef(null);
+	const touches = useRef(/* @__PURE__ */ new Map());
+	const pinch = useRef(null);
+	useEffect(() => {
+		const element = canvas.current;
+		if (!element) return;
+		const wheel = (event) => {
+			event.preventDefault();
+			const bounds = element.getBoundingClientRect();
+			const px = event.clientX - bounds.left, py = event.clientY - bounds.top;
+			const factor = Math.exp(-event.deltaY * .0015);
+			const v = view.current;
+			const scale = Math.min(v.scale * 400, Math.max(v.scale * .0025, v.scale * factor));
+			view.current = {
+				scale,
+				tx: px - (px - v.tx) / v.scale * scale,
+				ty: py - (py - v.ty) / v.scale * scale
+			};
+			schedule();
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		return () => element.removeEventListener("wheel", wheel);
+	}, [schedule]);
+	const hovered = hover ? describe?.(hover.index) ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: "tgc-dot-map",
+		style: {
+			position: "relative",
+			height
+		},
+		"data-points": count,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvas,
+			role: "img",
+			"aria-label": ariaLabel,
+			tabIndex: 0,
+			style: {
+				width: "100%",
+				height,
+				display: "block",
+				touchAction: "none",
+				cursor: hover ? "pointer" : "grab"
+			},
+			onPointerDown: (event) => {
+				touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					pinch.current = {
+						distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+						view: { ...view.current }
+					};
+					drag.current = null;
+				} else drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					moved: false
+				};
+				event.currentTarget.setPointerCapture(event.pointerId);
+			},
+			onPointerMove: (event) => {
+				if (touches.current.has(event.pointerId)) touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				const p = pinch.current;
+				if (p && touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					const bounds = event.currentTarget.getBoundingClientRect();
+					const mx = (a.x + b.x) / 2 - bounds.left, my = (a.y + b.y) / 2 - bounds.top;
+					const scale = p.view.scale * ((Math.hypot(a.x - b.x, a.y - b.y) || 1) / p.distance);
+					view.current = {
+						scale,
+						tx: mx - (mx - p.view.tx) / p.view.scale * scale,
+						ty: my - (my - p.view.ty) / p.view.scale * scale
+					};
+					schedule();
+					return;
+				}
+				const d = drag.current;
+				if (d) {
+					const dx = event.clientX - d.x, dy = event.clientY - d.y;
+					if (d.moved || Math.abs(dx) + Math.abs(dy) > 3) {
+						d.moved = true;
+						view.current = {
+							...view.current,
+							tx: view.current.tx + dx,
+							ty: view.current.ty + dy
+						};
+						d.x = event.clientX;
+						d.y = event.clientY;
+						schedule();
+						return;
+					}
+				}
+				const i = pick(event.clientX, event.clientY);
+				const bounds = event.currentTarget.getBoundingClientRect();
+				setHover(i === null ? null : {
+					index: i,
+					x: event.clientX - bounds.left,
+					y: event.clientY - bounds.top
+				});
+				onHover?.(i);
+			},
+			onPointerUp: (event) => {
+				touches.current.delete(event.pointerId);
+				if (pinch.current) {
+					if (touches.current.size < 2) pinch.current = null;
+					drag.current = null;
+					return;
+				}
+				const d = drag.current;
+				drag.current = null;
+				if (d && !d.moved) onSelect?.(pick(event.clientX, event.clientY));
+			},
+			onPointerCancel: (event) => {
+				touches.current.delete(event.pointerId);
+				if (touches.current.size < 2) pinch.current = null;
+				drag.current = null;
+			},
+			onPointerLeave: () => {
+				setHover(null);
+				onHover?.(null);
+			},
+			onDoubleClick: () => {
+				fit();
+				schedule();
+			},
+			onKeyDown: (event) => {
+				const v = view.current;
+				const zoom = (factor) => {
+					const cx = size.width / 2, cy = size.height / 2;
+					view.current = {
+						scale: v.scale * factor,
+						tx: cx - (cx - v.tx) / v.scale * v.scale * factor,
+						ty: cy - (cy - v.ty) / v.scale * v.scale * factor
+					};
+				};
+				if (event.key === "+" || event.key === "=") zoom(1.4);
+				else if (event.key === "-") zoom(1 / 1.4);
+				else if (event.key === "0") fit();
+				else if (event.key === "ArrowLeft") view.current = {
+					...v,
+					tx: v.tx + 60
+				};
+				else if (event.key === "ArrowRight") view.current = {
+					...v,
+					tx: v.tx - 60
+				};
+				else if (event.key === "ArrowUp") view.current = {
+					...v,
+					ty: v.ty + 60
+				};
+				else if (event.key === "ArrowDown") view.current = {
+					...v,
+					ty: v.ty - 60
+				};
+				else return;
+				event.preventDefault();
+				schedule();
+			}
+		}), hover && hovered && /* @__PURE__ */ jsx("div", {
+			className: "tgc-dot-map-tip",
+			role: "tooltip",
+			style: {
+				position: "absolute",
+				left: Math.min(hover.x + 12, Math.max(0, size.width - 300)),
+				top: hover.y + 12,
+				pointerEvents: "none"
+			},
+			children: hovered
+		})]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -73,3 +73,18 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }
 .ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: .9em; }
+
+/*
+ * DotMap: thousands of dots on one canvas. A categorical lens names at most three categories in colour, the first
+ * three slots of the dataviz reference palette, which pass its all-pairs colour-vision checks in both themes (a
+ * scatter puts every pair side by side); every other category is the neutral "other". :where() keeps them overridable.
+ */
+:where(:root) {
+  --chart-category-1: light-dark(#2a78d6, #3987e5);
+  --chart-category-2: light-dark(#eb6834, #d95926);
+  --chart-category-3: light-dark(#1baf7a, #199e70);
+  --chart-category-other: #898781;
+}
+.tgc-dot-map { color: var(--chart-live-muted, #8a8a8a); }
+.tgc-dot-map canvas:focus-visible { outline: 2px solid var(--chart-accent, #7760bd); outline-offset: 2px; }
+.tgc-dot-map-tip { z-index: 2; max-width: 300px; padding: 6px 9px; border-radius: 6px; background: var(--chart-tip-bg, #262626); color: var(--chart-tip-ink, #eee); font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; white-space: pre-line; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }

package/dist/{timeline-BAwebuqb.js → timeline-ApeJgFac.js}

@@ -300,14 +300,13 @@ function listJoin(items) {
 function capitalize(text) {
 	return text.charAt(0).toUpperCase() + text.slice(1);
 }
-//#endregion
-//#region src/svg.ts
 /**
-* SVG marks. Every mark carries a class and `figure.css` maps classes to the
-* `--chart-*` tokens, so a render holds no colour and follows the page theme.
-* Geometry stays in attributes, so an SVG shown without the stylesheet keeps
-* its layout.
+* The wide render's width for a caller-measured `width` (a figure's container): at least `WIDE`, whole pixels. A figure
+* drawn at its container's width keeps text and marks at their set size instead of being scaled up from 720 px.
 */
+function wideWidth(width) {
+	return width !== void 0 && Number.isFinite(width) && width > 720 ? Math.floor(width) : 720;
+}
 const r2 = (n) => Math.round(n * 100) / 100;
 function svgRoot(width, height, inner) {
 	const h = Math.ceil(height);
@@ -1112,7 +1111,7 @@ function timeline(lanes, o) {
 			...marks.length + bands.length ? [EVENTS_READ] : []
 		].join(" "),
 		svg: {
-			wide: draw(720),
+			wide: draw(wideWidth(o.width)),
 			narrow: draw(358),
 			...folds ? { interactive: true } : {}
 		},
@@ -1182,4 +1181,4 @@ function axisTicks(t0, t1, px, left, right, label) {
 	return fit([t0, t1]) ? [t0, t1] : [t0];
 }
 //#endregion
-export { esc as $, pts as A, MARKER_SHAPES as B, duration as C, kn as D, intervalName as E, tierSummary as F, line as G, hatch as H, tierTotal as I, rect as J, markerPath as K, usd as L, rateIntervalGap as M, rateOrder as N, pct as O, tierAtLeast as P, capitalize as Q, usdTick as R, drawable as S, intervalGap as T, hatchPath as U, circle as V, hbar as W, text as X, svgRoot as Y, titled as Z, markName as _, checkerClass as a, wrap as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, fitLines as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textWidth as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, plural as nt, checkerColor as o, eventsGap as p, polyline as q, OUTCOME_COLORS as r, textBlock as rt, EVENTS_READ as s, timeline as t, listJoin as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };
+export { capitalize as $, pts as A, MARKER_SHAPES as B, duration as C, kn as D, intervalName as E, tierSummary as F, line as G, hatch as H, tierTotal as I, rect as J, markerPath as K, usd as L, rateIntervalGap as M, rateOrder as N, pct as O, tierAtLeast as P, wideWidth as Q, usdTick as R, drawable as S, intervalGap as T, hatchPath as U, circle as V, hbar as W, text as X, svgRoot as Y, titled as Z, markName as _, checkerClass as a, textWidth as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, esc as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textBlock as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, listJoin as nt, checkerColor as o, wrap as ot, eventsGap as p, polyline as q, OUTCOME_COLORS as r, plural as rt, EVENTS_READ as s, timeline as t, fitLines as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };

package/dist/{timeline-CNHABOS1.d.ts → timeline-irTei5Fl.d.ts}

@@ -286,6 +286,8 @@ interface TimelineOptions {
    */
   collapsed?: string[];
   formatTime?: (ms: number) => string;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
   id?: string;
 }
 declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.9.1",
+  "version": "0.11.0",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",