@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/dev/lib/marker-band.js

@@ -0,0 +1,81 @@
+import { readPxProperty } from "./read-px-property.js";
+
+//#region src/lib/marker-band.ts
+const kindPattern = /^[a-z][a-z0-9-]*$/;
+const snapSlopPx = 4;
+function isKind(kind) {
+	return kind !== void 0 && kindPattern.test(kind);
+}
+function writeKind(part, kind, fallback) {
+	if (!isKind(kind)) {
+		part.style.removeProperty("--_sonic-marker");
+		return;
+	}
+	part.style.setProperty("--_sonic-marker", `var(--sonic-marker-${kind}, var(${fallback}))`);
+}
+function renderMarker(marker, [from, to], lane) {
+	const part = document.createElement("div");
+	part.className = lane === void 0 ? "sonic-wavestrip-region" : "sonic-wavestrip-marker";
+	if (lane !== void 0) part.style.setProperty("--_sonic-marker-lane", String(lane));
+	part.style.setProperty("--_sonic-marker-from", String(from));
+	part.style.setProperty("--_sonic-marker-to", String(to));
+	writeKind(part, marker.kind, "--_sonic-marker-default");
+	if (marker.dimmed === true) part.dataset.sonicDimmed = "";
+	return part;
+}
+function createMarkerBand(band) {
+	let dots = [];
+	const px = (property) => readPxProperty(getComputedStyle(band), property, 0);
+	return {
+		at: ({ x, y }, widthPx) => {
+			const size = px("--_sonic-marker-size");
+			const step = px("--_sonic-marker-step");
+			const nearest = nearestDot({
+				x,
+				y
+			}, dots.map(({ at, lane }) => ({
+				x: at * widthPx,
+				y: size / 2 + lane * step
+			})), size / 2 + snapSlopPx);
+			return nearest === void 0 ? void 0 : dots[nearest]?.index;
+		},
+		render: (markers, proportions) => {
+			const widthPx = band.getBoundingClientRect().width;
+			const points = markers.flatMap((marker, index) => marker.end === void 0 ? [{
+				at: proportions[index]?.[0] ?? 0,
+				index
+			}] : []);
+			const lanes = markerLanes(points.map(({ at }) => at * widthPx), px("--_sonic-marker-step"));
+			dots = points.map((point, order) => ({
+				...point,
+				lane: lanes[order] ?? 0
+			}));
+			const laneOf = new Map(dots.map(({ index, lane }) => [index, lane]));
+			band.replaceChildren(...markers.map((marker, index) => renderMarker(marker, proportions[index] ?? [0, 0], laneOf.get(index))));
+		}
+	};
+}
+function markerLanes(positions, minDistance) {
+	const lastInLane = [];
+	return positions.map((position) => {
+		const free = lastInLane.findIndex((last) => position - last >= minDistance);
+		const lane = free === -1 ? lastInLane.length : free;
+		lastInLane[lane] = position;
+		return lane;
+	});
+}
+function nearestDot(point, dots, reach) {
+	let nearest;
+	let nearestDistance = reach * reach;
+	for (const [index, dot] of dots.entries()) {
+		const distance = (dot.x - point.x) ** 2 + (dot.y - point.y) ** 2;
+		if (distance > nearestDistance) continue;
+		nearest = index;
+		nearestDistance = distance;
+	}
+	return nearest;
+}
+
+//#endregion
+export { createMarkerBand, isKind, markerLanes, nearestDot, writeKind };
+//# sourceMappingURL=marker-band.js.map

package/dist/dev/lib/marker-band.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker-band.js","names":[],"sources":["../../../src/lib/marker-band.ts"],"sourcesContent":["import { readPxProperty } from '#lib/read-px-property.ts';\n\ninterface MarkerLook {\n\tdimmed?: boolean;\n\tend?: number;\n\tkind?: string;\n}\n\ninterface Point {\n\tx: number;\n\ty: number;\n}\n\ninterface MarkerBand {\n\tat: (point: Point, widthPx: number) => number | undefined;\n\trender: (\n\t\tmarkers: ReadonlyArray<MarkerLook>,\n\t\tproportions: ReadonlyArray<[number, number]>,\n\t) => void;\n}\n\n// Interpolated into a style, so anything else falls back to the default colour\nconst kindPattern = /^[a-z][a-z0-9-]*$/;\n\nconst snapSlopPx = 4;\n\nexport function isKind(kind: string | undefined): kind is string {\n\treturn kind !== undefined && kindPattern.test(kind);\n}\n\nexport function writeKind(part: HTMLElement, kind: string | undefined, fallback: string): void {\n\tif (!isKind(kind)) {\n\t\tpart.style.removeProperty('--_sonic-marker');\n\t\treturn;\n\t}\n\n\tpart.style.setProperty('--_sonic-marker', `var(--sonic-marker-${kind}, var(${fallback}))`);\n}\n\nfunction renderMarker(\n\tmarker: MarkerLook,\n\t[from, to]: [number, number],\n\tlane: number | undefined,\n): HTMLElement {\n\tconst part = document.createElement('div');\n\n\tpart.className = lane === undefined ? 'sonic-wavestrip-region' : 'sonic-wavestrip-marker';\n\tif (lane !== undefined) part.style.setProperty('--_sonic-marker-lane', String(lane));\n\tpart.style.setProperty('--_sonic-marker-from', String(from));\n\tpart.style.setProperty('--_sonic-marker-to', String(to));\n\twriteKind(part, marker.kind, '--_sonic-marker-default');\n\tif (marker.dimmed === true) part.dataset.sonicDimmed = '';\n\n\treturn part;\n}\n\nexport function createMarkerBand(band: HTMLElement): MarkerBand {\n\tlet dots: Array<{ at: number; index: number; lane: number }> = [];\n\n\tconst px = (property: string): number => readPxProperty(getComputedStyle(band), property, 0);\n\n\treturn {\n\t\tat: ({ x, y }, widthPx) => {\n\t\t\tconst size = px('--_sonic-marker-size');\n\t\t\tconst step = px('--_sonic-marker-step');\n\t\t\tconst nearest = nearestDot(\n\t\t\t\t{ x, y },\n\t\t\t\tdots.map(({ at, lane }) => ({ x: at * widthPx, y: size / 2 + lane * step })),\n\t\t\t\tsize / 2 + snapSlopPx,\n\t\t\t);\n\n\t\t\treturn nearest === undefined ? undefined : dots[nearest]?.index;\n\t\t},\n\t\trender: (markers, proportions) => {\n\t\t\tconst widthPx = band.getBoundingClientRect().width;\n\t\t\tconst points = markers.flatMap((marker, index) =>\n\t\t\t\tmarker.end === undefined ? [{ at: proportions[index]?.[0] ?? 0, index }] : [],\n\t\t\t);\n\t\t\tconst lanes = markerLanes(\n\t\t\t\tpoints.map(({ at }) => at * widthPx),\n\t\t\t\tpx('--_sonic-marker-step'),\n\t\t\t);\n\n\t\t\tdots = points.map((point, order) => ({ ...point, lane: lanes[order] ?? 0 }));\n\n\t\t\tconst laneOf = new Map(dots.map(({ index, lane }) => [index, lane]));\n\n\t\t\tband.replaceChildren(\n\t\t\t\t...markers.map((marker, index) =>\n\t\t\t\t\trenderMarker(marker, proportions[index] ?? [0, 0], laneOf.get(index)),\n\t\t\t\t),\n\t\t\t);\n\t\t},\n\t};\n}\n\nexport function markerLanes(positions: ReadonlyArray<number>, minDistance: number): Array<number> {\n\tconst lastInLane: Array<number> = [];\n\n\treturn positions.map((position) => {\n\t\tconst free = lastInLane.findIndex((last) => position - last >= minDistance);\n\t\tconst lane = free === -1 ? lastInLane.length : free;\n\n\t\tlastInLane[lane] = position;\n\n\t\treturn lane;\n\t});\n}\n\nexport function nearestDot(\n\tpoint: Point,\n\tdots: ReadonlyArray<Point>,\n\treach: number,\n): number | undefined {\n\tlet nearest: number | undefined;\n\tlet nearestDistance = reach * reach;\n\n\tfor (const [index, dot] of dots.entries()) {\n\t\tconst distance = (dot.x - point.x) ** 2 + (dot.y - point.y) ** 2;\n\t\tif (distance > nearestDistance) continue;\n\n\t\tnearest = index;\n\t\tnearestDistance = distance;\n\t}\n\n\treturn nearest;\n}\n"],"mappings":";;;AAsBA,MAAM,cAAc;AAEpB,MAAM,aAAa;AAEnB,SAAgB,OAAO,MAA0C;CAChE,OAAO,SAAS,UAAa,YAAY,KAAK,IAAI;AACnD;AAEA,SAAgB,UAAU,MAAmB,MAA0B,UAAwB;CAC9F,IAAI,CAAC,OAAO,IAAI,GAAG;EAClB,KAAK,MAAM,eAAe,iBAAiB;EAC3C;CACD;CAEA,KAAK,MAAM,YAAY,mBAAmB,sBAAsB,KAAK,QAAQ,SAAS,GAAG;AAC1F;AAEA,SAAS,aACR,QACA,CAAC,MAAM,KACP,MACc;CACd,MAAM,OAAO,SAAS,cAAc,KAAK;CAEzC,KAAK,YAAY,SAAS,SAAY,2BAA2B;CACjE,IAAI,SAAS,QAAW,KAAK,MAAM,YAAY,wBAAwB,OAAO,IAAI,CAAC;CACnF,KAAK,MAAM,YAAY,wBAAwB,OAAO,IAAI,CAAC;CAC3D,KAAK,MAAM,YAAY,sBAAsB,OAAO,EAAE,CAAC;CACvD,UAAU,MAAM,OAAO,MAAM,yBAAyB;CACtD,IAAI,OAAO,WAAW,MAAM,KAAK,QAAQ,cAAc;CAEvD,OAAO;AACR;AAEA,SAAgB,iBAAiB,MAA+B;CAC/D,IAAI,OAA2D,CAAC;CAEhE,MAAM,MAAM,aAA6B,eAAe,iBAAiB,IAAI,GAAG,UAAU,CAAC;CAE3F,OAAO;EACN,KAAK,EAAE,GAAG,KAAK,YAAY;GAC1B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,UAAU,WACf;IAAE;IAAG;GAAE,GACP,KAAK,KAAK,EAAE,IAAI,YAAY;IAAE,GAAG,KAAK;IAAS,GAAG,OAAO,IAAI,OAAO;GAAK,EAAE,GAC3E,OAAO,IAAI,UACZ;GAEA,OAAO,YAAY,SAAY,SAAY,KAAK,QAAQ,EAAE;EAC3D;EACA,SAAS,SAAS,gBAAgB;GACjC,MAAM,UAAU,KAAK,sBAAsB,CAAC,CAAC;GAC7C,MAAM,SAAS,QAAQ,SAAS,QAAQ,UACvC,OAAO,QAAQ,SAAY,CAAC;IAAE,IAAI,YAAY,MAAM,GAAG,MAAM;IAAG;GAAM,CAAC,IAAI,CAAC,CAC7E;GACA,MAAM,QAAQ,YACb,OAAO,KAAK,EAAE,SAAS,KAAK,OAAO,GACnC,GAAG,sBAAsB,CAC1B;GAEA,OAAO,OAAO,KAAK,OAAO,WAAW;IAAE,GAAG;IAAO,MAAM,MAAM,UAAU;GAAE,EAAE;GAE3E,MAAM,SAAS,IAAI,IAAI,KAAK,KAAK,EAAE,OAAO,WAAW,CAAC,OAAO,IAAI,CAAC,CAAC;GAEnE,KAAK,gBACJ,GAAG,QAAQ,KAAK,QAAQ,UACvB,aAAa,QAAQ,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,OAAO,IAAI,KAAK,CAAC,CACrE,CACD;EACD;CACD;AACD;AAEA,SAAgB,YAAY,WAAkC,aAAoC;CACjG,MAAM,aAA4B,CAAC;CAEnC,OAAO,UAAU,KAAK,aAAa;EAClC,MAAM,OAAO,WAAW,WAAW,SAAS,WAAW,QAAQ,WAAW;EAC1E,MAAM,OAAO,SAAS,KAAK,WAAW,SAAS;EAE/C,WAAW,QAAQ;EAEnB,OAAO;CACR,CAAC;AACF;AAEA,SAAgB,WACf,OACA,MACA,OACqB;CACrB,IAAI;CACJ,IAAI,kBAAkB,QAAQ;CAE9B,KAAK,MAAM,CAAC,OAAO,QAAQ,KAAK,QAAQ,GAAG;EAC1C,MAAM,YAAY,IAAI,IAAI,MAAM,MAAM,KAAK,IAAI,IAAI,MAAM,MAAM;EAC/D,IAAI,WAAW,iBAAiB;EAEhC,UAAU;EACV,kBAAkB;CACnB;CAEA,OAAO;AACR"}

package/dist/dev/lib/marker-rider.js

@@ -0,0 +1,121 @@
+import { clamp } from "./math.js";
+import { requireChild } from "./render.js";
+import { readPxProperty } from "./read-px-property.js";
+import { writeKind } from "./marker-band.js";
+
+//#region src/lib/marker-rider.ts
+const fadeShare = .25;
+function lineX(seconds, view) {
+	return (seconds - view.startSeconds) / view.windowSeconds * view.widthPx;
+}
+function parkedPlacement(labels, index, [view, arrivingX]) {
+	const parked = labels[index];
+	if (!parked) return void 0;
+	const next = labels[index + 1];
+	const x = Math.max(view.insetPx, lineX(parked.start, view) + view.insetPx);
+	const approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;
+	return {
+		index,
+		opacity: clamp(approachPx / (view.widthPx * fadeShare), 0, 1),
+		shownPx: Math.min(parked.widthPx, arrivingX - x, view.widthPx - x),
+		x
+	};
+}
+function isDrawable(length) {
+	return Number.isFinite(length) && length > 0;
+}
+function layoutRider(labels, view) {
+	if (!isDrawable(view.windowSeconds) || !isDrawable(view.widthPx)) return {};
+	const parkedIndex = labels.findLastIndex((label) => label.start <= view.playheadSeconds);
+	const next = labels[parkedIndex + 1];
+	const arrivingX = next ? lineX(next.start, view) + view.insetPx : Infinity;
+	const parked = parkedPlacement(labels, parkedIndex, [view, arrivingX]);
+	const arriving = next && arrivingX < view.widthPx ? {
+		index: parkedIndex + 1,
+		opacity: 1,
+		shownPx: Math.min(next.widthPx, view.widthPx - arrivingX),
+		x: arrivingX
+	} : void 0;
+	return {
+		...arriving ? { arriving } : {},
+		...parked ? { parked } : {}
+	};
+}
+function labelSlot(element) {
+	return {
+		element,
+		kind: void 0,
+		opacity: NaN,
+		shownPx: NaN,
+		x: NaN
+	};
+}
+function writePlacement(slot, { opacity, shownPx, x }, widthPx) {
+	const { style } = slot.element;
+	if (slot.x !== x) {
+		slot.x = x;
+		style.setProperty("translate", `${x.toFixed(2)}px`);
+	}
+	if (slot.shownPx !== shownPx) {
+		slot.shownPx = shownPx;
+		style.setProperty("clip-path", shownPx < widthPx ? `inset(0 calc(100% - ${shownPx.toFixed(2)}px) 0 0)` : "");
+	}
+	if (slot.opacity !== opacity) {
+		slot.opacity = opacity;
+		style.setProperty("opacity", opacity < 1 ? opacity.toFixed(3) : "");
+	}
+}
+function writeLabel(slot, [labels, colourProperty], placement) {
+	const { element } = slot;
+	const label = placement && placement.shownPx > 0 ? labels[placement.index] : void 0;
+	if (element.hidden !== !label) element.hidden = !label;
+	if (!label || !placement) return;
+	if (element.textContent !== label.text) element.textContent = label.text;
+	element.toggleAttribute("data-sonic-dimmed", label.isDimmed);
+	if (slot.kind !== label.kind) {
+		slot.kind = label.kind;
+		writeKind(element, label.kind, colourProperty);
+	}
+	writePlacement(slot, placement, label.widthPx);
+}
+function measureWidths(control, className, texts) {
+	const probes = texts.map((text) => {
+		const probe = document.createElement("div");
+		probe.className = className;
+		probe.textContent = text;
+		return probe;
+	});
+	control.append(...probes);
+	const widths = probes.map((probe) => probe.getBoundingClientRect().width);
+	for (const probe of probes) probe.remove();
+	return widths;
+}
+function createLabelRider(control, options) {
+	const { className, colourProperty, insetProperty } = options;
+	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
+	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
+	let insetPx = 0;
+	let measured = [];
+	return {
+		measure: (labels) => {
+			const widths = measureWidths(control, className, labels.map(({ text }) => text));
+			insetPx = readPxProperty(getComputedStyle(control), insetProperty, 0);
+			measured = labels.map((label, index) => ({
+				...label,
+				widthPx: widths[index] ?? 0
+			})).toSorted((first, second) => first.start - second.start);
+		},
+		place: (window) => {
+			const layout = layoutRider(measured, {
+				...window,
+				insetPx
+			});
+			writeLabel(parked, [measured, colourProperty], layout.parked);
+			writeLabel(arriving, [measured, colourProperty], layout.arriving);
+		}
+	};
+}
+
+//#endregion
+export { createLabelRider, layoutRider };
+//# sourceMappingURL=marker-rider.js.map

package/dist/dev/lib/marker-rider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker-rider.js","names":[],"sources":["../../../src/lib/marker-rider.ts"],"sourcesContent":["import { writeKind } from '#lib/marker-band.ts';\nimport { clamp } from '#lib/math.ts';\nimport { readPxProperty } from '#lib/read-px-property.ts';\nimport { requireChild } from '#lib/render.ts';\n\ninterface RiderWindow {\n\tplayheadSeconds: number;\n\tstartSeconds: number;\n\twidthPx: number;\n\twindowSeconds: number;\n}\n\nexport interface RiderView extends RiderWindow {\n\tinsetPx: number;\n}\n\nexport interface RiderLabel {\n\tisDimmed: boolean;\n\tkind?: string;\n\tstart: number;\n\ttext: string;\n\twidthPx: number;\n}\n\ninterface LabelPlacement {\n\tindex: number;\n\topacity: number;\n\tshownPx: number;\n\tx: number;\n}\n\ninterface RiderLayout {\n\tarriving?: LabelPlacement;\n\tparked?: LabelPlacement;\n}\n\ninterface LabelSlot {\n\telement: HTMLElement;\n\tkind: string | undefined;\n\topacity: number;\n\tshownPx: number;\n\tx: number;\n}\n\nconst fadeShare = 0.25;\n\nfunction lineX(seconds: number, view: RiderView): number {\n\treturn ((seconds - view.startSeconds) / view.windowSeconds) * view.widthPx;\n}\n\nfunction parkedPlacement(\n\tlabels: ReadonlyArray<RiderLabel>,\n\tindex: number,\n\t[view, arrivingX]: [RiderView, number],\n): LabelPlacement | undefined {\n\tconst parked = labels[index];\n\tif (!parked) return undefined;\n\n\tconst next = labels[index + 1];\n\tconst x = Math.max(view.insetPx, lineX(parked.start, view) + view.insetPx);\n\tconst approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;\n\n\treturn {\n\t\tindex,\n\t\topacity: clamp(approachPx / (view.widthPx * fadeShare), 0, 1),\n\t\tshownPx: Math.min(parked.widthPx, arrivingX - x, view.widthPx - x),\n\t\tx,\n\t};\n}\n\nfunction isDrawable(length: number): boolean {\n\treturn Number.isFinite(length) && length > 0;\n}\n\nexport function layoutRider(labels: ReadonlyArray<RiderLabel>, view: RiderView): RiderLayout {\n\tif (!isDrawable(view.windowSeconds) || !isDrawable(view.widthPx)) return {};\n\n\tconst parkedIndex = labels.findLastIndex((label) => label.start <= view.playheadSeconds);\n\tconst next = labels[parkedIndex + 1];\n\tconst arrivingX = next ? lineX(next.start, view) + view.insetPx : Infinity;\n\tconst parked = parkedPlacement(labels, parkedIndex, [view, arrivingX]);\n\tconst arriving: LabelPlacement | undefined =\n\t\tnext && arrivingX < view.widthPx\n\t\t\t? {\n\t\t\t\t\tindex: parkedIndex + 1,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\tshownPx: Math.min(next.widthPx, view.widthPx - arrivingX),\n\t\t\t\t\tx: arrivingX,\n\t\t\t\t}\n\t\t\t: undefined;\n\n\treturn { ...(arriving ? { arriving } : {}), ...(parked ? { parked } : {}) };\n}\n\nfunction labelSlot(element: HTMLElement): LabelSlot {\n\treturn { element, kind: undefined, opacity: NaN, shownPx: NaN, x: NaN };\n}\n\nfunction writePlacement(\n\tslot: LabelSlot,\n\t{ opacity, shownPx, x }: LabelPlacement,\n\twidthPx: number,\n): void {\n\tconst { style } = slot.element;\n\n\tif (slot.x !== x) {\n\t\tslot.x = x;\n\t\tstyle.setProperty('translate', `${x.toFixed(2)}px`);\n\t}\n\tif (slot.shownPx !== shownPx) {\n\t\tslot.shownPx = shownPx;\n\t\tstyle.setProperty(\n\t\t\t'clip-path',\n\t\t\tshownPx < widthPx ? `inset(0 calc(100% - ${shownPx.toFixed(2)}px) 0 0)` : '',\n\t\t);\n\t}\n\tif (slot.opacity !== opacity) {\n\t\tslot.opacity = opacity;\n\t\tstyle.setProperty('opacity', opacity < 1 ? opacity.toFixed(3) : '');\n\t}\n}\n\nfunction writeLabel(\n\tslot: LabelSlot,\n\t[labels, colourProperty]: [ReadonlyArray<RiderLabel>, string],\n\tplacement: LabelPlacement | undefined,\n): void {\n\tconst { element } = slot;\n\tconst label = placement && placement.shownPx > 0 ? labels[placement.index] : undefined;\n\n\tif (element.hidden !== !label) element.hidden = !label;\n\tif (!label || !placement) return;\n\n\tif (element.textContent !== label.text) element.textContent = label.text;\n\telement.toggleAttribute('data-sonic-dimmed', label.isDimmed);\n\tif (slot.kind !== label.kind) {\n\t\tslot.kind = label.kind;\n\t\twriteKind(element, label.kind, colourProperty);\n\t}\n\twritePlacement(slot, placement, label.widthPx);\n}\n\nfunction measureWidths(\n\tcontrol: HTMLElement,\n\tclassName: string,\n\ttexts: Array<string>,\n): Array<number> {\n\tconst probes = texts.map((text) => {\n\t\tconst probe = document.createElement('div');\n\n\t\tprobe.className = className;\n\t\tprobe.textContent = text;\n\n\t\treturn probe;\n\t});\n\n\tcontrol.append(...probes);\n\n\tconst widths = probes.map((probe) => probe.getBoundingClientRect().width);\n\n\tfor (const probe of probes) probe.remove();\n\n\treturn widths;\n}\n\nexport function createLabelRider(\n\tcontrol: HTMLElement,\n\toptions: {\n\t\tclassName: string;\n\t\tcolourProperty: `--_sonic-${string}`;\n\t\tinsetProperty: `--_sonic-${string}`;\n\t},\n): {\n\tmeasure: (labels: ReadonlyArray<Omit<RiderLabel, 'widthPx'>>) => void;\n\tplace: (window: RiderWindow) => void;\n} {\n\tconst { className, colourProperty, insetProperty } = options;\n\tconst parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));\n\tconst arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));\n\tlet insetPx = 0;\n\tlet measured: Array<RiderLabel> = [];\n\n\treturn {\n\t\tmeasure: (labels) => {\n\t\t\tconst widths = measureWidths(\n\t\t\t\tcontrol,\n\t\t\t\tclassName,\n\t\t\t\tlabels.map(({ text }) => text),\n\t\t\t);\n\n\t\t\tinsetPx = readPxProperty(getComputedStyle(control), insetProperty, 0);\n\t\t\tmeasured = labels\n\t\t\t\t.map((label, index) => ({ ...label, widthPx: widths[index] ?? 0 }))\n\t\t\t\t.toSorted((first, second) => first.start - second.start);\n\t\t},\n\t\tplace: (window) => {\n\t\t\tconst layout = layoutRider(measured, { ...window, insetPx });\n\n\t\t\twriteLabel(parked, [measured, colourProperty], layout.parked);\n\t\t\twriteLabel(arriving, [measured, colourProperty], layout.arriving);\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;AA4CA,MAAM,YAAY;AAElB,SAAS,MAAM,SAAiB,MAAyB;CACxD,QAAS,UAAU,KAAK,gBAAgB,KAAK,gBAAiB,KAAK;AACpE;AAEA,SAAS,gBACR,QACA,OACA,CAAC,MAAM,YACsB;CAC7B,MAAM,SAAS,OAAO;CACtB,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,OAAO,OAAO,QAAQ;CAC5B,MAAM,IAAI,KAAK,IAAI,KAAK,SAAS,MAAM,OAAO,OAAO,IAAI,IAAI,KAAK,OAAO;CACzE,MAAM,aAAa,OAAO,MAAM,KAAK,OAAO,IAAI,IAAI,MAAM,KAAK,iBAAiB,IAAI,IAAI;CAExF,OAAO;EACN;EACA,SAAS,MAAM,cAAc,KAAK,UAAU,YAAY,GAAG,CAAC;EAC5D,SAAS,KAAK,IAAI,OAAO,SAAS,YAAY,GAAG,KAAK,UAAU,CAAC;EACjE;CACD;AACD;AAEA,SAAS,WAAW,QAAyB;CAC5C,OAAO,OAAO,SAAS,MAAM,KAAK,SAAS;AAC5C;AAEA,SAAgB,YAAY,QAAmC,MAA8B;CAC5F,IAAI,CAAC,WAAW,KAAK,aAAa,KAAK,CAAC,WAAW,KAAK,OAAO,GAAG,OAAO,CAAC;CAE1E,MAAM,cAAc,OAAO,eAAe,UAAU,MAAM,SAAS,KAAK,eAAe;CACvF,MAAM,OAAO,OAAO,cAAc;CAClC,MAAM,YAAY,OAAO,MAAM,KAAK,OAAO,IAAI,IAAI,KAAK,UAAU;CAClE,MAAM,SAAS,gBAAgB,QAAQ,aAAa,CAAC,MAAM,SAAS,CAAC;CACrE,MAAM,WACL,QAAQ,YAAY,KAAK,UACtB;EACA,OAAO,cAAc;EACrB,SAAS;EACT,SAAS,KAAK,IAAI,KAAK,SAAS,KAAK,UAAU,SAAS;EACxD,GAAG;CACJ,IACC;CAEJ,OAAO;EAAE,GAAI,WAAW,EAAE,SAAS,IAAI,CAAC;EAAI,GAAI,SAAS,EAAE,OAAO,IAAI,CAAC;CAAG;AAC3E;AAEA,SAAS,UAAU,SAAiC;CACnD,OAAO;EAAE;EAAS,MAAM;EAAW,SAAS;EAAK,SAAS;EAAK,GAAG;CAAI;AACvE;AAEA,SAAS,eACR,MACA,EAAE,SAAS,SAAS,KACpB,SACO;CACP,MAAM,EAAE,UAAU,KAAK;CAEvB,IAAI,KAAK,MAAM,GAAG;EACjB,KAAK,IAAI;EACT,MAAM,YAAY,aAAa,GAAG,EAAE,QAAQ,CAAC,EAAE,GAAG;CACnD;CACA,IAAI,KAAK,YAAY,SAAS;EAC7B,KAAK,UAAU;EACf,MAAM,YACL,aACA,UAAU,UAAU,uBAAuB,QAAQ,QAAQ,CAAC,EAAE,YAAY,EAC3E;CACD;CACA,IAAI,KAAK,YAAY,SAAS;EAC7B,KAAK,UAAU;EACf,MAAM,YAAY,WAAW,UAAU,IAAI,QAAQ,QAAQ,CAAC,IAAI,EAAE;CACnE;AACD;AAEA,SAAS,WACR,MACA,CAAC,QAAQ,iBACT,WACO;CACP,MAAM,EAAE,YAAY;CACpB,MAAM,QAAQ,aAAa,UAAU,UAAU,IAAI,OAAO,UAAU,SAAS;CAE7E,IAAI,QAAQ,WAAW,CAAC,OAAO,QAAQ,SAAS,CAAC;CACjD,IAAI,CAAC,SAAS,CAAC,WAAW;CAE1B,IAAI,QAAQ,gBAAgB,MAAM,MAAM,QAAQ,cAAc,MAAM;CACpE,QAAQ,gBAAgB,qBAAqB,MAAM,QAAQ;CAC3D,IAAI,KAAK,SAAS,MAAM,MAAM;EAC7B,KAAK,OAAO,MAAM;EAClB,UAAU,SAAS,MAAM,MAAM,cAAc;CAC9C;CACA,eAAe,MAAM,WAAW,MAAM,OAAO;AAC9C;AAEA,SAAS,cACR,SACA,WACA,OACgB;CAChB,MAAM,SAAS,MAAM,KAAK,SAAS;EAClC,MAAM,QAAQ,SAAS,cAAc,KAAK;EAE1C,MAAM,YAAY;EAClB,MAAM,cAAc;EAEpB,OAAO;CACR,CAAC;CAED,QAAQ,OAAO,GAAG,MAAM;CAExB,MAAM,SAAS,OAAO,KAAK,UAAU,MAAM,sBAAsB,CAAC,CAAC,KAAK;CAExE,KAAK,MAAM,SAAS,QAAQ,MAAM,OAAO;CAEzC,OAAO;AACR;AAEA,SAAgB,iBACf,SACA,SAQC;CACD,MAAM,EAAE,WAAW,gBAAgB,kBAAkB;CACrD,MAAM,SAAS,UAAU,aAAa,SAAS,IAAI,aAAa,WAAW,CAAC;CAC5E,MAAM,WAAW,UAAU,aAAa,SAAS,IAAI,UAAU,MAAM,aAAa,WAAW,CAAC;CAC9F,IAAI,UAAU;CACd,IAAI,WAA8B,CAAC;CAEnC,OAAO;EACN,UAAU,WAAW;GACpB,MAAM,SAAS,cACd,SACA,WACA,OAAO,KAAK,EAAE,WAAW,IAAI,CAC9B;GAEA,UAAU,eAAe,iBAAiB,OAAO,GAAG,eAAe,CAAC;GACpE,WAAW,OACT,KAAK,OAAO,WAAW;IAAE,GAAG;IAAO,SAAS,OAAO,UAAU;GAAE,EAAE,CAAC,CAClE,UAAU,OAAO,WAAW,MAAM,QAAQ,OAAO,KAAK;EACzD;EACA,QAAQ,WAAW;GAClB,MAAM,SAAS,YAAY,UAAU;IAAE,GAAG;IAAQ;GAAQ,CAAC;GAE3D,WAAW,QAAQ,CAAC,UAAU,cAAc,GAAG,OAAO,MAAM;GAC5D,WAAW,UAAU,CAAC,UAAU,cAAc,GAAG,OAAO,QAAQ;EACjE;CACD;AACD"}

package/dist/dev/lib/math.js

@@ -2,16 +2,30 @@
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
-function clampUnit(fraction) {
+function toNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string" || value.trim() === "") return NaN;
+	return Number(value);
+}
+function clampProportion(fraction) {
 	return clamp(fraction, 0, 1);
 }
-function wrapUnit(fraction) {
+function wrapProportion(fraction) {
 	return fraction - Math.floor(fraction);
 }
 function trimFloat(value) {
 	return Number(value.toPrecision(12));
 }
+function decimalPlaces(value) {
+	const [digits = "", exponent = "0"] = String(value).split("e", 2);
+	const fraction = digits.split(".", 2)[1] ?? "";
+	return Math.max(0, fraction.length - Number(exponent));
+}
+function roundTo(value, places) {
+	const rounded = Number(value.toFixed(Math.min(100, places)));
+	return rounded === 0 ? 0 : rounded;
+}
 
 //#endregion
-export { clamp, clampUnit, trimFloat, wrapUnit };
+export { clamp, clampProportion, decimalPlaces, roundTo, toNumber, trimFloat, wrapProportion };
 //# sourceMappingURL=math.js.map

package/dist/dev/lib/math.js.map

@@ -1 +1 @@
-{"version":3,"file":"math.js","names":[],"sources":["../../../src/lib/math.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\nexport function clampUnit(fraction: number): number {\n\treturn clamp(fraction, 0, 1);\n}\n\nexport function wrapUnit(fraction: number): number {\n\treturn fraction - Math.floor(fraction);\n}\n\nexport function trimFloat(value: number): number {\n\treturn Number(value.toPrecision(12));\n}\n"],"mappings":";AAAA,SAAgB,MAAM,OAAe,KAAa,KAAqB;CACtE,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC1C;AAEA,SAAgB,UAAU,UAA0B;CACnD,OAAO,MAAM,UAAU,GAAG,CAAC;AAC5B;AAEA,SAAgB,SAAS,UAA0B;CAClD,OAAO,WAAW,KAAK,MAAM,QAAQ;AACtC;AAEA,SAAgB,UAAU,OAAuB;CAChD,OAAO,OAAO,MAAM,YAAY,EAAE,CAAC;AACpC"}
+{"version":3,"file":"math.js","names":[],"sources":["../../../src/lib/math.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n// A framework may set a number property as a string; a blank one is no number, as in an attribute\nexport function toNumber(value: unknown): number {\n\tif (typeof value === 'number') return value;\n\tif (typeof value !== 'string' || value.trim() === '') return NaN;\n\n\treturn Number(value);\n}\n\nexport function clampProportion(fraction: number): number {\n\treturn clamp(fraction, 0, 1);\n}\n\nexport function wrapProportion(fraction: number): number {\n\treturn fraction - Math.floor(fraction);\n}\n\nexport function trimFloat(value: number): number {\n\treturn Number(value.toPrecision(12));\n}\n\n// `String(1e-7)` is \"1e-7\", so the exponent counts as places too\nexport function decimalPlaces(value: number): number {\n\tconst [digits = '', exponent = '0'] = String(value).split('e', 2);\n\tconst fraction = digits.split('.', 2)[1] ?? '';\n\n\treturn Math.max(0, fraction.length - Number(exponent));\n}\n\n// `toFixed` takes at most 100 places, and turns a residue below zero into -0\nexport function roundTo(value: number, places: number): number {\n\tconst rounded = Number(value.toFixed(Math.min(100, places)));\n\n\treturn rounded === 0 ? 0 : rounded;\n}\n"],"mappings":";AAAA,SAAgB,MAAM,OAAe,KAAa,KAAqB;CACtE,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC1C;AAGA,SAAgB,SAAS,OAAwB;CAChD,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,IAAI,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,IAAI,OAAO;CAE7D,OAAO,OAAO,KAAK;AACpB;AAEA,SAAgB,gBAAgB,UAA0B;CACzD,OAAO,MAAM,UAAU,GAAG,CAAC;AAC5B;AAEA,SAAgB,eAAe,UAA0B;CACxD,OAAO,WAAW,KAAK,MAAM,QAAQ;AACtC;AAEA,SAAgB,UAAU,OAAuB;CAChD,OAAO,OAAO,MAAM,YAAY,EAAE,CAAC;AACpC;AAGA,SAAgB,cAAc,OAAuB;CACpD,MAAM,CAAC,SAAS,IAAI,WAAW,OAAO,OAAO,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC;CAChE,MAAM,WAAW,OAAO,MAAM,KAAK,CAAC,CAAC,CAAC,MAAM;CAE5C,OAAO,KAAK,IAAI,GAAG,SAAS,SAAS,OAAO,QAAQ,CAAC;AACtD;AAGA,SAAgB,QAAQ,OAAe,QAAwB;CAC9D,MAAM,UAAU,OAAO,MAAM,QAAQ,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC;CAE3D,OAAO,YAAY,IAAI,IAAI;AAC5B"}

package/dist/dev/lib/modifier-press.js

@@ -0,0 +1,12 @@
+//#region src/lib/modifier-press.ts
+const isApple = /^(Mac|iP)/.test(navigator.platform);
+function isMenuPress(event) {
+	return isApple && event.ctrlKey;
+}
+function isResetPress(event) {
+	return isApple ? event.metaKey : event.ctrlKey;
+}
+
+//#endregion
+export { isMenuPress, isResetPress };
+//# sourceMappingURL=modifier-press.js.map

package/dist/dev/lib/modifier-press.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifier-press.js","names":[],"sources":["../../../src/lib/modifier-press.ts"],"sourcesContent":["const isApple = /^(Mac|iP)/.test(navigator.platform);\n\n// macOS sends Ctrl-click as a primary button press and opens the context menu\nexport function isMenuPress(event: MouseEvent): boolean {\n\treturn isApple && event.ctrlKey;\n}\n\nexport function isResetPress(event: MouseEvent): boolean {\n\treturn isApple ? event.metaKey : event.ctrlKey;\n}\n"],"mappings":";AAAA,MAAM,UAAU,YAAY,KAAK,UAAU,QAAQ;AAGnD,SAAgB,YAAY,OAA4B;CACvD,OAAO,WAAW,MAAM;AACzB;AAEA,SAAgB,aAAa,OAA4B;CACxD,OAAO,UAAU,MAAM,UAAU,MAAM;AACxC"}

package/dist/dev/lib/number-list.js

@@ -1,15 +1,15 @@
 //#region src/lib/number-list.ts
 function parseNumberList(text) {
 	if (text === null) return void 0;
-	const entries = [...new Set(text.split(/[\s,]+/).filter(Boolean).map(Number).filter((entry) => Number.isFinite(entry)))].toSorted((first, second) => first - second);
-	return entries.length >= 2 ? entries : void 0;
+	const numbers = [...new Set(text.split(/[\s,]+/).filter(Boolean).map(Number).filter((entry) => Number.isFinite(entry)))].toSorted((first, second) => first - second);
+	return numbers.length >= 2 ? numbers : void 0;
 }
-function nearestEntry(entries, value) {
-	let nearest = entries[0] ?? value;
-	for (const entry of entries) if (Math.abs(entry - value) < Math.abs(nearest - value)) nearest = entry;
+function nearestPosition(positions, value) {
+	let nearest = positions[0] ?? value;
+	for (const position of positions) if (Math.abs(position - value) < Math.abs(nearest - value)) nearest = position;
 	return nearest;
 }
 
 //#endregion
-export { nearestEntry, parseNumberList };
+export { nearestPosition, parseNumberList };
 //# sourceMappingURL=number-list.js.map

package/dist/dev/lib/number-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-list.js","names":[],"sources":["../../../src/lib/number-list.ts"],"sourcesContent":["export function parseNumberList(text: null | string): Array<number> | undefined {\n\tif (text === null) return undefined;\n\n\tconst entries = [\n\t\t...new Set(\n\t\t\ttext\n\t\t\t\t.split(/[\\s,]+/)\n\t\t\t\t.filter(Boolean)\n\t\t\t\t.map(Number)\n\t\t\t\t.filter((entry) => Number.isFinite(entry)),\n\t\t),\n\t].toSorted((first, second) => first - second);\n\n\treturn entries.length >= 2 ? entries : undefined;\n}\n\nexport function nearestEntry(entries: Array<number>, value: number): number {\n\tlet nearest = entries[0] ?? value;\n\n\tfor (const entry of entries) {\n\t\tif (Math.abs(entry - value) < Math.abs(nearest - value)) nearest = entry;\n\t}\n\n\treturn nearest;\n}\n"],"mappings":";AAAA,SAAgB,gBAAgB,MAAgD;CAC/E,IAAI,SAAS,MAAM,OAAO;CAE1B,MAAM,UAAU,CACf,GAAG,IAAI,IACN,KACE,MAAM,QAAQ,CAAC,CACf,OAAO,OAAO,CAAC,CACf,IAAI,MAAM,CAAC,CACX,QAAQ,UAAU,OAAO,SAAS,KAAK,CAAC,CAC3C,CACD,CAAC,CAAC,UAAU,OAAO,WAAW,QAAQ,MAAM;CAE5C,OAAO,QAAQ,UAAU,IAAI,UAAU;AACxC;AAEA,SAAgB,aAAa,SAAwB,OAAuB;CAC3E,IAAI,UAAU,QAAQ,MAAM;CAE5B,KAAK,MAAM,SAAS,SACnB,IAAI,KAAK,IAAI,QAAQ,KAAK,IAAI,KAAK,IAAI,UAAU,KAAK,GAAG,UAAU;CAGpE,OAAO;AACR"}
+{"version":3,"file":"number-list.js","names":[],"sources":["../../../src/lib/number-list.ts"],"sourcesContent":["export function parseNumberList(text: null | string): Array<number> | undefined {\n\tif (text === null) return undefined;\n\n\tconst numbers = [\n\t\t...new Set(\n\t\t\ttext\n\t\t\t\t.split(/[\\s,]+/)\n\t\t\t\t.filter(Boolean)\n\t\t\t\t.map(Number)\n\t\t\t\t.filter((entry) => Number.isFinite(entry)),\n\t\t),\n\t].toSorted((first, second) => first - second);\n\n\treturn numbers.length >= 2 ? numbers : undefined;\n}\n\nexport function nearestPosition(positions: ReadonlyArray<number>, value: number): number {\n\tlet nearest = positions[0] ?? value;\n\n\tfor (const position of positions) {\n\t\tif (Math.abs(position - value) < Math.abs(nearest - value)) nearest = position;\n\t}\n\n\treturn nearest;\n}\n"],"mappings":";AAAA,SAAgB,gBAAgB,MAAgD;CAC/E,IAAI,SAAS,MAAM,OAAO;CAE1B,MAAM,UAAU,CACf,GAAG,IAAI,IACN,KACE,MAAM,QAAQ,CAAC,CACf,OAAO,OAAO,CAAC,CACf,IAAI,MAAM,CAAC,CACX,QAAQ,UAAU,OAAO,SAAS,KAAK,CAAC,CAC3C,CACD,CAAC,CAAC,UAAU,OAAO,WAAW,QAAQ,MAAM;CAE5C,OAAO,QAAQ,UAAU,IAAI,UAAU;AACxC;AAEA,SAAgB,gBAAgB,WAAkC,OAAuB;CACxF,IAAI,UAAU,UAAU,MAAM;CAE9B,KAAK,MAAM,YAAY,WACtB,IAAI,KAAK,IAAI,WAAW,KAAK,IAAI,KAAK,IAAI,UAAU,KAAK,GAAG,UAAU;CAGvE,OAAO;AACR"}

package/dist/dev/lib/pointer-drag.js

@@ -0,0 +1,47 @@
+//#region src/lib/pointer-drag.ts
+function bindDrag(target, handlers, signal) {
+	let held;
+	const end = () => {
+		if (!held) return;
+		const { drag } = held;
+		held = void 0;
+		handlers.toggle?.(false);
+		handlers.release?.(drag);
+	};
+	const whileHeld = (type, handle) => {
+		target.addEventListener(type, (event) => {
+			if (held?.pointerId === event.pointerId) handle(held.drag, event);
+		}, { signal });
+	};
+	target.addEventListener("pointerdown", (event) => {
+		if (event.button !== 0 || held && held.pointerId !== event.pointerId) return;
+		end();
+		const drag = handlers.grab(event);
+		if (drag === void 0) return;
+		held = {
+			drag,
+			pointerId: event.pointerId
+		};
+		target.setPointerCapture(event.pointerId);
+		handlers.toggle?.(true);
+	}, { signal });
+	whileHeld("pointermove", handlers.move);
+	whileHeld("pointercancel", (drag) => {
+		handlers.cancel?.(drag);
+		end();
+	});
+	whileHeld("lostpointercapture", end);
+	whileHeld("pointerup", (drag, event) => {
+		end();
+		handlers.lift?.(drag, event);
+	});
+	signal.addEventListener("abort", end, { once: true });
+	return {
+		current: () => held?.drag,
+		end
+	};
+}
+
+//#endregion
+export { bindDrag };
+//# sourceMappingURL=pointer-drag.js.map

package/dist/dev/lib/pointer-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-drag.js","names":[],"sources":["../../../src/lib/pointer-drag.ts"],"sourcesContent":["interface DragHandlers<Drag> {\n\tcancel?: (drag: Drag) => void;\n\tgrab: (event: PointerEvent) => Drag | undefined;\n\tlift?: (drag: Drag, event: PointerEvent) => void;\n\tmove: (drag: Drag, event: PointerEvent) => void;\n\trelease?: (drag: Drag) => void;\n\ttoggle?: (isDragging: boolean) => void;\n}\n\nexport interface PointerDrag<Drag> {\n\tcurrent: () => Drag | undefined;\n\tend: () => void;\n}\n\nexport function bindDrag<Drag>(\n\ttarget: HTMLElement,\n\thandlers: DragHandlers<Drag>,\n\tsignal: AbortSignal,\n): PointerDrag<Drag> {\n\tlet held: undefined | { drag: Drag; pointerId: number };\n\n\tconst end = (): void => {\n\t\tif (!held) return;\n\n\t\tconst { drag } = held;\n\n\t\theld = undefined;\n\t\thandlers.toggle?.(false);\n\t\thandlers.release?.(drag);\n\t};\n\tconst whileHeld = (\n\t\ttype: 'lostpointercapture' | 'pointercancel' | 'pointermove' | 'pointerup',\n\t\thandle: (drag: Drag, event: PointerEvent) => void,\n\t): void => {\n\t\ttarget.addEventListener(\n\t\t\ttype,\n\t\t\t(event) => {\n\t\t\t\tif (held?.pointerId === event.pointerId) handle(held.drag, event);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t};\n\n\ttarget.addEventListener(\n\t\t'pointerdown',\n\t\t(event) => {\n\t\t\tif (event.button !== 0 || (held && held.pointerId !== event.pointerId)) return;\n\n\t\t\tend();\n\n\t\t\tconst drag = handlers.grab(event);\n\t\t\tif (drag === undefined) return;\n\n\t\t\theld = { drag, pointerId: event.pointerId };\n\t\t\ttarget.setPointerCapture(event.pointerId);\n\t\t\thandlers.toggle?.(true);\n\t\t},\n\t\t{ signal },\n\t);\n\twhileHeld('pointermove', handlers.move);\n\twhileHeld('pointercancel', (drag) => {\n\t\thandlers.cancel?.(drag);\n\t\tend();\n\t});\n\twhileHeld('lostpointercapture', end);\n\twhileHeld('pointerup', (drag, event) => {\n\t\tend();\n\t\thandlers.lift?.(drag, event);\n\t});\n\tsignal.addEventListener('abort', end, { once: true });\n\n\treturn { current: () => held?.drag, end };\n}\n"],"mappings":";AAcA,SAAgB,SACf,QACA,UACA,QACoB;CACpB,IAAI;CAEJ,MAAM,YAAkB;EACvB,IAAI,CAAC,MAAM;EAEX,MAAM,EAAE,SAAS;EAEjB,OAAO;EACP,SAAS,SAAS,KAAK;EACvB,SAAS,UAAU,IAAI;CACxB;CACA,MAAM,aACL,MACA,WACU;EACV,OAAO,iBACN,OACC,UAAU;GACV,IAAI,MAAM,cAAc,MAAM,WAAW,OAAO,KAAK,MAAM,KAAK;EACjE,GACA,EAAE,OAAO,CACV;CACD;CAEA,OAAO,iBACN,gBACC,UAAU;EACV,IAAI,MAAM,WAAW,KAAM,QAAQ,KAAK,cAAc,MAAM,WAAY;EAExE,IAAI;EAEJ,MAAM,OAAO,SAAS,KAAK,KAAK;EAChC,IAAI,SAAS,QAAW;EAExB,OAAO;GAAE;GAAM,WAAW,MAAM;EAAU;EAC1C,OAAO,kBAAkB,MAAM,SAAS;EACxC,SAAS,SAAS,IAAI;CACvB,GACA,EAAE,OAAO,CACV;CACA,UAAU,eAAe,SAAS,IAAI;CACtC,UAAU,kBAAkB,SAAS;EACpC,SAAS,SAAS,IAAI;EACtB,IAAI;CACL,CAAC;CACD,UAAU,sBAAsB,GAAG;CACnC,UAAU,cAAc,MAAM,UAAU;EACvC,IAAI;EACJ,SAAS,OAAO,MAAM,KAAK;CAC5B,CAAC;CACD,OAAO,iBAAiB,SAAS,KAAK,EAAE,MAAM,KAAK,CAAC;CAEpD,OAAO;EAAE,eAAe,MAAM;EAAM;CAAI;AACzC"}

package/dist/dev/lib/read-px-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"read-px-property.js","names":[],"sources":["../../../src/lib/read-px-property.ts"],"sourcesContent":["// Registered `<length>` properties only; their computed value is always px\nexport function readPxProperty(\n\tstyles: CSSStyleDeclaration,\n\tproperty: string,\n\tfallback: number,\n): number {\n\t// eslint-disable-next-line unicorn/prefer-number-coercion -- parsing has to stop at the unit\n\tconst parsed = Number.parseFloat(styles.getPropertyValue(property));\n\n\treturn Number.isFinite(parsed) ? parsed : fallback;\n}\n"],"mappings":";AACA,SAAgB,eACf,QACA,UACA,UACS;CAET,MAAM,SAAS,OAAO,WAAW,OAAO,iBAAiB,QAAQ,CAAC;CAElE,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC3C"}
+{"version":3,"file":"read-px-property.js","names":[],"sources":["../../../src/lib/read-px-property.ts"],"sourcesContent":["// Registered properties only; a registered `<length>` always computes to px\nexport function readPxProperty(\n\tstyles: CSSStyleDeclaration,\n\tproperty: string,\n\tfallback: number,\n): number {\n\t// eslint-disable-next-line unicorn/prefer-number-coercion -- parsing has to stop at the unit\n\tconst parsed = Number.parseFloat(styles.getPropertyValue(property));\n\n\treturn Number.isFinite(parsed) ? parsed : fallback;\n}\n"],"mappings":";AACA,SAAgB,eACf,QACA,UACA,UACS;CAET,MAAM,SAAS,OAAO,WAAW,OAAO,iBAAiB,QAAQ,CAAC;CAElE,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC3C"}

package/dist/dev/lib/render.js

@@ -13,15 +13,30 @@ function template(html, root) {
 		return clone;
 	};
 }
-function attachSlot(host) {
-	const slot = document.createElement("slot");
+function placeChildren(parent, children) {
+	const dropped = [...parent.childNodes].filter((child) => !children.includes(child));
+	for (const child of dropped) child.remove();
+	for (const [index, child] of children.entries()) {
+		const current = parent.childNodes[index];
+		if (current === child) continue;
+		if (current) current.before(child);
+		else parent.append(child);
+	}
+}
+function attachSlots(host) {
+	const shown = document.createElement("slot");
+	const kept = document.createElement("slot");
+	kept.style.cssText = "position: absolute; display: block; inline-size: 0; block-size: 0; overflow: hidden; visibility: hidden";
 	host.attachShadow({
 		mode: "open",
 		slotAssignment: "manual"
-	}).append(slot);
-	return slot;
+	}).append(shown, kept);
+	return {
+		kept,
+		shown
+	};
 }
 
 //#endregion
-export { attachSlot, requireChild, template };
+export { attachSlots, placeChildren, requireChild, template };
 //# sourceMappingURL=render.js.map

package/dist/dev/lib/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":[],"sources":["../../../src/lib/render.ts"],"sourcesContent":["export function requireChild<Child extends Element>(\n\troot: Element,\n\tselector: string,\n\tchild: new () => Child,\n): Child {\n\tconst found = root.querySelector(selector);\n\tif (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);\n\n\treturn found;\n}\n\nexport function template<Root extends Element>(html: string, root: new () => Root): () => Root {\n\tconst parsed = document.createElement('template');\n\n\tparsed.innerHTML = html;\n\n\treturn () => {\n\t\tconst clone = document.importNode(parsed.content, true).firstElementChild;\n\t\tif (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);\n\n\t\treturn clone;\n\t};\n}\n\n// Only the nodes the element assigns render, so a framework's own children stay put, bare text included\nexport function attachSlot(host: HTMLElement): HTMLSlotElement {\n\tconst slot = document.createElement('slot');\n\n\thost.attachShadow({ mode: 'open', slotAssignment: 'manual' }).append(slot);\n\n\treturn slot;\n}\n"],"mappings":";AAAA,SAAgB,aACf,MACA,UACA,OACQ;CACR,MAAM,QAAQ,KAAK,cAAc,QAAQ;CACzC,IAAI,EAAE,iBAAiB,QAAQ,MAAM,IAAI,MAAM,6BAA6B,UAAU;CAEtF,OAAO;AACR;AAEA,SAAgB,SAA+B,MAAc,MAAkC;CAC9F,MAAM,SAAS,SAAS,cAAc,UAAU;CAEhD,OAAO,YAAY;CAEnB,aAAa;EACZ,MAAM,QAAQ,SAAS,WAAW,OAAO,SAAS,IAAI,CAAC,CAAC;EACxD,IAAI,EAAE,iBAAiB,OAAO,MAAM,IAAI,MAAM,8BAA8B,KAAK,MAAM;EAEvF,OAAO;CACR;AACD;AAGA,SAAgB,WAAW,MAAoC;CAC9D,MAAM,OAAO,SAAS,cAAc,MAAM;CAE1C,KAAK,aAAa;EAAE,MAAM;EAAQ,gBAAgB;CAAS,CAAC,CAAC,CAAC,OAAO,IAAI;CAEzE,OAAO;AACR"}
+{"version":3,"file":"render.js","names":[],"sources":["../../../src/lib/render.ts"],"sourcesContent":["export function requireChild<Child extends Element>(\n\troot: Element,\n\tselector: string,\n\tchild: new () => Child,\n): Child {\n\tconst found = root.querySelector(selector);\n\tif (!(found instanceof child)) throw new Error(`A template is missing its ${selector}`);\n\n\treturn found;\n}\n\nexport function template<Root extends Element>(html: string, root: new () => Root): () => Root {\n\tconst parsed = document.createElement('template');\n\n\tparsed.innerHTML = html;\n\n\treturn () => {\n\t\tconst clone = document.importNode(parsed.content, true).firstElementChild;\n\t\tif (!(clone instanceof root)) throw new Error(`A template's root is not a ${root.name}`);\n\n\t\treturn clone;\n\t};\n}\n\nexport function placeChildren(parent: Element, children: Array<Node>): void {\n\tconst dropped = [...parent.childNodes].filter((child) => !children.includes(child));\n\n\tfor (const child of dropped) child.remove();\n\tfor (const [index, child] of children.entries()) {\n\t\tconst current = parent.childNodes[index];\n\n\t\t// A node taken out and put back restarts its animations\n\t\tif (current === child) continue;\n\n\t\tif (current) current.before(child);\n\t\telse parent.append(child);\n\t}\n}\n\nexport interface MirrorSlots {\n\tkept: HTMLSlotElement;\n\tshown: HTMLSlotElement;\n}\n\n// An id resolves to the first element in the tree that carries it, and paints nothing when that one has no box\nexport function attachSlots(host: HTMLElement): MirrorSlots {\n\tconst shown = document.createElement('slot');\n\tconst kept = document.createElement('slot');\n\n\tkept.style.cssText =\n\t\t'position: absolute; display: block; inline-size: 0; block-size: 0; overflow: hidden; visibility: hidden';\n\thost.attachShadow({ mode: 'open', slotAssignment: 'manual' }).append(shown, kept);\n\n\treturn { kept, shown };\n}\n"],"mappings":";AAAA,SAAgB,aACf,MACA,UACA,OACQ;CACR,MAAM,QAAQ,KAAK,cAAc,QAAQ;CACzC,IAAI,EAAE,iBAAiB,QAAQ,MAAM,IAAI,MAAM,6BAA6B,UAAU;CAEtF,OAAO;AACR;AAEA,SAAgB,SAA+B,MAAc,MAAkC;CAC9F,MAAM,SAAS,SAAS,cAAc,UAAU;CAEhD,OAAO,YAAY;CAEnB,aAAa;EACZ,MAAM,QAAQ,SAAS,WAAW,OAAO,SAAS,IAAI,CAAC,CAAC;EACxD,IAAI,EAAE,iBAAiB,OAAO,MAAM,IAAI,MAAM,8BAA8B,KAAK,MAAM;EAEvF,OAAO;CACR;AACD;AAEA,SAAgB,cAAc,QAAiB,UAA6B;CAC3E,MAAM,UAAU,CAAC,GAAG,OAAO,UAAU,CAAC,CAAC,QAAQ,UAAU,CAAC,SAAS,SAAS,KAAK,CAAC;CAElF,KAAK,MAAM,SAAS,SAAS,MAAM,OAAO;CAC1C,KAAK,MAAM,CAAC,OAAO,UAAU,SAAS,QAAQ,GAAG;EAChD,MAAM,UAAU,OAAO,WAAW;EAGlC,IAAI,YAAY,OAAO;EAEvB,IAAI,SAAS,QAAQ,OAAO,KAAK;OAC5B,OAAO,OAAO,KAAK;CACzB;AACD;AAQA,SAAgB,YAAY,MAAgC;CAC3D,MAAM,QAAQ,SAAS,cAAc,MAAM;CAC3C,MAAM,OAAO,SAAS,cAAc,MAAM;CAE1C,KAAK,MAAM,UACV;CACD,KAAK,aAAa;EAAE,MAAM;EAAQ,gBAAgB;CAAS,CAAC,CAAC,CAAC,OAAO,OAAO,IAAI;CAEhF,OAAO;EAAE;EAAM;CAAM;AACtB"}

package/dist/dev/lib/resample-peaks.js

@@ -0,0 +1,47 @@
+//#region src/lib/resample-peaks.ts
+function bucketBounds(sourceLength, index, count) {
+	const start = Math.floor(index * sourceLength / count);
+	return [start, Math.max(start + 1, Math.floor((index + 1) * sourceLength / count))];
+}
+function downsample(peaks, count) {
+	const resampled = [];
+	for (let index = 0; index < count; index += 1) {
+		const [start, end] = bucketBounds(peaks.length, index, count);
+		let total = 0;
+		for (let source = start; source < end; source += 1) total += peaks[source] ?? 0;
+		resampled.push(total / (end - start));
+	}
+	return rescale(resampled, peakOf(peaks));
+}
+function peakOf(peaks) {
+	let loudest = 0;
+	for (const peak of peaks) loudest = Math.max(loudest, peak);
+	return loudest;
+}
+function rescale(bars, loudest) {
+	const tallest = peakOf(bars);
+	if (tallest <= 0) return bars;
+	return bars.map((bar) => bar * loudest / tallest);
+}
+function upsample(peaks, count) {
+	const resampled = [];
+	const last = peaks.length - 1;
+	for (let index = 0; index < count; index += 1) {
+		const sourceIndex = count === 1 ? 0 : index * last / (count - 1);
+		const before = Math.floor(sourceIndex);
+		const weight = sourceIndex - before;
+		resampled.push((peaks[before] ?? 0) * (1 - weight) + (peaks[Math.min(last, before + 1)] ?? 0) * weight);
+	}
+	return resampled;
+}
+function resamplePeaks(peaks, count) {
+	if (count <= 0 || peaks.length === 0) return [];
+	const finite = Array.from(peaks, (peak) => Number.isFinite(peak) ? peak : 0);
+	if (count === finite.length) return finite;
+	if (count > finite.length) return upsample(finite, count);
+	return downsample(finite, count);
+}
+
+//#endregion
+export { resamplePeaks };
+//# sourceMappingURL=resample-peaks.js.map

package/dist/dev/lib/resample-peaks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resample-peaks.js","names":[],"sources":["../../../src/lib/resample-peaks.ts"],"sourcesContent":["function bucketBounds(sourceLength: number, index: number, count: number): [number, number] {\n\tconst start = Math.floor((index * sourceLength) / count);\n\n\treturn [start, Math.max(start + 1, Math.floor(((index + 1) * sourceLength) / count))];\n}\n\nfunction downsample(peaks: ReadonlyArray<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst [start, end] = bucketBounds(peaks.length, index, count);\n\t\tlet total = 0;\n\n\t\tfor (let source = start; source < end; source += 1) total += peaks[source] ?? 0;\n\t\tresampled.push(total / (end - start));\n\t}\n\n\treturn rescale(resampled, peakOf(peaks));\n}\n\nfunction peakOf(peaks: ReadonlyArray<number>): number {\n\tlet loudest = 0;\n\n\tfor (const peak of peaks) loudest = Math.max(loudest, peak);\n\n\treturn loudest;\n}\n\nfunction rescale(bars: Array<number>, loudest: number): Array<number> {\n\tconst tallest = peakOf(bars);\n\tif (tallest <= 0) return bars;\n\n\treturn bars.map((bar) => (bar * loudest) / tallest);\n}\n\nfunction upsample(peaks: ArrayLike<number>, count: number): Array<number> {\n\tconst resampled: Array<number> = [];\n\tconst last = peaks.length - 1;\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst sourceIndex = count === 1 ? 0 : (index * last) / (count - 1);\n\t\tconst before = Math.floor(sourceIndex);\n\t\tconst weight = sourceIndex - before;\n\n\t\tresampled.push(\n\t\t\t(peaks[before] ?? 0) * (1 - weight) + (peaks[Math.min(last, before + 1)] ?? 0) * weight,\n\t\t);\n\t}\n\n\treturn resampled;\n}\n\nexport function resamplePeaks(peaks: ArrayLike<number>, count: number): Array<number> {\n\tif (count <= 0 || peaks.length === 0) return [];\n\n\tconst finite = Array.from(peaks, (peak) => (Number.isFinite(peak) ? peak : 0));\n\n\tif (count === finite.length) return finite;\n\tif (count > finite.length) return upsample(finite, count);\n\n\treturn downsample(finite, count);\n}\n"],"mappings":";AAAA,SAAS,aAAa,cAAsB,OAAe,OAAiC;CAC3F,MAAM,QAAQ,KAAK,MAAO,QAAQ,eAAgB,KAAK;CAEvD,OAAO,CAAC,OAAO,KAAK,IAAI,QAAQ,GAAG,KAAK,OAAQ,QAAQ,KAAK,eAAgB,KAAK,CAAC,CAAC;AACrF;AAEA,SAAS,WAAW,OAA8B,OAA8B;CAC/E,MAAM,YAA2B,CAAC;CAElC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,CAAC,OAAO,OAAO,aAAa,MAAM,QAAQ,OAAO,KAAK;EAC5D,IAAI,QAAQ;EAEZ,KAAK,IAAI,SAAS,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,MAAM,WAAW;EAC9E,UAAU,KAAK,SAAS,MAAM,MAAM;CACrC;CAEA,OAAO,QAAQ,WAAW,OAAO,KAAK,CAAC;AACxC;AAEA,SAAS,OAAO,OAAsC;CACrD,IAAI,UAAU;CAEd,KAAK,MAAM,QAAQ,OAAO,UAAU,KAAK,IAAI,SAAS,IAAI;CAE1D,OAAO;AACR;AAEA,SAAS,QAAQ,MAAqB,SAAgC;CACrE,MAAM,UAAU,OAAO,IAAI;CAC3B,IAAI,WAAW,GAAG,OAAO;CAEzB,OAAO,KAAK,KAAK,QAAS,MAAM,UAAW,OAAO;AACnD;AAEA,SAAS,SAAS,OAA0B,OAA8B;CACzE,MAAM,YAA2B,CAAC;CAClC,MAAM,OAAO,MAAM,SAAS;CAE5B,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,cAAc,UAAU,IAAI,IAAK,QAAQ,QAAS,QAAQ;EAChE,MAAM,SAAS,KAAK,MAAM,WAAW;EACrC,MAAM,SAAS,cAAc;EAE7B,UAAU,MACR,MAAM,WAAW,MAAM,IAAI,WAAW,MAAM,KAAK,IAAI,MAAM,SAAS,CAAC,MAAM,KAAK,MAClF;CACD;CAEA,OAAO;AACR;AAEA,SAAgB,cAAc,OAA0B,OAA8B;CACrF,IAAI,SAAS,KAAK,MAAM,WAAW,GAAG,OAAO,CAAC;CAE9C,MAAM,SAAS,MAAM,KAAK,QAAQ,SAAU,OAAO,SAAS,IAAI,IAAI,OAAO,CAAE;CAE7E,IAAI,UAAU,OAAO,QAAQ,OAAO;CACpC,IAAI,QAAQ,OAAO,QAAQ,OAAO,SAAS,QAAQ,KAAK;CAExD,OAAO,WAAW,QAAQ,KAAK;AAChC"}

package/dist/dev/lib/strip-scene.js

@@ -0,0 +1,49 @@
+import { clampProportion } from "./math.js";
+import { resamplePeaks } from "./resample-peaks.js";
+
+//#region src/lib/strip-scene.ts
+function stripBars(peaks, size, grid) {
+	const pitch = Math.max(1, Math.round(grid.pitch * size.dpr));
+	const gap = Math.min(pitch - 1, Math.max(0, Math.round(pitch * grid.gapRatio)));
+	const width = pitch - gap;
+	const count = Math.max(0, Math.floor((size.width + gap) / pitch));
+	return resamplePeaks(peaks, count).map((peak, index) => {
+		const height = Math.max(1, Math.round(clampProportion(peak) * size.height));
+		return {
+			height,
+			radius: width * grid.radiusRatio,
+			width,
+			x: index * pitch,
+			y: Math.round((size.height - height) / 2)
+		};
+	});
+}
+function stripRegions(state, widthPx) {
+	const px = (proportion) => Math.round((Number.isFinite(proportion) ? proportion : 0) * widthPx);
+	const buffered = state.buffered.map(([start, end]) => [px(start), px(end)]).filter(([start, end]) => end > start);
+	const played = px(state.played);
+	const scrub = state.scrub === void 0 ? played : px(state.scrub);
+	const regions = buffered.map(([from, to]) => ({
+		from,
+		kind: "buffered",
+		to
+	}));
+	if (played > 0) regions.push({
+		from: 0,
+		kind: "played",
+		to: played
+	});
+	if (scrub !== played) regions.push({
+		from: Math.min(played, scrub),
+		kind: "scrub",
+		to: Math.max(played, scrub)
+	});
+	return {
+		key: `${String(played)}:${String(scrub)}:${buffered.join(",")}`,
+		regions
+	};
+}
+
+//#endregion
+export { stripBars, stripRegions };
+//# sourceMappingURL=strip-scene.js.map

package/dist/dev/lib/strip-scene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strip-scene.js","names":[],"sources":["../../../src/lib/strip-scene.ts"],"sourcesContent":["import type { SurfaceSize } from '#lib/canvas-surface.ts';\n\nimport { clampProportion } from '#lib/math.ts';\nimport { resamplePeaks } from '#lib/resample-peaks.ts';\n\ninterface BarRect {\n\theight: number;\n\tradius: number;\n\twidth: number;\n\tx: number;\n\ty: number;\n}\n\ninterface BarGrid {\n\tgapRatio: number;\n\tpitch: number;\n\tradiusRatio: number;\n}\n\ninterface RegionState {\n\tbuffered: ReadonlyArray<[number, number]>;\n\tplayed: number;\n\tscrub?: number;\n}\n\nexport interface StripRegions {\n\tkey: string;\n\tregions: Array<{ from: number; kind: 'buffered' | 'played' | 'scrub'; to: number }>;\n}\n\n// Whole device pixels, or bars alias unevenly and Skia's CPU raster crawls\nexport function stripBars(\n\tpeaks: ArrayLike<number>,\n\tsize: SurfaceSize,\n\tgrid: BarGrid,\n): Array<BarRect> {\n\tconst pitch = Math.max(1, Math.round(grid.pitch * size.dpr));\n\tconst gap = Math.min(pitch - 1, Math.max(0, Math.round(pitch * grid.gapRatio)));\n\tconst width = pitch - gap;\n\tconst count = Math.max(0, Math.floor((size.width + gap) / pitch));\n\n\treturn resamplePeaks(peaks, count).map((peak, index) => {\n\t\tconst height = Math.max(1, Math.round(clampProportion(peak) * size.height));\n\n\t\treturn {\n\t\t\theight,\n\t\t\tradius: width * grid.radiusRatio,\n\t\t\twidth,\n\t\t\tx: index * pitch,\n\t\t\ty: Math.round((size.height - height) / 2),\n\t\t};\n\t});\n}\n\nexport function stripRegions(state: RegionState, widthPx: number): StripRegions {\n\tconst px = (proportion: number): number =>\n\t\tMath.round((Number.isFinite(proportion) ? proportion : 0) * widthPx);\n\tconst buffered = state.buffered\n\t\t.map(([start, end]): [number, number] => [px(start), px(end)])\n\t\t.filter(([start, end]) => end > start);\n\tconst played = px(state.played);\n\tconst scrub = state.scrub === undefined ? played : px(state.scrub);\n\tconst regions: StripRegions['regions'] = buffered.map(([from, to]) => ({\n\t\tfrom,\n\t\tkind: 'buffered',\n\t\tto,\n\t}));\n\n\tif (played > 0) regions.push({ from: 0, kind: 'played', to: played });\n\tif (scrub !== played) {\n\t\tregions.push({ from: Math.min(played, scrub), kind: 'scrub', to: Math.max(played, scrub) });\n\t}\n\n\treturn { key: `${String(played)}:${String(scrub)}:${buffered.join(',')}`, regions };\n}\n"],"mappings":";;;;AA+BA,SAAgB,UACf,OACA,MACA,MACiB;CACjB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,QAAQ,KAAK,GAAG,CAAC;CAC3D,MAAM,MAAM,KAAK,IAAI,QAAQ,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,KAAK,QAAQ,CAAC,CAAC;CAC9E,MAAM,QAAQ,QAAQ;CACtB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,QAAQ,OAAO,KAAK,CAAC;CAEhE,OAAO,cAAc,OAAO,KAAK,CAAC,CAAC,KAAK,MAAM,UAAU;EACvD,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,gBAAgB,IAAI,IAAI,KAAK,MAAM,CAAC;EAE1E,OAAO;GACN;GACA,QAAQ,QAAQ,KAAK;GACrB;GACA,GAAG,QAAQ;GACX,GAAG,KAAK,OAAO,KAAK,SAAS,UAAU,CAAC;EACzC;CACD,CAAC;AACF;AAEA,SAAgB,aAAa,OAAoB,SAA+B;CAC/E,MAAM,MAAM,eACX,KAAK,OAAO,OAAO,SAAS,UAAU,IAAI,aAAa,KAAK,OAAO;CACpE,MAAM,WAAW,MAAM,SACrB,KAAK,CAAC,OAAO,SAA2B,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAC7D,QAAQ,CAAC,OAAO,SAAS,MAAM,KAAK;CACtC,MAAM,SAAS,GAAG,MAAM,MAAM;CAC9B,MAAM,QAAQ,MAAM,UAAU,SAAY,SAAS,GAAG,MAAM,KAAK;CACjE,MAAM,UAAmC,SAAS,KAAK,CAAC,MAAM,SAAS;EACtE;EACA,MAAM;EACN;CACD,EAAE;CAEF,IAAI,SAAS,GAAG,QAAQ,KAAK;EAAE,MAAM;EAAG,MAAM;EAAU,IAAI;CAAO,CAAC;CACpE,IAAI,UAAU,QACb,QAAQ,KAAK;EAAE,MAAM,KAAK,IAAI,QAAQ,KAAK;EAAG,MAAM;EAAS,IAAI,KAAK,IAAI,QAAQ,KAAK;CAAE,CAAC;CAG3F,OAAO;EAAE,KAAK,GAAG,OAAO,MAAM,EAAE,GAAG,OAAO,KAAK,EAAE,GAAG,SAAS,KAAK,GAAG;EAAK;CAAQ;AACnF"}

package/dist/dev/lib/taper.js

@@ -1,43 +1,49 @@
-import { clampUnit } from "./math.js";
+import { clampProportion } from "./math.js";
 
 //#region src/lib/taper.ts
 function linearTaper(min, max) {
 	const range = max - min;
 	return {
-		position: (value) => range > 0 ? clampUnit((value - min) / range) : 0,
-		value: (position) => min + clampUnit(position) * range
+		proportionOf: (value) => range > 0 ? clampProportion((value - min) / range) : 0,
+		valueAt: (proportion) => min + clampProportion(proportion) * range
 	};
 }
 function logTaper(min, max) {
 	if (min <= 0 || max <= min) return void 0;
 	const span = Math.log(max / min);
 	return {
-		position: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),
-		value: (position) => min * Math.exp(clampUnit(position) * span)
+		proportionOf: (value) => clampProportion(Math.log(Math.max(min, value) / min) / span),
+		valueAt: (proportion) => {
+			const clamped = clampProportion(proportion);
+			if (clamped === 0) return min;
+			if (clamped === 1) return max;
+			return min * Math.exp(clamped * span);
+		}
 	};
 }
 function skewTaper(min, max, midpoint) {
 	const range = max - min;
-	const proportion = (midpoint - min) / range;
-	if (proportion === .5 || !(proportion > 0 && proportion < 1)) return void 0;
-	const skew = Math.log(.5) / Math.log(proportion);
+	const midpointProportion = (midpoint - min) / range;
+	if (midpointProportion === .5 || !(midpointProportion > 0 && midpointProportion < 1)) return void 0;
+	const skew = Math.log(.5) / Math.log(midpointProportion);
 	return {
-		position: (value) => clampUnit((value - min) / range) ** skew,
-		value: (position) => min + range * clampUnit(position) ** (1 / skew)
+		proportionOf: (value) => clampProportion((value - min) / range) ** skew,
+		valueAt: (proportion) => min + range * clampProportion(proportion) ** (1 / skew)
 	};
 }
-function listTaper(entries) {
-	const last = entries.length - 1;
+function listTaper(positions) {
+	const last = positions.length - 1;
 	return {
-		position: (value) => {
-			const above = entries.findIndex((entry) => entry >= value);
+		proportionOf: (value) => {
+			if (Number.isNaN(value)) return NaN;
+			const above = positions.findIndex((position) => position >= value);
 			if (above === -1) return 1;
-			const high = entries[above];
-			const low = entries[above - 1];
+			const high = positions[above];
+			const low = positions[above - 1];
 			if (high === void 0 || low === void 0) return 0;
 			return (above - 1 + (value - low) / (high - low)) / last;
 		},
-		value: (position) => entries[Math.round(clampUnit(position) * last)] ?? NaN
+		valueAt: (proportion) => positions[Math.round(clampProportion(proportion) * last)] ?? NaN
 	};
 }