@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/default/lib/focus-by-pointer.js

@@ -0,0 +1,28 @@
+//#region src/lib/focus-by-pointer.ts
+const modifierKeys = /* @__PURE__ */ new Set([
+	"Alt",
+	"Control",
+	"Meta",
+	"Shift"
+]);
+function focusByPointer(target) {
+	const isMarked = "sonicPointerFocus" in target.dataset;
+	target.dataset.sonicPointerFocus = "";
+	target.focus();
+	if (isMarked) return;
+	const marking = new AbortController();
+	const clear = () => {
+		delete target.dataset.sonicPointerFocus;
+		marking.abort();
+	};
+	target.addEventListener("blur", () => {
+		if (target.ownerDocument.activeElement !== target) clear();
+	}, { signal: marking.signal });
+	target.addEventListener("keydown", (event) => {
+		if (event.metaKey || event.ctrlKey || event.altKey || modifierKeys.has(event.key)) return;
+		clear();
+	}, { signal: marking.signal });
+}
+
+//#endregion
+export { focusByPointer };

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

@@ -0,0 +1,62 @@
+import { trimFloat } from "./math.js";
+
+//#region src/lib/frame-timeline.ts
+const placeholderPeriodMs = 2500;
+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;
+	return Math.floor(trimFloat(seconds / windowSeconds)) * windowSeconds;
+}
+function overlap([from, to], [low, high]) {
+	const start = Math.max(from, low);
+	const end = Math.min(to, high);
+	return end > start ? [start, end] : void 0;
+}
+function pendingIn({ pending, range }, window) {
+	return pending.flatMap((region) => {
+		const inRange = overlap(region, range);
+		const shown = inRange && overlap(inRange, window);
+		return shown ? [shown] : [];
+	});
+}
+function placeholderPhase({ frameMs, isPaged }, pending) {
+	return !isPaged && pending.length > 0 ? frameMs / placeholderPeriodMs : void 0;
+}
+function frameTimeline(input) {
+	const { clockSeconds, held, range, size } = input;
+	const seconds = held?.seconds ?? clockSeconds;
+	const pixelsPerSecond = input.zoom * size.dpr;
+	const windowSeconds = size.width / pixelsPerSecond;
+	const startSeconds = windowStart(input, seconds, windowSeconds);
+	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 at = (time) => (time - startSeconds) / windowSeconds;
+	return {
+		...held ? { ghostAt: at(clockSeconds) } : {},
+		isMoving: held !== void 0 || placeholder !== void 0 || input.isPlaying,
+		paintKey: [
+			startSeconds,
+			windowSeconds,
+			...range,
+			phase,
+			pending.join(",")
+		].join(":"),
+		playheadAt: at(seconds),
+		seconds,
+		view: {
+			dpr: size.dpr,
+			height: size.height,
+			pending,
+			phase,
+			pixelsPerSecond,
+			startSeconds,
+			width: size.width
+		},
+		...wanted ? { wanted } : {}
+	};
+}
+
+//#endregion
+export { frameTimeline };

package/dist/default/lib/hold.js

@@ -0,0 +1,38 @@
+//#region src/lib/hold.ts
+function bindHold(target, options, signal) {
+	let holder;
+	const hold = {
+		hold(by) {
+			if (holder !== void 0 || !options.canHold()) return false;
+			holder = by;
+			options.onHold();
+			return true;
+		},
+		release() {
+			if (holder === void 0) return;
+			holder = void 0;
+			options.onRelease();
+		}
+	};
+	const releasePointer = (event) => {
+		if (event.pointerId === holder) hold.release();
+	};
+	target.addEventListener("lostpointercapture", releasePointer, { signal });
+	target.addEventListener("pointercancel", releasePointer, { signal });
+	target.addEventListener("pointerup", releasePointer, { signal });
+	target.addEventListener("keyup", (event) => {
+		if (event.key === "Meta" && typeof holder === "string" || event.key === holder) hold.release();
+	}, { signal });
+	target.addEventListener(options.leave, (event) => {
+		const next = event.relatedTarget;
+		const isInside = next instanceof Node && target.contains(next);
+		if (typeof holder === "string" && !isInside) hold.release();
+	}, { signal });
+	signal.addEventListener("abort", () => {
+		hold.release();
+	}, { once: true });
+	return hold;
+}
+
+//#endregion
+export { bindHold };

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

@@ -0,0 +1,36 @@
+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]) {
+	const part = document.createElement("div");
+	part.className = marker.end === void 0 ? "sonic-wavestrip-marker" : "sonic-wavestrip-region";
+	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))`);
+	if (marker.dimmed === true) part.dataset.sonicDimmed = "";
+	return part;
+}
+function createMarkerBand(band) {
+	return {
+		reachPx: () => readPxProperty(getComputedStyle(band), "--_sonic-marker-size", 0) / 2 + snapSlopPx,
+		render: (markers, proportions) => {
+			band.replaceChildren(...markers.map((marker, index) => renderMarker(marker, proportions[index] ?? [0, 0])));
+		}
+	};
+}
+function nearestMarker(proportion, markerProportions, reach) {
+	let nearest;
+	let nearestDistance = reach;
+	for (const [index, markerProportion] of markerProportions.entries()) {
+		const distance = Math.abs(markerProportion - proportion);
+		if (distance > nearestDistance) continue;
+		nearest = index;
+		nearestDistance = distance;
+	}
+	return nearest;
+}
+
+//#endregion
+export { createMarkerBand, nearestMarker };

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

@@ -0,0 +1,114 @@
+import { clamp } from "./math.js";
+import { requireChild } from "./render.js";
+import { readPxProperty } from "./read-px-property.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,
+		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, 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);
+	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, 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, layout.parked);
+			writeLabel(arriving, measured, layout.arriving);
+		}
+	};
+}
+
+//#endregion
+export { createLabelRider, layoutRider };

package/dist/default/lib/math.js

@@ -2,15 +2,24 @@
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
-function clampUnit(fraction) {
+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, trimFloat, wrapProportion };

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

@@ -0,0 +1,11 @@
+//#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 };

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

@@ -1,14 +1,14 @@
 //#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 };

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

@@ -0,0 +1,43 @@
+//#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", end);
+	signal.addEventListener("abort", end, { once: true });
+	return {
+		current: () => held?.drag,
+		end
+	};
+}
+
+//#endregion
+export { bindDrag };

package/dist/default/lib/render.js

@@ -13,14 +13,29 @@ 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 };

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

@@ -0,0 +1,36 @@
+//#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 resampled;
+}
+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 };

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

@@ -0,0 +1,48 @@
+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 };

package/dist/default/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
 	};
 }
 

package/dist/default/lib/time-regions.js

@@ -0,0 +1,8 @@
+//#region src/lib/time-regions.ts
+function readRegions(regions) {
+	if ("start" in regions) return Array.from({ length: regions.length }, (_entry, index) => [regions.start(index), regions.end(index)]);
+	return [...regions].map(([start, end]) => [start, end]);
+}
+
+//#endregion
+export { readRegions };

package/dist/default/lib/tracking-clock.js

@@ -0,0 +1,35 @@
+//#region src/lib/tracking-clock.ts
+const seekThresholdSeconds = .5;
+const jitterSeconds = .05;
+function isLandingOnSource({ isPlaying, seconds }, carried, lastSourceSeconds) {
+	const hasSteppedBack = lastSourceSeconds !== void 0 && lastSourceSeconds - seconds > jitterSeconds;
+	return !isPlaying || hasSteppedBack || Math.abs(seconds - carried) > seekThresholdSeconds;
+}
+function createTrackingClock() {
+	let positionSeconds;
+	let lastFrameMs;
+	let lastSourceSeconds;
+	let wasPlaying = false;
+	return { read: (frameMs, source) => {
+		const { isPlaying, playbackRate, seconds } = source;
+		const elapsedSeconds = wasPlaying ? Math.max(0, frameMs - (lastFrameMs ?? frameMs)) / 1e3 : 0;
+		const carried = (positionSeconds ?? seconds) + elapsedSeconds * playbackRate;
+		lastFrameMs = frameMs;
+		wasPlaying = isPlaying;
+		if (!Number.isFinite(seconds)) {
+			if (positionSeconds !== void 0) positionSeconds = carried;
+			return carried;
+		}
+		const isLanding = isLandingOnSource(source, carried, lastSourceSeconds);
+		lastSourceSeconds = seconds;
+		if (positionSeconds === void 0 || isLanding) {
+			positionSeconds = seconds;
+			return positionSeconds;
+		}
+		positionSeconds = carried + (seconds - carried) * (1 - .94 ** (elapsedSeconds * 60));
+		return positionSeconds;
+	} };
+}
+
+//#endregion
+export { createTrackingClock };