@ixfx/components 0.4.3 → 0.5.0

package/dist/xy-axis-CxHC8z5E.js

@@ -0,0 +1,1849 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as getIcon } from "./registry-CkW7q09Q.js";
+import "./icons.js";
+import { LitElement, css, html, nothing, svg } from "lit";
+import { property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { Colour } from "@ixfx/visual";
+import { clamp, rangeStream } from "@ixfx/numbers";
+import { repeat } from "lit/directives/repeat.js";
+import { Easings } from "@ixfx/modulation";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/plots/colour-map.ts
+const DEFAULT_BASE = `oklch(60% 0.15 140)`;
+const DEFAULT_PALETTE = [
+	`green`,
+	`yellow`,
+	`red`
+];
+const _scaleCache = /* @__PURE__ */ new Map();
+function getScaleSteps(palette) {
+	const key = palette.join(`\x00`);
+	if (!_scaleCache.has(key)) _scaleCache.set(key, Colour.scale(palette, { stepsBetween: 99 }));
+	return _scaleCache.get(key);
+}
+/** Resolve a CSS custom property to its final value, handling var() references. */
+function resolveCssVariable(el, prop) {
+	const style = getComputedStyle(el);
+	let value = style.getPropertyValue(prop).trim();
+	const varRegex = /var\((--[\w-]+)(?:,\s*(.*))?\)/g;
+	for (let i = 0; i < 5 && value.includes(`var(`); i++) value = value.replace(varRegex, (_, varName, fallback) => {
+		const resolved = style.getPropertyValue(varName).trim();
+		if (resolved) return resolved;
+		if (fallback) return fallback.trim();
+		return ``;
+	});
+	return value;
+}
+/** Read the resolved --plot-color CSS variable from an element. */
+function readBaseColour(el) {
+	return resolveCssVariable(el, `--plot-color`) || DEFAULT_BASE;
+}
+/** Parse a comma-separated colour string attribute into an array. Falls back to default palette. */
+function parseColourScaleAttr(attr) {
+	if (!attr.trim()) return DEFAULT_PALETTE;
+	const parsed = attr.split(`,`).map((s) => s.trim()).filter(Boolean);
+	return parsed.length >= 2 ? parsed : DEFAULT_PALETTE;
+}
+/** Parse any CSS colour string to HSL scalars (h, s, l all 0..1). */
+function toHslScalar(css) {
+	try {
+		const hsl = Colour.HslSpace.fromCss(css, { scalar: true });
+		return {
+			h: hsl.h,
+			s: hsl.s,
+			l: hsl.l
+		};
+	} catch {
+		return {
+			h: .39,
+			s: .5,
+			l: .55
+		};
+	}
+}
+/** Apply easing or custom mapping to a 0..1 value. Returns clamped 0..1. */
+function applyMapping(v, config) {
+	const clamped = Math.max(0, Math.min(1, v));
+	if (config.easingName) try {
+		return Math.max(0, Math.min(1, Easings.get(config.easingName)(clamped)));
+	} catch {}
+	if (config.valueMap) return Math.max(0, Math.min(1, config.valueMap(clamped)));
+	return clamped;
+}
+/**
+* Compute the fill colour and opacity for a single data point.
+* @param scaledValue  Normalised value in 0..1 (data range for single-axis; age fraction for xy).
+* @param baseColour   Resolved base colour string (from --plot-color).
+* @param config       Colour map configuration.
+*/
+function computeColour(scaledValue, baseColour, config) {
+	const mapped = applyMapping(scaledValue, config);
+	switch (config.mode) {
+		case `fixed`: return {
+			fill: baseColour,
+			opacity: 1
+		};
+		case `opacity`: return {
+			fill: baseColour,
+			opacity: Math.max(.04, mapped)
+		};
+		case `hue`: {
+			const hsl = toHslScalar(baseColour);
+			return {
+				fill: `hsl(${Math.round(mapped * 360)}deg ${Math.round(hsl.s * 100)}% ${Math.round(hsl.l * 100)}%)`,
+				opacity: 1
+			};
+		}
+		case `saturation`: {
+			const hsl = toHslScalar(baseColour);
+			return {
+				fill: `hsl(${Math.round(hsl.h * 360)}deg ${Math.round(mapped * 100)}% ${Math.round(hsl.l * 100)}%)`,
+				opacity: 1
+			};
+		}
+		case `lightness`: {
+			const hsl = toHslScalar(baseColour);
+			return {
+				fill: `hsl(${Math.round(hsl.h * 360)}deg ${Math.round(hsl.s * 100)}% ${Math.round(mapped * 100)}%)`,
+				opacity: 1
+			};
+		}
+		case `scale`: {
+			const steps = getScaleSteps(config.palette.length >= 2 ? config.palette : DEFAULT_PALETTE);
+			return {
+				fill: steps[Math.min(steps.length - 1, Math.floor(mapped * steps.length))],
+				opacity: 1
+			};
+		}
+		default: return {
+			fill: baseColour,
+			opacity: 1
+		};
+	}
+}
+/**
+* Apply xy-axis age-style modification on top of a base ColourResult.
+* 'size' is not handled here — the caller adjusts the radius separately.
+*/
+function applyAgeModification(base, ageFraction, ageStyle) {
+	if (ageStyle === `opacity`) return {
+		...base,
+		opacity: base.opacity * Math.max(.08, ageFraction ** .6)
+	};
+	if (ageStyle === `desaturation`) {
+		const hsl = toHslScalar(base.fill);
+		const sFaded = hsl.s * ageFraction;
+		return {
+			fill: `hsl(${Math.round(hsl.h * 360)}deg ${Math.round(sFaded * 100)}% ${Math.round(hsl.l * 100)}%)`,
+			opacity: base.opacity
+		};
+	}
+	return base;
+}
+//#endregion
+//#region src/plots/data.ts
+/**
+* A data series
+*/
+var PlotDataSeries = class {
+	#rangeStream;
+	#rangeAuto;
+	#rangeManual;
+	#options;
+	/**
+	* Constructor.
+	*
+	* Default options:
+	* - `capacityLimit`: 100
+	* - `persistentScaling`: true
+	* - `fixedRange`: null
+	* @param options
+	*/
+	constructor(options = {}) {
+		this.values = [];
+		this.#rangeStream = rangeStream();
+		this.#rangeAuto = {
+			min: 0,
+			max: 0
+		};
+		this.#rangeManual = null;
+		this.#options = {
+			capacityLimit: 100,
+			persistentScaling: true,
+			fixedRange: null,
+			...options
+		};
+		if (this.#options.fixedRange !== null) this.#rangeManual = this.#options.fixedRange;
+	}
+	/**
+	* Sets a manual range, this disabled auto-scaling.
+	* Use {@link unsetRange} to re-enable auto-scaling.
+	* @param min
+	* @param max
+	*/
+	setRange(min, max) {
+		this.#rangeManual = {
+			min,
+			max
+		};
+	}
+	/**
+	* Disable the manual range
+	*/
+	unsetRange() {
+		this.#rangeManual = null;
+		this.#recompute();
+	}
+	get isAutoRange() {
+		return this.#rangeManual === null;
+	}
+	/**
+	* Adds a single value
+	* @param valueOrValues Value to add
+	*/
+	add(valueOrValues) {
+		if (typeof valueOrValues === `number`) {
+			this.values.push(valueOrValues);
+			if (this.isAutoRange) this.#rangeAuto = this.#rangeStream.seen(valueOrValues);
+		} else {
+			this.values.push(...valueOrValues);
+			if (this.isAutoRange) for (const v of valueOrValues) this.#rangeAuto = this.#rangeStream.seen(v);
+		}
+		if (this.values.length > this.#options.capacityLimit) {
+			this.values = this.values.slice(this.values.length - this.#options.capacityLimit);
+			if (!this.#options.persistentScaling && this.isAutoRange) this.#recompute();
+		}
+	}
+	#recompute() {
+		if (!this.#options.persistentScaling) this.#rangeStream = rangeStream();
+		for (let i = 0; i < this.values.length; i++) this.#rangeAuto = this.#rangeStream.seen(this.values[i]);
+	}
+	/**
+	* Sets the entire data series at once, replacing any existing data. If the number of values exceeds the `capacityLimit`, only the most recent values up to the limit are kept.
+	* @param values
+	*/
+	set(values) {
+		if (values.length > this.#options.capacityLimit) values = values.slice(values.length - this.#options.capacityLimit);
+		this.values = values;
+		this.#recompute();
+	}
+	/**
+	* Returns the manual range if this is in effect, or the automatic
+	*/
+	get range() {
+		if (this.#rangeManual) return this.#rangeManual;
+		return this.#rangeAuto;
+	}
+	/**
+	* Clear all data and reset range. If `persistentScaling` is _false_, also resets scaling to initial state.
+	* @returns _true_ if there was data to clear
+	*/
+	clear() {
+		const empty = this.values.length === 0;
+		this.values = [];
+		if (!this.#options.persistentScaling) this.#recompute();
+		return !empty;
+	}
+};
+//#endregion
+//#region src/util/is-numeric.ts
+function isNumeric(str) {
+	if (typeof str === `number`) return true;
+	if (typeof str !== `string`) return false;
+	const trimmed = str.trim();
+	return trimmed !== `` && !Number.isNaN(Number(trimmed));
+}
+//#endregion
+//#region src/util/tooltip.ts
+var _TooltipElement;
+let _baseStylesInjected = false;
+function ensureBaseTooltipStyles() {
+	if (_baseStylesInjected) return;
+	_baseStylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    ixfx-tooltip {
+      display: inline-block;
+      background: var(--surface-5);
+      color: var(--surface-5-text);
+      border: var(--border);
+      border-radius: var(--radius-l, 6px);
+      box-shadow: var(--shadow-m);
+      padding: var(--space-s, 4px);
+      font-size: 10px;
+      font-family: var(--font-family, inherit);
+    }
+    ixfx-tooltip .tooltip-type-number {
+      font-family: var(--font-mono, ui-monospace, monospace);
+    }
+  `;
+	document.head.appendChild(style);
+}
+let TooltipElement = class TooltipElement extends LitElement {
+	static {
+		_TooltipElement = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.valueFormatTooltip = _TooltipElement.defaultFormatter;
+		this.orientation = `top`;
+		this.anchor = `--tooltip`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		ensureBaseTooltipStyles();
+	}
+	static {
+		this.numberFormatter = (v) => Math.floor(v).toString();
+	}
+	static {
+		this.defaultFormatter = (v) => {
+			if (typeof v === `number`) {
+				if (Number.isInteger(v)) return v.toString();
+				return v.toFixed(2);
+			} else if (typeof v === `string`) return v;
+			else return JSON.stringify(v);
+		};
+	}
+	#renderIcon() {
+		if (!this.icon) return nothing;
+		if (this.icon.startsWith(`<svg`)) return html`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${unsafeHTML(this.icon)}</span>`;
+		if (!getIcon(this.icon)) return nothing;
+		return html`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
+	}
+	render() {
+		const classes = {
+			"tooltip": true,
+			"tooltip-orientation-top": this.orientation === `top`,
+			"tooltip-orientation-bottom": this.orientation === `bottom`,
+			"tooltip-orientation-right": this.orientation === `right`,
+			"tooltip-orientation-left": this.orientation === `left`,
+			"tooltip-type-text": true,
+			"tooltip-type-number": false,
+			"tooltip-style-bubble": true
+		};
+		let value = ``;
+		switch (typeof this.value) {
+			case `number`:
+				classes[`tooltip-type-number`] = true;
+				value = this.valueFormatTooltip(this.value);
+				break;
+			case `string`:
+				if (isNumeric(this.value)) {
+					classes[`tooltip-type-number`] = true;
+					value = this.valueFormatTooltip(Number.parseFloat(this.value));
+				} else value = this.value;
+				break;
+			default: value = JSON.stringify(this.value);
+		}
+		return html`<output style="--anchor-id: ${this.anchor}" class=${classMap(classes)}>${this.#renderIcon()}${value}</output>`;
+	}
+	createRenderRoot() {
+		return this;
+	}
+};
+__decorate([property({ type: String })], TooltipElement.prototype, "orientation", void 0);
+__decorate([property({ type: String })], TooltipElement.prototype, "anchor", void 0);
+__decorate([property()], TooltipElement.prototype, "value", void 0);
+__decorate([property({ type: String })], TooltipElement.prototype, "icon", void 0);
+TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+//#endregion
+//#region src/plots/svg-utils.ts
+let _tooltipEl = null;
+let _tooltipOwner = null;
+function ensureTooltip() {
+	if (_tooltipEl) return _tooltipEl;
+	const el = document.createElement(`div`);
+	el.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: var(--surface-5);
+    color: var(--surface-5-text);
+    border: var(--border);
+    border-radius: var(--radius-l, 6px);
+    box-shadow: var(--shadow-m);
+    padding: 2px 6px;
+    font-size: 10px;
+    font-family: ui-monospace, monospace;
+    opacity: 0;
+    transition: opacity 0.1s ease;
+  `;
+	document.body.appendChild(el);
+	_tooltipEl = el;
+	return el;
+}
+function showTooltip(owner, clientX, clientY, text) {
+	const el = ensureTooltip();
+	_tooltipOwner = owner;
+	el.textContent = text;
+	el.style.whiteSpace = `nowrap`;
+	el.style.left = `${clientX + 14}px`;
+	el.style.top = `${clientY + 14}px`;
+	el.style.opacity = `1`;
+}
+function showTooltipHTML(owner, clientX, clientY, html) {
+	const el = ensureTooltip();
+	_tooltipOwner = owner;
+	el.innerHTML = html;
+	el.style.whiteSpace = `normal`;
+	el.style.left = `${clientX + 14}px`;
+	el.style.top = `${clientY + 14}px`;
+	el.style.opacity = `1`;
+}
+function hideTooltip(owner) {
+	if (_tooltipOwner !== owner) return;
+	const el = ensureTooltip();
+	el.style.opacity = `0`;
+	_tooltipOwner = null;
+}
+let _bubbleEl = null;
+let _bubbleOwner = null;
+function ensureBubble() {
+	if (_bubbleEl) return _bubbleEl;
+	const el = document.createElement(`ixfx-tooltip`);
+	el.style.cssText = `
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.12s ease;
+  `;
+	document.body.appendChild(el);
+	_bubbleEl = el;
+	return el;
+}
+/**
+* Shows/repositions an `ixfx-tooltip` bubble.
+* `mainClient` centers the bubble along the given axis (e.g. a bar's midpoint);
+* `crossClient` places it along the other axis (e.g. an offset from the cursor).
+*/
+function showBubbleTooltip(owner, text, mainClient, crossClient, orientation) {
+	const el = ensureBubble();
+	_bubbleOwner = owner;
+	el.value = text;
+	if (orientation === `horizontal`) {
+		el.style.left = `${mainClient}px`;
+		el.style.top = `${crossClient}px`;
+		el.style.transform = `translate(-50%, -100%)`;
+	} else {
+		el.style.left = `${crossClient}px`;
+		el.style.top = `${mainClient}px`;
+		el.style.transform = `translate(0, -50%)`;
+	}
+	el.style.opacity = `1`;
+}
+function hideBubbleTooltip(owner) {
+	if (_bubbleOwner !== owner) return;
+	const el = ensureBubble();
+	el.style.opacity = `0`;
+	_bubbleOwner = null;
+}
+/** Stroke width proportional to the smaller dimension of the viewport. */
+function adaptiveStroke(width, height) {
+	return Math.max(1, Math.min(width, height) / 25);
+}
+/** Dot radius based on available space per data point and viewport height. */
+function adaptiveRadius(width, height, dataLength) {
+	if (dataLength === 0) return 3;
+	const widthPerPoint = width / dataLength;
+	return Math.max(1.5, Math.min(widthPerPoint * .45, height * .2, 8));
+}
+/** Normalize a value from [min, max] to [0, 1]. Returns 0.5 if range is zero. */
+function scaleValue(v, min, max) {
+	const range = max - min;
+	return range === 0 ? .5 : (v - min) / range;
+}
+//#endregion
+//#region src/plots/multi-axis.ts
+const PLOT_PALETTE = [
+	`oklch(60% 0.15 30)`,
+	`oklch(60% 0.15 90)`,
+	`oklch(60% 0.15 150)`,
+	`oklch(60% 0.15 210)`,
+	`oklch(60% 0.15 270)`,
+	`oklch(60% 0.15 330)`,
+	`oklch(60% 0.15 60)`,
+	`oklch(60% 0.15 180)`
+];
+let PlotMultiAxis = class PlotMultiAxis extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.layout = `overlap`;
+		this.gridMinWidth = 200;
+		this.valueFormat = (v) => v ? v.toFixed(2) : ``;
+		this.#instances = /* @__PURE__ */ new Map();
+		this.#seriesOrder = [];
+		this.#seriesSet = /* @__PURE__ */ new Set();
+		this.#pendingStyles = /* @__PURE__ */ new Map();
+	}
+	#instances;
+	#seriesOrder;
+	#seriesSet;
+	#pendingStyles;
+	/**
+	* Adds a single data point
+	* @param name Series name
+	* @param value Value
+	* @param witholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	addData(name, value, witholdRedraw = false) {
+		return this.#addToSeries(name, value, witholdRedraw);
+	}
+	setData(name, values, witholdRedraw = false) {
+		const [el, created] = this.#ensurePlot(name);
+		if (!this.#seriesSet.has(name)) {
+			this.#seriesSet.add(name);
+			this.#seriesOrder.push(name);
+		}
+		el.set(values, witholdRedraw);
+		if (created) this.requestUpdate();
+		return el;
+	}
+	setObjects(data, witholdRedraw = false) {
+		const entries = Object.entries(data);
+		for (const [name, vals] of entries) this.setData(name, vals, true);
+		if (witholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Calls redraw() on all subplots.
+	*/
+	redraw() {
+		for (const el of this.#instances.values()) el.redraw();
+	}
+	/**
+	* Adds a record of data points to the plot. Each key in the record corresponds to a series name, and its value is added as a data point to that series. If a series does not exist for a given key, it will be created.
+	* @param data Data to add
+	* @param witholdRedraw If _false_ (default) plot is automatically redrawn after adding the data. If _true_, plot is not redrawn automatically, and you need to call `redraw()` manually to update the plot after adding the data.
+	*/
+	addObject(data, witholdRedraw = false) {
+		const entries = Object.entries(data);
+		for (const [name, val] of entries) this.#addToSeries(name, val, true);
+		if (witholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Styles a series by setting CSS variables on the subplot.
+	* @param name Name of series
+	* @param styles Styles to apply
+	*/
+	styleSeries(name, styles) {
+		const normalised = {};
+		for (const [key, val] of Object.entries(styles)) normalised[key.startsWith(`--`) ? key : `--${key}`] = val;
+		const el = this.#instances.get(name);
+		if (!el) {
+			this.#pendingStyles.set(name, normalised);
+			return;
+		}
+		for (const [key, val] of Object.entries(normalised)) el.style.setProperty(key, val);
+	}
+	/**
+	* Clears data from all sub-plots
+	* @returns _True_ if there was data to clear
+	*/
+	clear() {
+		let cleared = false;
+		for (const el of this.#instances.values()) cleared = cleared || el.clear();
+		return cleared;
+	}
+	/**
+	* Clears data from a given series
+	* @param name Series name
+	* @returns _True_ if series was found and had data
+	*/
+	clearSeries(name) {
+		const el = this.#instances.get(name);
+		if (el) {
+			el.clear();
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Returns a copy of the series names
+	*/
+	get series() {
+		return [...this.#seriesOrder];
+	}
+	#addToSeries(name, valueOrValues, withholdRedraw = false) {
+		const [el, created] = this.#ensurePlot(name);
+		if (!this.#seriesSet.has(name)) {
+			this.#seriesSet.add(name);
+			this.#seriesOrder.push(name);
+		}
+		el.add(valueOrValues, withholdRedraw);
+		if (created) this.requestUpdate();
+		return el;
+	}
+	#ensurePlot(name) {
+		let el = this.#instances.get(name);
+		if (el) return [el, false];
+		el = document.createElement(`ixfx-plot-single-axis`);
+		el.tooltips = false;
+		this.#instances.set(name, el);
+		const colorIndex = this.#instances.size % PLOT_PALETTE.length;
+		el.style.setProperty(`--plot-color`, PLOT_PALETTE[colorIndex]);
+		const pending = this.#pendingStyles.get(name);
+		if (pending) {
+			for (const [key, val] of Object.entries(pending)) el.style.setProperty(key, val);
+			this.#pendingStyles.delete(name);
+		}
+		el.addEventListener(`plot-datapoint-click`, (e) => {
+			const ce = e;
+			this.dispatchEvent(new CustomEvent(`plot-datapoint-click`, {
+				detail: {
+					...ce.detail,
+					series: name
+				},
+				bubbles: true,
+				composed: true
+			}));
+		});
+		el.addEventListener(`plot-pointer-move`, (e) => {
+			const ce = e;
+			this.#onSubPlotPointerMove(ce.detail.clientX, ce.detail.clientY, ce.detail.index);
+		});
+		el.addEventListener(`plot-pointer-leave`, () => {
+			this.#onSubPlotPointerLeave();
+		});
+		return [el, true];
+	}
+	#onSubPlotPointerMove(clientX, clientY, index) {
+		if (index < 0) {
+			hideTooltip(this);
+			return;
+		}
+		const parts = [];
+		for (const [name, inst] of this.#instances) {
+			const val = inst.getValueAt(index);
+			if (val === void 0) continue;
+			const color = getComputedStyle(inst).getPropertyValue(`--plot-color`).trim();
+			parts.push(`<span style="color:${color}">${this.#escapeHTML(name)}</span> ${this.valueFormat(val)}`);
+		}
+		if (parts.length === 0) {
+			hideTooltip(this);
+			return;
+		}
+		showTooltipHTML(this, clientX, clientY, parts.join(`<br>`));
+	}
+	#onSubPlotPointerLeave() {
+		hideTooltip(this);
+	}
+	#escapeHTML(s) {
+		return s.replace(/&/g, `&amp;`).replace(/</g, `&lt;`).replace(/>/g, `&gt;`).replace(/"/g, `&quot;`);
+	}
+	render() {
+		const gridStyle = this.layout === `grid` ? `--grid-min-width: ${this.gridMinWidth}px` : ``;
+		return html`
+      <div
+        id="container"
+        class="layout layout-${this.layout}"
+        part="container"
+        style=${gridStyle}
+      >
+        ${repeat(this.#seriesOrder, (name) => name, (name) => this.#ensurePlot(name)[0])}
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 40px;
+      --plot-color: var(--accent);
+    }
+
+    #container {
+      width: 100%;
+      height: 100%;
+    }
+
+    #container.layout-overlap {
+      display: grid;
+    }
+    #container.layout-overlap > * {
+      grid-area: 1 / 1;
+      background: transparent;
+    }
+
+    #container.layout-horizontal {
+      display: flex;
+      flex-direction: row;
+      gap: var(--space-s, 4px);
+    }
+    #container.layout-horizontal > * {
+      flex: 1;
+      min-width: 0;
+    }
+
+    #container.layout-vertical {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-s, 4px);
+    }
+    #container.layout-vertical > * {
+      flex: 1;
+      min-height: 0;
+    }
+
+    #container.layout-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width, 200px), 1fr));
+      gap: var(--space-s, 4px);
+    }
+  `;
+	}
+};
+__decorate([property()], PlotMultiAxis.prototype, "layout", void 0);
+__decorate([property({
+	attribute: `grid-min-width`,
+	type: Number
+})], PlotMultiAxis.prototype, "gridMinWidth", void 0);
+PlotMultiAxis = __decorate([safeCustomElement(`ixfx-plot-multi-axis`)], PlotMultiAxis);
+//#endregion
+//#region src/plots/plot-histogram.ts
+let PlotHistogram = class PlotHistogram extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.resolution = .1;
+		this.capacity = 100;
+		this.title = ``;
+		this.paused = false;
+		this.valueTooltips = `hover`;
+		this.tooltipDelay = 400;
+		this.valueUpdateInterval = 500;
+		this.valueFormat = (valueMin, valueMax, frequency) => `${valueMin.toFixed(2)} - ${valueMax.toFixed(2)}: ${frequency}`;
+		this._width = 100;
+		this._height = 40;
+		this._hoveredIndex = null;
+		this._inlineOverlayText = null;
+		this.#series = new PlotDataSeries({
+			capacityLimit: 100,
+			persistentScaling: true
+		});
+		this.#hasProgrammaticData = false;
+		this.#tooltipIndex = null;
+		this.#tooltipVisible = false;
+		this.#tooltipShowTimer = null;
+		this.#tooltipHideTimer = null;
+		this.#tooltipPosition = null;
+		this.#valueRefreshTimer = null;
+		this.#onPointerMove = (e) => {
+			if (this.valueTooltips === `none`) return;
+			const index = this.#bucketIndexFromPointer(e.clientX, e.clientY);
+			const bucketIndex = index >= 0 ? index : null;
+			if (this.valueTooltips === `inline`) this.#setInlineIndex(bucketIndex);
+			else this.#updateBubbleTooltip(bucketIndex, e.clientX, e.clientY);
+		};
+		this.#onPointerLeave = () => {
+			if (this.valueTooltips === `none`) return;
+			if (this.valueTooltips === `inline`) this.#setInlineIndex(null);
+			else this.#updateBubbleTooltip(null, 0, 0);
+		};
+	}
+	#series;
+	#hasProgrammaticData;
+	#parseDeclarativeData(text) {
+		if (!text) return [];
+		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !Number.isNaN(n));
+	}
+	add(v) {
+		this.#hasProgrammaticData = true;
+		this.#series.add(v);
+		if (this.paused) return;
+		this.requestUpdate();
+	}
+	set(values) {
+		this.#hasProgrammaticData = true;
+		this.#series.set(values);
+		if (this.paused) return;
+		this.requestUpdate();
+	}
+	clear() {
+		this.#series.clear();
+		this.requestUpdate();
+	}
+	firstUpdated(_changed) {
+		this._width = this.clientWidth || 100;
+		this._height = this.clientHeight || 40;
+		new ResizeObserver((entries) => {
+			const e = entries[0];
+			this._width = e.contentRect.width;
+			this._height = e.contentRect.height;
+		}).observe(this);
+		if (!this.#hasProgrammaticData) {
+			const data = this.#parseDeclarativeData(this.textContent ?? ``);
+			if (data.length > 0) this.#series.set(data);
+		}
+		const declaredTitle = this.getAttribute(`title`);
+		if (declaredTitle !== null) {
+			this.title = declaredTitle;
+			this.removeAttribute(`title`);
+		}
+	}
+	updated(changed) {
+		if (changed.has(`capacity`)) {
+			const old = [...this.#series.values];
+			this.#series = new PlotDataSeries({
+				capacityLimit: this.capacity,
+				persistentScaling: true
+			});
+			if (old.length > 0) this.#series.set(old);
+		}
+		if (changed.has(`valueTooltips`)) this.#resetHoverState();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resetHoverState();
+	}
+	#readCssVar(name) {
+		return getComputedStyle(this).getPropertyValue(name).trim();
+	}
+	#getGapPx() {
+		const val = this.#readCssVar(`--plot-histogram-gap`);
+		if (val === ``) return 1;
+		const parsed = Number.parseFloat(val);
+		return Number.isFinite(parsed) ? Math.max(0, parsed) : 1;
+	}
+	#getBarLengthOverride() {
+		const val = this.#readCssVar(`--plot-histogram-bar-length`);
+		if (val === `` || val === `auto`) return null;
+		const parsed = Number.parseFloat(val);
+		return Number.isFinite(parsed) ? Math.max(0, Math.min(1, parsed)) : null;
+	}
+	#emitClick(i, valueMin, valueMax, relativeValue) {
+		this.dispatchEvent(new CustomEvent(`plot-bucket-click`, {
+			detail: {
+				bucketIndex: i,
+				valueMin,
+				valueMax,
+				relativeValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** Bucket layout + counts, shared by render() and pointer hit-testing. */
+	#computeGeometry() {
+		const { values, range } = this.#series;
+		const w = this._width;
+		const h = this._height;
+		const isHorizontal = this.orientation === `horizontal`;
+		const padding = Math.min(4, (isHorizontal ? h : w) * .05);
+		const dataMin = this.min ?? range.min;
+		const dataMax = this.max ?? range.max;
+		const dataSpan = dataMax - dataMin || 1;
+		const bucketCount = Math.max(1, Math.floor(1 / this.resolution));
+		const availableMain = (isHorizontal ? w : h) - padding * 2;
+		const availableCross = (isHorizontal ? h : w) - padding * 2;
+		const buckets = Array.from({ length: bucketCount }).fill(0);
+		for (const v of values) {
+			const normalized = (v - dataMin) / dataSpan;
+			const index = Math.min(bucketCount - 1, Math.max(0, Math.floor(normalized * bucketCount)));
+			buckets[index]++;
+		}
+		return {
+			w,
+			h,
+			isHorizontal,
+			padding,
+			dataMin,
+			dataMax,
+			dataSpan,
+			bucketCount,
+			availableMain,
+			availableCross,
+			buckets
+		};
+	}
+	/** Per-bucket rect geometry (SVG pixel coords) + value/count, shared by render() and pointer hit-testing. */
+	#computeBars() {
+		const { isHorizontal, padding, dataMin, dataSpan, bucketCount, availableMain, availableCross, buckets } = this.#computeGeometry();
+		const bucketSize = availableMain / bucketCount;
+		const gap = this.#getGapPx();
+		const barLengthOverride = this.#getBarLengthOverride();
+		const maxCount = Math.max(1, ...buckets);
+		return buckets.map((count, i) => {
+			const relativeValue = count / maxCount;
+			const barLen = barLengthOverride !== null ? barLengthOverride * availableCross : relativeValue * availableCross;
+			const valueMin = dataMin + i / bucketCount * dataSpan;
+			const valueMax = dataMin + (i + 1) / bucketCount * dataSpan;
+			if (isHorizontal) {
+				const x = padding + i * bucketSize;
+				const width = i === bucketCount - 1 ? Math.max(0, padding + availableMain - x) : Math.max(0, bucketSize - gap);
+				return {
+					count,
+					valueMin,
+					valueMax,
+					relativeValue,
+					x,
+					y: padding + availableCross - barLen,
+					width,
+					height: barLen
+				};
+			} else {
+				const y = padding + i * bucketSize;
+				const height = i === bucketCount - 1 ? Math.max(0, padding + availableMain - y) : Math.max(0, bucketSize - gap);
+				return {
+					count,
+					valueMin,
+					valueMax,
+					relativeValue,
+					x: padding,
+					y,
+					width: barLen,
+					height
+				};
+			}
+		});
+	}
+	/** Index of the bar rect under the pointer, or -1 if none (matches click hit-testing). */
+	#bucketIndexFromPointer(clientX, clientY) {
+		const rect = this.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		return this.#computeBars().findIndex((b) => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height);
+	}
+	#tooltipIndex;
+	#tooltipVisible;
+	#tooltipShowTimer;
+	#tooltipHideTimer;
+	#tooltipPosition;
+	#valueRefreshTimer;
+	#clearValueRefreshTimer() {
+		if (this.#valueRefreshTimer !== null) {
+			clearTimeout(this.#valueRefreshTimer);
+			this.#valueRefreshTimer = null;
+		}
+	}
+	/** While a bucket stays hovered, re-invoke `tick` at most every `valueUpdateInterval` ms, so a live-streaming bucket's displayed value stays fresh without updating on every single data point. */
+	#scheduleValueRefresh(tick) {
+		this.#clearValueRefreshTimer();
+		this.#valueRefreshTimer = window.setTimeout(() => {
+			this.#valueRefreshTimer = null;
+			tick();
+			this.#scheduleValueRefresh(tick);
+		}, this.valueUpdateInterval);
+	}
+	#clearBubbleTooltip() {
+		if (this.#tooltipShowTimer !== null) {
+			clearTimeout(this.#tooltipShowTimer);
+			this.#tooltipShowTimer = null;
+		}
+		if (this.#tooltipHideTimer !== null) {
+			clearTimeout(this.#tooltipHideTimer);
+			this.#tooltipHideTimer = null;
+		}
+		if (this.#tooltipVisible) {
+			this.#tooltipVisible = false;
+			hideBubbleTooltip(this);
+		}
+		this.#tooltipIndex = null;
+		this.#tooltipPosition = null;
+	}
+	#resetHoverState() {
+		this.#clearValueRefreshTimer();
+		this.#clearBubbleTooltip();
+		this._hoveredIndex = null;
+		this._inlineOverlayText = null;
+	}
+	/** Bubble position: centred on the bar along the bucket axis, offset from the cursor on the other axis. */
+	#tooltipPositionFor(bar, clientX, clientY) {
+		const hostRect = this.getBoundingClientRect();
+		const offset = 14;
+		if (this.orientation === `horizontal`) return {
+			mainClient: hostRect.left + bar.x + bar.width / 2,
+			crossClient: clientY - offset
+		};
+		return {
+			mainClient: hostRect.top + bar.y + bar.height / 2,
+			crossClient: clientX + offset
+		};
+	}
+	#refreshBubbleText() {
+		if (this.#tooltipIndex === null || !this.#tooltipVisible || !this.#tooltipPosition) return;
+		const bar = this.#computeBars()[this.#tooltipIndex];
+		if (!bar) return;
+		const text = this.valueFormat(bar.valueMin, bar.valueMax, bar.count);
+		showBubbleTooltip(this, text, this.#tooltipPosition.mainClient, this.#tooltipPosition.crossClient, this.orientation);
+	}
+	/**
+	* Drives the floating bubble tooltip. Only reacts to the hovered bucket *changing*
+	* (not every pointermove), so the tooltip doesn't track minor cursor movement.
+	* Debounces the initial show and the final hide; switching between buckets while
+	* already visible updates instantly. While a bucket stays hovered, its displayed
+	* value is refreshed at `valueUpdateInterval`.
+	*/
+	#updateBubbleTooltip(index, clientX, clientY) {
+		if (index === this.#tooltipIndex) return;
+		this.#tooltipIndex = index;
+		this.#clearValueRefreshTimer();
+		if (index === null) {
+			if (this.#tooltipShowTimer !== null) {
+				clearTimeout(this.#tooltipShowTimer);
+				this.#tooltipShowTimer = null;
+			}
+			if (this.#tooltipVisible) this.#tooltipHideTimer = window.setTimeout(() => {
+				this.#tooltipHideTimer = null;
+				this.#tooltipVisible = false;
+				this.#tooltipPosition = null;
+				hideBubbleTooltip(this);
+			}, this.tooltipDelay);
+			return;
+		}
+		if (this.#tooltipHideTimer !== null) {
+			clearTimeout(this.#tooltipHideTimer);
+			this.#tooltipHideTimer = null;
+		}
+		const bar = this.#computeBars()[index];
+		if (!bar) return;
+		const text = this.valueFormat(bar.valueMin, bar.valueMax, bar.count);
+		const position = this.#tooltipPositionFor(bar, clientX, clientY);
+		this.#tooltipPosition = position;
+		if (this.#tooltipVisible) {
+			showBubbleTooltip(this, text, position.mainClient, position.crossClient, this.orientation);
+			this.#scheduleValueRefresh(() => this.#refreshBubbleText());
+			return;
+		}
+		if (this.#tooltipShowTimer !== null) clearTimeout(this.#tooltipShowTimer);
+		this.#tooltipShowTimer = window.setTimeout(() => {
+			this.#tooltipShowTimer = null;
+			this.#tooltipVisible = true;
+			showBubbleTooltip(this, text, position.mainClient, position.crossClient, this.orientation);
+			this.#scheduleValueRefresh(() => this.#refreshBubbleText());
+		}, this.tooltipDelay);
+	}
+	#formatBarAt(index) {
+		const bar = this.#computeBars()[index];
+		return bar ? this.valueFormat(bar.valueMin, bar.valueMax, bar.count) : null;
+	}
+	/**
+	* Drives the `inline` overlay-text: instant on hover change, throttled while stationary
+	* over a live-changing bucket. `_inlineOverlayText` is cached reactive state rather than
+	* being recomputed fresh in render() on every data change, since add()/set() trigger their
+	* own re-render independent of the throttle timer.
+	*/
+	#setInlineIndex(index) {
+		if (index === this._hoveredIndex) return;
+		this._hoveredIndex = index;
+		this.#clearValueRefreshTimer();
+		if (index === null) {
+			this._inlineOverlayText = null;
+			return;
+		}
+		this._inlineOverlayText = this.#formatBarAt(index);
+		this.#scheduleValueRefresh(() => {
+			if (this._hoveredIndex !== null) this._inlineOverlayText = this.#formatBarAt(this._hoveredIndex);
+		});
+	}
+	#onPointerMove;
+	#onPointerLeave;
+	render() {
+		const { w, h, padding } = this.#computeGeometry();
+		const barsContent = this.#computeBars().map((b, i) => svg`
+      <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
+        style="--value: ${b.relativeValue}"
+        @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
+    `);
+		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
+		const overlayText = this.valueTooltips === `inline` && this._inlineOverlayText !== null ? this._inlineOverlayText : this.title;
+		const titleContent = overlayText ? svg`<text x=${padding + 2} y=${padding + Math.min(10, h * .6)}
+          class="overlay-text" fill=${textColor}
+          style="opacity: 0.6">${overlayText}</text>` : svg``;
+		return html`
+      <svg width=${w} height=${h} viewBox="0 0 ${w} ${h}"
+        xmlns="http://www.w3.org/2000/svg"
+        @pointermove=${this.#onPointerMove}
+        @pointerleave=${this.#onPointerLeave}>
+        <rect width=${w} height=${h} fill="transparent" />
+        ${barsContent}
+        ${titleContent}
+      </svg>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      min-width: 20px;
+      min-height: 20px;
+
+      --plot-histogram-fill: currentColor;
+      --plot-histogram-gap: 1px;
+      --plot-histogram-border-radius: 0;
+      --plot-histogram-bar-length: auto;
+    }
+
+    svg {
+      display: block;
+      cursor: crosshair;
+      overflow: visible;
+    }
+
+    rect.bar {
+      fill: var(--plot-histogram-fill, currentColor);
+      rx: var(--plot-histogram-border-radius, 0);
+      opacity: calc(0.15 + var(--value) * 0.85);
+    }
+
+    .overlay-text {
+      font-family: var(--font-mono, ui-monospace, monospace);
+      font-size: 9px;
+      dominant-baseline: hanging;
+      pointer-events: none;
+    }
+  `;
+	}
+};
+__decorate([property({ attribute: `orientation` })], PlotHistogram.prototype, "orientation", void 0);
+__decorate([property({ type: Number })], PlotHistogram.prototype, "resolution", void 0);
+__decorate([property({ type: Number })], PlotHistogram.prototype, "min", void 0);
+__decorate([property({ type: Number })], PlotHistogram.prototype, "max", void 0);
+__decorate([property({ type: Number })], PlotHistogram.prototype, "capacity", void 0);
+__decorate([property({ attribute: false })], PlotHistogram.prototype, "title", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PlotHistogram.prototype, "paused", void 0);
+__decorate([property({ attribute: `value-tooltips` })], PlotHistogram.prototype, "valueTooltips", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `tooltip-delay`
+})], PlotHistogram.prototype, "tooltipDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `value-update-interval`
+})], PlotHistogram.prototype, "valueUpdateInterval", void 0);
+__decorate([state()], PlotHistogram.prototype, "_width", void 0);
+__decorate([state()], PlotHistogram.prototype, "_height", void 0);
+__decorate([state()], PlotHistogram.prototype, "_hoveredIndex", void 0);
+__decorate([state()], PlotHistogram.prototype, "_inlineOverlayText", void 0);
+PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
+//#endregion
+//#region src/plots/single-axis.ts
+function buildLinePath(points) {
+	if (points.length === 0) return ``;
+	let d = `M ${points[0].x},${points[0].y}`;
+	for (let i = 1; i < points.length; i++) d += ` L ${points[i].x},${points[i].y}`;
+	return d;
+}
+function renderLine(points, cr, strokeW, round) {
+	return svg`<path
+    d=${buildLinePath(points)}
+    fill="none"
+    stroke=${cr.fill}
+    stroke-width=${strokeW}
+    opacity=${cr.opacity}
+    stroke-linecap=${round ? `round` : `butt`}
+    stroke-linejoin=${round ? `round` : `miter`}
+  />`;
+}
+function renderArea(points, cr, bottom, areaColor) {
+	if (points.length < 2) return svg``;
+	const lineD = buildLinePath(points);
+	const fillColor = areaColor || cr.fill;
+	const areaD = `${lineD} L ${points[points.length - 1].x},${bottom} L ${points[0].x},${bottom} Z`;
+	return svg`<path d=${areaD} fill=${fillColor} opacity=${cr.opacity * .2} />`;
+}
+function renderCircles(points, crs, radius, ageStyle) {
+	return points.map((p, i) => {
+		const r = ageStyle === `size` ? radius * Math.max(.2, p.ageFraction) : radius;
+		return svg`<circle cx=${p.x} cy=${p.y} r=${r} fill=${crs[i].fill} opacity=${crs[i].opacity} />`;
+	});
+}
+function renderSquares(points, crs, size, ageStyle) {
+	return points.map((p, i) => {
+		const s = ageStyle === `size` ? size * Math.max(.2, p.ageFraction) : size;
+		return svg`<rect
+      x=${p.x - s / 2} y=${p.y - s / 2}
+      width=${s} height=${s}
+      fill=${crs[i].fill} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+function renderVbars(points, crs, strokeW, bottom, ageStyle) {
+	return points.map((p, i) => {
+		const sw = ageStyle === `size` ? strokeW * Math.max(.2, p.ageFraction) : strokeW;
+		return svg`<line
+      x1=${p.x} y1=${bottom} x2=${p.x} y2=${p.y}
+      stroke=${crs[i].fill} stroke-width=${sw} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+function renderHbars(points, crs, strokeW, tickLen, ageStyle) {
+	return points.map((p, i) => {
+		const tl = ageStyle === `size` ? tickLen * Math.max(.2, p.ageFraction) : tickLen;
+		return svg`<line
+      x1=${p.x - tl / 2} y1=${p.y} x2=${p.x + tl / 2} y2=${p.y}
+      stroke=${crs[i].fill} stroke-width=${strokeW} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+function renderHistBottom(points, crs, barW, bottom, ageStyle) {
+	return points.map((p, i) => {
+		const w = ageStyle === `size` ? barW * Math.max(.2, p.ageFraction) : barW;
+		return svg`<rect
+      x=${p.x - w / 2} y=${p.y}
+      width=${w} height=${Math.max(1, bottom - p.y)}
+      fill=${crs[i].fill} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+function renderHistTop(points, crs, barW, top, ageStyle) {
+	return points.map((p, i) => {
+		const w = ageStyle === `size` ? barW * Math.max(.2, p.ageFraction) : barW;
+		return svg`<rect
+      x=${p.x - w / 2} y=${top}
+      width=${w} height=${Math.max(1, p.y - top)}
+      fill=${crs[i].fill} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+function renderHistMiddle(points, crs, barW, mid, ageStyle) {
+	return points.map((p, i) => {
+		const w = ageStyle === `size` ? barW * Math.max(.2, p.ageFraction) : barW;
+		return svg`<rect
+      x=${p.x - w / 2} y=${Math.min(p.y, mid)}
+      width=${w} height=${Math.max(1, Math.abs(p.y - mid))}
+      fill=${crs[i].fill} opacity=${crs[i].opacity}
+    />`;
+	});
+}
+let PlotSingleAxis = class PlotSingleAxis extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.drawStyle = `line-sharp`;
+		this.ageStyle = `none`;
+		this.title = ``;
+		this.precise = false;
+		this.tooltips = true;
+		this.capacity = 100;
+		this.rangeMin = NaN;
+		this.rangeMax = NaN;
+		this.persistentScale = true;
+		this.paused = false;
+		this.clickPauses = false;
+		this.shaded = false;
+		this.areaColor = ``;
+		this.colorMode = `fixed`;
+		this.colorEasing = ``;
+		this.colorScale = ``;
+		this.colorValueMap = null;
+		this._width = 100;
+		this._height = 40;
+		this.#series = new PlotDataSeries();
+		this.#hasProgrammaticData = false;
+		this.#lastClientX = null;
+		this.#lastClientY = null;
+		this.valueFormat = (v) => v ? v.toFixed(2) : ``;
+		this.#onPointerMove = (e) => {
+			this.#lastClientX = e.clientX;
+			this.#lastClientY = e.clientY;
+			this.#updateTooltip(e.clientX, e.clientY);
+			const index = this.#getIndexFromX(e.clientX, this.getBoundingClientRect());
+			this.dispatchEvent(new CustomEvent(`plot-pointer-move`, {
+				detail: {
+					clientX: e.clientX,
+					clientY: e.clientY,
+					index
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onPointerLeave = () => {
+			this.#lastClientX = null;
+			this.#lastClientY = null;
+			hideTooltip(this);
+			this.dispatchEvent(new CustomEvent(`plot-pointer-leave`, {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onClick = (e) => {
+			if (this.clickPauses) this.paused = !this.paused;
+			const index = this.#getIndexFromX(e.clientX, this.getBoundingClientRect());
+			if (index < 0) return;
+			this.dispatchEvent(new CustomEvent(`plot-datapoint-click`, {
+				detail: {
+					value: this.#series.values[index],
+					index
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	#series;
+	#hasProgrammaticData;
+	#lastClientX;
+	#lastClientY;
+	#parseDeclarativeData(text) {
+		if (!text) return [];
+		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !Number.isNaN(n));
+	}
+	/**
+	* Adds a value to the data series.
+	*
+	* Pass `withholdRedraw = true` to prevent automatic redraw after adding the value. In this case, call `redraw()` manually after adding all values to update the plot.
+	*
+	* Use {@link set} to replace the entire data series at once.
+	* @param valueOrValues Single value, or several values
+	* @param withholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	add(valueOrValues, withholdRedraw = false) {
+		this.#hasProgrammaticData = true;
+		this.#series.add(valueOrValues);
+		if (this.paused) return;
+		if (withholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Redraws the plot.
+	* Normally not needed, unless add() is called with withholdRedraw = true, or styleSeries() is used to update series styles.
+	*/
+	redraw() {
+		this.requestUpdate();
+		this.#updateTooltipAtLastPos();
+	}
+	/**
+	* Sets the entire data for a series at once, replacing contents.
+	*
+	* Use add() to add values one by one.
+	*
+	* Pass `withholdRedraw = true` to prevent automatic redraw after setting the values. In this case, call `redraw()` manually after setting the values to update the plot.
+	* @param values Values
+	* @param withholdRedraw If _false_ (default) plot is automatically redrawn
+	*/
+	set(values, withholdRedraw = false) {
+		this.#hasProgrammaticData = true;
+		this.#series.set(values);
+		if (this.paused) return;
+		if (withholdRedraw) return;
+		this.redraw();
+	}
+	/**
+	* Clears all data and redraws
+	*/
+	clear() {
+		const result = this.#series.clear();
+		this.requestUpdate();
+		return result;
+	}
+	firstUpdated(_changed) {
+		this._width = this.clientWidth || 100;
+		this._height = this.clientHeight || 40;
+		new ResizeObserver((entries) => {
+			const e = entries[0];
+			this._width = e.contentRect.width;
+			this._height = e.contentRect.height;
+		}).observe(this);
+		if (!this.#hasProgrammaticData) {
+			const data = this.#parseDeclarativeData(this.textContent ?? ``);
+			if (data.length > 0) this.#series.set(data);
+		}
+	}
+	updated(changed) {
+		if (changed.has(`capacity`) || changed.has(`persistentScale`) || changed.has(`rangeMin`) || changed.has(`rangeMax`)) {
+			const old = [...this.#series.values];
+			const fixedRange = !Number.isNaN(this.rangeMin) && !Number.isNaN(this.rangeMax) ? {
+				min: this.rangeMin,
+				max: this.rangeMax
+			} : null;
+			this.#series = new PlotDataSeries({
+				capacityLimit: this.capacity,
+				persistentScaling: this.persistentScale,
+				fixedRange
+			});
+			if (old.length > 0) this.#series.set(old);
+		}
+	}
+	#getIndexFromX(clientX, rect) {
+		const n = this.#series.values.length;
+		if (n === 0) return -1;
+		const x = clientX - rect.left;
+		if (x < 0 || x > rect.width) return -1;
+		const padding = rect.height < 20 ? 0 : Math.min(4, rect.height * .05);
+		const plotW = rect.width - padding * 2;
+		const index = Math.floor((x - padding) / (plotW / n));
+		return index >= 0 && index < n ? index : -1;
+	}
+	#updateTooltip(clientX, clientY) {
+		if (!this.tooltips) return;
+		const rect = this.getBoundingClientRect();
+		const index = this.#getIndexFromX(clientX, rect);
+		if (index < 0) {
+			hideTooltip(this);
+			return;
+		}
+		showTooltip(this, clientX, clientY, this.valueFormat(this.#series.values[index]));
+	}
+	#updateTooltipAtLastPos() {
+		if (this.#lastClientX === null || this.#lastClientY === null) return;
+		this.#updateTooltip(this.#lastClientX, this.#lastClientY);
+	}
+	#onPointerMove;
+	#onPointerLeave;
+	#onClick;
+	#computePoints(values, min, max, padding, plotW, plotH) {
+		const n = values.length;
+		const widthPerPoint = n > 0 ? plotW / n : plotW;
+		const scaleX = (i) => padding + (i + .5) * widthPerPoint;
+		return values.map((value, index) => {
+			const sv = clamp(scaleValue(value, min, max));
+			const ageFraction = n > 1 ? index / (n - 1) : 1;
+			return {
+				x: scaleX(index),
+				y: padding + (1 - sv) * plotH,
+				value,
+				scaledValue: sv,
+				index,
+				ageFraction
+			};
+		});
+	}
+	get series() {
+		return this.#series;
+	}
+	/**
+	* Get all values in the data series as a readonly array.
+	*/
+	get values() {
+		return this.#series.values;
+	}
+	/**
+	* Get length of data series
+	*/
+	get dataLength() {
+		return this.#series.values.length;
+	}
+	/**
+	* Get value at specific index of data series
+	* @param index
+	*/
+	getValueAt(index) {
+		return this.#series.values[index];
+	}
+	/**
+	* Get value index based on client X position
+	* @param clientX
+	*/
+	getIndexFromClientX(clientX) {
+		return this.#getIndexFromX(clientX, this.getBoundingClientRect());
+	}
+	#renderByStyle(points, crs, strokeW, radius, barW, bottom, top, mid) {
+		const lineCr = crs.at(-1) ?? {
+			fill: `currentColor`,
+			opacity: 1
+		};
+		const needsArea = (this.drawStyle === `line-sharp` || this.drawStyle === `line-round`) && this.shaded;
+		const areaColor = this.areaColor || void 0;
+		if (needsArea) return [renderArea(points, lineCr, bottom, areaColor), this.drawStyle === `line-sharp` ? renderLine(points, lineCr, strokeW, false) : renderLine(points, lineCr, strokeW, true)];
+		switch (this.drawStyle) {
+			case `line-sharp`: return [renderLine(points, lineCr, strokeW, false)];
+			case `line-round`: return [renderLine(points, lineCr, strokeW, true)];
+			case `circles`: return renderCircles(points, crs, radius, this.ageStyle);
+			case `squares`: return renderSquares(points, crs, radius * 2, this.ageStyle);
+			case `vbar`: return renderVbars(points, crs, strokeW, bottom, this.ageStyle);
+			case `hbar`: return renderHbars(points, crs, strokeW, barW, this.ageStyle);
+			case `hist-bottom`: return renderHistBottom(points, crs, barW, bottom, this.ageStyle);
+			case `hist-top`: return renderHistTop(points, crs, barW, top, this.ageStyle);
+			case `hist-middle`: return renderHistMiddle(points, crs, barW, mid, this.ageStyle);
+			default: return [];
+		}
+	}
+	render() {
+		const { values, range } = this.#series;
+		const w = this._width;
+		const h = this._height;
+		const padding = h < 20 ? 0 : Math.min(4, h * .05);
+		const plotW = Math.max(1, w - padding * 2);
+		const plotH = Math.max(1, h - padding * 2);
+		const bottom = padding + plotH;
+		const top = padding;
+		const mid = padding + plotH / 2;
+		const strokeW = adaptiveStroke(w, h);
+		const radius = adaptiveRadius(w, h, values.length);
+		const barW = values.length > 0 ? Math.max(1, plotW / values.length * .85) : plotW;
+		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
+		const points = values.length > 0 ? this.#computePoints(values, range.min, range.max, padding, plotW, plotH) : [];
+		const baseColour = points.length > 0 ? readBaseColour(this) : ``;
+		const colourConfig = {
+			mode: this.colorMode,
+			palette: parseColourScaleAttr(this.colorScale),
+			easingName: this.colorEasing,
+			valueMap: this.colorValueMap
+		};
+		const isDiscrete = this.drawStyle !== `line-sharp` && this.drawStyle !== `line-round`;
+		const crs = points.map((p) => {
+			const base = computeColour(p.scaledValue, baseColour, colourConfig);
+			return isDiscrete ? applyAgeModification(base, p.ageFraction, this.ageStyle) : base;
+		});
+		const dataContent = points.length > 0 ? this.#renderByStyle(points, crs, strokeW, radius, barW, bottom, top, mid) : [];
+		const titleContent = this.title ? svg`<text
+          x=${padding + 2} y=${top + Math.min(10, h * .6)}
+          class="overlay-text"
+          fill=${textColor}
+          style="opacity: 0.6"
+        >${this.title}</text>` : svg``;
+		const latestValue = values.length > 0 ? values.at(-1) : null;
+		const preciseContent = this.precise && latestValue !== null ? svg`<text
+          x=${w - padding - 2} y=${top + Math.min(10, h * .6)}
+          class="overlay-text"
+          text-anchor="end"
+          fill=${textColor}
+          style="opacity: 0.8"
+        >${this.valueFormat(latestValue)}</text>` : svg``;
+		return html`
+      <svg
+        width=${w} height=${h}
+        viewBox="0 0 ${w} ${h}"
+        xmlns="http://www.w3.org/2000/svg"
+        @pointermove=${this.#onPointerMove}
+        @pointerleave=${this.#onPointerLeave}
+        @click=${this.#onClick}
+      >
+        <rect width=${w} height=${h} fill="transparent" />
+        ${dataContent.map((c) => c)}
+        ${titleContent}
+        ${preciseContent}
+      </svg>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      min-width: 20px;
+      min-height: 4px;
+    }
+
+    svg {
+      display: block;
+      cursor: crosshair;
+      overflow: visible;
+    }
+
+    .overlay-text {
+      font-family: var(--font-mono, ui-monospace, monospace);
+      font-size: 9px;
+      dominant-baseline: hanging;
+      pointer-events: none;
+    }
+  `;
+	}
+};
+__decorate([property({ attribute: `draw-style` })], PlotSingleAxis.prototype, "drawStyle", void 0);
+__decorate([property({ attribute: `age-style` })], PlotSingleAxis.prototype, "ageStyle", void 0);
+__decorate([property()], PlotSingleAxis.prototype, "title", void 0);
+__decorate([property({ type: Boolean })], PlotSingleAxis.prototype, "precise", void 0);
+__decorate([property({ type: Boolean })], PlotSingleAxis.prototype, "tooltips", void 0);
+__decorate([property({ type: Number })], PlotSingleAxis.prototype, "capacity", void 0);
+__decorate([property({ type: Number })], PlotSingleAxis.prototype, "rangeMin", void 0);
+__decorate([property({ type: Number })], PlotSingleAxis.prototype, "rangeMax", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `persistent-scale`
+})], PlotSingleAxis.prototype, "persistentScale", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PlotSingleAxis.prototype, "paused", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `click-pauses`
+})], PlotSingleAxis.prototype, "clickPauses", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `shaded`
+})], PlotSingleAxis.prototype, "shaded", void 0);
+__decorate([property({ attribute: `area-color` })], PlotSingleAxis.prototype, "areaColor", void 0);
+__decorate([property({ attribute: `color-mode` })], PlotSingleAxis.prototype, "colorMode", void 0);
+__decorate([property({ attribute: `color-easing` })], PlotSingleAxis.prototype, "colorEasing", void 0);
+__decorate([property({ attribute: `color-scale` })], PlotSingleAxis.prototype, "colorScale", void 0);
+__decorate([state()], PlotSingleAxis.prototype, "_width", void 0);
+__decorate([state()], PlotSingleAxis.prototype, "_height", void 0);
+PlotSingleAxis = __decorate([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
+//#endregion
+//#region src/plots/xy-axis.ts
+let PlotXyAxis = class PlotXyAxis extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.drawStyle = `circles`;
+		this.ageStyle = `none`;
+		this.title = ``;
+		this.precise = false;
+		this.tooltips = true;
+		this.capacity = 100;
+		this.persistentScale = true;
+		this.paused = false;
+		this.clickPauses = false;
+		this.colorMode = `fixed`;
+		this.colorEasing = ``;
+		this.colorScale = ``;
+		this.colorValueMap = null;
+		this._width = 100;
+		this._height = 100;
+		this.#xSeries = new PlotDataSeries({
+			capacityLimit: 100,
+			persistentScaling: true
+		});
+		this.#ySeries = new PlotDataSeries({
+			capacityLimit: 100,
+			persistentScaling: true
+		});
+		this.valueFormat = (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`;
+		this.#lastPoints = [];
+		this.#lastClientX = null;
+		this.#lastClientY = null;
+		this.#onPointerMove = (e) => {
+			this.#lastClientX = e.clientX;
+			this.#lastClientY = e.clientY;
+			this.#updateTooltip(e.clientX, e.clientY);
+		};
+		this.#onPointerLeave = () => {
+			this.#lastClientX = null;
+			this.#lastClientY = null;
+			hideTooltip(this);
+		};
+		this.#onClick = (e) => {
+			if (this.clickPauses) this.paused = !this.paused;
+			const rect = e.currentTarget.getBoundingClientRect();
+			const nearest = this.#findNearestPoint(e.clientX, e.clientY, this.#lastPoints, rect);
+			if (!nearest) return;
+			this.dispatchEvent(new CustomEvent(`plot-datapoint-click`, {
+				detail: {
+					x: nearest.xVal,
+					y: nearest.yVal,
+					index: nearest.index
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	#xSeries;
+	#ySeries;
+	add(x, y) {
+		this.#xSeries.add(x);
+		this.#ySeries.add(y);
+		if (this.paused) return;
+		this.requestUpdate();
+		this.#updateTooltipAtLastPos();
+	}
+	setXY(xs, ys) {
+		this.#xSeries.set(xs);
+		this.#ySeries.set(ys);
+		if (this.paused) return;
+		this.requestUpdate();
+		this.#updateTooltipAtLastPos();
+	}
+	clear() {
+		this.#xSeries.clear();
+		this.#ySeries.clear();
+		this.requestUpdate();
+	}
+	firstUpdated(_changed) {
+		this._width = this.clientWidth || 100;
+		this._height = this.clientHeight || 100;
+		new ResizeObserver((entries) => {
+			const e = entries[0];
+			this._width = e.contentRect.width;
+			this._height = e.contentRect.height;
+		}).observe(this);
+	}
+	updated(changed) {
+		if (changed.has(`capacity`) || changed.has(`persistentScale`)) {
+			const opts = {
+				capacityLimit: this.capacity,
+				persistentScaling: this.persistentScale
+			};
+			const oldX = [...this.#xSeries.values];
+			const oldY = [...this.#ySeries.values];
+			this.#xSeries = new PlotDataSeries(opts);
+			this.#ySeries = new PlotDataSeries(opts);
+			if (oldX.length > 0) {
+				this.#xSeries.set(oldX);
+				this.#ySeries.set(oldY);
+			}
+		}
+	}
+	#computePoints(padding, plotW, plotH) {
+		const xs = this.#xSeries.values;
+		const ys = this.#ySeries.values;
+		const n = Math.min(xs.length, ys.length);
+		if (n === 0) return [];
+		const { min: xMin, max: xMax } = this.#xSeries.range;
+		const { min: yMin, max: yMax } = this.#ySeries.range;
+		return Array.from({ length: n }, (_, i) => ({
+			x: padding + scaleValue(xs[i], xMin, xMax) * plotW,
+			y: padding + (1 - scaleValue(ys[i], yMin, yMax)) * plotH,
+			xVal: xs[i],
+			yVal: ys[i],
+			index: i,
+			ageFraction: n > 1 ? i / (n - 1) : 1
+		}));
+	}
+	/** Compute the final ColourResult for each xy point: base colour → age modification. */
+	#computeColours(points, baseColour) {
+		const config = {
+			mode: this.colorMode,
+			palette: parseColourScaleAttr(this.colorScale),
+			easingName: this.colorEasing,
+			valueMap: this.colorValueMap
+		};
+		return points.map((p) => {
+			return applyAgeModification(computeColour(p.ageFraction, baseColour, config), p.ageFraction, this.ageStyle);
+		});
+	}
+	#findNearestPoint(clientX, clientY, points, rect) {
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		let best = null;
+		let bestDist = Infinity;
+		for (const p of points) {
+			const dx = p.x - x;
+			const dy = p.y - y;
+			const d = dx * dx + dy * dy;
+			if (d < bestDist) {
+				bestDist = d;
+				best = p;
+			}
+		}
+		return best && Math.sqrt(bestDist) < 30 ? best : null;
+	}
+	#lastPoints;
+	#lastClientX;
+	#lastClientY;
+	#updateTooltip(clientX, clientY) {
+		if (!this.tooltips) return;
+		const rect = this.getBoundingClientRect();
+		const nearest = this.#findNearestPoint(clientX, clientY, this.#lastPoints, rect);
+		if (!nearest) {
+			hideTooltip(this);
+			return;
+		}
+		showTooltip(this, clientX, clientY, this.valueFormat(nearest.xVal, nearest.yVal));
+	}
+	#updateTooltipAtLastPos() {
+		if (this.#lastClientX === null || this.#lastClientY === null) return;
+		this.#updateTooltip(this.#lastClientX, this.#lastClientY);
+	}
+	#onPointerMove;
+	#onPointerLeave;
+	#onClick;
+	render() {
+		const w = this._width;
+		const h = this._height;
+		const padding = Math.min(6, Math.min(w, h) * .06);
+		const plotW = Math.max(1, w - padding * 2);
+		const plotH = Math.max(1, h - padding * 2);
+		const points = this.#computePoints(padding, plotW, plotH);
+		this.#lastPoints = points;
+		const baseColour = points.length > 0 ? readBaseColour(this) : ``;
+		const colours = this.#computeColours(points, baseColour);
+		const radius = adaptiveRadius(w, h, points.length);
+		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
+		const dataContent = points.map((p, i) => {
+			const cr = colours[i];
+			const sizeFactor = this.ageStyle === `size` ? Math.max(.2, p.ageFraction) : 1;
+			if (this.drawStyle === `circles`) {
+				const r = radius * sizeFactor;
+				return svg`<circle cx=${p.x} cy=${p.y} r=${r} fill=${cr.fill} opacity=${cr.opacity} />`;
+			}
+			const s = radius * 2 * sizeFactor;
+			return svg`<rect x=${p.x - s / 2} y=${p.y - s / 2} width=${s} height=${s} fill=${cr.fill} opacity=${cr.opacity} />`;
+		});
+		const titleContent = this.title ? svg`<text
+          x=${padding + 2} y=${padding + 2}
+          class="overlay-text"
+          fill=${textColor}
+          style="opacity: 0.6"
+        >${this.title}</text>` : svg``;
+		const n = Math.min(this.#xSeries.values.length, this.#ySeries.values.length);
+		const latestX = n > 0 ? this.#xSeries.values[n - 1] : null;
+		const latestY = n > 0 ? this.#ySeries.values[n - 1] : null;
+		const preciseContent = this.precise && latestX !== null && latestY !== null ? svg`<text
+          x=${w - padding - 2} y=${padding + 2}
+          class="overlay-text"
+          text-anchor="end"
+          fill=${textColor}
+          style="opacity: 0.8"
+        >${this.valueFormat(latestX, latestY)}</text>` : svg``;
+		return html`
+      <svg
+        width=${w} height=${h}
+        viewBox="0 0 ${w} ${h}"
+        xmlns="http://www.w3.org/2000/svg"
+        @pointermove=${this.#onPointerMove}
+        @pointerleave=${this.#onPointerLeave}
+        @click=${this.#onClick}
+      >
+        <rect width=${w} height=${h} fill="transparent" />
+        ${dataContent}
+        ${titleContent}
+        ${preciseContent}
+      </svg>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-width: 40px;
+      min-height: 40px;
+    }
+
+    svg {
+      display: block;
+      cursor: crosshair;
+    }
+
+    .overlay-text {
+      font-family: var(--font-mono, ui-monospace, monospace);
+      font-size: 9px;
+      dominant-baseline: hanging;
+      pointer-events: none;
+    }
+  `;
+	}
+};
+__decorate([property({ attribute: `draw-style` })], PlotXyAxis.prototype, "drawStyle", void 0);
+__decorate([property({ attribute: `age-style` })], PlotXyAxis.prototype, "ageStyle", void 0);
+__decorate([property()], PlotXyAxis.prototype, "title", void 0);
+__decorate([property({ type: Boolean })], PlotXyAxis.prototype, "precise", void 0);
+__decorate([property({ type: Boolean })], PlotXyAxis.prototype, "tooltips", void 0);
+__decorate([property({ type: Number })], PlotXyAxis.prototype, "capacity", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `persistent-scale`
+})], PlotXyAxis.prototype, "persistentScale", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PlotXyAxis.prototype, "paused", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `click-pauses`
+})], PlotXyAxis.prototype, "clickPauses", void 0);
+__decorate([property({ attribute: `color-mode` })], PlotXyAxis.prototype, "colorMode", void 0);
+__decorate([property({ attribute: `color-easing` })], PlotXyAxis.prototype, "colorEasing", void 0);
+__decorate([property({ attribute: `color-scale` })], PlotXyAxis.prototype, "colorScale", void 0);
+__decorate([state()], PlotXyAxis.prototype, "_width", void 0);
+__decorate([state()], PlotXyAxis.prototype, "_height", void 0);
+PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
+//#endregion
+export { TooltipElement as a, computeColour as c, PlotMultiAxis as i, parseColourScaleAttr as l, PlotSingleAxis as n, PlotDataSeries as o, PlotHistogram as r, applyAgeModification as s, PlotXyAxis as t, readBaseColour as u };
+
+//# sourceMappingURL=xy-axis-CxHC8z5E.js.map