@xsynaptic/sonic-ui 0.5.0 → 0.6.0

package/dist/default/elements/wavestrip.js

@@ -2,7 +2,7 @@ import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { SonicWaveElement } from "./wave-element.js";
-import { createMarkerBand, nearestMarker } from "../lib/marker-band.js";
+import { createMarkerBand } from "../lib/marker-band.js";
 import { stripBars, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
@@ -101,7 +101,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 		]);
 	}
 	renderMarkers() {
-		this.#markerBand.render(this.markers, this.markerProportions());
+		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}
 	scrubsKeyRepeat() {
 		return true;
@@ -111,6 +111,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 		return {
 			position: (event) => event.clientX,
 			startPx: box.left,
+			topPx: box.top,
 			travelPx: Math.max(1, box.width)
 		};
 	}
@@ -126,10 +127,11 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#bindHover(strip, signal) {
 		strip.addEventListener("pointermove", (event) => {
 			if (event.pointerType === "touch" || event.buttons !== 0) return;
-			if (!this.readout || this.isDisabled()) return;
+			if (!this.readout) return;
 			const axis = this.#axis();
 			const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
-			this.hoverReadout(this.#markerAt(at, axis.travelPx) ?? this.mapping().valueAt(at));
+			const mapping = this.mapping();
+			this.hoverReadout(this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at)));
 			this.#placeReadout();
 		}, { signal });
 		for (const type of ["pointerdown", "pointerleave"]) strip.addEventListener(type, () => {
@@ -137,25 +139,26 @@ var SonicWavestrip = class extends SonicWaveElement {
 		}, { signal });
 	}
 	#grab(event) {
-		const { startPx, ...axis } = this.#axis();
-		const at = (event.clientX - startPx) / axis.travelPx;
+		const axis = this.#axis();
+		const at = (event.clientX - axis.startPx) / axis.travelPx;
 		const outside = this.#outside();
 		const grabbed = {
-			...axis,
-			fromProportion: clampProportion(at)
+			fromProportion: clampProportion(at),
+			position: axis.position,
+			travelPx: axis.travelPx
 		};
-		this.input(this.#markerAt(at, axis.travelPx) ?? this.mapping().valueAt(at));
+		this.input(this.#markerAt(event, axis) ?? this.mapping().valueAt(at));
 		return outside ? {
 			...grabbed,
 			outside
 		} : grabbed;
 	}
-	#markerAt(at, travelPx) {
-		const markers = this.markers;
-		if (markers.length === 0) return void 0;
-		const { proportionOf } = this.mapping();
-		const index = nearestMarker(at, markers.map(({ start }) => proportionOf(start)), this.#markerBand.reachPx() / travelPx);
-		return index === void 0 ? void 0 : markers[index]?.start;
+	#markerAt(event, { startPx, topPx, travelPx }) {
+		const index = this.#markerBand.at({
+			x: event.clientX - startPx,
+			y: event.clientY - topPx
+		}, travelPx);
+		return index === void 0 ? void 0 : this.markerList()[index]?.start;
 	}
 	#outside() {
 		if (!this.cancellable) return void 0;

package/dist/default/elements/xy.js

@@ -1,4 +1,4 @@
-import { clampProportion } from "../lib/math.js";
+import { clampProportion, toNumber } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
@@ -7,9 +7,9 @@ import { Readout } from "./readout.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 
 //#region src/elements/xy.ts
 const axes = ["x", "y"];
@@ -193,6 +193,7 @@ var SonicXy = class extends SonicFormElement {
 	#xy = renderXy();
 	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
 	#formatValue;
+	#mapped;
 	#parts = {
 		x: requireChild(this.#xy, "[data-sonic-axis=\"x\"]", HTMLDivElement),
 		y: requireChild(this.#xy, "[data-sonic-axis=\"y\"]", HTMLDivElement)
@@ -202,18 +203,19 @@ var SonicXy = class extends SonicFormElement {
 	#readout = new Readout(requireChild(this.#xy, ".sonic-xy-readout", HTMLDivElement));
 	#values = {
 		x: {
-			isDirty: false,
+			asked: void 0,
 			value: 0
 		},
 		y: {
-			isDirty: false,
+			asked: void 0,
 			value: 0
 		}
 	};
 	attributeChangedCallback(name) {
+		this.#mapped = void 0;
 		if (name === "x" || name === "y") {
 			if (this.#pointerDrag?.current()) return;
-			this.#values[name].isDirty = false;
+			this.#values[name].asked = void 0;
 		}
 		if (name === "disabled" && this.isDisabled()) this.#pointerDrag?.end();
 		this.#refresh();
@@ -223,12 +225,12 @@ var SonicXy = class extends SonicFormElement {
 		super.connectedCallback();
 	}
 	formResetCallback() {
-		for (const axis of axes) this.#values[axis].isDirty = false;
+		for (const axis of axes) this.#values[axis].asked = void 0;
 		this.#refresh();
 	}
 	connect(signal) {
 		const xy = this.#xy;
-		this.appendOnce(xy);
+		this.keepControl(xy, signal);
 		this.render();
 		this.checkStyles(xy, "xy.css");
 		this.#bindPointer(xy, signal);
@@ -238,6 +240,7 @@ var SonicXy = class extends SonicFormElement {
 		return this.#parts[this.#currentAxis];
 	}
 	render() {
+		if (!this.isBound()) return;
 		const { style } = this.#xy;
 		const mappings = this.#mappings();
 		for (const axis of axes) {
@@ -365,7 +368,7 @@ var SonicXy = class extends SonicFormElement {
 		return true;
 	}
 	#keyTo(axis, key) {
-		const next = this.#mapping(axis).keyTarget(key, this.#values[axis].value);
+		const next = this.#mappings()[axis].keyTarget(key, this.#values[axis].value);
 		const hasMoved = this.#set(axis, next ?? NaN);
 		this.#currentAxis = axis;
 		this.render();
@@ -390,17 +393,19 @@ var SonicXy = class extends SonicFormElement {
 		});
 	}
 	#mappings() {
-		return {
+		if (this.#mapped) return this.#mapped;
+		this.#mapped = {
 			x: this.#mapping("x"),
 			y: this.#mapping("y")
 		};
+		return this.#mapped;
 	}
 	#refresh() {
 		const mappings = this.#mappings();
 		for (const axis of axes) {
 			const axisValue = this.#values[axis];
 			const mapping = mappings[axis];
-			axisValue.value = mapping.snap(axisValue.isDirty ? axisValue.value : this.numberAttribute(axis, mapping.bounds[0]));
+			axisValue.value = mapping.snap(axisValue.asked ?? this.numberAttribute(axis, mapping.bounds[0]));
 		}
 		this.render();
 	}
@@ -412,11 +417,11 @@ var SonicXy = class extends SonicFormElement {
 			const [low, high] = mappings[axis].bounds;
 			const isCurrent = axis === this.#currentAxis;
 			const stop = isCurrent ? "0" : "-1";
-			part.setAttribute("aria-orientation", orientations[axis]);
-			part.setAttribute("aria-valuemin", String(low));
-			part.setAttribute("aria-valuemax", String(high));
-			part.setAttribute("aria-valuenow", String(this.#values[axis].value));
-			part.setAttribute("aria-valuetext", this.#valueText(axis));
+			writeAttribute(part, "aria-orientation", orientations[axis]);
+			writeAttribute(part, "aria-valuemin", String(low));
+			writeAttribute(part, "aria-valuemax", String(high));
+			writeAttribute(part, "aria-valuenow", String(this.#values[axis].value));
+			writeAttribute(part, "aria-valuetext", this.#valueText(axis));
 			this.forwardNaming(part, true);
 			writeAttribute(part, "aria-hidden", isCurrent ? void 0 : "true");
 			writeAttribute(part, "aria-disabled", isDisabled ? "true" : void 0);
@@ -451,8 +456,8 @@ var SonicXy = class extends SonicFormElement {
 	#set(axis, next) {
 		if (!Number.isFinite(next)) return false;
 		const axisValue = this.#values[axis];
-		const snapped = this.#mapping(axis).snap(next);
-		axisValue.isDirty = true;
+		const snapped = this.#mappings()[axis].snap(next);
+		axisValue.asked = snapped;
 		if (snapped === axisValue.value) return false;
 		axisValue.value = snapped;
 		return true;
@@ -465,7 +470,16 @@ var SonicXy = class extends SonicFormElement {
 	}
 	#write(axis, next) {
 		if (this.#pointerDrag?.current()) return;
-		if (this.#set(axis, next)) this.render();
+		const axisValue = this.#values[axis];
+		if (next === void 0 || next === null) {
+			axisValue.asked = void 0;
+			this.#refresh();
+			return;
+		}
+		const asked = toNumber(next);
+		const hasMoved = this.#set(axis, asked);
+		if (Number.isFinite(asked)) axisValue.asked = asked;
+		if (hasMoved) this.render();
 	}
 };
 

package/dist/default/index.js

@@ -1,13 +1,13 @@
+import { SonicButton } from "./elements/button.js";
 import { SonicDial } from "./elements/dial.js";
 import { envelopeCurve } from "./lib/envelope-curve.js";
 import { SonicEnvelope } from "./elements/envelope.js";
-import { SonicButton } from "./elements/button.js";
-import { SonicSwitch } from "./elements/switch.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { SonicSplit } from "./elements/split.js";
+import { SonicSwitch } from "./elements/switch.js";
 import { SonicWaveform } from "./elements/waveform.js";
 import { SonicWavestrip } from "./elements/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";

package/dist/default/lib/adsr-shape.js

@@ -98,8 +98,13 @@ function adsrShape(proportions, curves = {}) {
 }
 function adsrPath({ points }) {
 	const stroke = points.map(({ x, y }, index) => `${index === 0 ? "M" : "L"}${String(roundTo(x, 4))} ${String(roundTo(1 - y, 4))}`).join("");
+	const floor = {
+		from: roundTo(points[0]?.x ?? 0, 4),
+		to: roundTo(points.at(-1)?.x ?? 0, 4)
+	};
 	return {
 		fill: `${stroke}Z`,
+		floor,
 		stroke
 	};
 }

package/dist/default/lib/ballistics.js

@@ -3,13 +3,13 @@ const burstTimeConstants = -Math.log(1 - 10 ** (-2 / 20));
 function ppmRate({ burstMs, fallDecibels, fallSeconds }) {
 	return {
 		fallDecibelsPerSecond: fallDecibels / fallSeconds,
-		riseMs: burstMs / burstTimeConstants
+		riseTimeConstantMs: burstMs / burstTimeConstants
 	};
 }
 const ballisticsRates = {
 	peak: {
 		fallDecibelsPerSecond: 20,
-		riseMs: 0
+		riseTimeConstantMs: 0
 	},
 	"ppm-1": ppmRate({
 		burstMs: 5,

package/dist/default/lib/canvas-surface.js

@@ -69,12 +69,22 @@ var CanvasSurface = class {
 		style.setProperty("transition-timing-function", "step-start");
 		style.setProperty("transition-behavior", "allow-discrete");
 	}
+	#current() {
+		if (this.#look && !this.#isRebuildWanted) return {
+			isRebuilt: false,
+			look: this.#look
+		};
+		return {
+			isRebuilt: true,
+			look: this.#read()
+		};
+	}
 	#draw(frameMs) {
 		this.#frame = void 0;
 		const size = this.#size;
 		if (size.width === 0 || size.height === 0) return;
 		const { canvas, paint } = this.#options;
-		const look = this.#isRebuildWanted || !this.#look ? this.#read() : this.#look;
+		const { isRebuilt, look } = this.#current();
 		const isDirty = this.#isDirty;
 		this.#look = look;
 		this.#isDirty = false;
@@ -84,6 +94,7 @@ var CanvasSurface = class {
 		if (this.#context) paint(this.#context, {
 			frameMs,
 			isDirty,
+			isRebuilt,
 			look,
 			size
 		});
@@ -140,7 +151,7 @@ var CanvasSurface = class {
 		const { canvas, colours, lengths = {} } = this.#options;
 		const styles = getComputedStyle(canvas);
 		return {
-			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim()),
+			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color)),
 			isReducedMotion: this.#reducedMotion.matches,
 			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0))
 		};

package/dist/default/lib/distribute.js

@@ -77,7 +77,7 @@ function byShortfall(values, { exact, order }, direction) {
 		const value = values[index] ?? NaN;
 		return trimFloat(direction * ((exact.get(index) ?? value) - value));
 	};
-	return order.toReversed().sort((first, second) => shortfall(second) - shortfall(first));
+	return order.toReversed().toSorted((first, second) => shortfall(second) - shortfall(first));
 }
 function stepEach(members, values, pass) {
 	let remainder = pass.owed;

package/dist/default/lib/drag-step.js

@@ -10,18 +10,18 @@ function dragThresholdPx(pointerType) {
 function isAcross(from, to, proportion) {
 	return from !== proportion && (from - proportion) * (to - proportion) <= 0;
 }
-function passDetent(hold, from, to) {
+function passDetent(hold, [from, to], pace) {
 	if (hold.slack === void 0 && !isAcross(from, to, hold.proportion)) return {
 		proportion: to,
 		slack: void 0
 	};
-	const slack = (hold.slack ?? 0) + to - hold.proportion;
+	const slack = (hold.slack ?? 0) + (to - hold.proportion) / pace;
 	if (Math.abs(slack) <= hold.zone) return {
 		proportion: void 0,
 		slack
 	};
 	return {
-		proportion: hold.proportion + slack - Math.sign(slack) * hold.zone,
+		proportion: hold.proportion + (slack - Math.sign(slack) * hold.zone) * pace,
 		slack: void 0
 	};
 }
@@ -77,7 +77,7 @@ function stepDrag(mapping, state, move) {
 	};
 	const { detent } = state;
 	if (!detent) return land(mapping, moved, to);
-	const passed = passDetent(mapping.isWrapping ? nearestTurn(detent, state.rawProportion) : detent, state.rawProportion, to);
+	const passed = passDetent(mapping.isWrapping ? nearestTurn(detent, state.rawProportion) : detent, [state.rawProportion, to], pace);
 	const held = {
 		...moved,
 		detent: {

package/dist/default/lib/frame-timeline.js

@@ -2,6 +2,7 @@ import { trimFloat } from "./math.js";
 
 //#region src/lib/frame-timeline.ts
 const placeholderPeriodMs = 2500;
+const lookAheadSeconds = 30;
 function windowStart(input, seconds, windowSeconds) {
 	if (!input.isPaged) return seconds - windowSeconds / 2;
 	if (input.held) return input.held.grabbed.startSeconds + seconds - input.held.grabbed.seconds;
@@ -31,7 +32,7 @@ function frameTimeline(input) {
 	const pending = pendingIn(input, [startSeconds, startSeconds + windowSeconds]);
 	const placeholder = placeholderPhase(input, pending);
 	const phase = placeholder ?? 0;
-	const wanted = overlap([startSeconds - windowSeconds, startSeconds + 2 * windowSeconds], range);
+	const wanted = overlap([startSeconds - windowSeconds, startSeconds + windowSeconds + Math.max(windowSeconds, lookAheadSeconds)], range);
 	const at = (time) => (time - startSeconds) / windowSeconds;
 	return {
 		...held ? { ghostAt: at(clockSeconds) } : {},

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

@@ -3,28 +3,72 @@ import { readPxProperty } from "./read-px-property.js";
 //#region src/lib/marker-band.ts
 const kindPattern = /^[a-z][a-z0-9-]*$/;
 const snapSlopPx = 4;
-function renderMarker(marker, [from, to]) {
+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 = marker.end === void 0 ? "sonic-wavestrip-marker" : "sonic-wavestrip-region";
+	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));
-	if (marker.kind !== void 0 && kindPattern.test(marker.kind)) part.style.setProperty("--_sonic-marker", `var(--sonic-marker-${marker.kind}, var(--_sonic-marker-default))`);
+	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 {
-		reachPx: () => readPxProperty(getComputedStyle(band), "--_sonic-marker-size", 0) / 2 + snapSlopPx,
+		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) => {
-			band.replaceChildren(...markers.map((marker, index) => renderMarker(marker, proportions[index] ?? [0, 0])));
+			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 nearestMarker(proportion, markerProportions, reach) {
+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;
-	for (const [index, markerProportion] of markerProportions.entries()) {
-		const distance = Math.abs(markerProportion - proportion);
+	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;
@@ -33,4 +77,4 @@ function nearestMarker(proportion, markerProportions, reach) {
 }
 
 //#endregion
-export { createMarkerBand, nearestMarker };
+export { createMarkerBand, isKind, markerLanes, nearestDot, writeKind };

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

@@ -1,6 +1,7 @@
 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;
@@ -43,6 +44,7 @@ function layoutRider(labels, view) {
 function labelSlot(element) {
 	return {
 		element,
+		kind: void 0,
 		opacity: NaN,
 		shownPx: NaN,
 		x: NaN
@@ -63,13 +65,17 @@ function writePlacement(slot, { opacity, shownPx, x }, widthPx) {
 		style.setProperty("opacity", opacity < 1 ? opacity.toFixed(3) : "");
 	}
 }
-function writeLabel(slot, labels, placement) {
+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) {
@@ -85,7 +91,7 @@ function measureWidths(control, className, texts) {
 	return widths;
 }
 function createLabelRider(control, options) {
-	const { className, insetProperty } = options;
+	const { className, colourProperty, insetProperty } = options;
 	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
 	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
 	let insetPx = 0;
@@ -104,8 +110,8 @@ function createLabelRider(control, options) {
 				...window,
 				insetPx
 			});
-			writeLabel(parked, measured, layout.parked);
-			writeLabel(arriving, measured, layout.arriving);
+			writeLabel(parked, [measured, colourProperty], layout.parked);
+			writeLabel(arriving, [measured, colourProperty], layout.arriving);
 		}
 	};
 }

package/dist/default/lib/math.js

@@ -2,6 +2,11 @@
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
+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);
 }
@@ -22,4 +27,4 @@ function roundTo(value, places) {
 }
 
 //#endregion
-export { clamp, clampProportion, decimalPlaces, roundTo, trimFloat, wrapProportion };
+export { clamp, clampProportion, decimalPlaces, roundTo, toNumber, trimFloat, wrapProportion };

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

@@ -5,8 +5,8 @@ function bindDrag(target, handlers, signal) {
 		if (!held) return;
 		const { drag } = held;
 		held = void 0;
-		handlers.toggle(false);
-		handlers.release(drag);
+		handlers.toggle?.(false);
+		handlers.release?.(drag);
 	};
 	const whileHeld = (type, handle) => {
 		target.addEventListener(type, (event) => {
@@ -23,15 +23,18 @@ function bindDrag(target, handlers, signal) {
 			pointerId: event.pointerId
 		};
 		target.setPointerCapture(event.pointerId);
-		handlers.toggle(true);
+		handlers.toggle?.(true);
 	}, { signal });
 	whileHeld("pointermove", handlers.move);
 	whileHeld("pointercancel", (drag) => {
-		handlers.cancel(drag);
+		handlers.cancel?.(drag);
 		end();
 	});
 	whileHeld("lostpointercapture", end);
-	whileHeld("pointerup", end);
+	whileHeld("pointerup", (drag, event) => {
+		end();
+		handlers.lift?.(drag, event);
+	});
 	signal.addEventListener("abort", end, { once: true });
 	return {
 		current: () => held?.drag,

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

@@ -11,7 +11,17 @@ function downsample(peaks, count) {
 		for (let source = start; source < end; source += 1) total += peaks[source] ?? 0;
 		resampled.push(total / (end - start));
 	}
-	return resampled;
+	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 = [];

package/dist/default/lib/write-attribute.js

@@ -4,6 +4,7 @@ function writeAttribute(element, name, value) {
 		element.removeAttribute(name);
 		return;
 	}
+	if (element.getAttribute(name) === value) return;
 	element.setAttribute(name, value);
 }
 

package/dist/dev/dat.d.ts

@@ -12,8 +12,8 @@ export interface DatHeader {
 }
 export declare function readDatHeader(buffer: ArrayBuffer): DatHeader;
 export declare function datByteRange(header: DatHeader, fromPair: number, toPair: number): [number, number] | undefined;
-export declare function readDatSamples(header: DatHeader, body: ArrayBuffer): Int8Array | Int16Array;
-export declare function readDatPeaks(header: DatHeader, body: ArrayBuffer): WaveformPeaks;
+export declare function readDatSamples(header: DatHeader, body: ArrayBuffer, byteOffset?: number): Int8Array | Int16Array;
+export declare function readDatPeaks(header: DatHeader, body: ArrayBuffer, byteOffset?: number): WaveformPeaks;
 //#endregion
 export type { WaveformPeaks };
 //# sourceMappingURL=dat.d.ts.map

package/dist/dev/dat.js

@@ -16,6 +16,7 @@ function readDatHeader(buffer) {
 	if (channels < 1) throw new Error("A .dat header names no channels");
 	const sampleRate = view.getInt32(8, true);
 	const samplesPerPixel = view.getInt32(12, true);
+	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
 	return {
 		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
 		channels,
@@ -34,15 +35,15 @@ function datByteRange(header, fromPair, toPair) {
 	const pairBytes = header.channels * 2 * header.bits / 8;
 	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
 }
-function readDatSamples(header, body) {
-	return header.bits === 8 ? new Int8Array(body) : new Int16Array(body, 0, Math.floor(body.byteLength / 2));
+function readDatSamples(header, body, byteOffset = 0) {
+	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
 }
-function readDatPeaks(header, body) {
+function readDatPeaks(header, body, byteOffset = 0) {
 	return {
 		channels: header.channels,
 		fullScale: header.bits === 8 ? 128 : 32768,
 		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body)
+		samples: readDatSamples(header, body, byteOffset)
 	};
 }
 

package/dist/dev/dat.js.map

@@ -1 +1 @@
-{"version":3,"file":"dat.js","names":[],"sources":["../../src/dat.ts"],"sourcesContent":["import type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nimport { clamp } from '#lib/math.ts';\n\nexport type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nexport interface DatHeader {\n\tbits: 8 | 16;\n\tchannels: number;\n\tdataOffset: number;\n\tpairs: number;\n\tpairsPerSecond: number;\n\tsampleRate: number;\n\tsamplesPerPixel: number;\n\tversion: 1 | 2;\n}\n\nfunction readVersion(view: DataView): 1 | 2 {\n\tconst version = view.getInt32(0, true);\n\tif (version === 1 || version === 2) return version;\n\n\tthrow new Error(`A .dat file of version ${String(version)} is not one this reads`);\n}\n\nexport function readDatHeader(buffer: ArrayBuffer): DatHeader {\n\tif (buffer.byteLength < 20) throw new Error('A .dat header takes at least 20 bytes');\n\n\tconst view = new DataView(buffer);\n\tconst version = readVersion(view);\n\tconst dataOffset = version === 1 ? 20 : 24;\n\tif (buffer.byteLength < dataOffset) {\n\t\tthrow new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);\n\t}\n\n\tconst channels = version === 1 ? 1 : view.getInt32(20, true);\n\tif (channels < 1) throw new Error('A .dat header names no channels');\n\n\tconst sampleRate = view.getInt32(8, true);\n\tconst samplesPerPixel = view.getInt32(12, true);\n\n\treturn {\n\t\tbits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,\n\t\tchannels,\n\t\tdataOffset,\n\t\tpairs: view.getUint32(16, true),\n\t\tpairsPerSecond: sampleRate / samplesPerPixel,\n\t\tsampleRate,\n\t\tsamplesPerPixel,\n\t\tversion,\n\t};\n}\n\nexport function datByteRange(\n\theader: DatHeader,\n\tfromPair: number,\n\ttoPair: number,\n): [number, number] | undefined {\n\tconst from = clamp(Math.floor(fromPair), 0, header.pairs);\n\tconst to = clamp(Math.ceil(toPair), from, header.pairs);\n\t// A server ignores an inverted `Range` and sends the whole file\n\tif (!(to > from)) return undefined;\n\n\tconst pairBytes = (header.channels * 2 * header.bits) / 8;\n\n\treturn [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];\n}\n\n// Typed arrays read the platform's byte order; every browser platform is little-endian, as the format is\n// A range response can end mid-sample; the odd byte is dropped\nexport function readDatSamples(header: DatHeader, body: ArrayBuffer): Int8Array | Int16Array {\n\treturn header.bits === 8\n\t\t? new Int8Array(body)\n\t\t: new Int16Array(body, 0, Math.floor(body.byteLength / 2));\n}\n\nexport function readDatPeaks(header: DatHeader, body: ArrayBuffer): WaveformPeaks {\n\treturn {\n\t\tchannels: header.channels,\n\t\tfullScale: header.bits === 8 ? 128 : 32_768,\n\t\tpairsPerSecond: header.pairsPerSecond,\n\t\tsamples: readDatSamples(header, body),\n\t};\n}\n"],"mappings":";;;AAiBA,SAAS,YAAY,MAAuB;CAC3C,MAAM,UAAU,KAAK,SAAS,GAAG,IAAI;CACrC,IAAI,YAAY,KAAK,YAAY,GAAG,OAAO;CAE3C,MAAM,IAAI,MAAM,0BAA0B,OAAO,OAAO,EAAE,uBAAuB;AAClF;AAEA,SAAgB,cAAc,QAAgC;CAC7D,IAAI,OAAO,aAAa,IAAI,MAAM,IAAI,MAAM,uCAAuC;CAEnF,MAAM,OAAO,IAAI,SAAS,MAAM;CAChC,MAAM,UAAU,YAAY,IAAI;CAChC,MAAM,aAAa,YAAY,IAAI,KAAK;CACxC,IAAI,OAAO,aAAa,YACvB,MAAM,IAAI,MAAM,aAAa,OAAO,OAAO,EAAE,qBAAqB,OAAO,UAAU,EAAE,OAAO;CAG7F,MAAM,WAAW,YAAY,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI;CAC3D,IAAI,WAAW,GAAG,MAAM,IAAI,MAAM,iCAAiC;CAEnE,MAAM,aAAa,KAAK,SAAS,GAAG,IAAI;CACxC,MAAM,kBAAkB,KAAK,SAAS,IAAI,IAAI;CAE9C,OAAO;EACN,OAAO,KAAK,UAAU,GAAG,IAAI,IAAI,OAAO,IAAI,IAAI;EAChD;EACA;EACA,OAAO,KAAK,UAAU,IAAI,IAAI;EAC9B,gBAAgB,aAAa;EAC7B;EACA;EACA;CACD;AACD;AAEA,SAAgB,aACf,QACA,UACA,QAC+B;CAC/B,MAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,GAAG,GAAG,OAAO,KAAK;CACxD,MAAM,KAAK,MAAM,KAAK,KAAK,MAAM,GAAG,MAAM,OAAO,KAAK;CAEtD,IAAI,EAAE,KAAK,OAAO,OAAO;CAEzB,MAAM,YAAa,OAAO,WAAW,IAAI,OAAO,OAAQ;CAExD,OAAO,CAAC,OAAO,aAAa,OAAO,WAAW,OAAO,aAAa,KAAK,YAAY,CAAC;AACrF;AAIA,SAAgB,eAAe,QAAmB,MAA2C;CAC5F,OAAO,OAAO,SAAS,IACpB,IAAI,UAAU,IAAI,IAClB,IAAI,WAAW,MAAM,GAAG,KAAK,MAAM,KAAK,aAAa,CAAC,CAAC;AAC3D;AAEA,SAAgB,aAAa,QAAmB,MAAkC;CACjF,OAAO;EACN,UAAU,OAAO;EACjB,WAAW,OAAO,SAAS,IAAI,MAAM;EACrC,gBAAgB,OAAO;EACvB,SAAS,eAAe,QAAQ,IAAI;CACrC;AACD"}
+{"version":3,"file":"dat.js","names":[],"sources":["../../src/dat.ts"],"sourcesContent":["import type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nimport { clamp } from '#lib/math.ts';\n\nexport type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nexport interface DatHeader {\n\tbits: 8 | 16;\n\tchannels: number;\n\tdataOffset: number;\n\tpairs: number;\n\tpairsPerSecond: number;\n\tsampleRate: number;\n\tsamplesPerPixel: number;\n\tversion: 1 | 2;\n}\n\nfunction readVersion(view: DataView): 1 | 2 {\n\tconst version = view.getInt32(0, true);\n\tif (version === 1 || version === 2) return version;\n\n\tthrow new Error(`A .dat file of version ${String(version)} is not one this reads`);\n}\n\nexport function readDatHeader(buffer: ArrayBuffer): DatHeader {\n\tif (buffer.byteLength < 20) throw new Error('A .dat header takes at least 20 bytes');\n\n\tconst view = new DataView(buffer);\n\tconst version = readVersion(view);\n\tconst dataOffset = version === 1 ? 20 : 24;\n\tif (buffer.byteLength < dataOffset) {\n\t\tthrow new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);\n\t}\n\n\tconst channels = version === 1 ? 1 : view.getInt32(20, true);\n\tif (channels < 1) throw new Error('A .dat header names no channels');\n\n\tconst sampleRate = view.getInt32(8, true);\n\tconst samplesPerPixel = view.getInt32(12, true);\n\tif (samplesPerPixel < 1) throw new Error('A .dat header names no samples per pixel');\n\n\treturn {\n\t\tbits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,\n\t\tchannels,\n\t\tdataOffset,\n\t\tpairs: view.getUint32(16, true),\n\t\tpairsPerSecond: sampleRate / samplesPerPixel,\n\t\tsampleRate,\n\t\tsamplesPerPixel,\n\t\tversion,\n\t};\n}\n\nexport function datByteRange(\n\theader: DatHeader,\n\tfromPair: number,\n\ttoPair: number,\n): [number, number] | undefined {\n\tconst from = clamp(Math.floor(fromPair), 0, header.pairs);\n\tconst to = clamp(Math.ceil(toPair), from, header.pairs);\n\t// A server ignores an inverted `Range` and sends the whole file\n\tif (!(to > from)) return undefined;\n\n\tconst pairBytes = (header.channels * 2 * header.bits) / 8;\n\n\treturn [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];\n}\n\n// Typed arrays read the platform's byte order; every browser platform is little-endian, as the format is\n// A range response can end mid-sample; the odd byte is dropped\nexport function readDatSamples(\n\theader: DatHeader,\n\tbody: ArrayBuffer,\n\tbyteOffset = 0,\n): Int8Array | Int16Array {\n\treturn header.bits === 8\n\t\t? new Int8Array(body, byteOffset)\n\t\t: new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));\n}\n\nexport function readDatPeaks(header: DatHeader, body: ArrayBuffer, byteOffset = 0): WaveformPeaks {\n\treturn {\n\t\tchannels: header.channels,\n\t\tfullScale: header.bits === 8 ? 128 : 32_768,\n\t\tpairsPerSecond: header.pairsPerSecond,\n\t\tsamples: readDatSamples(header, body, byteOffset),\n\t};\n}\n"],"mappings":";;;AAiBA,SAAS,YAAY,MAAuB;CAC3C,MAAM,UAAU,KAAK,SAAS,GAAG,IAAI;CACrC,IAAI,YAAY,KAAK,YAAY,GAAG,OAAO;CAE3C,MAAM,IAAI,MAAM,0BAA0B,OAAO,OAAO,EAAE,uBAAuB;AAClF;AAEA,SAAgB,cAAc,QAAgC;CAC7D,IAAI,OAAO,aAAa,IAAI,MAAM,IAAI,MAAM,uCAAuC;CAEnF,MAAM,OAAO,IAAI,SAAS,MAAM;CAChC,MAAM,UAAU,YAAY,IAAI;CAChC,MAAM,aAAa,YAAY,IAAI,KAAK;CACxC,IAAI,OAAO,aAAa,YACvB,MAAM,IAAI,MAAM,aAAa,OAAO,OAAO,EAAE,qBAAqB,OAAO,UAAU,EAAE,OAAO;CAG7F,MAAM,WAAW,YAAY,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI;CAC3D,IAAI,WAAW,GAAG,MAAM,IAAI,MAAM,iCAAiC;CAEnE,MAAM,aAAa,KAAK,SAAS,GAAG,IAAI;CACxC,MAAM,kBAAkB,KAAK,SAAS,IAAI,IAAI;CAC9C,IAAI,kBAAkB,GAAG,MAAM,IAAI,MAAM,0CAA0C;CAEnF,OAAO;EACN,OAAO,KAAK,UAAU,GAAG,IAAI,IAAI,OAAO,IAAI,IAAI;EAChD;EACA;EACA,OAAO,KAAK,UAAU,IAAI,IAAI;EAC9B,gBAAgB,aAAa;EAC7B;EACA;EACA;CACD;AACD;AAEA,SAAgB,aACf,QACA,UACA,QAC+B;CAC/B,MAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,GAAG,GAAG,OAAO,KAAK;CACxD,MAAM,KAAK,MAAM,KAAK,KAAK,MAAM,GAAG,MAAM,OAAO,KAAK;CAEtD,IAAI,EAAE,KAAK,OAAO,OAAO;CAEzB,MAAM,YAAa,OAAO,WAAW,IAAI,OAAO,OAAQ;CAExD,OAAO,CAAC,OAAO,aAAa,OAAO,WAAW,OAAO,aAAa,KAAK,YAAY,CAAC;AACrF;AAIA,SAAgB,eACf,QACA,MACA,aAAa,GACY;CACzB,OAAO,OAAO,SAAS,IACpB,IAAI,UAAU,MAAM,UAAU,IAC9B,IAAI,WAAW,MAAM,YAAY,KAAK,OAAO,KAAK,aAAa,cAAc,CAAC,CAAC;AACnF;AAEA,SAAgB,aAAa,QAAmB,MAAmB,aAAa,GAAkB;CACjG,OAAO;EACN,UAAU,OAAO;EACjB,WAAW,OAAO,SAAS,IAAI,MAAM;EACrC,gBAAgB,OAAO;EACvB,SAAS,eAAe,QAAQ,MAAM,UAAU;CACjD;AACD"}