@xsynaptic/sonic-ui 0.5.0 → 0.6.1

package/dist/default/elements/wavestrip.js

@@ -1,8 +1,9 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { sortedRegions } from "../lib/time-regions.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
@@ -45,6 +46,13 @@ function fillRegion(context, path, [from, to, style]) {
 	context.restore();
 }
 var SonicWavestrip = class extends SonicWaveElement {
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(regions) {
+		this.#buffered = sortedRegions(regions);
+		this.render();
+	}
 	get cancellable() {
 		return this.hasAttribute("cancellable");
 	}
@@ -65,11 +73,15 @@ var SonicWavestrip = class extends SonicWaveElement {
 	lengths = lengths;
 	sheet = "wavestrip.css";
 	#bars;
+	#buffered = [];
+	#escapeWatch;
+	#hover;
+	#isHoverDismissed = false;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
 	connectedCallback() {
-		this.upgradeProperties("cancellable", "peaks");
+		this.upgradeProperties("buffered", "cancellable", "peaks");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -79,6 +91,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	draw() {
 		const surface = this.surface();
+		if (this.isEditing() || this.isRevealed()) this.#hover = void 0;
 		this.#placeReadout();
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
@@ -100,8 +113,11 @@ var SonicWavestrip = class extends SonicWaveElement {
 			look.colours[kind]
 		]);
 	}
+	previewValue() {
+		return this.#hover;
+	}
 	renderMarkers() {
-		this.#markerBand.render(this.markers, this.markerProportions());
+		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}
 	scrubsKeyRepeat() {
 		return true;
@@ -111,6 +127,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 		return {
 			position: (event) => event.clientX,
 			startPx: box.left,
+			topPx: box.top,
 			travelPx: Math.max(1, box.width)
 		};
 	}
@@ -126,36 +143,44 @@ 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.#hoverAt(this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at)));
 			this.#placeReadout();
 		}, { signal });
 		for (const type of ["pointerdown", "pointerleave"]) strip.addEventListener(type, () => {
-			this.hoverReadout(void 0);
+			this.#hoverAt(void 0);
 		}, { 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;
+	#hoverAt(value) {
+		if (value === void 0) this.#isHoverDismissed = false;
+		if (!this.#isHoverDismissed && !this.isEditing() && !this.isRevealed()) this.#hover = value;
+		this.renderReadout();
+		this.#watchEscape(value !== void 0);
+	}
+	#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;
@@ -171,11 +196,27 @@ var SonicWavestrip = class extends SonicWaveElement {
 		const { proportionOf } = this.mapping();
 		const isScrubbing = this.heldFrom() !== void 0 && this.isRevealed();
 		return stripRegions({
-			buffered: this.buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
+			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
 			played: proportionOf(this.playback()),
 			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
 		}, width);
 	}
+	#watchEscape(isHovered) {
+		if (!isHovered) {
+			this.#escapeWatch?.abort();
+			this.#escapeWatch = void 0;
+			return;
+		}
+		if (this.#escapeWatch) return;
+		const watch = new AbortController();
+		this.#escapeWatch = watch;
+		this.ownerDocument.addEventListener("keydown", (event) => {
+			if (event.key !== "Escape" || this.#hover === void 0) return;
+			this.#hover = void 0;
+			this.#isHoverDismissed = true;
+			this.render();
+		}, { signal: watch.signal });
+	}
 };
 
 //#endregion

package/dist/default/elements/xy.js

@@ -1,15 +1,15 @@
-import { clampProportion } from "../lib/math.js";
-import { requireChild, template } from "../lib/render.js";
+import { clampProportion, toNumber } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
+import { requireChild, template } from "../lib/render.js";
 import { ReadoutClaim } from "./readout-claim.js";
 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"];
@@ -29,6 +29,7 @@ const orientations = {
 };
 const renderXy = template(`
 		<div class="sonic-xy">
+			<div class="sonic-xy-bracket" aria-hidden="true"></div>
 			<div class="sonic-xy-field" aria-hidden="true"></div>
 			<div class="sonic-xy-puck">
 				<div class="sonic-xy-axis" data-sonic-axis="x" role="slider" tabindex="0"></div>
@@ -193,6 +194,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 +204,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 +226,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 +241,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 +369,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 +394,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 +418,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 +457,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 +471,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 };