@xsynaptic/sonic-ui 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @xsynaptic/sonic-ui
 
+## 0.24.0
+
+### Minor Changes
+
+- Waveform: three number tokens shape the band mix, each watched, so a change repaints with no `repaint()`. Unset, the tint is unchanged.
+
+  - `--sonic-waveform-band-normalize`, 0 to 1 (default 1): at 0 the mix is the weighted average of the band colours and stays inside the palette
+  - `--sonic-waveform-band-contrast` (default 1): the exponent on each band's weight
+  - `--sonic-waveform-band-tilt` (default 0): decibels of gain per band above the lowest
+
+## 0.23.0
+
+### Minor Changes
+
+- - Waveform: `bands` (`WaveformBands`) tints the wave from levels per frequency band, coloured by `--sonic-waveform-band-1` upward and scaled by `--sonic-waveform-band-opacity`. Call `repaint()` after changing a band token.
+  - Breaking: `--sonic-waveform-edge` is replaced by `--sonic-waveform-edge-shade`, 0 to 1, how far the wave's edges mix towards `--sonic-shade`. Unset, the wave is flat; the skins with relief set 0.55.
+
 ## 0.22.0
 
 ### Minor Changes

package/README.md

@@ -48,6 +48,7 @@ import '@xsynaptic/sonic-ui/define';
 - Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire its events to your own state and write the property back.
 - A value control fires `input` as its value moves and `change` once when a gesture ends. A drag owns the value: a write to `value` during one is dropped.
 - `formatValue` and `parseValue` are properties holding functions. Once `parseValue` is set it has to read what `formatValue` writes, or typed entry opens on text it cannot take.
+- To show a control without taking input, set `inert` on the host. It leaves the tab order and the accessibility tree and ignores presses, and it keeps its colours and keeps drawing; `disabled` dims it and is announced as disabled.
 - A display takes its signal as data, and nothing in the library fetches, decodes or opens an `AudioContext`.
 - States a control sets itself are custom states on the host, selected with `:state()`.
 - The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements (`sonic-led`, `sonic-panel`, `sonic-ring`, `sonic-screen`). A control draws no glass of its own: wrap one in a screen for the encased look.

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

@@ -63,6 +63,7 @@ var SonicWaveElement = class extends SonicValueElement {
 				sizeProperty: this.sizeProperty
 			},
 			lengths: this.lengths,
+			numbers: this.numbers,
 			paint: (context, frame) => {
 				this.paint(context, frame);
 			},

package/dist/default/elements/waveform.js

@@ -7,7 +7,8 @@ import { isKind, writeKind } from "../lib/marker-band.js";
 import { createLabelRider } from "../lib/marker-rider.js";
 import { createPeaksRequest } from "../lib/peaks-request.js";
 import { createTrackingClock } from "../lib/tracking-clock.js";
-import { paintWaveform, waveformColours } from "../lib/waveform-scene.js";
+import { bandTable } from "../lib/waveform-bands.js";
+import { bandChannels, paintWaveform, waveformColours, waveformNumbers } from "../lib/waveform-scene.js";
 import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 
 //#region src/elements/waveform.ts
@@ -54,6 +55,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		"zoom-min",
 		"zoomable"
 	];
+	get bands() {
+		return this.#bands;
+	}
+	set bands(bands) {
+		this.#bands = bands;
+		this.#bandTable = bandTable(bands);
+		this.#peaksRequest.changed();
+	}
 	get peaks() {
 		return this.#peaks;
 	}
@@ -157,8 +166,12 @@ var SonicWaveform = class extends SonicWaveElement {
 	canvas = requireChild(this.control, ".sonic-waveform-canvas", HTMLCanvasElement);
 	colours = waveformColours;
 	lengths = {};
+	numbers = waveformNumbers;
 	sheet = "waveform.css";
 	sizeProperty = "--_sonic-waveform-size";
+	#bandColours = [];
+	#bands;
+	#bandTable;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
@@ -182,13 +195,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		insetProperty: "--_sonic-waveform-label-inset",
 		parkProperty: "--_sonic-waveform-label-park"
 	});
+	#strip;
 	#zoomGesture;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
 		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
+		this.upgradeProperties("bands", "peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -262,8 +276,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			if (isRebuilt) this.#kindColours = this.#readKindColours();
 			paintWaveform(context, {
 				...view,
-				colours: look.colours
+				colours: look.colours,
+				numbers: look.numbers
 			}, {
+				bands: this.#tint(isRebuilt),
 				kindColours: this.#kindColours,
 				markers: this.markerList(),
 				peaks: this.#peaks,
@@ -328,6 +344,14 @@ var SonicWaveform = class extends SonicWaveElement {
 			startSeconds: this.value
 		};
 	}
+	#readBandColours(strip, bandCount) {
+		const probes = Array.from({ length: bandCount }, (_probe, band) => {
+			const probe = document.createElement("div");
+			probe.style.setProperty("color", `var(--sonic-waveform-band-${String(band + 1)}, transparent)`);
+			return probe;
+		});
+		return this.#readProbes(probes).map((colour) => bandChannels(strip, colour));
+	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {
@@ -336,14 +360,34 @@ var SonicWaveform = class extends SonicWaveElement {
 			writeKind(probe, kind, "--_sonic-waveform-marker");
 			return probe;
 		});
+		const read = this.#readProbes(probes);
+		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
+	}
+	#readProbes(probes) {
 		this.control.append(...probes);
 		const read = probes.map((probe) => getComputedStyle(probe).color);
 		for (const probe of probes) probe.remove();
-		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
+		return read;
 	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.scrubState().played;
 	}
+	#tint(isRebuilt) {
+		const table = this.#bandTable;
+		if (!table) return void 0;
+		const strip = this.#strip ?? document.createElement("canvas").getContext("2d", { willReadFrequently: true }) ?? void 0;
+		if (!strip) return void 0;
+		this.#strip = strip;
+		if (isRebuilt || this.#bandColours.length !== table.bandCount) {
+			strip.canvas.height = 1;
+			this.#bandColours = this.#readBandColours(strip, table.bandCount);
+		}
+		return {
+			colours: this.#bandColours,
+			strip,
+			table
+		};
+	}
 	#zoomTo(target) {
 		const next = roundTo(clamp(target, this.zoomMin, this.zoomMax), 2);
 		if (next === this.zoom) return;

package/dist/default/elements/wavestrip.js

@@ -76,6 +76,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	canvas = requireChild(this.control, ".sonic-wavestrip-canvas", HTMLCanvasElement);
 	colours = colours;
 	lengths = lengths;
+	numbers = {};
 	sheet = "wavestrip.css";
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;

package/dist/default/lib/waveform-bands.js

@@ -0,0 +1,98 @@
+import { clampProportion } from "./math.js";
+
+//#region src/lib/waveform-bands.ts
+function fullScaleOf({ fullScale, levels }) {
+	if (fullScale !== void 0) return fullScale;
+	if (levels instanceof Uint8Array) return 255;
+	return levels instanceof Uint16Array ? 65535 : 1;
+}
+function amplitudeReader(bands) {
+	const fullScale = fullScaleOf(bands);
+	const minDecibels = Math.min(0, bands.minDecibels ?? 0);
+	return (level) => {
+		const proportion = Math.min(1, level / fullScale);
+		if (!(proportion > 0)) return 0;
+		return minDecibels < 0 ? 10 ** (minDecibels * (1 - proportion) / 20) : proportion;
+	};
+}
+function bandTable(bands) {
+	if (!bands) return void 0;
+	const { bandCount, framesPerSecond, levels } = bands;
+	if (!Number.isSafeInteger(bandCount) || bandCount < 1 || !(framesPerSecond > 0)) return void 0;
+	const amplitudeOf = amplitudeReader(bands);
+	if (levels instanceof Float32Array) return {
+		bandCount,
+		framesPerSecond,
+		levels,
+		weightOf: amplitudeOf
+	};
+	const weights = Float32Array.from({ length: levels instanceof Uint8Array ? 256 : 65536 }, (_weight, level) => amplitudeOf(level));
+	return {
+		bandCount,
+		framesPerSecond,
+		levels,
+		weightOf: (level) => weights[level] ?? 0
+	};
+}
+function groupMixer({ bandCount, levels, weightOf }, colours, { contrast, normalize, tilt }) {
+	const gains = Array.from({ length: bandCount }, (_gain, band) => 10 ** (tilt * band / 20));
+	const amount = clampProportion(normalize);
+	return (fromFrame, toFrame) => {
+		let red = 0;
+		let green = 0;
+		let blue = 0;
+		let total = 0;
+		for (let band = 0; band < bandCount; band += 1) {
+			const colour = colours[band];
+			if (!colour) continue;
+			let weight = 0;
+			for (let bandFrame = fromFrame; bandFrame < toFrame; bandFrame += 1) weight += weightOf(levels[bandFrame * bandCount + band] ?? 0);
+			weight *= gains[band] ?? 1;
+			if (contrast !== 1) weight **= contrast;
+			red += weight * colour[0];
+			green += weight * colour[1];
+			blue += weight * colour[2];
+			total += weight;
+		}
+		if (total === 0) return;
+		const scale = 255 / Math.max(red, green, blue, Number.MIN_VALUE) * amount + (1 - amount) / total;
+		return [
+			red * scale,
+			green * scale,
+			blue * scale,
+			255
+		];
+	};
+}
+function bandStrip(table, colours, view) {
+	if (view.pixelsPerSecond <= 0 || !colours.some(Boolean)) return void 0;
+	const { bandCount, framesPerSecond, levels } = table;
+	const mixGroup = groupMixer(table, colours, view.mix ?? {
+		contrast: 1,
+		normalize: 1,
+		tilt: 0
+	});
+	const pxPerFrame = view.pixelsPerSecond / framesPerSecond;
+	const frames = Math.max(1, Math.round(1 / pxPerFrame));
+	const groupWidth = frames * pxPerFrame;
+	const openingFrame = view.startSeconds * framesPerSecond;
+	const groupsTotal = Math.ceil(levels.length / bandCount / frames);
+	const first = Math.max(0, Math.floor(openingFrame / frames) - 1);
+	const count = Math.min(groupsTotal, Math.ceil((openingFrame + view.width / pxPerFrame) / frames) + 1) - first;
+	if (count < 1) return void 0;
+	const pixels = new Uint8ClampedArray(count * 4);
+	for (let index = 0; index < count; index += 1) {
+		const fromFrame = (first + index) * frames;
+		const mixed = mixGroup(fromFrame, fromFrame + frames);
+		if (mixed) pixels.set(mixed, index * 4);
+	}
+	return {
+		count,
+		groupWidth,
+		pixels,
+		x: (first * frames - openingFrame) * pxPerFrame
+	};
+}
+
+//#endregion
+export { bandStrip, bandTable };

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

@@ -1,5 +1,6 @@
 import { clamp } from "./math.js";
 import { isKind } from "./marker-band.js";
+import { bandStrip } from "./waveform-bands.js";
 import { waveformBuckets } from "./waveform-buckets.js";
 
 //#region src/lib/waveform-scene.ts
@@ -8,8 +9,16 @@ const waveformColours = {
 	grid: "--_sonic-waveform-grid",
 	marker: "--_sonic-waveform-marker",
 	placeholder: "--_sonic-waveform-placeholder",
-	wave: "--_sonic-waveform-wave",
-	waveEdge: "--_sonic-waveform-wave-edge"
+	shade: "--_sonic-waveform-shade",
+	shadeClear: "--_sonic-waveform-shade-clear",
+	wave: "--_sonic-waveform-wave"
+};
+const waveformNumbers = {
+	bandContrast: "--_sonic-waveform-band-contrast",
+	bandNormalize: "--_sonic-waveform-band-normalize",
+	bandOpacity: "--_sonic-waveform-band-opacity",
+	bandTilt: "--_sonic-waveform-band-tilt",
+	edgeShade: "--_sonic-waveform-edge-shade"
 };
 const amplitudeMargin = .94;
 const hatchPitchPx = 8;
@@ -53,27 +62,63 @@ function paintPlaceholders(context, scene) {
 	context.strokeStyle = scene.colours.placeholder;
 	context.stroke();
 }
-function waveFill(context, scene) {
-	const { wave, waveEdge } = scene.colours;
+function bandChannels(strip, colour) {
+	strip.clearRect(0, 0, 1, 1);
+	strip.fillStyle = colour;
+	strip.fillRect(0, 0, 1, 1);
+	const [red = 0, green = 0, blue = 0, alpha = 0] = strip.getImageData(0, 0, 1, 1).data;
+	return alpha === 0 ? void 0 : [
+		red,
+		green,
+		blue
+	];
+}
+function paintTint(context, scene, tint) {
+	const { bandContrast, bandNormalize, bandTilt } = scene.numbers;
+	const strip = bandStrip(tint.table, tint.colours, {
+		...scene,
+		mix: {
+			contrast: bandContrast,
+			normalize: bandNormalize,
+			tilt: bandTilt
+		}
+	});
+	if (!strip) return;
+	const { canvas } = tint.strip;
+	const { count } = strip;
+	if (canvas.width < count) canvas.width = count;
+	tint.strip.putImageData(new ImageData(strip.pixels, count, 1), 0, 0);
+	context.globalAlpha = scene.numbers.bandOpacity;
+	context.drawImage(canvas, 0, 0, count, 1, strip.x, 0, count * strip.groupWidth, scene.height);
+}
+function paintEdgeShade(context, scene) {
+	const { shade, shadeClear } = scene.colours;
 	const gradient = context.createLinearGradient(0, 0, 0, scene.height);
-	gradient.addColorStop(0, waveEdge);
-	gradient.addColorStop(.5, wave);
-	gradient.addColorStop(1, waveEdge);
-	return gradient;
+	gradient.addColorStop(0, shade);
+	gradient.addColorStop(.5, shadeClear);
+	gradient.addColorStop(1, shade);
+	context.globalAlpha = scene.numbers.edgeShade;
+	context.fillStyle = gradient;
+	context.fillRect(0, 0, scene.width, scene.height);
 }
-function paintWave(context, scene, peaks) {
-	const buckets = waveformBuckets(peaks, scene);
+function paintWave(context, scene, drawn) {
+	const buckets = drawn.peaks ? waveformBuckets(drawn.peaks, scene) : [];
 	const [first] = buckets;
 	if (!first) return;
 	const center = scene.height / 2;
 	const amplitudePx = center * amplitudeMargin;
-	context.fillStyle = waveFill(context, scene);
+	const { bandOpacity, edgeShade } = scene.numbers;
+	context.fillStyle = scene.colours.wave;
 	context.beginPath();
 	context.moveTo(first.x, center);
 	for (const bucket of buckets) context.lineTo(bucket.x, center - bucket.high * amplitudePx);
 	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, center - bucket.low * amplitudePx);
 	context.closePath();
 	context.fill();
+	context.globalCompositeOperation = "source-atop";
+	if (drawn.bands && bandOpacity > 0) paintTint(context, scene, drawn.bands);
+	if (edgeShade > 0) paintEdgeShade(context, scene);
+	context.globalAlpha = 1;
 }
 function paintMarkers(context, scene, drawn) {
 	const line = Math.max(1, Math.round(scene.dpr));
@@ -93,16 +138,18 @@ function paintWaveform(context, scene, drawn) {
 	const [opening, closing] = [x(drawn.range[0]), x(drawn.range[1])];
 	const [from, to] = [clamp(opening, 0, width), clamp(closing, 0, width)];
 	context.clearRect(0, 0, width, height);
-	paintHatch(context, scene, [0, from]);
-	paintHatch(context, scene, [to, width]);
+	paintWave(context, scene, drawn);
+	context.globalCompositeOperation = "destination-over";
+	paintPlaceholders(context, scene);
 	context.fillStyle = grid;
 	if (to > from) context.fillRect(from, Math.round((height - line) / 2), to - from, line);
-	paintPlaceholders(context, scene);
-	if (drawn.peaks) paintWave(context, scene, drawn.peaks);
+	paintHatch(context, scene, [0, from]);
+	paintHatch(context, scene, [to, width]);
+	context.globalCompositeOperation = "source-over";
 	context.fillStyle = ends;
 	for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
 	paintMarkers(context, scene, drawn);
 }
 
 //#endregion
-export { paintWaveform, waveformColours };
+export { bandChannels, paintWaveform, waveformColours, waveformNumbers };

package/dist/dev/elements/wave-element.d.ts

@@ -17,7 +17,7 @@ export interface WaveMarker {
   label?: string;
   start: Seconds;
 }
-export declare abstract class SonicWaveElement<Colour extends string, Length extends string = never> extends SonicValueElement {
+export declare abstract class SonicWaveElement<Colour extends string, Length extends string = never, Numeric extends string = never> extends SonicValueElement {
   #private;
   static readonly observedAttributes: string[];
   get currentMarker(): undefined | WaveMarker;
@@ -30,6 +30,7 @@ export declare abstract class SonicWaveElement<Colour extends string, Length ext
   protected abstract readonly control: HTMLElement;
   protected abstract readonly lengths: Record<Length, `--_sonic-${string}`>;
   protected readonly notation: ValueNotation;
+  protected abstract readonly numbers: Record<Numeric, `--_sonic-${string}`>;
   protected abstract readonly sheet: string;
   protected abstract readonly sizeProperty: `--_sonic-${string}`;
   attributeChangedCallback(name: string): void;
@@ -40,7 +41,7 @@ export declare abstract class SonicWaveElement<Colour extends string, Length ext
   protected abstract isEmpty(): boolean;
   protected markerList(): ReadonlyArray<WaveMarker>;
   protected markerProportions(): Array<[number, number]>;
-  protected abstract paint(context: CanvasRenderingContext2D, frame: SurfaceFrame<Colour, Length>): void;
+  protected abstract paint(context: CanvasRenderingContext2D, frame: SurfaceFrame<Colour, Length, Numeric>): void;
   protected proportionsChanged(): void;
   protected renderEmpty(): void;
   protected abstract renderMarkers(): void;

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

@@ -63,6 +63,7 @@ var SonicWaveElement = class extends SonicValueElement {
 				sizeProperty: this.sizeProperty
 			},
 			lengths: this.lengths,
+			numbers: this.numbers,
 			paint: (context, frame) => {
 				this.paint(context, frame);
 			},

package/dist/dev/elements/wave-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"wave-element.js","names":[],"sources":["../../../src/elements/wave-element.ts"],"sourcesContent":["import type { ValueNotation } from '#elements/value-element.ts';\nimport type { Surface, SurfaceFrame } from '#lib/canvas-surface.ts';\nimport type { Seconds } from '#lib/units.ts';\n\nimport { SonicValueElement } from '#elements/value-element.ts';\nimport { bindSurface } from '#lib/canvas-surface.ts';\nimport { formatClock, parseClock } from '#lib/clock.ts';\nimport { spokenDuration } from '#lib/spoken-duration.ts';\n\ndeclare const __DEV__: boolean;\n\ndeclare global {\n\tinterface HTMLElementEventMap {\n\t\t'sonic-marker': Event;\n\t}\n}\n\nexport interface WaveMarker {\n\t// Open to a consumer's own keys, which `renderLabel` draws from\n\t[key: string]: unknown;\n\tdimmed?: boolean;\n\t/** Makes the marker a region */\n\tend?: Seconds;\n\t/** Lowercase letters, digits and hyphens; colours the marker through `--sonic-marker-<kind>` */\n\tkind?: string;\n\tlabel?: string;\n\tstart: Seconds;\n}\n\nfunction markerKey(marker: undefined | WaveMarker): string {\n\treturn marker ? [marker.start, marker.end, marker.kind, marker.label].join('|') : '';\n}\n\nexport abstract class SonicWaveElement<\n\tColour extends string,\n\tLength extends string = never,\n> extends SonicValueElement {\n\tstatic override readonly observedAttributes = [...SonicValueElement.observedAttributes, 'fill'];\n\n\tget currentMarker(): undefined | WaveMarker {\n\t\treturn this.#current ? { ...this.#current } : undefined;\n\t}\n\n\tget fill(): boolean {\n\t\treturn this.hasAttribute('fill');\n\t}\n\n\tset fill(isFilling: boolean) {\n\t\tthis.reflect('fill', isFilling);\n\t}\n\n\tget markers(): Array<WaveMarker> {\n\t\treturn this.#markers.map((marker) => ({ ...marker }));\n\t}\n\n\tset markers(list: Iterable<WaveMarker> | undefined) {\n\t\tthis.#markers = [...(list ?? [])]\n\t\t\t.filter((marker) => Number.isFinite(marker.start))\n\t\t\t.map((marker) => ({ ...marker }))\n\t\t\t.toSorted((first, second) => first.start - second.start);\n\t\tif (!this.isBound()) return;\n\n\t\tthis.renderMarkers();\n\t\tthis.render();\n\t}\n\n\tprotected abstract readonly canvas: HTMLCanvasElement;\n\n\tprotected abstract readonly colours: Record<Colour, `--_sonic-${string}`>;\n\n\tprotected abstract readonly control: HTMLElement;\n\n\tprotected abstract readonly lengths: Record<Length, `--_sonic-${string}`>;\n\n\tprotected override readonly notation: ValueNotation = {\n\t\tformat: formatClock,\n\t\tparse: parseClock,\n\t\tspeak: (seconds) => spokenDuration(seconds, this.closest<HTMLElement>('[lang]')?.lang),\n\t};\n\n\tprotected abstract readonly sheet: string;\n\n\tprotected abstract readonly sizeProperty: `--_sonic-${string}`;\n\n\t#current: undefined | WaveMarker;\n\n\t#markers: Array<WaveMarker> = [];\n\n\t#surface: Surface | undefined;\n\n\toverride attributeChangedCallback(name: string): void {\n\t\tsuper.attributeChangedCallback(name);\n\t\tif (name === 'fill') this.#surface?.setFill(this.fill);\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('fill', 'markers');\n\t\tsuper.connectedCallback();\n\t}\n\n\trepaint(): void {\n\t\tthis.#surface?.rebuild();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\n\t\tthis.keepControl(control, signal);\n\t\tthis.renderEmpty();\n\t\tthis.#surface = bindSurface({\n\t\t\tcanvas: this.canvas,\n\t\t\tcolours: this.colours,\n\t\t\tfill: { control, sizeProperty: this.sizeProperty },\n\t\t\tlengths: this.lengths,\n\t\t\tpaint: (context, frame) => {\n\t\t\t\tthis.paint(context, frame);\n\t\t\t},\n\t\t\tresize: () => {\n\t\t\t\tthis.renderMarkers();\n\t\t\t},\n\t\t\tsignal,\n\t\t});\n\t\tthis.render();\n\t\tif (__DEV__)\n\t\t\tthis.checkStyles(control, this.sheet, {\n\t\t\t\tproperty: 'margin-bottom',\n\t\t\t\tselector: '[popover]',\n\t\t\t});\n\t\tthis.#surface.setFill(this.fill);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.control;\n\t}\n\n\tprotected abstract isEmpty(): boolean;\n\n\tprotected markerList(): ReadonlyArray<WaveMarker> {\n\t\treturn this.#markers;\n\t}\n\n\tprotected markerProportions(): Array<[number, number]> {\n\t\tconst mapping = this.mapping();\n\n\t\treturn this.#markers.map(({ end, start }) => {\n\t\t\tconst at = mapping.proportionOf(start);\n\t\t\tconst to = end === undefined ? at : mapping.proportionOf(end);\n\n\t\t\treturn [Math.min(at, to), Math.max(at, to)];\n\t\t});\n\t}\n\n\tprotected abstract paint(\n\t\tcontext: CanvasRenderingContext2D,\n\t\tframe: SurfaceFrame<Colour, Length>,\n\t): void;\n\n\tprotected override proportionsChanged(): void {\n\t\tthis.renderMarkers();\n\t}\n\n\tprotected renderEmpty(): void {\n\t\tthis.toggleState('empty', this.isEmpty());\n\t}\n\n\tprotected abstract renderMarkers(): void;\n\n\tprotected override scrubChanged(): void {\n\t\tthis.render();\n\t}\n\n\tprotected showCurrentMarker(seconds: number): void {\n\t\tconst current = this.#markers.findLast((marker) => marker.start <= seconds);\n\t\tif (markerKey(current) === markerKey(this.#current)) return;\n\n\t\tthis.#current = current;\n\t\tthis.dispatchEvent(new Event('sonic-marker', { bubbles: true }));\n\t}\n\n\tprotected surface(): Surface | undefined {\n\t\treturn this.#surface;\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"wave-element.js","names":[],"sources":["../../../src/elements/wave-element.ts"],"sourcesContent":["import type { ValueNotation } from '#elements/value-element.ts';\nimport type { Surface, SurfaceFrame } from '#lib/canvas-surface.ts';\nimport type { Seconds } from '#lib/units.ts';\n\nimport { SonicValueElement } from '#elements/value-element.ts';\nimport { bindSurface } from '#lib/canvas-surface.ts';\nimport { formatClock, parseClock } from '#lib/clock.ts';\nimport { spokenDuration } from '#lib/spoken-duration.ts';\n\ndeclare const __DEV__: boolean;\n\ndeclare global {\n\tinterface HTMLElementEventMap {\n\t\t'sonic-marker': Event;\n\t}\n}\n\nexport interface WaveMarker {\n\t// Open to a consumer's own keys, which `renderLabel` draws from\n\t[key: string]: unknown;\n\tdimmed?: boolean;\n\t/** Makes the marker a region */\n\tend?: Seconds;\n\t/** Lowercase letters, digits and hyphens; colours the marker through `--sonic-marker-<kind>` */\n\tkind?: string;\n\tlabel?: string;\n\tstart: Seconds;\n}\n\nfunction markerKey(marker: undefined | WaveMarker): string {\n\treturn marker ? [marker.start, marker.end, marker.kind, marker.label].join('|') : '';\n}\n\nexport abstract class SonicWaveElement<\n\tColour extends string,\n\tLength extends string = never,\n\tNumeric extends string = never,\n> extends SonicValueElement {\n\tstatic override readonly observedAttributes = [...SonicValueElement.observedAttributes, 'fill'];\n\n\tget currentMarker(): undefined | WaveMarker {\n\t\treturn this.#current ? { ...this.#current } : undefined;\n\t}\n\n\tget fill(): boolean {\n\t\treturn this.hasAttribute('fill');\n\t}\n\n\tset fill(isFilling: boolean) {\n\t\tthis.reflect('fill', isFilling);\n\t}\n\n\tget markers(): Array<WaveMarker> {\n\t\treturn this.#markers.map((marker) => ({ ...marker }));\n\t}\n\n\tset markers(list: Iterable<WaveMarker> | undefined) {\n\t\tthis.#markers = [...(list ?? [])]\n\t\t\t.filter((marker) => Number.isFinite(marker.start))\n\t\t\t.map((marker) => ({ ...marker }))\n\t\t\t.toSorted((first, second) => first.start - second.start);\n\t\tif (!this.isBound()) return;\n\n\t\tthis.renderMarkers();\n\t\tthis.render();\n\t}\n\n\tprotected abstract readonly canvas: HTMLCanvasElement;\n\n\tprotected abstract readonly colours: Record<Colour, `--_sonic-${string}`>;\n\n\tprotected abstract readonly control: HTMLElement;\n\n\tprotected abstract readonly lengths: Record<Length, `--_sonic-${string}`>;\n\n\tprotected override readonly notation: ValueNotation = {\n\t\tformat: formatClock,\n\t\tparse: parseClock,\n\t\tspeak: (seconds) => spokenDuration(seconds, this.closest<HTMLElement>('[lang]')?.lang),\n\t};\n\n\tprotected abstract readonly numbers: Record<Numeric, `--_sonic-${string}`>;\n\n\tprotected abstract readonly sheet: string;\n\n\tprotected abstract readonly sizeProperty: `--_sonic-${string}`;\n\n\t#current: undefined | WaveMarker;\n\n\t#markers: Array<WaveMarker> = [];\n\n\t#surface: Surface | undefined;\n\n\toverride attributeChangedCallback(name: string): void {\n\t\tsuper.attributeChangedCallback(name);\n\t\tif (name === 'fill') this.#surface?.setFill(this.fill);\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('fill', 'markers');\n\t\tsuper.connectedCallback();\n\t}\n\n\trepaint(): void {\n\t\tthis.#surface?.rebuild();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst control = this.control;\n\n\t\tthis.keepControl(control, signal);\n\t\tthis.renderEmpty();\n\t\tthis.#surface = bindSurface({\n\t\t\tcanvas: this.canvas,\n\t\t\tcolours: this.colours,\n\t\t\tfill: { control, sizeProperty: this.sizeProperty },\n\t\t\tlengths: this.lengths,\n\t\t\tnumbers: this.numbers,\n\t\t\tpaint: (context, frame) => {\n\t\t\t\tthis.paint(context, frame);\n\t\t\t},\n\t\t\tresize: () => {\n\t\t\t\tthis.renderMarkers();\n\t\t\t},\n\t\t\tsignal,\n\t\t});\n\t\tthis.render();\n\t\tif (__DEV__)\n\t\t\tthis.checkStyles(control, this.sheet, {\n\t\t\t\tproperty: 'margin-bottom',\n\t\t\t\tselector: '[popover]',\n\t\t\t});\n\t\tthis.#surface.setFill(this.fill);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.control;\n\t}\n\n\tprotected abstract isEmpty(): boolean;\n\n\tprotected markerList(): ReadonlyArray<WaveMarker> {\n\t\treturn this.#markers;\n\t}\n\n\tprotected markerProportions(): Array<[number, number]> {\n\t\tconst mapping = this.mapping();\n\n\t\treturn this.#markers.map(({ end, start }) => {\n\t\t\tconst at = mapping.proportionOf(start);\n\t\t\tconst to = end === undefined ? at : mapping.proportionOf(end);\n\n\t\t\treturn [Math.min(at, to), Math.max(at, to)];\n\t\t});\n\t}\n\n\tprotected abstract paint(\n\t\tcontext: CanvasRenderingContext2D,\n\t\tframe: SurfaceFrame<Colour, Length, Numeric>,\n\t): void;\n\n\tprotected override proportionsChanged(): void {\n\t\tthis.renderMarkers();\n\t}\n\n\tprotected renderEmpty(): void {\n\t\tthis.toggleState('empty', this.isEmpty());\n\t}\n\n\tprotected abstract renderMarkers(): void;\n\n\tprotected override scrubChanged(): void {\n\t\tthis.render();\n\t}\n\n\tprotected showCurrentMarker(seconds: number): void {\n\t\tconst current = this.#markers.findLast((marker) => marker.start <= seconds);\n\t\tif (markerKey(current) === markerKey(this.#current)) return;\n\n\t\tthis.#current = current;\n\t\tthis.dispatchEvent(new Event('sonic-marker', { bubbles: true }));\n\t}\n\n\tprotected surface(): Surface | undefined {\n\t\treturn this.#surface;\n\t}\n}\n"],"mappings":";;;;;;AA6BA,SAAS,UAAU,QAAwC;CAC1D,OAAO,SAAS;EAAC,OAAO;EAAO,OAAO;EAAK,OAAO;EAAM,OAAO;CAAK,CAAC,CAAC,KAAK,GAAG,IAAI;AACnF;AAEA,IAAsB,mBAAtB,cAIU,kBAAkB;CAC3B,OAAyB,qBAAqB,CAAC,GAAG,kBAAkB,oBAAoB,MAAM;CAE9F,IAAI,gBAAwC;EAC3C,OAAO,KAAK,WAAW,EAAE,GAAG,KAAK,SAAS,IAAI;CAC/C;CAEA,IAAI,OAAgB;EACnB,OAAO,KAAK,aAAa,MAAM;CAChC;CAEA,IAAI,KAAK,WAAoB;EAC5B,KAAK,QAAQ,QAAQ,SAAS;CAC/B;CAEA,IAAI,UAA6B;EAChC,OAAO,KAAK,SAAS,KAAK,YAAY,EAAE,GAAG,OAAO,EAAE;CACrD;CAEA,IAAI,QAAQ,MAAwC;EACnD,KAAK,WAAW,CAAC,GAAI,QAAQ,CAAC,CAAE,CAAC,CAC/B,QAAQ,WAAW,OAAO,SAAS,OAAO,KAAK,CAAC,CAAC,CACjD,KAAK,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC,CAChC,UAAU,OAAO,WAAW,MAAM,QAAQ,OAAO,KAAK;EACxD,IAAI,CAAC,KAAK,QAAQ,GAAG;EAErB,KAAK,cAAc;EACnB,KAAK,OAAO;CACb;CAUA,AAA4B,WAA0B;EACrD,QAAQ;EACR,OAAO;EACP,QAAQ,YAAY,eAAe,SAAS,KAAK,QAAqB,QAAQ,CAAC,EAAE,IAAI;CACtF;CAQA;CAEA,WAA8B,CAAC;CAE/B;CAEA,AAAS,yBAAyB,MAAoB;EACrD,MAAM,yBAAyB,IAAI;EACnC,IAAI,SAAS,QAAQ,KAAK,UAAU,QAAQ,KAAK,IAAI;CACtD;CAEA,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,QAAQ,SAAS;EACxC,MAAM,kBAAkB;CACzB;CAEA,UAAgB;EACf,KAAK,UAAU,QAAQ;CACxB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,UAAU,KAAK;EAErB,KAAK,YAAY,SAAS,MAAM;EAChC,KAAK,YAAY;EACjB,KAAK,WAAW,YAAY;GAC3B,QAAQ,KAAK;GACb,SAAS,KAAK;GACd,MAAM;IAAE;IAAS,cAAc,KAAK;GAAa;GACjD,SAAS,KAAK;GACd,SAAS,KAAK;GACd,QAAQ,SAAS,UAAU;IAC1B,KAAK,MAAM,SAAS,KAAK;GAC1B;GACA,cAAc;IACb,KAAK,cAAc;GACpB;GACA;EACD,CAAC;EACD,KAAK,OAAO;EAEX,KAAK,YAAY,SAAS,KAAK,OAAO;GACrC,UAAU;GACV,UAAU;EACX,CAAC;EACF,KAAK,SAAS,QAAQ,KAAK,IAAI;CAChC;CAEA,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAIA,AAAU,aAAwC;EACjD,OAAO,KAAK;CACb;CAEA,AAAU,oBAA6C;EACtD,MAAM,UAAU,KAAK,QAAQ;EAE7B,OAAO,KAAK,SAAS,KAAK,EAAE,KAAK,YAAY;GAC5C,MAAM,KAAK,QAAQ,aAAa,KAAK;GACrC,MAAM,KAAK,QAAQ,SAAY,KAAK,QAAQ,aAAa,GAAG;GAE5D,OAAO,CAAC,KAAK,IAAI,IAAI,EAAE,GAAG,KAAK,IAAI,IAAI,EAAE,CAAC;EAC3C,CAAC;CACF;CAOA,AAAmB,qBAA2B;EAC7C,KAAK,cAAc;CACpB;CAEA,AAAU,cAAoB;EAC7B,KAAK,YAAY,SAAS,KAAK,QAAQ,CAAC;CACzC;CAIA,AAAmB,eAAqB;EACvC,KAAK,OAAO;CACb;CAEA,AAAU,kBAAkB,SAAuB;EAClD,MAAM,UAAU,KAAK,SAAS,UAAU,WAAW,OAAO,SAAS,OAAO;EAC1E,IAAI,UAAU,OAAO,MAAM,UAAU,KAAK,QAAQ,GAAG;EAErD,KAAK,WAAW;EAChB,KAAK,cAAc,IAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,CAAC,CAAC;CAChE;CAEA,AAAU,UAA+B;EACxC,OAAO,KAAK;CACb;AACD"}

package/dist/dev/elements/waveform.d.ts

@@ -3,8 +3,9 @@ import { TimeRegions } from "../lib/time-regions.js";
 import { SurfaceFrame } from "../lib/canvas-surface.js";
 import { SonicWaveElement, WaveMarker } from "./wave-element.js";
 import { PeaksRequest } from "../lib/peaks-request.js";
+import { WaveformBands } from "../lib/waveform-bands.js";
 import { WaveformPeaks } from "../lib/waveform-buckets.js";
-import { waveformColours } from "../lib/waveform-scene.js";
+import { waveformColours, waveformNumbers } from "../lib/waveform-scene.js";
 //#region src/elements/waveform.d.ts
 declare global {
   interface HTMLElementEventMap {
@@ -15,10 +16,13 @@ declare global {
   }
 }
 type Colour = keyof typeof waveformColours;
+type Numeric = keyof typeof waveformNumbers;
 export type LabelRender = (marker: WaveMarker, element: HTMLElement) => void;
-export declare class SonicWaveform extends SonicWaveElement<Colour> {
+export declare class SonicWaveform extends SonicWaveElement<Colour, never, Numeric> {
   #private;
   static readonly observedAttributes: string[];
+  get bands(): undefined | WaveformBands;
+  set bands(bands: undefined | WaveformBands);
   get peaks(): undefined | WaveformPeaks;
   set peaks(peaks: undefined | WaveformPeaks);
   /** Spans being fetched; drawn as placeholders until cleared */
@@ -55,10 +59,18 @@ export declare class SonicWaveform extends SonicWaveElement<Colour> {
     readonly grid: "--_sonic-waveform-grid";
     readonly marker: "--_sonic-waveform-marker";
     readonly placeholder: "--_sonic-waveform-placeholder";
+    readonly shade: "--_sonic-waveform-shade";
+    readonly shadeClear: "--_sonic-waveform-shade-clear";
     readonly wave: "--_sonic-waveform-wave";
-    readonly waveEdge: "--_sonic-waveform-wave-edge";
   };
   protected readonly lengths: {};
+  protected readonly numbers: {
+    readonly bandContrast: "--_sonic-waveform-band-contrast";
+    readonly bandNormalize: "--_sonic-waveform-band-normalize";
+    readonly bandOpacity: "--_sonic-waveform-band-opacity";
+    readonly bandTilt: "--_sonic-waveform-band-tilt";
+    readonly edgeShade: "--_sonic-waveform-edge-shade";
+  };
   protected readonly sheet = "waveform.css";
   protected readonly sizeProperty = "--_sonic-waveform-size";
   attributeChangedCallback(name: string): void;
@@ -66,7 +78,7 @@ export declare class SonicWaveform extends SonicWaveElement<Colour> {
   protected connect(signal: AbortSignal): void;
   protected draw(): void;
   protected isEmpty(): boolean;
-  protected paint(context: CanvasRenderingContext2D, { frameMs, isDirty, isRebuilt, look, size }: SurfaceFrame<Colour>): void;
+  protected paint(context: CanvasRenderingContext2D, { frameMs, isDirty, isRebuilt, look, size }: SurfaceFrame<Colour, never, Numeric>): void;
   protected renderMarkers(): void;
   protected scrubChanged(): void;
   protected scrubsKeyRepeat(): boolean;

package/dist/dev/elements/waveform.js

@@ -7,7 +7,8 @@ import { isKind, writeKind } from "../lib/marker-band.js";
 import { createLabelRider } from "../lib/marker-rider.js";
 import { createPeaksRequest } from "../lib/peaks-request.js";
 import { createTrackingClock } from "../lib/tracking-clock.js";
-import { paintWaveform, waveformColours } from "../lib/waveform-scene.js";
+import { bandTable } from "../lib/waveform-bands.js";
+import { bandChannels, paintWaveform, waveformColours, waveformNumbers } from "../lib/waveform-scene.js";
 import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 
 //#region src/elements/waveform.ts
@@ -54,6 +55,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		"zoom-min",
 		"zoomable"
 	];
+	get bands() {
+		return this.#bands;
+	}
+	set bands(bands) {
+		this.#bands = bands;
+		this.#bandTable = bandTable(bands);
+		this.#peaksRequest.changed();
+	}
 	get peaks() {
 		return this.#peaks;
 	}
@@ -157,8 +166,12 @@ var SonicWaveform = class extends SonicWaveElement {
 	canvas = requireChild(this.control, ".sonic-waveform-canvas", HTMLCanvasElement);
 	colours = waveformColours;
 	lengths = {};
+	numbers = waveformNumbers;
 	sheet = "waveform.css";
 	sizeProperty = "--_sonic-waveform-size";
+	#bandColours = [];
+	#bands;
+	#bandTable;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
@@ -182,13 +195,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		insetProperty: "--_sonic-waveform-label-inset",
 		parkProperty: "--_sonic-waveform-label-park"
 	});
+	#strip;
 	#zoomGesture;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
 		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
+		this.upgradeProperties("bands", "peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -262,8 +276,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			if (isRebuilt) this.#kindColours = this.#readKindColours();
 			paintWaveform(context, {
 				...view,
-				colours: look.colours
+				colours: look.colours,
+				numbers: look.numbers
 			}, {
+				bands: this.#tint(isRebuilt),
 				kindColours: this.#kindColours,
 				markers: this.markerList(),
 				peaks: this.#peaks,
@@ -328,6 +344,14 @@ var SonicWaveform = class extends SonicWaveElement {
 			startSeconds: this.value
 		};
 	}
+	#readBandColours(strip, bandCount) {
+		const probes = Array.from({ length: bandCount }, (_probe, band) => {
+			const probe = document.createElement("div");
+			probe.style.setProperty("color", `var(--sonic-waveform-band-${String(band + 1)}, transparent)`);
+			return probe;
+		});
+		return this.#readProbes(probes).map((colour) => bandChannels(strip, colour));
+	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {
@@ -336,14 +360,34 @@ var SonicWaveform = class extends SonicWaveElement {
 			writeKind(probe, kind, "--_sonic-waveform-marker");
 			return probe;
 		});
+		const read = this.#readProbes(probes);
+		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
+	}
+	#readProbes(probes) {
 		this.control.append(...probes);
 		const read = probes.map((probe) => getComputedStyle(probe).color);
 		for (const probe of probes) probe.remove();
-		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
+		return read;
 	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.scrubState().played;
 	}
+	#tint(isRebuilt) {
+		const table = this.#bandTable;
+		if (!table) return void 0;
+		const strip = this.#strip ?? document.createElement("canvas").getContext("2d", { willReadFrequently: true }) ?? void 0;
+		if (!strip) return void 0;
+		this.#strip = strip;
+		if (isRebuilt || this.#bandColours.length !== table.bandCount) {
+			strip.canvas.height = 1;
+			this.#bandColours = this.#readBandColours(strip, table.bandCount);
+		}
+		return {
+			colours: this.#bandColours,
+			strip,
+			table
+		};
+	}
 	#zoomTo(target) {
 		const next = roundTo(clamp(target, this.zoomMin, this.zoomMax), 2);
 		if (next === this.zoom) return;