@xsynaptic/sonic-ui 0.24.1 → 0.25.1

package/dist/default/elements/value-element.js

@@ -286,16 +286,17 @@ var SonicValueElement = class extends SonicFormElement {
 			toggleState: (state, isOn) => {
 				this.toggleState(state, isOn);
 			}
-		}, control);
+		}, control, this.focusTarget());
 		this.#gestures.bind(signal, grab);
 		control.addEventListener("pointerup", (event) => {
 			this.#hover?.lift(event);
 		}, { signal });
 	}
-	bindHover(control, signal, { canShow = () => true, place, valueAt }) {
+	bindHover(control, signal, { canShow = () => true, changed, place, valueAt }) {
 		this.#hover = bindHoverPreview(control, {
 			canShow,
 			changed: () => {
+				changed?.();
 				this.dispatchEvent(new Event("sonic-hover", { bubbles: true }));
 			},
 			dismiss: () => {
@@ -367,6 +368,9 @@ var SonicValueElement = class extends SonicFormElement {
 			played: from === void 0 ? this.#model.value : this.#heldAt ?? from
 		};
 	}
+	spokenText(value) {
+		return (this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak)?.(value);
+	}
 	springTarget() {}
 	tapTarget() {}
 	travelPx(control, property) {
@@ -401,7 +405,7 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "aria-valuemax", String(high));
 		writeAttribute(control, "aria-valuenow", String(this.#spokenNow()));
 		if (orientation) writeAttribute(control, "aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak)?.(this.#spokenNow()));
+		writeAttribute(control, "aria-valuetext", this.spokenText(this.#spokenNow()));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
 		this.renderReadout();

package/dist/default/elements/value-gestures.js

@@ -18,14 +18,16 @@ var ValueGestures = class {
 	});
 	#control;
 	#entry;
+	#focus;
 	#host;
 	#isRevealed = false;
 	#keyScrub;
 	#pointerDrag;
 	#pointerType;
-	constructor(host, control) {
+	constructor(host, control, focus) {
 		this.#host = host;
 		this.#control = control;
+		this.#focus = focus;
 	}
 	abandon() {
 		const drag = this.#dragging();
@@ -46,7 +48,7 @@ var ValueGestures = class {
 				if (isMenuPress(event) || host.isDisabled() || entry.isOpen) return;
 				host.toggleState("springing", false);
 				if (event.pointerType === "touch") event.preventDefault();
-				focusByPointer(control);
+				focusByPointer(this.#focus);
 				this.#pointerType = event.pointerType;
 				if (isResetPress(event)) {
 					this.#reset();
@@ -135,14 +137,14 @@ var ValueGestures = class {
 			}
 		});
 		this.#entry = entry;
-		entry.bind(control, signal);
+		entry.bind(this.#focus, signal);
 		return entry;
 	}
 	#bindKeys(entry, signal) {
 		const control = this.#control;
 		const host = this.#host;
 		control.addEventListener("keydown", (event) => {
-			if (host.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			if (host.isDisabled() || event.defaultPrevented || event.target !== this.#focus) return;
 			host.toggleState("springing", false);
 			if (event.key === "Enter") {
 				if (host.springTarget() !== void 0 || !host.hasEntry()) return;
@@ -164,7 +166,7 @@ var ValueGestures = class {
 			if (isMeta && this.#dragging()) return;
 			if (isMeta || host.model.mapping().keyTarget(event.key, host.model.value) !== void 0) this.#springBack();
 		}, { signal });
-		control.addEventListener("blur", () => {
+		this.#focus.addEventListener("blur", () => {
 			this.#endKeyScrub();
 			this.#concealKeyReveal();
 			this.#springBack();

package/dist/default/elements/wave-element.js

@@ -48,6 +48,18 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.upgradeProperties("fill", "markers");
 		super.connectedCallback();
 	}
+	/** Copies; none outside the canvas */
+	markersFromPoint(clientX, clientY) {
+		const box = this.canvas.getBoundingClientRect();
+		if (!(clientX >= box.left && clientX <= box.right && clientY >= box.top && clientY <= box.bottom)) return [];
+		return this.markersInReach({
+			x: clientX - box.left,
+			y: clientY - box.top
+		}, box.width).flatMap((index) => {
+			const marker = this.#markers[index];
+			return marker ? [{ ...marker }] : [];
+		});
+	}
 	repaint() {
 		this.#surface?.rebuild();
 	}
@@ -75,9 +87,6 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.render();
 		this.#surface.setFill(this.fill);
 	}
-	focusTarget() {
-		return this.control;
-	}
 	markerList() {
 		return this.#markers;
 	}

package/dist/default/elements/waveform.js

@@ -15,6 +15,7 @@ import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 const defaultZoom = 70;
 const defaultZoomMin = 20;
 const defaultZoomMax = 280;
+const lineReachPx = 4;
 const renderWaveform = template(`
 		<div class="sonic-waveform" role="slider" tabindex="0">
 			<canvas class="sonic-waveform-canvas" aria-hidden="true"></canvas>
@@ -201,10 +202,21 @@ var SonicWaveform = class extends SonicWaveElement {
 		super.attributeChangedCallback(name);
 		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
+	/** Viewport x of a time as last drawn; not clamped to the window */
+	clientXOf(value) {
+		const { left, width } = this.canvas.getBoundingClientRect();
+		return left + this.#drawnX(value, width);
+	}
 	connectedCallback() {
 		this.upgradeProperties("bands", "peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
 		super.connectedCallback();
 	}
+	/** The time at a viewport x as last drawn */
+	valueFromPoint(clientX, _clientY) {
+		const { left, width } = this.canvas.getBoundingClientRect();
+		const { startSeconds, zoom } = this.#drawnWindow(width);
+		return clamp(startSeconds + (clientX - left) / zoom, ...this.mapping().bounds);
+	}
 	connect(signal) {
 		super.connect(signal);
 		const zoomTarget = {
@@ -231,9 +243,18 @@ var SonicWaveform = class extends SonicWaveElement {
 		surface?.requestFrame();
 		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
+	focusTarget() {
+		return this.control;
+	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;
 	}
+	markersInReach({ x }, widthPx) {
+		return this.markerList().map(({ start }, index) => ({
+			distance: Math.abs(this.#drawnX(start, widthPx) - x),
+			index
+		})).filter(({ distance }) => distance <= lineReachPx).toSorted((first, second) => first.distance - second.distance).map(({ index }) => index);
+	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
 		const isPaged = look.isReducedMotion && this.reducedMotion === "page";
@@ -258,7 +279,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		const { seconds, view } = timeline;
 		this.#drawn = {
 			seconds,
-			startSeconds: view.startSeconds
+			startSeconds: view.startSeconds,
+			zoom: this.zoom
 		};
 		placeLine(this.#playhead, timeline.playheadAt);
 		placeLine(this.#ghost, timeline.ghostAt);
@@ -281,7 +303,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			}, {
 				bands: this.#tint(isRebuilt),
 				kindColours: this.#kindColours,
-				markers: this.markerList(),
+				markers: this.markerList().map((marker) => ({
+					...marker,
+					start: clamp(marker.start, ...range)
+				})),
 				peaks: this.#peaks,
 				range
 			});
@@ -311,6 +336,17 @@ var SonicWaveform = class extends SonicWaveElement {
 	scrubsKeyRepeat() {
 		return true;
 	}
+	#drawnWindow(widthPx) {
+		const zoom = this.#drawn?.zoom ?? this.zoom;
+		return {
+			startSeconds: this.#drawn?.startSeconds ?? this.value - widthPx / zoom / 2,
+			zoom
+		};
+	}
+	#drawnX(value, widthPx) {
+		const { startSeconds, zoom } = this.#drawnWindow(widthPx);
+		return (clamp(value, ...this.mapping().bounds) - startSeconds) * zoom;
+	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();

package/dist/default/elements/wavestrip.js

@@ -1,10 +1,11 @@
-import { clampProportion } from "../lib/math.js";
+import { clamp, clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
+import { RegionLayer } from "./region-layer.js";
 import { stripBars, stripGroove, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
@@ -23,9 +24,10 @@ const lengths = {
 };
 const cancelZonePx = 48;
 const renderWavestrip = template(`
-		<div class="sonic-wavestrip" role="slider" tabindex="0">
-			<canvas class="sonic-wavestrip-canvas" aria-hidden="true"></canvas>
+		<div class="sonic-wavestrip">
+			<canvas class="sonic-wavestrip-canvas" role="slider" tabindex="0"></canvas>
 			<div class="sonic-wavestrip-markers" aria-hidden="true"></div>
+			<div class="sonic-wavestrip-regions"></div>
 			<div class="sonic-wavestrip-readout" popover="manual">
 				<span></span>
 				<input
@@ -63,6 +65,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 	set cancellable(isCancellable) {
 		this.reflect("cancellable", isCancellable);
 	}
+	/** Words a region's `aria-valuetext`; unset, a region speaks its start as the strip speaks a time */
+	get formatSpokenRegion() {
+		return this.#formatSpokenRegion;
+	}
+	set formatSpokenRegion(format) {
+		this.#formatSpokenRegion = format;
+		this.#regions?.render();
+	}
 	/** One amplitude from 0 to 1 per slice of the whole track, any length; resampled to the bars and never normalised */
 	get peaks() {
 		return this.#peaks;
@@ -72,6 +82,25 @@ var SonicWavestrip = class extends SonicWaveElement {
 		this.renderEmpty();
 		this.surface()?.invalidate();
 	}
+	/** A time a release will seek to, drawn as a scrub's edge; a hold or a hover of the strip's own is drawn instead */
+	get preview() {
+		return this.#preview;
+	}
+	set preview(seconds) {
+		this.#preview = Number.isFinite(seconds) ? seconds ?? void 0 : void 0;
+		this.render();
+	}
+	/** Runs once per point marker on each `markers` or `renderMarker` write; the element lasts until the next */
+	get renderMarker() {
+		return this.#renderMarker;
+	}
+	set renderMarker(render) {
+		this.#renderMarker = render;
+		this.#drawMarker = render && ((marker, element) => {
+			render({ ...marker }, element);
+		});
+		if (this.isBound()) this.renderMarkers();
+	}
 	control = renderWavestrip();
 	canvas = requireChild(this.control, ".sonic-wavestrip-canvas", HTMLCanvasElement);
 	colours = colours;
@@ -81,43 +110,75 @@ var SonicWavestrip = class extends SonicWaveElement {
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
+	#drawMarker;
+	#formatSpokenRegion;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	#preview;
+	#regions;
+	#renderMarker;
 	/** Viewport x of a time, clamped to the strip */
 	clientXOf(value) {
 		const { startPx, travelPx } = this.#axis();
 		return startPx + this.mapping().proportionOf(value) * travelPx;
 	}
 	connectedCallback() {
-		this.upgradeProperties("buffered", "cancellable", "peaks");
+		this.upgradeProperties("buffered", "cancellable", "formatSpokenRegion", "peaks", "preview", "renderMarker");
 		super.connectedCallback();
 	}
+	valueFromPoint(clientX, _clientY) {
+		const { startPx, travelPx } = this.#axis();
+		const mapping = this.mapping();
+		return clamp(mapping.valueAt(clampProportion((clientX - startPx) / travelPx)), ...mapping.bounds);
+	}
 	connect(signal) {
 		const { control } = this;
+		this.#regions = new RegionLayer({
+			axis: () => this.#axis(),
+			control,
+			element: this,
+			isDisabled: () => this.isDisabled(),
+			layer: requireChild(control, ".sonic-wavestrip-regions", HTMLDivElement),
+			mapping: () => this.mapping(),
+			outside: () => this.#outside(),
+			seek: (event) => {
+				if (this.input(this.valueFromPoint(event.clientX, event.clientY))) this.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+			speak: ({ end, start }) => this.#formatSpokenRegion?.(start, end) ?? this.spokenText(start) ?? this.notation.format(start)
+		}, signal);
 		super.connect(signal);
 		this.bindHover(control, signal, {
+			changed: () => {
+				if (this.#preview !== void 0) this.render();
+			},
 			place: () => {
 				this.#placeReadout();
 			},
-			valueAt: (event) => {
-				const axis = this.#axis();
-				const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
-				const mapping = this.mapping();
-				return this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at));
-			}
+			valueAt: (event) => this.#markerStartAt(event, this.#axis()) ?? this.mapping().snap(this.valueFromPoint(event.clientX, event.clientY))
 		});
 		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
 		this.#placeReadout();
+		this.#regions?.follow();
 		this.showCurrentMarker(this.scrubState().played);
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
+	focusTarget() {
+		return this.canvas;
+	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.length === 0;
 	}
+	/** The first point marker is the one a press there snaps to */
+	markersInReach(point, widthPx) {
+		const regions = this.markerProportions().flatMap(([from, to], index) => {
+			return this.markerList()[index]?.end !== void 0 && point.x >= from * widthPx && point.x <= to * widthPx ? [index] : [];
+		});
+		return [...this.#markerBand.inReach(point, widthPx), ...regions];
+	}
 	paint(context, frame) {
 		const { look, size } = frame;
 		const strip = this.#stripRegions(size.width);
@@ -134,11 +195,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 		]);
 	}
 	renderMarkers() {
-		this.#markerBand.render(this.markerList(), this.markerProportions());
+		this.#markerBand.render(this.markerList(), this.markerProportions(), this.#drawMarker);
 	}
 	scrubsKeyRepeat() {
 		return true;
 	}
+	usesChild(child) {
+		return child instanceof Element && child.localName === "sonic-region";
+	}
 	#axis() {
 		const box = this.canvas.getBoundingClientRect();
 		return {
@@ -163,6 +227,13 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	#grab(event) {
 		const axis = this.#axis();
+		const marker = this.#markerStartAt(event, axis);
+		const regions = this.#regions;
+		if (regions?.isHeld() === true) {
+			regions.abandon();
+			return;
+		}
+		if (marker === void 0 && regions?.take(event) === true) return void 0;
 		const at = (event.clientX - axis.startPx) / axis.travelPx;
 		const outside = this.#outside();
 		const grabbed = {
@@ -170,16 +241,16 @@ var SonicWavestrip = class extends SonicWaveElement {
 			position: axis.position,
 			travelPx: axis.travelPx
 		};
-		this.input(this.#markerAt(event, axis) ?? this.mapping().valueAt(at));
+		this.input(marker ?? this.valueFromPoint(event.clientX, event.clientY));
 		return outside ? {
 			...grabbed,
 			outside
 		} : grabbed;
 	}
-	#markerAt(event, { startPx, topPx, travelPx }) {
-		const index = this.#markerBand.at({
-			x: event.clientX - startPx,
-			y: event.clientY - topPx
+	#markerStartAt({ clientX, clientY }, { startPx, topPx, travelPx }) {
+		const [index] = this.#markerBand.inReach({
+			x: clientX - startPx,
+			y: clientY - topPx
 		}, travelPx);
 		return index === void 0 ? void 0 : this.markerList()[index]?.start;
 	}
@@ -196,7 +267,9 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#stripRegions(width) {
 		const mapping = this.mapping();
 		const { proportionOf } = mapping;
-		const { played, scrub } = scrubRegions(this.scrubState(), this.value, mapping);
+		const state = this.scrubState();
+		const preview = state.from !== void 0 || this.hoverValue !== void 0 || this.#preview === void 0 ? void 0 : proportionOf(this.#preview);
+		const { played, scrub = preview } = scrubRegions(state, this.value, mapping);
 		return stripRegions({
 			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
 			played,

package/dist/default/elements/xy.js

@@ -30,7 +30,7 @@ const orientations = {
 };
 const renderXy = template(`
 		<div class="sonic-xy">
-			<div class="sonic-xy-bracket" aria-hidden="true"></div>
+			<div class="sonic-xy-reticle" 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>
@@ -404,16 +404,8 @@ var SonicXy = class extends SonicFormElement {
 		}
 	}
 	#renderForm() {
-		const { name, x, y } = this;
-		const state = `${String(x)},${String(y)}`;
-		if (name === "") {
-			this.writeFormValue(null, state);
-			return;
-		}
-		const fields = new FormData();
-		fields.set(`${name}.x`, String(x));
-		fields.set(`${name}.y`, String(y));
-		this.writeFormValue(fields, state);
+		const { x, y } = this;
+		this.writeFormFields([["x", x], ["y", y]], `${String(x)},${String(y)}`);
 	}
 	#renderReadout() {
 		const { isRevealed } = this.#claim;

package/dist/default/index.js

@@ -4,6 +4,7 @@ import { envelopeCurve } from "./lib/envelope-curve.js";
 import { SonicEnvelope } from "./elements/envelope.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
+import { SonicRegion } from "./elements/region.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { SonicSpectrum } from "./elements/spectrum.js";
@@ -17,4 +18,4 @@ import { SonicXy } from "./elements/xy.js";
 import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

package/dist/default/lib/clock.js

@@ -1,6 +1,7 @@
 //#region src/lib/clock.ts
 const sign = /^[-−]/;
 function formatClock(seconds) {
+	if (!Number.isFinite(seconds)) return "";
 	const total = Math.floor(Math.abs(seconds));
 	const hours = Math.floor(total / 3600);
 	const minutes = Math.floor(total / 60) % 60;

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

@@ -96,4 +96,4 @@ function stepDrag(mapping, state, move) {
 }
 
 //#endregion
-export { dragThresholdPx, startDrag, stepDrag };
+export { dragThresholdPx, fineFactor, startDrag, stepDrag };

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

@@ -2,7 +2,7 @@ import { readPxProperty } from "./read-px-property.js";
 
 //#region src/lib/marker-band.ts
 const kindPattern = /^[a-z][a-z0-9-]*$/;
-const snapSlopPx = 4;
+const snapMarginPx = 4;
 function isKind(kind) {
 	return kind !== void 0 && kindPattern.test(kind);
 }
@@ -13,45 +13,61 @@ function writeKind(part, kind, fallback) {
 	}
 	part.style.setProperty("--_sonic-marker", `var(--sonic-marker-${kind}, var(${fallback}))`);
 }
-function renderMarker(marker, [from, to], lane) {
+function createPart(marker) {
 	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));
+	part.className = marker.end === void 0 ? "sonic-wavestrip-marker" : "sonic-wavestrip-region";
 	writeKind(part, marker.kind, "--_sonic-marker-default");
 	if (marker.dimmed === true) part.dataset.sonicDimmed = "";
 	return part;
 }
 function createMarkerBand(band) {
-	let dots = [];
+	let built;
+	let placed = [];
 	const px = (property) => readPxProperty(getComputedStyle(band), property, 0);
+	function build(markers, draw) {
+		const parts = markers.map((marker) => {
+			const part = createPart(marker);
+			if (draw && marker.end === void 0) {
+				part.style.setProperty("--_sonic-marker-paint", "transparent");
+				draw(marker, part);
+			}
+			return part;
+		});
+		band.replaceChildren(...parts);
+		built = {
+			draw,
+			markers,
+			parts
+		};
+		return parts;
+	}
 	return {
-		at: ({ x, y }, widthPx) => {
+		inReach: (point, widthPx) => {
 			const size = px("--_sonic-marker-size");
 			const step = px("--_sonic-marker-step");
-			const nearest = nearestDot({
-				x,
-				y
-			}, dots.map(({ at, lane }) => ({
+			return centersInReach(point, placed.map(({ at, lane }) => ({
 				x: at * widthPx,
 				y: size / 2 + lane * step
-			})), size / 2 + snapSlopPx);
-			return nearest === void 0 ? void 0 : dots[nearest]?.index;
+			})), size / 2 + snapMarginPx).flatMap((order) => placed[order]?.index ?? []);
 		},
-		render: (markers, proportions) => {
+		render: (markers, proportions, draw) => {
 			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) => ({
+			const parts = built?.markers === markers && built.draw === draw ? built.parts : build(markers, draw);
+			placed = 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))));
+			for (const [index, part] of parts.entries()) {
+				const [from, to] = proportions[index] ?? [0, 0];
+				part.style.setProperty("--_sonic-marker-from", String(from));
+				part.style.setProperty("--_sonic-marker-to", String(to));
+			}
+			for (const { index, lane } of placed) parts[index]?.style.setProperty("--_sonic-marker-lane", String(lane));
 		}
 	};
 }
@@ -64,17 +80,12 @@ function markerLanes(positions, minDistance) {
 		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;
+function centersInReach(point, centers, reach) {
+	return centers.map((center, index) => ({
+		distance: (center.x - point.x) ** 2 + (center.y - point.y) ** 2,
+		index
+	})).filter(({ distance }) => distance <= reach * reach).toSorted((first, second) => first.distance - second.distance || second.index - first.index).map(({ index }) => index);
 }
 
 //#endregion
-export { createMarkerBand, isKind, markerLanes, nearestDot, writeKind };
+export { centersInReach, createMarkerBand, isKind, markerLanes, writeKind };

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

@@ -0,0 +1,48 @@
+import { clamp, clampProportion, trimFloat } from "./math.js";
+import { fineFactor } from "./drag-step.js";
+
+//#region src/lib/region-drag.ts
+function regionAt(bodies, x) {
+	const index = bodies.findLastIndex((body) => body !== void 0 && x >= body[0] && x <= body[1]);
+	return index === -1 ? void 0 : index;
+}
+function regionTravel({ end, start }, [low, high]) {
+	return [low, Math.max(low, trimFloat(high - (end - start)))];
+}
+function moveRegionTo(mapping, span, start) {
+	const moved = clamp(mapping.snap(start), ...regionTravel(span, mapping.bounds));
+	return {
+		end: trimFloat(moved + (span.end - span.start)),
+		start: moved
+	};
+}
+function startRegionDrag({ position, ...fixed }) {
+	return {
+		...fixed,
+		isEngaged: false,
+		lastPosition: position,
+		startPosition: position,
+		travelPx: 0
+	};
+}
+function stepRegionDrag(mapping, state, move) {
+	if (!(state.isEngaged || Math.abs(move.position - state.startPosition) >= state.thresholdPx)) return {
+		span: void 0,
+		state
+	};
+	const pace = move.isFine ? fineFactor : 1;
+	const travelPx = state.travelPx + (move.position - state.lastPosition) * pace;
+	const at = mapping.proportionOf(state.from.start) + travelPx / state.widthPx;
+	return {
+		span: moveRegionTo(mapping, state.from, mapping.valueAt(clampProportion(at))),
+		state: {
+			...state,
+			isEngaged: true,
+			lastPosition: move.position,
+			travelPx
+		}
+	};
+}
+
+//#endregion
+export { moveRegionTo, regionAt, regionTravel, startRegionDrag, stepRegionDrag };

package/dist/dev/define/region.d.ts

@@ -0,0 +1,2 @@
+import { SonicRegion } from "../elements/region.js";
+export type { SonicRegion };

package/dist/dev/define/region.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicRegion } from "../elements/region.js";
+
+//#region src/define/region.ts
+defineOnce("sonic-region", SonicRegion);
+
+//#endregion
+//# sourceMappingURL=region.js.map

package/dist/dev/define/region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"region.js","names":[],"sources":["../../../src/define/region.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicRegion } from '#elements/region.ts';\n\ndefineOnce('sonic-region', SonicRegion);\n\nexport type { SonicRegion } from '#elements/region.ts';\n"],"mappings":";;;;AAGA,WAAW,gBAAgB,WAAW"}

package/dist/dev/define.d.ts

@@ -8,6 +8,8 @@ import { SonicMeter } from "./elements/meter.js";
 import "./define/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import "./define/number.js";
+import { SonicRegion } from "./elements/region.js";
+import "./define/region.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import "./define/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
@@ -26,4 +28,4 @@ import { SonicWavestrip } from "./elements/wavestrip.js";
 import "./define/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";
 import "./define/xy.js";
-export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };
+export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy };