@xsynaptic/sonic-ui 0.4.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"taper.js","names":[],"sources":["../../../src/lib/taper.ts"],"sourcesContent":["import { clampUnit } from '#lib/math.ts';\n\n// Positions run 0 to 1 along the travel\nexport interface Taper {\n\tposition: (value: number) => number;\n\tvalue: (position: number) => number;\n}\n\nexport function linearTaper(min: number, max: number): Taper {\n\tconst range = max - min;\n\n\treturn {\n\t\tposition: (value) => (range > 0 ? clampUnit((value - min) / range) : 0),\n\t\tvalue: (position) => min + clampUnit(position) * range,\n\t};\n}\n\nexport function logTaper(min: number, max: number): Taper | undefined {\n\tif (min <= 0 || max <= min) return undefined;\n\n\tconst span = Math.log(max / min);\n\n\treturn {\n\t\tposition: (value) => clampUnit(Math.log(Math.max(min, value) / min) / span),\n\t\tvalue: (position) => min * Math.exp(clampUnit(position) * span),\n\t};\n}\n\n// JUCE's skew: a power curve through `midpoint` at half the travel\nexport function skewTaper(min: number, max: number, midpoint: number): Taper | undefined {\n\tconst range = max - min;\n\tconst proportion = (midpoint - min) / range;\n\n\tif (proportion === 0.5 || !(proportion > 0 && proportion < 1)) return undefined;\n\n\tconst skew = Math.log(0.5) / Math.log(proportion);\n\n\treturn {\n\t\tposition: (value) => clampUnit((value - min) / range) ** skew,\n\t\tvalue: (position) => min + range * clampUnit(position) ** (1 / skew),\n\t};\n}\n\n// Entries sit evenly along the travel, however unevenly they are spaced\nexport function listTaper(entries: Array<number>): Taper {\n\tconst last = entries.length - 1;\n\n\treturn {\n\t\tposition: (value) => {\n\t\t\tconst above = entries.findIndex((entry) => entry >= value);\n\t\t\tif (above === -1) return 1;\n\n\t\t\tconst high = entries[above];\n\t\t\tconst low = entries[above - 1];\n\t\t\tif (high === undefined || low === undefined) return 0;\n\n\t\t\treturn (above - 1 + (value - low) / (high - low)) / last;\n\t\t},\n\t\tvalue: (position) => entries[Math.round(clampUnit(position) * last)] ?? NaN,\n\t};\n}\n"],"mappings":";;;AAQA,SAAgB,YAAY,KAAa,KAAoB;CAC5D,MAAM,QAAQ,MAAM;CAEpB,OAAO;EACN,WAAW,UAAW,QAAQ,IAAI,WAAW,QAAQ,OAAO,KAAK,IAAI;EACrE,QAAQ,aAAa,MAAM,UAAU,QAAQ,IAAI;CAClD;AACD;AAEA,SAAgB,SAAS,KAAa,KAAgC;CACrE,IAAI,OAAO,KAAK,OAAO,KAAK,OAAO;CAEnC,MAAM,OAAO,KAAK,IAAI,MAAM,GAAG;CAE/B,OAAO;EACN,WAAW,UAAU,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,IAAI;EAC1E,QAAQ,aAAa,MAAM,KAAK,IAAI,UAAU,QAAQ,IAAI,IAAI;CAC/D;AACD;AAGA,SAAgB,UAAU,KAAa,KAAa,UAAqC;CACxF,MAAM,QAAQ,MAAM;CACpB,MAAM,cAAc,WAAW,OAAO;CAEtC,IAAI,eAAe,MAAO,EAAE,aAAa,KAAK,aAAa,IAAI,OAAO;CAEtE,MAAM,OAAO,KAAK,IAAI,EAAG,IAAI,KAAK,IAAI,UAAU;CAEhD,OAAO;EACN,WAAW,UAAU,WAAW,QAAQ,OAAO,KAAK,KAAK;EACzD,QAAQ,aAAa,MAAM,QAAQ,UAAU,QAAQ,MAAM,IAAI;CAChE;AACD;AAGA,SAAgB,UAAU,SAA+B;CACxD,MAAM,OAAO,QAAQ,SAAS;CAE9B,OAAO;EACN,WAAW,UAAU;GACpB,MAAM,QAAQ,QAAQ,WAAW,UAAU,SAAS,KAAK;GACzD,IAAI,UAAU,IAAI,OAAO;GAEzB,MAAM,OAAO,QAAQ;GACrB,MAAM,MAAM,QAAQ,QAAQ;GAC5B,IAAI,SAAS,UAAa,QAAQ,QAAW,OAAO;GAEpD,QAAQ,QAAQ,KAAK,QAAQ,QAAQ,OAAO,QAAQ;EACrD;EACA,QAAQ,aAAa,QAAQ,KAAK,MAAM,UAAU,QAAQ,IAAI,IAAI,MAAM;CACzE;AACD"}
+{"version":3,"file":"taper.js","names":[],"sources":["../../../src/lib/taper.ts"],"sourcesContent":["import { clampProportion } from '#lib/math.ts';\n\nexport interface Taper {\n\tproportionOf: (value: number) => number;\n\tvalueAt: (proportion: number) => number;\n}\n\nexport function linearTaper(min: number, max: number): Taper {\n\tconst range = max - min;\n\n\treturn {\n\t\tproportionOf: (value) => (range > 0 ? clampProportion((value - min) / range) : 0),\n\t\tvalueAt: (proportion) => min + clampProportion(proportion) * range,\n\t};\n}\n\nexport function logTaper(min: number, max: number): Taper | undefined {\n\tif (min <= 0 || max <= min) return undefined;\n\n\tconst span = Math.log(max / min);\n\n\treturn {\n\t\tproportionOf: (value) => clampProportion(Math.log(Math.max(min, value) / min) / span),\n\t\tvalueAt: (proportion) => {\n\t\t\tconst clamped = clampProportion(proportion);\n\t\t\tif (clamped === 0) return min;\n\t\t\tif (clamped === 1) return max;\n\n\t\t\treturn min * Math.exp(clamped * span);\n\t\t},\n\t};\n}\n\n// JUCE's skew: a power curve through `midpoint` at half the travel\nexport function skewTaper(min: number, max: number, midpoint: number): Taper | undefined {\n\tconst range = max - min;\n\tconst midpointProportion = (midpoint - min) / range;\n\n\tif (midpointProportion === 0.5 || !(midpointProportion > 0 && midpointProportion < 1))\n\t\treturn undefined;\n\n\tconst skew = Math.log(0.5) / Math.log(midpointProportion);\n\n\treturn {\n\t\tproportionOf: (value) => clampProportion((value - min) / range) ** skew,\n\t\tvalueAt: (proportion) => min + range * clampProportion(proportion) ** (1 / skew),\n\t};\n}\n\nexport function listTaper(positions: ReadonlyArray<number>): Taper {\n\tconst last = positions.length - 1;\n\n\treturn {\n\t\tproportionOf: (value) => {\n\t\t\tif (Number.isNaN(value)) return NaN;\n\n\t\t\tconst above = positions.findIndex((position) => position >= value);\n\t\t\tif (above === -1) return 1;\n\n\t\t\tconst high = positions[above];\n\t\t\tconst low = positions[above - 1];\n\t\t\tif (high === undefined || low === undefined) return 0;\n\n\t\t\treturn (above - 1 + (value - low) / (high - low)) / last;\n\t\t},\n\t\tvalueAt: (proportion) => positions[Math.round(clampProportion(proportion) * last)] ?? NaN,\n\t};\n}\n"],"mappings":";;;AAOA,SAAgB,YAAY,KAAa,KAAoB;CAC5D,MAAM,QAAQ,MAAM;CAEpB,OAAO;EACN,eAAe,UAAW,QAAQ,IAAI,iBAAiB,QAAQ,OAAO,KAAK,IAAI;EAC/E,UAAU,eAAe,MAAM,gBAAgB,UAAU,IAAI;CAC9D;AACD;AAEA,SAAgB,SAAS,KAAa,KAAgC;CACrE,IAAI,OAAO,KAAK,OAAO,KAAK,OAAO;CAEnC,MAAM,OAAO,KAAK,IAAI,MAAM,GAAG;CAE/B,OAAO;EACN,eAAe,UAAU,gBAAgB,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,IAAI;EACpF,UAAU,eAAe;GACxB,MAAM,UAAU,gBAAgB,UAAU;GAC1C,IAAI,YAAY,GAAG,OAAO;GAC1B,IAAI,YAAY,GAAG,OAAO;GAE1B,OAAO,MAAM,KAAK,IAAI,UAAU,IAAI;EACrC;CACD;AACD;AAGA,SAAgB,UAAU,KAAa,KAAa,UAAqC;CACxF,MAAM,QAAQ,MAAM;CACpB,MAAM,sBAAsB,WAAW,OAAO;CAE9C,IAAI,uBAAuB,MAAO,EAAE,qBAAqB,KAAK,qBAAqB,IAClF,OAAO;CAER,MAAM,OAAO,KAAK,IAAI,EAAG,IAAI,KAAK,IAAI,kBAAkB;CAExD,OAAO;EACN,eAAe,UAAU,iBAAiB,QAAQ,OAAO,KAAK,KAAK;EACnE,UAAU,eAAe,MAAM,QAAQ,gBAAgB,UAAU,MAAM,IAAI;CAC5E;AACD;AAEA,SAAgB,UAAU,WAAyC;CAClE,MAAM,OAAO,UAAU,SAAS;CAEhC,OAAO;EACN,eAAe,UAAU;GACxB,IAAI,OAAO,MAAM,KAAK,GAAG,OAAO;GAEhC,MAAM,QAAQ,UAAU,WAAW,aAAa,YAAY,KAAK;GACjE,IAAI,UAAU,IAAI,OAAO;GAEzB,MAAM,OAAO,UAAU;GACvB,MAAM,MAAM,UAAU,QAAQ;GAC9B,IAAI,SAAS,UAAa,QAAQ,QAAW,OAAO;GAEpD,QAAQ,QAAQ,KAAK,QAAQ,QAAQ,OAAO,QAAQ;EACrD;EACA,UAAU,eAAe,UAAU,KAAK,MAAM,gBAAgB,UAAU,IAAI,IAAI,MAAM;CACvF;AACD"}

package/dist/dev/lib/time-regions.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/time-regions.d.ts
+export type TimeRegions = Iterable<readonly [number, number]> | TimeRanges;
+//#endregion
+//# sourceMappingURL=time-regions.d.ts.map

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

@@ -0,0 +1,9 @@
+//#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 };
+//# sourceMappingURL=time-regions.js.map

package/dist/dev/lib/time-regions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-regions.js","names":[],"sources":["../../../src/lib/time-regions.ts"],"sourcesContent":["export type TimeRegions = Iterable<readonly [number, number]> | TimeRanges;\n\nexport function readRegions(regions: TimeRegions): Array<[number, number]> {\n\tif ('start' in regions) {\n\t\treturn Array.from({ length: regions.length }, (_entry, index) => [\n\t\t\tregions.start(index),\n\t\t\tregions.end(index),\n\t\t]);\n\t}\n\n\treturn [...regions].map(([start, end]) => [start, end]);\n}\n"],"mappings":";AAEA,SAAgB,YAAY,SAA+C;CAC1E,IAAI,WAAW,SACd,OAAO,MAAM,KAAK,EAAE,QAAQ,QAAQ,OAAO,IAAI,QAAQ,UAAU,CAChE,QAAQ,MAAM,KAAK,GACnB,QAAQ,IAAI,KAAK,CAClB,CAAC;CAGF,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,OAAO,GAAG,CAAC;AACvD"}

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

@@ -0,0 +1,36 @@
+//#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 };
+//# sourceMappingURL=tracking-clock.js.map

package/dist/dev/lib/tracking-clock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-clock.js","names":[],"sources":["../../../src/lib/tracking-clock.ts"],"sourcesContent":["const seekThresholdSeconds = 0.5;\nconst jitterSeconds = 0.05;\n\n// The share of the error closed in a 60 Hz frame; scaled by elapsed time so every refresh rate converges alike\nconst catchUpPerFrame = 0.06;\n\ninterface ClockSource {\n\tisPlaying: boolean;\n\tplaybackRate: number;\n\tseconds: number;\n}\n\ninterface TrackingClock {\n\t// `frameMs` is the frame's timestamp, never `performance.now()` in the callback\n\tread: (frameMs: number, source: ClockSource) => number;\n}\n\nfunction isLandingOnSource(\n\t{ isPlaying, seconds }: ClockSource,\n\tcarried: number,\n\tlastSourceSeconds: number | undefined,\n): boolean {\n\tconst hasSteppedBack =\n\t\tlastSourceSeconds !== undefined && lastSourceSeconds - seconds > jitterSeconds;\n\n\treturn !isPlaying || hasSteppedBack || Math.abs(seconds - carried) > seekThresholdSeconds;\n}\n\nexport function createTrackingClock(): TrackingClock {\n\tlet positionSeconds: number | undefined;\n\tlet lastFrameMs: number | undefined;\n\tlet lastSourceSeconds: number | undefined;\n\tlet wasPlaying = false;\n\n\treturn {\n\t\tread: (frameMs, source) => {\n\t\t\tconst { isPlaying, playbackRate, seconds } = source;\n\t\t\tconst elapsedSeconds = wasPlaying\n\t\t\t\t? Math.max(0, frameMs - (lastFrameMs ?? frameMs)) / 1000\n\t\t\t\t: 0;\n\t\t\tconst carried = (positionSeconds ?? seconds) + elapsedSeconds * playbackRate;\n\n\t\t\tlastFrameMs = frameMs;\n\t\t\twasPlaying = isPlaying;\n\n\t\t\tif (!Number.isFinite(seconds)) {\n\t\t\t\tif (positionSeconds !== undefined) positionSeconds = carried;\n\t\t\t\treturn carried;\n\t\t\t}\n\n\t\t\tconst isLanding = isLandingOnSource(source, carried, lastSourceSeconds);\n\n\t\t\tlastSourceSeconds = seconds;\n\n\t\t\tif (positionSeconds === undefined || isLanding) {\n\t\t\t\tpositionSeconds = seconds;\n\t\t\t\treturn positionSeconds;\n\t\t\t}\n\n\t\t\tpositionSeconds =\n\t\t\t\tcarried + (seconds - carried) * (1 - (1 - catchUpPerFrame) ** (elapsedSeconds * 60));\n\n\t\t\treturn positionSeconds;\n\t\t},\n\t};\n}\n"],"mappings":";AAAA,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAgBtB,SAAS,kBACR,EAAE,WAAW,WACb,SACA,mBACU;CACV,MAAM,iBACL,sBAAsB,UAAa,oBAAoB,UAAU;CAElE,OAAO,CAAC,aAAa,kBAAkB,KAAK,IAAI,UAAU,OAAO,IAAI;AACtE;AAEA,SAAgB,sBAAqC;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,OAAO,EACN,OAAO,SAAS,WAAW;EAC1B,MAAM,EAAE,WAAW,cAAc,YAAY;EAC7C,MAAM,iBAAiB,aACpB,KAAK,IAAI,GAAG,WAAW,eAAe,QAAQ,IAAI,MAClD;EACH,MAAM,WAAW,mBAAmB,WAAW,iBAAiB;EAEhE,cAAc;EACd,aAAa;EAEb,IAAI,CAAC,OAAO,SAAS,OAAO,GAAG;GAC9B,IAAI,oBAAoB,QAAW,kBAAkB;GACrD,OAAO;EACR;EAEA,MAAM,YAAY,kBAAkB,QAAQ,SAAS,iBAAiB;EAEtE,oBAAoB;EAEpB,IAAI,oBAAoB,UAAa,WAAW;GAC/C,kBAAkB;GAClB,OAAO;EACR;EAEA,kBACC,WAAW,UAAU,YAAY,IAAK,QAAyB,iBAAiB;EAEjF,OAAO;CACR,EACD;AACD"}

package/dist/dev/lib/value-mapping.d.ts

@@ -0,0 +1,23 @@
+//#region src/lib/value-mapping.d.ts
+export interface ValueSpec {
+  detent?: number;
+  isNotched: boolean;
+  isWrapping: boolean;
+  max: number;
+  midpoint?: number;
+  min: number;
+  positions?: ReadonlyArray<number>;
+  step: number;
+  taper: 'linear' | 'log';
+}
+export interface ValueMapping {
+  readonly bounds: [number, number];
+  readonly isWrapping: boolean;
+  readonly keyTarget: (key: string, from: number, keyStep?: number) => number | undefined;
+  readonly positionCount: number | undefined;
+  readonly proportionOf: (value: number) => number;
+  readonly snap: (value: number) => number;
+  readonly valueAt: (proportion: number) => number;
+}
+//#endregion
+//# sourceMappingURL=value-mapping.d.ts.map

package/dist/dev/lib/value-mapping.js

@@ -0,0 +1,116 @@
+import { clamp, decimalPlaces, roundTo, trimFloat } from "./math.js";
+import { nearestPosition } from "./number-list.js";
+import { linearTaper, listTaper, logTaper, skewTaper } from "./taper.js";
+
+//#region src/lib/value-mapping.ts
+const resetKeys = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", -1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", 1],
+	["PageDown", -10],
+	["PageUp", 10]
+]);
+function curveOf(spec, max) {
+	const { min, positions } = spec;
+	if (positions) return listTaper(positions);
+	if (spec.isNotched || spec.isWrapping) return void 0;
+	return (spec.taper === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, spec.midpoint ?? NaN);
+}
+function countPositions(spec, count) {
+	if (!spec.isNotched || !Number.isFinite(count) || count < 2) return;
+	return count;
+}
+function countSteps(spec, range) {
+	if (spec.step <= 0) return NaN;
+	const fit = trimFloat(range / spec.step);
+	return spec.isWrapping ? Math.max(1, Math.ceil(fit)) : Math.floor(fit) + 1;
+}
+function valueMapping(spec) {
+	const { min, positions, step } = spec;
+	const max = Math.max(min, spec.max);
+	const range = max - min;
+	const count = countSteps(spec, range);
+	const isStepped = step > 0 && !positions;
+	const curve = curveOf(spec, max);
+	const taper = curve ?? linearTaper(min, max);
+	function round(value) {
+		if (step <= 0) return trimFloat(value);
+		return roundTo(value, Math.max(decimalPlaces(step), decimalPlaces(min)));
+	}
+	const top = round((count - 1) * step);
+	function limits() {
+		if (positions) return [positions[0] ?? min, positions.at(-1) ?? max];
+		return [min, isStepped && !spec.isWrapping ? round(min + top) : max];
+	}
+	const bounds = limits();
+	function wrap(value, span) {
+		const offset = round(((value - min) % span + span) % span);
+		return offset >= span ? 0 : offset;
+	}
+	function bound(value) {
+		if (!spec.isWrapping) return clamp(value, ...bounds);
+		if (range <= 0) return min;
+		return round(min + wrap(value, range));
+	}
+	function ring(value, span) {
+		if (range <= 0) return min;
+		const offset = wrap(value, span);
+		if (offset > top) return span - offset <= offset - top ? min : round(min + top);
+		return round(min + Math.round(offset / step) * step);
+	}
+	function snap(value) {
+		if (positions) return nearestPosition(positions, value);
+		if (step <= 0) return bound(round(value));
+		if (spec.isWrapping) return ring(value, range);
+		return bound(round(min + Math.round((value - min) / step) * step));
+	}
+	function stepBy(from, steps, size) {
+		if (positions) {
+			const index = clamp(positions.indexOf(from) + steps, 0, positions.length - 1);
+			return positions[index] ?? from;
+		}
+		if (!curve) return from + steps * size;
+		const next = snap(curve.valueAt(curve.proportionOf(from) + steps / 100));
+		return next === from ? from + Math.sign(steps) * size : next;
+	}
+	function stopAtDetent(from, next) {
+		if (spec.detent === void 0) return next;
+		const detent = snap(spec.detent);
+		const toward = Math.sign(next - from) * (detent - from);
+		const ahead = spec.isWrapping ? wrap(min + toward, isStepped ? count * step : range) : toward;
+		return ahead > 0 && ahead < Math.abs(next - from) ? detent : next;
+	}
+	function keyStride(keyStep) {
+		if (positions || !(keyStep > 0)) return void 0;
+		return step > 0 ? Math.max(1, Math.round(trimFloat(keyStep / step))) * step : keyStep;
+	}
+	function end(size) {
+		if (!spec.isWrapping) return bounds[1];
+		return min + (isStepped ? top : (Math.ceil(range / size) - 1) * size);
+	}
+	function target(key, from, keyStep) {
+		if (key === "Home") return bounds[0];
+		const size = step > 0 ? step : range / 100;
+		if (key === "End") return snap(end(size));
+		const steps = keySteps.get(key);
+		if (steps === void 0) return void 0;
+		const stride = keyStride(keyStep);
+		const next = stopAtDetent(from, stride === void 0 ? stepBy(from, steps, size) : from + steps * stride);
+		return isStepped && spec.isWrapping ? ring(next, count * step) : snap(next);
+	}
+	return {
+		bounds,
+		isWrapping: spec.isWrapping,
+		keyTarget: (key, from, keyStep = 0) => target(key, from, keyStep),
+		positionCount: countPositions(spec, positions?.length ?? count),
+		proportionOf: (value) => taper.proportionOf(bound(value)),
+		snap,
+		valueAt: (proportion) => taper.valueAt(proportion)
+	};
+}
+
+//#endregion
+export { resetKeys, valueMapping };
+//# sourceMappingURL=value-mapping.js.map

package/dist/dev/lib/value-mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-mapping.js","names":[],"sources":["../../../src/lib/value-mapping.ts"],"sourcesContent":["import type { Taper } from '#lib/taper.ts';\n\nimport { clamp, decimalPlaces, roundTo, trimFloat } from '#lib/math.ts';\nimport { nearestPosition } from '#lib/number-list.ts';\nimport { linearTaper, listTaper, logTaper, skewTaper } from '#lib/taper.ts';\n\nexport interface ValueSpec {\n\tdetent?: number;\n\tisNotched: boolean;\n\tisWrapping: boolean;\n\tmax: number;\n\tmidpoint?: number;\n\tmin: number;\n\tpositions?: ReadonlyArray<number>;\n\tstep: number;\n\ttaper: 'linear' | 'log';\n}\n\nexport interface ValueMapping {\n\treadonly bounds: [number, number];\n\treadonly isWrapping: boolean;\n\treadonly keyTarget: (key: string, from: number, keyStep?: number) => number | undefined;\n\treadonly positionCount: number | undefined;\n\treadonly proportionOf: (value: number) => number;\n\treadonly snap: (value: number) => number;\n\treadonly valueAt: (proportion: number) => number;\n}\n\n// A Mac keyboard's Delete sends Backspace\nexport const resetKeys = new Set(['Backspace', 'Delete']);\n\nconst pageSteps = 10;\n\nconst keySteps = new Map([\n\t['ArrowDown', -1],\n\t['ArrowLeft', -1],\n\t['ArrowRight', 1],\n\t['ArrowUp', 1],\n\t['PageDown', -pageSteps],\n\t['PageUp', pageSteps],\n]);\n\nfunction curveOf(spec: ValueSpec, max: number): Taper | undefined {\n\tconst { min, positions } = spec;\n\tif (positions) return listTaper(positions);\n\tif (spec.isNotched || spec.isWrapping) return undefined;\n\n\tconst log = spec.taper === 'log' ? logTaper(min, max) : undefined;\n\n\treturn log ?? skewTaper(min, max, spec.midpoint ?? NaN);\n}\n\nfunction countPositions(spec: ValueSpec, count: number): number | undefined {\n\tif (!spec.isNotched || !Number.isFinite(count) || count < 2) return;\n\n\treturn count;\n}\n\n// A wrapping mapping stops a step short of max, which is min again\nfunction countSteps(spec: ValueSpec, range: number): number {\n\tif (spec.step <= 0) return NaN;\n\n\tconst fit = trimFloat(range / spec.step);\n\n\treturn spec.isWrapping ? Math.max(1, Math.ceil(fit)) : Math.floor(fit) + 1;\n}\n\nexport function valueMapping(spec: ValueSpec): ValueMapping {\n\tconst { min, positions, step } = spec;\n\tconst max = Math.max(min, spec.max);\n\tconst range = max - min;\n\tconst count = countSteps(spec, range);\n\tconst isStepped = step > 0 && !positions;\n\tconst curve = curveOf(spec, max);\n\tconst taper = curve ?? linearTaper(min, max);\n\n\t// Decimal places, since significant digits keep the float residue beside 0\n\tfunction round(value: number): number {\n\t\tif (step <= 0) return trimFloat(value);\n\n\t\treturn roundTo(value, Math.max(decimalPlaces(step), decimalPlaces(min)));\n\t}\n\n\tconst top = round((count - 1) * step);\n\n\tfunction limits(): [number, number] {\n\t\tif (positions) return [positions[0] ?? min, positions.at(-1) ?? max];\n\n\t\treturn [min, isStepped && !spec.isWrapping ? round(min + top) : max];\n\t}\n\n\tconst bounds = limits();\n\n\tfunction wrap(value: number, span: number): number {\n\t\tconst offset = round((((value - min) % span) + span) % span);\n\n\t\treturn offset >= span ? 0 : offset;\n\t}\n\n\tfunction bound(value: number): number {\n\t\tif (!spec.isWrapping) return clamp(value, ...bounds);\n\t\tif (range <= 0) return min;\n\n\t\treturn round(min + wrap(value, range));\n\t}\n\n\t// A step that does not divide the range leaves a short seam, where a value goes to the nearer side\n\tfunction ring(value: number, span: number): number {\n\t\tif (range <= 0) return min;\n\n\t\tconst offset = wrap(value, span);\n\t\tif (offset > top) return span - offset <= offset - top ? min : round(min + top);\n\n\t\treturn round(min + Math.round(offset / step) * step);\n\t}\n\n\tfunction snap(value: number): number {\n\t\tif (positions) return nearestPosition(positions, value);\n\t\tif (step <= 0) return bound(round(value));\n\t\tif (spec.isWrapping) return ring(value, range);\n\n\t\treturn bound(round(min + Math.round((value - min) / step) * step));\n\t}\n\n\tfunction stepBy(from: number, steps: number, size: number): number {\n\t\tif (positions) {\n\t\t\tconst index = clamp(positions.indexOf(from) + steps, 0, positions.length - 1);\n\n\t\t\treturn positions[index] ?? from;\n\t\t}\n\t\tif (!curve) return from + steps * size;\n\n\t\tconst next = snap(curve.valueAt(curve.proportionOf(from) + steps / 100));\n\n\t\treturn next === from ? from + Math.sign(steps) * size : next;\n\t}\n\n\tfunction stopAtDetent(from: number, next: number): number {\n\t\tif (spec.detent === undefined) return next;\n\n\t\tconst detent = snap(spec.detent);\n\t\tconst toward = Math.sign(next - from) * (detent - from);\n\t\tconst ahead = spec.isWrapping ? wrap(min + toward, isStepped ? count * step : range) : toward;\n\n\t\treturn ahead > 0 && ahead < Math.abs(next - from) ? detent : next;\n\t}\n\n\tfunction keyStride(keyStep: number): number | undefined {\n\t\tif (positions || !(keyStep > 0)) return undefined;\n\n\t\treturn step > 0 ? Math.max(1, Math.round(trimFloat(keyStep / step))) * step : keyStep;\n\t}\n\n\tfunction end(size: number): number {\n\t\tif (!spec.isWrapping) return bounds[1];\n\n\t\treturn min + (isStepped ? top : (Math.ceil(range / size) - 1) * size);\n\t}\n\n\tfunction target(key: string, from: number, keyStep: number): number | undefined {\n\t\tif (key === 'Home') return bounds[0];\n\n\t\tconst size = step > 0 ? step : range / 100;\n\t\tif (key === 'End') return snap(end(size));\n\n\t\tconst steps = keySteps.get(key);\n\t\tif (steps === undefined) return undefined;\n\n\t\tconst stride = keyStride(keyStep);\n\t\tconst moved = stride === undefined ? stepBy(from, steps, size) : from + steps * stride;\n\t\tconst next = stopAtDetent(from, moved);\n\n\t\treturn isStepped && spec.isWrapping ? ring(next, count * step) : snap(next);\n\t}\n\n\treturn {\n\t\tbounds,\n\t\tisWrapping: spec.isWrapping,\n\t\tkeyTarget: (key, from, keyStep = 0) => target(key, from, keyStep),\n\t\tpositionCount: countPositions(spec, positions?.length ?? count),\n\t\tproportionOf: (value) => taper.proportionOf(bound(value)),\n\t\tsnap,\n\t\tvalueAt: (proportion) => taper.valueAt(proportion),\n\t};\n}\n"],"mappings":"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"}

package/dist/dev/lib/waveform-buckets.d.ts

@@ -0,0 +1,9 @@
+//#region src/lib/waveform-buckets.d.ts
+export interface WaveformPeaks {
+  channels?: number;
+  fullScale: number;
+  pairsPerSecond: number;
+  samples: Float32Array | Int8Array | Int16Array;
+}
+//#endregion
+//# sourceMappingURL=waveform-buckets.d.ts.map

package/dist/dev/lib/waveform-buckets.js

@@ -0,0 +1,42 @@
+//#region src/lib/waveform-buckets.ts
+function foldPairs(peaks, fromPair, toPair) {
+	const { samples } = peaks;
+	const channels = Math.max(1, peaks.channels ?? 1);
+	const stride = channels * 2;
+	const pairsTotal = Math.floor(samples.length / stride);
+	let low = 0;
+	let high = 0;
+	for (let pair = Math.max(0, fromPair); pair < Math.min(pairsTotal, toPair); pair += 1) for (let channel = 0; channel < channels; channel += 1) {
+		const at = pair * stride + channel * 2;
+		low = Math.min(low, samples[at] ?? 0);
+		high = Math.max(high, samples[at + 1] ?? 0);
+	}
+	return [low / peaks.fullScale, high / peaks.fullScale];
+}
+function waveformBuckets(peaks, view) {
+	const { pairsPerSecond } = peaks;
+	if (pairsPerSecond <= 0 || view.pixelsPerSecond <= 0) return [];
+	const pxPerPair = view.pixelsPerSecond / pairsPerSecond;
+	const pairs = Math.max(1, Math.round(1 / pxPerPair));
+	const openingPair = view.startSeconds * pairsPerSecond;
+	const first = Math.floor(openingPair / pairs) - 1;
+	const count = Math.ceil(view.width / (pairs * pxPerPair)) + 3;
+	const buckets = [];
+	for (let index = 0; index < count; index += 1) {
+		const fromPair = (first + index) * pairs;
+		const toPair = fromPair + pairs;
+		const [low, high] = foldPairs(peaks, fromPair, toPair);
+		buckets.push({
+			fromPair,
+			high,
+			low,
+			toPair,
+			x: (fromPair - openingPair) * pxPerPair
+		});
+	}
+	return buckets;
+}
+
+//#endregion
+export { waveformBuckets };
+//# sourceMappingURL=waveform-buckets.js.map

package/dist/dev/lib/waveform-buckets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveform-buckets.js","names":[],"sources":["../../../src/lib/waveform-buckets.ts"],"sourcesContent":["// Interleaved min, max per channel per pair; `fullScale` is 128, 32768 or 1\nexport interface WaveformPeaks {\n\tchannels?: number;\n\tfullScale: number;\n\tpairsPerSecond: number;\n\tsamples: Float32Array | Int8Array | Int16Array;\n}\n\ninterface WaveformBucket {\n\tfromPair: number;\n\thigh: number;\n\tlow: number;\n\ttoPair: number;\n\tx: number;\n}\n\ninterface BucketView {\n\tpixelsPerSecond: number;\n\tstartSeconds: number;\n\twidth: number;\n}\n\nfunction foldPairs(peaks: WaveformPeaks, fromPair: number, toPair: number): [number, number] {\n\tconst { samples } = peaks;\n\tconst channels = Math.max(1, peaks.channels ?? 1);\n\tconst stride = channels * 2;\n\tconst pairsTotal = Math.floor(samples.length / stride);\n\tlet low = 0;\n\tlet high = 0;\n\n\tfor (let pair = Math.max(0, fromPair); pair < Math.min(pairsTotal, toPair); pair += 1) {\n\t\tfor (let channel = 0; channel < channels; channel += 1) {\n\t\t\tconst at = pair * stride + channel * 2;\n\n\t\t\tlow = Math.min(low, samples[at] ?? 0);\n\t\t\thigh = Math.max(high, samples[at + 1] ?? 0);\n\t\t}\n\t}\n\n\treturn [low / peaks.fullScale, high / peaks.fullScale];\n}\n\n// Keyed to absolute pairs; keyed to the window, the same samples re-bucket every frame and judder\nexport function waveformBuckets(peaks: WaveformPeaks, view: BucketView): Array<WaveformBucket> {\n\tconst { pairsPerSecond } = peaks;\n\tif (pairsPerSecond <= 0 || view.pixelsPerSecond <= 0) return [];\n\n\tconst pxPerPair = view.pixelsPerSecond / pairsPerSecond;\n\tconst pairs = Math.max(1, Math.round(1 / pxPerPair));\n\tconst openingPair = view.startSeconds * pairsPerSecond;\n\tconst first = Math.floor(openingPair / pairs) - 1;\n\tconst count = Math.ceil(view.width / (pairs * pxPerPair)) + 3;\n\tconst buckets: Array<WaveformBucket> = [];\n\n\tfor (let index = 0; index < count; index += 1) {\n\t\tconst fromPair = (first + index) * pairs;\n\t\tconst toPair = fromPair + pairs;\n\t\tconst [low, high] = foldPairs(peaks, fromPair, toPair);\n\n\t\tbuckets.push({ fromPair, high, low, toPair, x: (fromPair - openingPair) * pxPerPair });\n\t}\n\n\treturn buckets;\n}\n"],"mappings":";AAsBA,SAAS,UAAU,OAAsB,UAAkB,QAAkC;CAC5F,MAAM,EAAE,YAAY;CACpB,MAAM,WAAW,KAAK,IAAI,GAAG,MAAM,YAAY,CAAC;CAChD,MAAM,SAAS,WAAW;CAC1B,MAAM,aAAa,KAAK,MAAM,QAAQ,SAAS,MAAM;CACrD,IAAI,MAAM;CACV,IAAI,OAAO;CAEX,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,YAAY,MAAM,GAAG,QAAQ,GACnF,KAAK,IAAI,UAAU,GAAG,UAAU,UAAU,WAAW,GAAG;EACvD,MAAM,KAAK,OAAO,SAAS,UAAU;EAErC,MAAM,KAAK,IAAI,KAAK,QAAQ,OAAO,CAAC;EACpC,OAAO,KAAK,IAAI,MAAM,QAAQ,KAAK,MAAM,CAAC;CAC3C;CAGD,OAAO,CAAC,MAAM,MAAM,WAAW,OAAO,MAAM,SAAS;AACtD;AAGA,SAAgB,gBAAgB,OAAsB,MAAyC;CAC9F,MAAM,EAAE,mBAAmB;CAC3B,IAAI,kBAAkB,KAAK,KAAK,mBAAmB,GAAG,OAAO,CAAC;CAE9D,MAAM,YAAY,KAAK,kBAAkB;CACzC,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,SAAS,CAAC;CACnD,MAAM,cAAc,KAAK,eAAe;CACxC,MAAM,QAAQ,KAAK,MAAM,cAAc,KAAK,IAAI;CAChD,MAAM,QAAQ,KAAK,KAAK,KAAK,SAAS,QAAQ,UAAU,IAAI;CAC5D,MAAM,UAAiC,CAAC;CAExC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,GAAG;EAC9C,MAAM,YAAY,QAAQ,SAAS;EACnC,MAAM,SAAS,WAAW;EAC1B,MAAM,CAAC,KAAK,QAAQ,UAAU,OAAO,UAAU,MAAM;EAErD,QAAQ,KAAK;GAAE;GAAU;GAAM;GAAK;GAAQ,IAAI,WAAW,eAAe;EAAU,CAAC;CACtF;CAEA,OAAO;AACR"}

package/dist/dev/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/lib/write-attribute.js.map

@@ -1 +1 @@
-{"version":3,"file":"write-attribute.js","names":[],"sources":["../../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CAEA,QAAQ,aAAa,MAAM,KAAK;AACjC"}
+{"version":3,"file":"write-attribute.js","names":[],"sources":["../../../src/lib/write-attribute.ts"],"sourcesContent":["export function writeAttribute(element: Element, name: string, value: string | undefined): void {\n\tif (value === undefined) {\n\t\telement.removeAttribute(name);\n\t\treturn;\n\t}\n\tif (element.getAttribute(name) === value) return;\n\n\telement.setAttribute(name, value);\n}\n"],"mappings":";AAAA,SAAgB,eAAe,SAAkB,MAAc,OAAiC;CAC/F,IAAI,UAAU,QAAW;EACxB,QAAQ,gBAAgB,IAAI;EAC5B;CACD;CACA,IAAI,QAAQ,aAAa,IAAI,MAAM,OAAO;CAE1C,QAAQ,aAAa,MAAM,KAAK;AACjC"}

package/dist/skins/amber.css

@@ -0,0 +1,8 @@
+@layer sonic {
+	.sonic-skin-amber {
+		--sonic-relief: 1;
+		--sonic-cap: oklch(37% 0.012 286deg);
+		--sonic-cap-hover: oklch(44.2% 0.015 286deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
+	}
+}

package/dist/skins/flat.css

@@ -0,0 +1,25 @@
+@layer sonic {
+	.sonic-skin-flat {
+		--sonic-relief: 0;
+		--sonic-lit: oklch(58% 0.19 255deg);
+		--sonic-unlit: oklch(84% 0.006 255deg);
+		--sonic-cap: oklch(93% 0.004 255deg);
+		--sonic-cap-hover: oklch(97% 0.004 255deg);
+		--sonic-cap-edge: oklch(72% 0.01 255deg);
+		--sonic-well: var(--sonic-unlit);
+		--sonic-well-lit: var(--sonic-lit);
+		--sonic-bezel: oklch(90% 0.004 255deg);
+		--sonic-lens: var(--sonic-unlit);
+		--sonic-led-lens-ratio: 0.8;
+		--sonic-waveform-edge: var(--sonic-lit);
+		--sonic-ink: oklch(27% 0.012 255deg);
+		--sonic-focus: oklch(52% 0.21 255deg);
+		--sonic-glass: oklch(97% 0.003 255deg);
+		--sonic-glass-text: oklch(27% 0.012 255deg);
+		--sonic-glass-edge: oklch(84% 0.006 255deg);
+		--sonic-glass-texture: 0;
+		--sonic-panel: oklch(98.5% 0.002 255deg);
+		--sonic-button-depth-ratio: 0;
+		--sonic-segmented-depth-ratio: 0;
+	}
+}

package/dist/skins/ivory.css

@@ -1,8 +1,8 @@
-/* Ink derived from a pale cap would vanish against it */
 @layer sonic {
 	.sonic-skin-ivory {
+		--sonic-relief: 1;
 		--sonic-cap: oklch(85.5% 0.024 85deg);
 		--sonic-cap-hover: oklch(90.5% 0.02 85deg);
-		--sonic-mark: oklch(18.5% 0.012 60deg);
+		--sonic-ink: oklch(18.5% 0.012 60deg);
 	}
 }

package/dist/skins/lime.css

@@ -1,9 +1,11 @@
 @layer sonic {
 	.sonic-skin-lime {
+		--sonic-relief: 1;
 		--sonic-lit: oklch(83.8% 0.205 118deg);
 		--sonic-unlit: oklch(28.6% 0.0203 237deg);
 		--sonic-cap: oklch(32.4% 0.0229 237deg);
 		--sonic-cap-hover: oklch(37.2% 0.025 237deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
 		--sonic-dial-ring-ratio: 0.05;
 		--sonic-dial-gap-ratio: 0.1;
 	}

package/dist/skins/slate.css

@@ -1,9 +1,11 @@
 @layer sonic {
 	.sonic-skin-slate {
+		--sonic-relief: 1;
 		--sonic-lit: oklch(79.7% 0.134 212deg);
 		--sonic-unlit: oklch(27.9% 0.037 260deg);
 		--sonic-cap: oklch(37.2% 0.039 257deg);
 		--sonic-cap-hover: oklch(44.6% 0.037 257deg);
+		--sonic-ink: color-mix(in oklab, var(--sonic-cap) 30%, #fff);
 		--sonic-dial-ring-ratio: 0.12;
 		--sonic-dial-gap-ratio: 0.07;
 	}

package/dist/styles/button.css

@@ -0,0 +1,240 @@
+@property --_sonic-button-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 32px;
+}
+
+@keyframes sonic-button-busy {
+	from {
+		opacity: 0.35;
+	}
+}
+
+@layer sonic {
+	:is(sonic-button, .sonic-button) {
+		--_sonic-button-size: var(--sonic-button-size, 2rem);
+		--_sonic-button-aspect-ratio: var(--sonic-button-aspect-ratio, 1);
+	}
+
+	:has(> .sonic-button):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-button:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
+		block-size: var(--_sonic-button-size);
+		overflow: hidden;
+	}
+
+	.sonic-button {
+		--_sonic-button-gap-ratio: var(--sonic-button-gap-ratio, 0);
+		--_sonic-button-radius-ratio: var(--sonic-button-radius-ratio, 0.2);
+		--_sonic-button-bevel-ratio: var(--sonic-button-bevel-ratio, 0.075);
+		--_sonic-button-face-radius-ratio: var(--sonic-button-face-radius-ratio, 0.15);
+		--_sonic-button-icon-ratio: var(--sonic-button-icon-ratio, 0.5);
+		--_sonic-button-led-ratio: var(--sonic-button-led-ratio, 0.2);
+		--_sonic-button-led-icon-ratio: var(--sonic-button-led-icon-ratio, 0.35);
+		--_sonic-button-depth-ratio: var(--sonic-button-depth-ratio, calc(0.03 * var(--_sonic-relief)));
+		--_sonic-button-press-scale: var(--sonic-button-press-scale, 0.985);
+		--_sonic-unit: calc(var(--_sonic-button-size) / 32);
+		--_sonic-button-corner: calc(var(--_sonic-button-size) * var(--_sonic-button-radius-ratio));
+		--_sonic-button-gap: calc(var(--_sonic-button-size) * var(--_sonic-button-gap-ratio));
+		--_sonic-keycap-depth: calc(var(--_sonic-button-size) * var(--_sonic-button-depth-ratio));
+
+		position: relative;
+		flex-shrink: 0;
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-aspect-ratio));
+		block-size: var(--_sonic-button-size);
+		padding: 0;
+		font: inherit;
+		color: var(--_sonic-ink);
+		cursor: pointer;
+		background: var(--_sonic-well-floor);
+		border: 0;
+		border-radius: var(--_sonic-button-corner);
+		box-shadow: var(--_sonic-well);
+		transition: color 120ms ease-out;
+	}
+
+	:where([momentary]) > .sonic-button {
+		touch-action: none;
+	}
+
+	/* Before the latched rule, which must win unchanged */
+	:where([armed]) > .sonic-button:not(:disabled, [aria-disabled='true']) {
+		--_sonic-keycap-glow: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(8% * var(--_sonic-relief)),
+			transparent
+		);
+
+		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
+
+		@media (forced-colors: active) {
+			--_sonic-keycap-glow: transparent;
+		}
+	}
+
+	/* Before the latched rule too; a button with an LED blinks the LED and keeps its legend */
+	:where([busy]) > .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led)) {
+		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
+	}
+
+	.sonic-button:active:where(:not(:disabled, [aria-disabled='true'])),
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+		--_sonic-keycap-shift: calc(var(--_sonic-keycap-depth) / 2);
+		--_sonic-keycap-scale: var(--_sonic-button-press-scale);
+		--_sonic-keycap-drop: var(--_sonic-press-drop);
+	}
+
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+		--_sonic-keycap-glow: var(--_sonic-keycap-lit-glow);
+
+		color: var(--_sonic-lit);
+		background: var(
+			--sonic-well-lit,
+			linear-gradient(
+				var(--_sonic-light-fall),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 25%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 60%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				)
+			)
+		);
+	}
+
+	.sonic-button:is(:disabled, [aria-disabled='true']) {
+		--_sonic-lit: var(--_sonic-lit-disabled);
+
+		color: var(--_sonic-etch);
+		cursor: default;
+	}
+
+	.sonic-button:not(
+			[aria-pressed='true'],
+			:disabled,
+			[aria-disabled='true'],
+			:where([momentary]:state(pressed), [armed]) > *,
+			:where([busy]) > :not(:has(.sonic-led))
+		):is(:focus-visible, :active) {
+		color: var(--_sonic-ink-lift);
+	}
+
+	@media (hover: hover) {
+		/* fallow-ignore-next-line code-duplication -- `:hover` and `:focus-visible` split by `(hover: hover)` */
+		.sonic-button:not(
+				[aria-pressed='true'],
+				:disabled,
+				[aria-disabled='true'],
+				:where([momentary]:state(pressed), [armed]) > *,
+				:where([busy]) > :not(:has(.sonic-led))
+			):hover {
+			color: var(--_sonic-ink-lift);
+		}
+	}
+
+	.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):focus-visible {
+		color: var(--sonic-lit-hover, var(--_sonic-lit));
+	}
+
+	@media (hover: hover) {
+		.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):hover {
+			color: var(--sonic-lit-hover, var(--_sonic-lit));
+		}
+	}
+
+	.sonic-button-cap {
+		--_sonic-keycap-corner: max(0px, var(--_sonic-button-corner) - var(--_sonic-button-gap));
+		--_sonic-keycap-bevel: calc(var(--_sonic-button-size) * var(--_sonic-button-bevel-ratio));
+		--_sonic-keycap-face-corner: calc(
+			var(--_sonic-button-size) * var(--_sonic-button-face-radius-ratio)
+		);
+
+		position: absolute;
+		inset: var(--_sonic-button-gap);
+		gap: calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio) / 2);
+		place-content: center;
+
+		& > .sonic-led {
+			--_sonic-led-size: var(
+				--sonic-led-size,
+				calc(var(--_sonic-button-size) * var(--_sonic-button-led-ratio))
+			);
+		}
+
+		& > svg {
+			inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
+			block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
+			filter: var(--_sonic-engraving);
+			mask-image: linear-gradient(
+				var(--_sonic-light-fall),
+				#000 15%,
+				rgb(0 0 0 / calc(1 - 0.4 * var(--_sonic-relief)))
+			);
+			mask-repeat: no-repeat;
+		}
+	}
+
+	.sonic-button-cap:has(> .sonic-led) > svg {
+		inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
+		block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-led-icon-ratio));
+	}
+
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-button-cap
+		> svg {
+		filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
+	}
+
+	/* fallow-ignore-next-line code-duplication -- one pressed state across the cap's parts */
+	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-button-cap
+		> [data-sonic-when='released'],
+	.sonic-button:not([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
+		.sonic-button-cap
+		> [data-sonic-when='pressed'] {
+		display: none;
+	}
+
+	[busy]
+		> .sonic-button:not(:disabled, [aria-disabled='true'], :has(.sonic-led))
+		> .sonic-button-cap
+		> *,
+	[busy] > .sonic-button:not(:disabled, [aria-disabled='true']) .sonic-led::after {
+		animation: sonic-button-busy 500ms ease-in-out infinite alternate;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sonic-button-cap > svg {
+			filter: none;
+			mask: none;
+		}
+
+		.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
+			--_sonic-skirt: var(--_sonic-lit);
+			--_sonic-face: var(--_sonic-lit);
+			--_sonic-ink: HighlightText;
+
+			&:is(:disabled, [aria-disabled='true']) {
+				--_sonic-ink: ButtonFace;
+			}
+
+			& .sonic-button-cap > svg {
+				filter: none;
+			}
+		}
+	}
+}

package/dist/styles/controls.css

@@ -1,9 +1,16 @@
 @import './material.css';
 @import './dial.css';
-@import './key.css';
+@import './envelope.css';
+@import './button.css';
 @import './led.css';
+@import './switch.css';
 @import './meter.css';
 @import './number.css';
+@import './panel.css';
+@import './ring.css';
 @import './screen.css';
 @import './segmented.css';
 @import './slider.css';
+@import './waveform.css';
+@import './wavestrip.css';
+@import './xy.css';