@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/dev/lib/adsr-shape.js

@@ -0,0 +1,114 @@
+import { roundTo } from "./math.js";
+import { envelopeCurve } from "./envelope-curve.js";
+
+//#region src/lib/adsr-shape.ts
+const adsrStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"sustain",
+	"release"
+];
+const timeStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"release"
+];
+const curveSamples = 24;
+function along(from, to, at) {
+	return {
+		x: from.x + (to.x - from.x) * at.position,
+		y: from.y + (to.y - from.y) * envelopeCurve(at.position, at.curve)
+	};
+}
+function curved(from, to, curve) {
+	if (envelopeCurve(.5, curve) === .5) return [];
+	return Array.from({ length: 23 }, (_, index) => along(from, to, {
+		curve,
+		position: (index + 1) / curveSamples
+	}));
+}
+function leg(from, to, curve) {
+	if (curve === void 0) return {
+		curveHandle: void 0,
+		points: [to]
+	};
+	return {
+		curveHandle: along(from, to, {
+			curve,
+			position: .5
+		}),
+		points: [...curved(from, to, curve), to]
+	};
+}
+function isHandled(proportions, stage) {
+	return (stage === "decay" ? proportions.sustain ?? proportions.decay : proportions[stage]) !== void 0;
+}
+function adsrShape(proportions, curves = {}) {
+	const sustain = proportions.sustain ?? 1;
+	const levels = {
+		attack: 1,
+		decay: sustain,
+		delay: 0,
+		hold: 1,
+		release: 0
+	};
+	const share = 1 / (timeStages.filter((stage) => proportions[stage] !== void 0).length + 1);
+	const shape = {
+		curveHandles: [],
+		handles: [],
+		points: [{
+			x: 0,
+			y: 0
+		}],
+		share
+	};
+	let from = {
+		x: 0,
+		y: 0
+	};
+	for (const stage of timeStages) {
+		if (stage === "release") {
+			from = {
+				x: from.x + share,
+				y: sustain
+			};
+			shape.points.push(from);
+		}
+		const to = {
+			x: from.x + (proportions[stage] ?? 0) * share,
+			y: levels[stage]
+		};
+		const { curveHandle, points } = leg(from, to, curves[stage]);
+		shape.points.push(...points);
+		if (curveHandle) shape.curveHandles.push({
+			...curveHandle,
+			stage
+		});
+		if (isHandled(proportions, stage)) shape.handles.push({
+			...to,
+			stage
+		});
+		from = to;
+	}
+	return shape;
+}
+function adsrPath({ points }) {
+	const stroke = points.map(({ x, y }, index) => `${index === 0 ? "M" : "L"}${String(roundTo(x, 4))} ${String(roundTo(1 - y, 4))}`).join("");
+	const floor = {
+		from: roundTo(points[0]?.x ?? 0, 4),
+		to: roundTo(points.at(-1)?.x ?? 0, 4)
+	};
+	return {
+		fill: `${stroke}Z`,
+		floor,
+		stroke
+	};
+}
+
+//#endregion
+export { adsrPath, adsrShape, adsrStages, timeStages };
+//# sourceMappingURL=adsr-shape.js.map

package/dist/dev/lib/adsr-shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adsr-shape.js","names":[],"sources":["../../../src/lib/adsr-shape.ts"],"sourcesContent":["import { envelopeCurve } from '#lib/envelope-curve.ts';\nimport { roundTo } from '#lib/math.ts';\n\nexport const adsrStages = ['delay', 'attack', 'hold', 'decay', 'sustain', 'release'] as const;\n\nexport const timeStages = ['delay', 'attack', 'hold', 'decay', 'release'] as const;\n\ntype AdsrStage = (typeof adsrStages)[number];\n\ntype TimeStage = (typeof timeStages)[number];\n\nexport type AdsrProportions = Partial<Record<AdsrStage, number | undefined>>;\n\nexport type AdsrCurves = Partial<Record<TimeStage, number | undefined>>;\n\ninterface AdsrPoint {\n\tx: number;\n\ty: number;\n}\n\ninterface AdsrHandle extends AdsrPoint {\n\tstage: TimeStage;\n}\n\nexport interface AdsrShape {\n\tcurveHandles: Array<AdsrHandle>;\n\thandles: Array<AdsrHandle>;\n\tpoints: Array<AdsrPoint>;\n\tshare: number;\n}\n\nconst curveSamples = 24;\n\nfunction along(from: AdsrPoint, to: AdsrPoint, at: { curve: number; position: number }): AdsrPoint {\n\treturn {\n\t\tx: from.x + (to.x - from.x) * at.position,\n\t\ty: from.y + (to.y - from.y) * envelopeCurve(at.position, at.curve),\n\t};\n}\n\nfunction curved(from: AdsrPoint, to: AdsrPoint, curve: number): Array<AdsrPoint> {\n\tif (envelopeCurve(0.5, curve) === 0.5) return [];\n\n\treturn Array.from({ length: curveSamples - 1 }, (_, index) =>\n\t\talong(from, to, { curve, position: (index + 1) / curveSamples }),\n\t);\n}\n\nfunction leg(\n\tfrom: AdsrPoint,\n\tto: AdsrPoint,\n\tcurve: number | undefined,\n): { curveHandle: AdsrPoint | undefined; points: Array<AdsrPoint> } {\n\tif (curve === undefined) return { curveHandle: undefined, points: [to] };\n\n\treturn {\n\t\tcurveHandle: along(from, to, { curve, position: 0.5 }),\n\t\tpoints: [...curved(from, to, curve), to],\n\t};\n}\n\nfunction isHandled(proportions: AdsrProportions, stage: TimeStage): boolean {\n\tconst proportion =\n\t\tstage === 'decay' ? (proportions.sustain ?? proportions.decay) : proportions[stage];\n\n\treturn proportion !== undefined;\n}\n\nexport function adsrShape(proportions: AdsrProportions, curves: AdsrCurves = {}): AdsrShape {\n\tconst sustain = proportions.sustain ?? 1;\n\tconst levels = { attack: 1, decay: sustain, delay: 0, hold: 1, release: 0 };\n\tconst share = 1 / (timeStages.filter((stage) => proportions[stage] !== undefined).length + 1);\n\tconst shape: AdsrShape = { curveHandles: [], handles: [], points: [{ x: 0, y: 0 }], share };\n\tlet from = { x: 0, y: 0 };\n\n\tfor (const stage of timeStages) {\n\t\tif (stage === 'release') {\n\t\t\tfrom = { x: from.x + share, y: sustain };\n\t\t\tshape.points.push(from);\n\t\t}\n\n\t\tconst to = { x: from.x + (proportions[stage] ?? 0) * share, y: levels[stage] };\n\t\tconst { curveHandle, points } = leg(from, to, curves[stage]);\n\n\t\tshape.points.push(...points);\n\t\tif (curveHandle) shape.curveHandles.push({ ...curveHandle, stage });\n\t\tif (isHandled(proportions, stage)) shape.handles.push({ ...to, stage });\n\t\tfrom = to;\n\t}\n\n\treturn shape;\n}\n\nexport function adsrPath({ points }: AdsrShape): {\n\tfill: string;\n\tfloor: { from: number; to: number };\n\tstroke: string;\n} {\n\tconst stroke = points\n\t\t.map(\n\t\t\t({ x, y }, index) =>\n\t\t\t\t`${index === 0 ? 'M' : 'L'}${String(roundTo(x, 4))} ${String(roundTo(1 - y, 4))}`,\n\t\t)\n\t\t.join('');\n\n\tconst floor = {\n\t\tfrom: roundTo(points[0]?.x ?? 0, 4),\n\t\tto: roundTo(points.at(-1)?.x ?? 0, 4),\n\t};\n\n\treturn { fill: `${stroke}Z`, floor, stroke };\n}\n"],"mappings":";;;;AAGA,MAAa,aAAa;CAAC;CAAS;CAAU;CAAQ;CAAS;CAAW;AAAS;AAEnF,MAAa,aAAa;CAAC;CAAS;CAAU;CAAQ;CAAS;AAAS;AA0BxE,MAAM,eAAe;AAErB,SAAS,MAAM,MAAiB,IAAe,IAAoD;CAClG,OAAO;EACN,GAAG,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,GAAG;EACjC,GAAG,KAAK,KAAK,GAAG,IAAI,KAAK,KAAK,cAAc,GAAG,UAAU,GAAG,KAAK;CAClE;AACD;AAEA,SAAS,OAAO,MAAiB,IAAe,OAAiC;CAChF,IAAI,cAAc,IAAK,KAAK,MAAM,IAAK,OAAO,CAAC;CAE/C,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAiB,IAAI,GAAG,UACnD,MAAM,MAAM,IAAI;EAAE;EAAO,WAAW,QAAQ,KAAK;CAAa,CAAC,CAChE;AACD;AAEA,SAAS,IACR,MACA,IACA,OACmE;CACnE,IAAI,UAAU,QAAW,OAAO;EAAE,aAAa;EAAW,QAAQ,CAAC,EAAE;CAAE;CAEvE,OAAO;EACN,aAAa,MAAM,MAAM,IAAI;GAAE;GAAO,UAAU;EAAI,CAAC;EACrD,QAAQ,CAAC,GAAG,OAAO,MAAM,IAAI,KAAK,GAAG,EAAE;CACxC;AACD;AAEA,SAAS,UAAU,aAA8B,OAA2B;CAI3E,QAFC,UAAU,UAAW,YAAY,WAAW,YAAY,QAAS,YAAY,YAExD;AACvB;AAEA,SAAgB,UAAU,aAA8B,SAAqB,CAAC,GAAc;CAC3F,MAAM,UAAU,YAAY,WAAW;CACvC,MAAM,SAAS;EAAE,QAAQ;EAAG,OAAO;EAAS,OAAO;EAAG,MAAM;EAAG,SAAS;CAAE;CAC1E,MAAM,QAAQ,KAAK,WAAW,QAAQ,UAAU,YAAY,WAAW,MAAS,CAAC,CAAC,SAAS;CAC3F,MAAM,QAAmB;EAAE,cAAc,CAAC;EAAG,SAAS,CAAC;EAAG,QAAQ,CAAC;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC;EAAG;CAAM;CAC1F,IAAI,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE;CAExB,KAAK,MAAM,SAAS,YAAY;EAC/B,IAAI,UAAU,WAAW;GACxB,OAAO;IAAE,GAAG,KAAK,IAAI;IAAO,GAAG;GAAQ;GACvC,MAAM,OAAO,KAAK,IAAI;EACvB;EAEA,MAAM,KAAK;GAAE,GAAG,KAAK,KAAK,YAAY,UAAU,KAAK;GAAO,GAAG,OAAO;EAAO;EAC7E,MAAM,EAAE,aAAa,WAAW,IAAI,MAAM,IAAI,OAAO,MAAM;EAE3D,MAAM,OAAO,KAAK,GAAG,MAAM;EAC3B,IAAI,aAAa,MAAM,aAAa,KAAK;GAAE,GAAG;GAAa;EAAM,CAAC;EAClE,IAAI,UAAU,aAAa,KAAK,GAAG,MAAM,QAAQ,KAAK;GAAE,GAAG;GAAI;EAAM,CAAC;EACtE,OAAO;CACR;CAEA,OAAO;AACR;AAEA,SAAgB,SAAS,EAAE,UAIzB;CACD,MAAM,SAAS,OACb,KACC,EAAE,GAAG,KAAK,UACV,GAAG,UAAU,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,CAAC,EAAE,GAAG,OAAO,QAAQ,IAAI,GAAG,CAAC,CAAC,GAChF,CAAC,CACA,KAAK,EAAE;CAET,MAAM,QAAQ;EACb,MAAM,QAAQ,OAAO,EAAE,EAAE,KAAK,GAAG,CAAC;EAClC,IAAI,QAAQ,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC;CACrC;CAEA,OAAO;EAAE,MAAM,GAAG,OAAO;EAAI;EAAO;CAAO;AAC5C"}

package/dist/dev/lib/ballistics.js

@@ -0,0 +1,56 @@
+//#region src/lib/ballistics.ts
+const burstTimeConstants = -Math.log(1 - 10 ** (-2 / 20));
+function ppmRate({ burstMs, fallDecibels, fallSeconds }) {
+	return {
+		fallDecibelsPerSecond: fallDecibels / fallSeconds,
+		riseTimeConstantMs: burstMs / burstTimeConstants
+	};
+}
+const ballisticsRates = {
+	peak: {
+		fallDecibelsPerSecond: 20,
+		riseTimeConstantMs: 0
+	},
+	"ppm-1": ppmRate({
+		burstMs: 5,
+		fallDecibels: 20,
+		fallSeconds: 1.7
+	}),
+	"ppm-2": ppmRate({
+		burstMs: 10,
+		fallDecibels: 24,
+		fallSeconds: 2.8
+	})
+};
+const needleDamping = .8;
+const needleRadiansPerSecond = 13.5;
+const needleStepMs = 4;
+const needleSettleMs = 1e3;
+function fall(current, { fallDecibelsPerSecond, floor }, elapsedMs) {
+	return Math.max(floor, current - fallDecibelsPerSecond * elapsedMs / 1e3);
+}
+function rise(current, { target, timeConstantMs }, elapsedMs) {
+	if (timeConstantMs <= 0) return target;
+	return target + (current - target) * Math.exp(-elapsedMs / timeConstantMs);
+}
+function stepNeedle(needle, target, elapsedMs) {
+	const dueMs = Math.min(needle.carryMs + elapsedMs, needleSettleMs);
+	const steps = Math.floor(dueMs / needleStepMs);
+	const seconds = needleStepMs / 1e3;
+	let { position, velocity } = needle;
+	for (let step = 0; step < steps; step += 1) {
+		const pull = needleRadiansPerSecond ** 2 * (target - position);
+		const drag = 2 * needleDamping * needleRadiansPerSecond * velocity;
+		velocity += (pull - drag) * seconds;
+		position += velocity * seconds;
+	}
+	return {
+		carryMs: dueMs - steps * needleStepMs,
+		position,
+		velocity
+	};
+}
+
+//#endregion
+export { ballisticsRates, fall, rise, stepNeedle };
+//# sourceMappingURL=ballistics.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ballistics.js","names":[],"sources":["../../../src/lib/ballistics.ts"],"sourcesContent":["interface Needle {\n\tcarryMs: number;\n\tposition: number;\n\tvelocity: number;\n}\n\ninterface BallisticsRate {\n\tfallDecibelsPerSecond: number;\n\triseTimeConstantMs: number;\n}\n\ninterface PpmSpec {\n\tburstMs: number;\n\tfallDecibels: number;\n\tfallSeconds: number;\n}\n\n// IEC 60268-10: a tone burst as long as the integration time reads this far under a steady tone\nconst burstShortfallDecibels = 2;\nconst burstTimeConstants = -Math.log(1 - 10 ** (-burstShortfallDecibels / 20));\n\nfunction ppmRate({ burstMs, fallDecibels, fallSeconds }: PpmSpec): BallisticsRate {\n\treturn {\n\t\tfallDecibelsPerSecond: fallDecibels / fallSeconds,\n\t\triseTimeConstantMs: burstMs / burstTimeConstants,\n\t};\n}\n\n// The PPM figures are IEC 60268-10's Type I and Type II\nexport const ballisticsRates = {\n\tpeak: { fallDecibelsPerSecond: 20, riseTimeConstantMs: 0 },\n\t'ppm-1': ppmRate({ burstMs: 5, fallDecibels: 20, fallSeconds: 1.7 }),\n\t'ppm-2': ppmRate({ burstMs: 10, fallDecibels: 24, fallSeconds: 2.8 }),\n} as const satisfies Record<string, BallisticsRate>;\n\n// Tuned to a VU's step response: 99% in 300ms with 1 to 1.5% overshoot\nconst needleDamping = 0.8;\nconst needleRadiansPerSecond = 13.5;\n\nconst needleStepMs = 4;\nconst needleSettleMs = 1000;\n\n// A meter's return is specified linear in dB\nexport function fall(\n\tcurrent: number,\n\t{ fallDecibelsPerSecond, floor }: { fallDecibelsPerSecond: number; floor: number },\n\telapsedMs: number,\n): number {\n\treturn Math.max(floor, current - (fallDecibelsPerSecond * elapsedMs) / 1000);\n}\n\nexport function rise(\n\tcurrent: number,\n\t{ target, timeConstantMs }: { target: number; timeConstantMs: number },\n\telapsedMs: number,\n): number {\n\tif (timeConstantMs <= 0) return target;\n\n\treturn target + (current - target) * Math.exp(-elapsedMs / timeConstantMs);\n}\n\nexport function stepNeedle(needle: Needle, target: number, elapsedMs: number): Needle {\n\tconst dueMs = Math.min(needle.carryMs + elapsedMs, needleSettleMs);\n\tconst steps = Math.floor(dueMs / needleStepMs);\n\tconst seconds = needleStepMs / 1000;\n\tlet { position, velocity } = needle;\n\n\tfor (let step = 0; step < steps; step += 1) {\n\t\tconst pull = needleRadiansPerSecond ** 2 * (target - position);\n\t\tconst drag = 2 * needleDamping * needleRadiansPerSecond * velocity;\n\n\t\tvelocity += (pull - drag) * seconds;\n\t\tposition += velocity * seconds;\n\t}\n\n\treturn { carryMs: dueMs - steps * needleStepMs, position, velocity };\n}\n"],"mappings":";AAmBA,MAAM,qBAAqB,CAAC,KAAK,IAAI,IAAI,OAAO,KAA0B,GAAG;AAE7E,SAAS,QAAQ,EAAE,SAAS,cAAc,eAAwC;CACjF,OAAO;EACN,uBAAuB,eAAe;EACtC,oBAAoB,UAAU;CAC/B;AACD;AAGA,MAAa,kBAAkB;CAC9B,MAAM;EAAE,uBAAuB;EAAI,oBAAoB;CAAE;CACzD,SAAS,QAAQ;EAAE,SAAS;EAAG,cAAc;EAAI,aAAa;CAAI,CAAC;CACnE,SAAS,QAAQ;EAAE,SAAS;EAAI,cAAc;EAAI,aAAa;CAAI,CAAC;AACrE;AAGA,MAAM,gBAAgB;AACtB,MAAM,yBAAyB;AAE/B,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAGvB,SAAgB,KACf,SACA,EAAE,uBAAuB,SACzB,WACS;CACT,OAAO,KAAK,IAAI,OAAO,UAAW,wBAAwB,YAAa,GAAI;AAC5E;AAEA,SAAgB,KACf,SACA,EAAE,QAAQ,kBACV,WACS;CACT,IAAI,kBAAkB,GAAG,OAAO;CAEhC,OAAO,UAAU,UAAU,UAAU,KAAK,IAAI,CAAC,YAAY,cAAc;AAC1E;AAEA,SAAgB,WAAW,QAAgB,QAAgB,WAA2B;CACrF,MAAM,QAAQ,KAAK,IAAI,OAAO,UAAU,WAAW,cAAc;CACjE,MAAM,QAAQ,KAAK,MAAM,QAAQ,YAAY;CAC7C,MAAM,UAAU,eAAe;CAC/B,IAAI,EAAE,UAAU,aAAa;CAE7B,KAAK,IAAI,OAAO,GAAG,OAAO,OAAO,QAAQ,GAAG;EAC3C,MAAM,OAAO,0BAA0B,KAAK,SAAS;EACrD,MAAM,OAAO,IAAI,gBAAgB,yBAAyB;EAE1D,aAAa,OAAO,QAAQ;EAC5B,YAAY,WAAW;CACxB;CAEA,OAAO;EAAE,SAAS,QAAQ,QAAQ;EAAc;EAAU;CAAS;AACpE"}

package/dist/dev/lib/canvas-surface.d.ts

@@ -0,0 +1,26 @@
+//#region src/lib/canvas-surface.d.ts
+export interface SurfaceSize {
+  dpr: number;
+  height: number;
+  width: number;
+}
+export interface SurfaceLook<Colour extends string, Length extends string = never> {
+  colours: Record<Colour, string>;
+  isReducedMotion: boolean;
+  lengths: Record<Length, number>;
+}
+export interface SurfaceFrame<Colour extends string, Length extends string = never> {
+  frameMs: number;
+  isDirty: boolean;
+  isRebuilt: boolean;
+  look: SurfaceLook<Colour, Length>;
+  size: SurfaceSize;
+}
+export interface Surface {
+  invalidate: () => void;
+  rebuild: () => void;
+  requestFrame: () => void;
+  readonly size: SurfaceSize;
+}
+//#endregion
+//# sourceMappingURL=canvas-surface.d.ts.map

package/dist/dev/lib/canvas-surface.js

@@ -0,0 +1,204 @@
+import { readPxProperty } from "./read-px-property.js";
+
+//#region src/lib/canvas-surface.ts
+function deviceRatio() {
+	return globalThis.devicePixelRatio || 1;
+}
+function deviceBox(entry, css) {
+	const device = "devicePixelContentBoxSize" in entry ? entry.devicePixelContentBoxSize[0] : void 0;
+	const dpr = deviceRatio();
+	if (!device || Math.abs(device.inlineSize - css.inlineSize * dpr) > 1) return void 0;
+	return Math.abs(device.blockSize - css.blockSize * dpr) > 1 ? void 0 : device;
+}
+function readEach(properties, read) {
+	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
+}
+var CanvasSurface = class {
+	get size() {
+		return this.#size;
+	}
+	#context;
+	#cssBox;
+	#frame;
+	#isDirty = true;
+	#isRebuildWanted = true;
+	#isVisible = true;
+	#look;
+	#options;
+	#reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+	#size = {
+		dpr: deviceRatio(),
+		height: 0,
+		width: 0
+	};
+	constructor(options) {
+		const { canvas, signal } = options;
+		this.#options = options;
+		this.#context = canvas.getContext("2d") ?? void 0;
+		this.#armTransitions();
+		this.#observeSize();
+		this.#observeView();
+		this.#watchResolution();
+		this.#reducedMotion.addEventListener("change", () => {
+			this.rebuild();
+		}, { signal });
+		canvas.addEventListener("transitionrun", () => {
+			this.rebuild();
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			if (this.#frame !== void 0) cancelAnimationFrame(this.#frame);
+			this.#frame = void 0;
+		}, { once: true });
+		this.#schedule();
+	}
+	invalidate() {
+		this.#isDirty = true;
+		this.#schedule();
+	}
+	rebuild() {
+		this.#isRebuildWanted = true;
+		this.invalidate();
+	}
+	requestFrame() {
+		this.#schedule();
+	}
+	#armTransitions() {
+		const { style } = this.#options.canvas;
+		style.setProperty("transition-property", Object.values(this.#options.colours).join(", "));
+		style.setProperty("transition-duration", "0.001ms");
+		style.setProperty("transition-timing-function", "step-start");
+		style.setProperty("transition-behavior", "allow-discrete");
+	}
+	#current() {
+		if (this.#look && !this.#isRebuildWanted) return {
+			isRebuilt: false,
+			look: this.#look
+		};
+		return {
+			isRebuilt: true,
+			look: this.#read()
+		};
+	}
+	#draw(frameMs) {
+		this.#frame = void 0;
+		const size = this.#size;
+		if (size.width === 0 || size.height === 0) return;
+		const { canvas, paint } = this.#options;
+		const { isRebuilt, look } = this.#current();
+		const isDirty = this.#isDirty;
+		this.#look = look;
+		this.#isDirty = false;
+		this.#isRebuildWanted = false;
+		if (canvas.width !== size.width) canvas.width = size.width;
+		if (canvas.height !== size.height) canvas.height = size.height;
+		if (this.#context) paint(this.#context, {
+			frameMs,
+			isDirty,
+			isRebuilt,
+			look,
+			size
+		});
+	}
+	#measure(entry) {
+		const [box] = entry.contentBoxSize;
+		if (!box) return;
+		const device = deviceBox(entry, box);
+		if (device) {
+			this.#cssBox = void 0;
+			this.#resize(device.inlineSize, device.blockSize);
+			return;
+		}
+		this.#cssBox = {
+			height: box.blockSize,
+			width: box.inlineSize
+		};
+		this.#rescale();
+	}
+	#observeSize() {
+		const { canvas, signal } = this.#options;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries.at(-1);
+			if (entry) this.#measure(entry);
+		});
+		try {
+			observer.observe(canvas, { box: "device-pixel-content-box" });
+		} catch {
+			observer.observe(canvas, { box: "content-box" });
+		}
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	#observeView() {
+		const { canvas, signal } = this.#options;
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries.at(-1);
+			if (!entry) return;
+			const wasVisible = this.#isVisible;
+			this.#isVisible = entry.isIntersecting;
+			if (!entry.isIntersecting && this.#frame !== void 0) {
+				cancelAnimationFrame(this.#frame);
+				this.#frame = void 0;
+			}
+			if (!wasVisible && entry.isIntersecting) this.rebuild();
+		});
+		observer.observe(canvas);
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	#read() {
+		const { canvas, colours, lengths = {} } = this.#options;
+		const styles = getComputedStyle(canvas);
+		return {
+			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color)),
+			isReducedMotion: this.#reducedMotion.matches,
+			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0))
+		};
+	}
+	#rescale() {
+		const box = this.#cssBox;
+		if (!box) {
+			this.#resize(this.#size.width, this.#size.height);
+			return;
+		}
+		const dpr = deviceRatio();
+		this.#resize(Math.round(box.width * dpr), Math.round(box.height * dpr));
+	}
+	#resize(width, height) {
+		const previous = this.#size;
+		const dpr = deviceRatio();
+		if (previous.width === width && previous.height === height && previous.dpr === dpr) return;
+		this.#size = {
+			dpr,
+			height,
+			width
+		};
+		this.#options.resize?.(this.#size);
+		if (previous.width === 0 || previous.height === 0) this.rebuild();
+		else this.invalidate();
+	}
+	#schedule() {
+		if (this.#options.signal.aborted || this.#frame !== void 0 || !this.#isVisible) return;
+		this.#frame = requestAnimationFrame((frameMs) => {
+			this.#draw(frameMs);
+		});
+	}
+	#watchResolution() {
+		const { signal } = this.#options;
+		matchMedia(`(resolution: ${String(deviceRatio())}dppx)`).addEventListener("change", () => {
+			this.#watchResolution();
+			this.#rescale();
+		}, {
+			once: true,
+			signal
+		});
+	}
+};
+function bindSurface(options) {
+	return new CanvasSurface(options);
+}
+
+//#endregion
+export { bindSurface };
+//# sourceMappingURL=canvas-surface.js.map

package/dist/dev/lib/canvas-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-surface.js","names":["named"],"sources":["../../../src/lib/canvas-surface.ts"],"sourcesContent":["import { readPxProperty } from '#lib/read-px-property.ts';\n\ntype PrivateProperty = `--_sonic-${string}`;\n\nexport interface SurfaceSize {\n\tdpr: number;\n\theight: number;\n\twidth: number;\n}\n\nexport interface SurfaceLook<Colour extends string, Length extends string = never> {\n\tcolours: Record<Colour, string>;\n\tisReducedMotion: boolean;\n\tlengths: Record<Length, number>;\n}\n\nexport interface SurfaceFrame<Colour extends string, Length extends string = never> {\n\tframeMs: number;\n\tisDirty: boolean;\n\tisRebuilt: boolean;\n\tlook: SurfaceLook<Colour, Length>;\n\tsize: SurfaceSize;\n}\n\nexport interface Surface {\n\tinvalidate: () => void;\n\trebuild: () => void;\n\trequestFrame: () => void;\n\treadonly size: SurfaceSize;\n}\n\ninterface SurfaceOptions<Colour extends string, Length extends string> {\n\tcanvas: HTMLCanvasElement;\n\tcolours: Record<Colour, PrivateProperty>;\n\tlengths?: Record<Length, PrivateProperty>;\n\tpaint: (context: CanvasRenderingContext2D, frame: SurfaceFrame<Colour, Length>) => void;\n\tresize?: (size: SurfaceSize) => void;\n\tsignal: AbortSignal;\n}\n\nfunction deviceRatio(): number {\n\treturn globalThis.devicePixelRatio || 1;\n}\n\n// WebKit reports none, and an emulated device scale reports it in CSS px, so it counts only where it agrees\nfunction deviceBox(\n\tentry: ResizeObserverEntry,\n\tcss: ResizeObserverSize,\n): ResizeObserverSize | undefined {\n\tconst device =\n\t\t'devicePixelContentBoxSize' in entry ? entry.devicePixelContentBoxSize[0] : undefined;\n\tconst dpr = deviceRatio();\n\tif (!device || Math.abs(device.inlineSize - css.inlineSize * dpr) > 1) return undefined;\n\n\treturn Math.abs(device.blockSize - css.blockSize * dpr) > 1 ? undefined : device;\n}\n\n// `Object.fromEntries` widens the keys to `string`\nfunction readEach<Name extends string, Value>(\n\tproperties: Partial<Record<Name, PrivateProperty>>,\n\tread: (property: PrivateProperty) => Value,\n): Record<Name, Value> {\n\tconst named: Readonly<Record<string, PrivateProperty | undefined>> = properties;\n\n\treturn Object.fromEntries(\n\t\tObject.entries(named).flatMap(([name, property]) =>\n\t\t\tproperty === undefined ? [] : [[name, read(property)]],\n\t\t),\n\t) as Record<Name, Value>;\n}\n\nclass CanvasSurface<Colour extends string, Length extends string> implements Surface {\n\tget size(): SurfaceSize {\n\t\treturn this.#size;\n\t}\n\n\t// happy-dom has no canvas context\n\treadonly #context: CanvasRenderingContext2D | undefined;\n\n\t#cssBox: undefined | { height: number; width: number };\n\n\t#frame: number | undefined;\n\n\t#isDirty = true;\n\n\t#isRebuildWanted = true;\n\n\t#isVisible = true;\n\n\t#look: SurfaceLook<Colour, Length> | undefined;\n\n\treadonly #options: SurfaceOptions<Colour, Length>;\n\n\treadonly #reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');\n\n\t#size: SurfaceSize = { dpr: deviceRatio(), height: 0, width: 0 };\n\n\tconstructor(options: SurfaceOptions<Colour, Length>) {\n\t\tconst { canvas, signal } = options;\n\n\t\tthis.#options = options;\n\t\tthis.#context = canvas.getContext('2d') ?? undefined;\n\t\tthis.#armTransitions();\n\t\tthis.#observeSize();\n\t\tthis.#observeView();\n\t\tthis.#watchResolution();\n\t\tthis.#reducedMotion.addEventListener(\n\t\t\t'change',\n\t\t\t() => {\n\t\t\t\tthis.rebuild();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\t// `transitionstart` drops events when a change replaces a pending transition in WebKit\n\t\tcanvas.addEventListener(\n\t\t\t'transitionrun',\n\t\t\t() => {\n\t\t\t\tthis.rebuild();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tif (this.#frame !== undefined) cancelAnimationFrame(this.#frame);\n\t\t\t\tthis.#frame = undefined;\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t\tthis.#schedule();\n\t}\n\n\tinvalidate(): void {\n\t\tthis.#isDirty = true;\n\t\tthis.#schedule();\n\t}\n\n\trebuild(): void {\n\t\tthis.#isRebuildWanted = true;\n\t\tthis.invalidate();\n\t}\n\n\trequestFrame(): void {\n\t\tthis.#schedule();\n\t}\n\n\t#armTransitions(): void {\n\t\tconst { style } = this.#options.canvas;\n\n\t\tstyle.setProperty('transition-property', Object.values(this.#options.colours).join(', '));\n\t\tstyle.setProperty('transition-duration', '0.001ms');\n\t\tstyle.setProperty('transition-timing-function', 'step-start');\n\t\tstyle.setProperty('transition-behavior', 'allow-discrete');\n\t}\n\n\t#current(): { isRebuilt: boolean; look: SurfaceLook<Colour, Length> } {\n\t\tif (this.#look && !this.#isRebuildWanted) return { isRebuilt: false, look: this.#look };\n\n\t\treturn { isRebuilt: true, look: this.#read() };\n\t}\n\n\t#draw(frameMs: number): void {\n\t\tthis.#frame = undefined;\n\n\t\tconst size = this.#size;\n\t\tif (size.width === 0 || size.height === 0) return;\n\n\t\tconst { canvas, paint } = this.#options;\n\t\tconst { isRebuilt, look } = this.#current();\n\t\tconst isDirty = this.#isDirty;\n\n\t\tthis.#look = look;\n\t\tthis.#isDirty = false;\n\t\tthis.#isRebuildWanted = false;\n\t\t// Assigning either clears the canvas and its state\n\t\tif (canvas.width !== size.width) canvas.width = size.width;\n\t\tif (canvas.height !== size.height) canvas.height = size.height;\n\t\tif (this.#context) paint(this.#context, { frameMs, isDirty, isRebuilt, look, size });\n\t}\n\n\t#measure(entry: ResizeObserverEntry): void {\n\t\tconst [box] = entry.contentBoxSize;\n\t\tif (!box) return;\n\n\t\tconst device = deviceBox(entry, box);\n\n\t\tif (device) {\n\t\t\tthis.#cssBox = undefined;\n\t\t\tthis.#resize(device.inlineSize, device.blockSize);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.#cssBox = { height: box.blockSize, width: box.inlineSize };\n\t\tthis.#rescale();\n\t}\n\n\t#observeSize(): void {\n\t\tconst { canvas, signal } = this.#options;\n\t\tconst observer = new ResizeObserver((entries) => {\n\t\t\tconst entry = entries.at(-1);\n\n\t\t\tif (entry) this.#measure(entry);\n\t\t});\n\n\t\ttry {\n\t\t\tobserver.observe(canvas, { box: 'device-pixel-content-box' });\n\t\t} catch {\n\t\t\t// WebKit throws a TypeError on the option\n\t\t\tobserver.observe(canvas, { box: 'content-box' });\n\t\t}\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tobserver.disconnect();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t#observeView(): void {\n\t\tconst { canvas, signal } = this.#options;\n\t\tconst observer = new IntersectionObserver((entries) => {\n\t\t\tconst entry = entries.at(-1);\n\t\t\tif (!entry) return;\n\n\t\t\tconst wasVisible = this.#isVisible;\n\n\t\t\tthis.#isVisible = entry.isIntersecting;\n\t\t\tif (!entry.isIntersecting && this.#frame !== undefined) {\n\t\t\t\tcancelAnimationFrame(this.#frame);\n\t\t\t\tthis.#frame = undefined;\n\t\t\t}\n\n\t\t\t// Chromium fires no transition inside a skipped `content-visibility` subtree\n\t\t\tif (!wasVisible && entry.isIntersecting) this.rebuild();\n\t\t});\n\n\t\tobserver.observe(canvas);\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tobserver.disconnect();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t#read(): SurfaceLook<Colour, Length> {\n\t\tconst { canvas, colours, lengths = {} } = this.#options;\n\t\tconst styles = getComputedStyle(canvas);\n\n\t\treturn {\n\t\t\tcolours: readEach(colours, (property) =>\n\t\t\t\tstyles\n\t\t\t\t\t.getPropertyValue(property)\n\t\t\t\t\t.trim()\n\t\t\t\t\t.replaceAll('currentcolor', () => styles.color),\n\t\t\t),\n\t\t\tisReducedMotion: this.#reducedMotion.matches,\n\t\t\tlengths: readEach<Length, number>(lengths, (property) => readPxProperty(styles, property, 0)),\n\t\t};\n\t}\n\n\t#rescale(): void {\n\t\tconst box = this.#cssBox;\n\t\tif (!box) {\n\t\t\tthis.#resize(this.#size.width, this.#size.height);\n\t\t\treturn;\n\t\t}\n\n\t\tconst dpr = deviceRatio();\n\n\t\tthis.#resize(Math.round(box.width * dpr), Math.round(box.height * dpr));\n\t}\n\n\t#resize(width: number, height: number): void {\n\t\tconst previous = this.#size;\n\t\tconst dpr = deviceRatio();\n\t\tif (previous.width === width && previous.height === height && previous.dpr === dpr) return;\n\n\t\tthis.#size = { dpr, height, width };\n\t\tthis.#options.resize?.(this.#size);\n\t\tif (previous.width === 0 || previous.height === 0) this.rebuild();\n\t\telse this.invalidate();\n\t}\n\n\t#schedule(): void {\n\t\tif (this.#options.signal.aborted || this.#frame !== undefined || !this.#isVisible) return;\n\n\t\tthis.#frame = requestAnimationFrame((frameMs) => {\n\t\t\tthis.#draw(frameMs);\n\t\t});\n\t}\n\n\t#watchResolution(): void {\n\t\tconst { signal } = this.#options;\n\n\t\tmatchMedia(`(resolution: ${String(deviceRatio())}dppx)`).addEventListener(\n\t\t\t'change',\n\t\t\t() => {\n\t\t\t\tthis.#watchResolution();\n\t\t\t\tthis.#rescale();\n\t\t\t},\n\t\t\t{ once: true, signal },\n\t\t);\n\t}\n}\n\nexport function bindSurface<Colour extends string, Length extends string = never>(\n\toptions: SurfaceOptions<Colour, Length>,\n): Surface {\n\treturn new CanvasSurface(options);\n}\n"],"mappings":"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"}

package/dist/dev/lib/copy-node.js

@@ -2,14 +2,44 @@
 const copyPrefix = "sonic-copy-";
 const idListAttributes = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]);
 const hrefAttributes = /* @__PURE__ */ new Set(["href", "xlink:href"]);
-const urlReference = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/g;
+const timingAttributes = /* @__PURE__ */ new Set(["begin", "end"]);
+const urlAttributes = /* @__PURE__ */ new Set([
+	"clip-path",
+	"color-profile",
+	"fill",
+	"filter",
+	"marker-end",
+	"marker-mid",
+	"marker-start",
+	"mask",
+	"stroke",
+	"style"
+]);
+const urlReference = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/gi;
+const idSelector = /#([\w-]+)(?=[^;{}]*\{)/g;
+const timingReference = /(^|;\s*)([^\s;.]+)(?=\.[a-z])/gi;
+function decoded(id) {
+	try {
+		return decodeURIComponent(id);
+	} catch {
+		return id;
+	}
+}
+function rewriteUrls(value, ids) {
+	return value.replaceAll(urlReference, (reference, quote, id) => ids.has(decoded(id)) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference);
+}
 function rewriteReferences(name, value, ids) {
 	if (hrefAttributes.has(name)) return value.startsWith("#") && ids.has(value.slice(1)) ? `#${copyPrefix}${value.slice(1)}` : value;
 	if (idListAttributes.has(name)) return value.split(/\s+/).map((id) => ids.has(id) ? copyPrefix + id : id).join(" ");
-	return value.replaceAll(urlReference, (reference, quote, id) => ids.has(id) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference);
+	if (timingAttributes.has(name)) return value.replaceAll(timingReference, (reference, lead, id) => ids.has(id) ? lead + copyPrefix + id : reference);
+	return urlAttributes.has(name) ? rewriteUrls(value, ids) : value;
+}
+function rewriteStyle(text, ids) {
+	return rewriteUrls(text, ids).replaceAll(idSelector, (selector, id) => ids.has(id) ? `#${copyPrefix}${id}` : selector);
 }
 function prefixIds(element, ids) {
 	if (element.id !== "") element.id = copyPrefix + element.id;
+	if (element.localName === "style") element.textContent = rewriteStyle(element.textContent, ids);
 	for (const attribute of element.attributes) {
 		if (attribute.name === "id") continue;
 		const value = rewriteReferences(attribute.name, attribute.value, ids);

package/dist/dev/lib/copy-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-node.js","names":[],"sources":["../../../src/lib/copy-node.ts"],"sourcesContent":["const copyPrefix = 'sonic-copy-';\n\nconst idListAttributes = new Set(['aria-describedby', 'aria-labelledby']);\n\nconst hrefAttributes = new Set(['href', 'xlink:href']);\n\nconst urlReference = /url\\(\\s*(['\"]?)#([^'\")\\s]+)\\1\\s*\\)/g;\n\nfunction rewriteReferences(name: string, value: string, ids: Set<string>): string {\n\tif (hrefAttributes.has(name)) {\n\t\treturn value.startsWith('#') && ids.has(value.slice(1))\n\t\t\t? `#${copyPrefix}${value.slice(1)}`\n\t\t\t: value;\n\t}\n\tif (idListAttributes.has(name)) {\n\t\treturn value\n\t\t\t.split(/\\s+/)\n\t\t\t.map((id) => (ids.has(id) ? copyPrefix + id : id))\n\t\t\t.join(' ');\n\t}\n\n\treturn value.replaceAll(urlReference, (reference, quote: string, id: string) =>\n\t\tids.has(id) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference,\n\t);\n}\n\nfunction prefixIds(element: Element, ids: Set<string>): void {\n\tif (element.id !== '') element.id = copyPrefix + element.id;\n\tfor (const attribute of element.attributes) {\n\t\tif (attribute.name === 'id') continue;\n\n\t\tconst value = rewriteReferences(attribute.name, attribute.value, ids);\n\t\tif (value !== attribute.value) attribute.value = value;\n\t}\n}\n\n// The original stays in the document unrendered, and `url(#id)` in a copy would resolve to its `<defs>`\nexport function copyNode(node: Node): Node {\n\tconst copy = node.cloneNode(true);\n\tif (!(copy instanceof Element)) return copy;\n\n\tconst elements = [copy, ...copy.querySelectorAll('*')];\n\tconst ids = new Set(elements.map((element) => element.id).filter((id) => id !== ''));\n\tif (ids.size === 0) return copy;\n\n\tfor (const element of elements) prefixIds(element, ids);\n\n\treturn copy;\n}\n"],"mappings":";AAAA,MAAM,aAAa;AAEnB,MAAM,mCAAmB,IAAI,IAAI,CAAC,oBAAoB,iBAAiB,CAAC;AAExE,MAAM,iCAAiB,IAAI,IAAI,CAAC,QAAQ,YAAY,CAAC;AAErD,MAAM,eAAe;AAErB,SAAS,kBAAkB,MAAc,OAAe,KAA0B;CACjF,IAAI,eAAe,IAAI,IAAI,GAC1B,OAAO,MAAM,WAAW,GAAG,KAAK,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,IACnD,IAAI,aAAa,MAAM,MAAM,CAAC,MAC9B;CAEJ,IAAI,iBAAiB,IAAI,IAAI,GAC5B,OAAO,MACL,MAAM,KAAK,CAAC,CACZ,KAAK,OAAQ,IAAI,IAAI,EAAE,IAAI,aAAa,KAAK,EAAG,CAAC,CACjD,KAAK,GAAG;CAGX,OAAO,MAAM,WAAW,eAAe,WAAW,OAAe,OAChE,IAAI,IAAI,EAAE,IAAI,OAAO,MAAM,GAAG,aAAa,KAAK,MAAM,KAAK,SAC5D;AACD;AAEA,SAAS,UAAU,SAAkB,KAAwB;CAC5D,IAAI,QAAQ,OAAO,IAAI,QAAQ,KAAK,aAAa,QAAQ;CACzD,KAAK,MAAM,aAAa,QAAQ,YAAY;EAC3C,IAAI,UAAU,SAAS,MAAM;EAE7B,MAAM,QAAQ,kBAAkB,UAAU,MAAM,UAAU,OAAO,GAAG;EACpE,IAAI,UAAU,UAAU,OAAO,UAAU,QAAQ;CAClD;AACD;AAGA,SAAgB,SAAS,MAAkB;CAC1C,MAAM,OAAO,KAAK,UAAU,IAAI;CAChC,IAAI,EAAE,gBAAgB,UAAU,OAAO;CAEvC,MAAM,WAAW,CAAC,MAAM,GAAG,KAAK,iBAAiB,GAAG,CAAC;CACrD,MAAM,MAAM,IAAI,IAAI,SAAS,KAAK,YAAY,QAAQ,EAAE,CAAC,CAAC,QAAQ,OAAO,OAAO,EAAE,CAAC;CACnF,IAAI,IAAI,SAAS,GAAG,OAAO;CAE3B,KAAK,MAAM,WAAW,UAAU,UAAU,SAAS,GAAG;CAEtD,OAAO;AACR"}
+{"version":3,"file":"copy-node.js","names":[],"sources":["../../../src/lib/copy-node.ts"],"sourcesContent":["const copyPrefix = 'sonic-copy-';\n\nconst idListAttributes = new Set(['aria-describedby', 'aria-labelledby']);\n\nconst hrefAttributes = new Set(['href', 'xlink:href']);\n\nconst timingAttributes = new Set(['begin', 'end']);\n\nconst urlAttributes = new Set([\n\t'clip-path',\n\t'color-profile',\n\t'fill',\n\t'filter',\n\t'marker-end',\n\t'marker-mid',\n\t'marker-start',\n\t'mask',\n\t'stroke',\n\t'style',\n]);\n\nconst urlReference = /url\\(\\s*(['\"]?)#([^'\")\\s]+)\\1\\s*\\)/gi;\n\n// A `#name` with a block still to open is a selector; inside a block it is a colour\nconst idSelector = /#([\\w-]+)(?=[^;{}]*\\{)/g;\n\n// SMIL: an id leads a `;` list entry, before `.event`; `2.5s` is a clock value\nconst timingReference = /(^|;\\s*)([^\\s;.]+)(?=\\.[a-z])/gi;\n\nfunction decoded(id: string): string {\n\ttry {\n\t\treturn decodeURIComponent(id);\n\t} catch {\n\t\treturn id;\n\t}\n}\n\nfunction rewriteUrls(value: string, ids: Set<string>): string {\n\treturn value.replaceAll(urlReference, (reference, quote: string, id: string) =>\n\t\tids.has(decoded(id)) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference,\n\t);\n}\n\nfunction rewriteReferences(name: string, value: string, ids: Set<string>): string {\n\tif (hrefAttributes.has(name)) {\n\t\treturn value.startsWith('#') && ids.has(value.slice(1))\n\t\t\t? `#${copyPrefix}${value.slice(1)}`\n\t\t\t: value;\n\t}\n\tif (idListAttributes.has(name)) {\n\t\treturn value\n\t\t\t.split(/\\s+/)\n\t\t\t.map((id) => (ids.has(id) ? copyPrefix + id : id))\n\t\t\t.join(' ');\n\t}\n\tif (timingAttributes.has(name)) {\n\t\treturn value.replaceAll(timingReference, (reference, lead: string, id: string) =>\n\t\t\tids.has(id) ? lead + copyPrefix + id : reference,\n\t\t);\n\t}\n\n\treturn urlAttributes.has(name) ? rewriteUrls(value, ids) : value;\n}\n\nfunction rewriteStyle(text: string, ids: Set<string>): string {\n\treturn rewriteUrls(text, ids).replaceAll(idSelector, (selector, id: string) =>\n\t\tids.has(id) ? `#${copyPrefix}${id}` : selector,\n\t);\n}\n\nfunction prefixIds(element: Element, ids: Set<string>): void {\n\tif (element.id !== '') element.id = copyPrefix + element.id;\n\tif (element.localName === 'style') element.textContent = rewriteStyle(element.textContent, ids);\n\tfor (const attribute of element.attributes) {\n\t\tif (attribute.name === 'id') continue;\n\n\t\tconst value = rewriteReferences(attribute.name, attribute.value, ids);\n\t\tif (value !== attribute.value) attribute.value = value;\n\t}\n}\n\n// The original stays in the document unrendered, and `url(#id)` in a copy would resolve to its `<defs>`\nexport function copyNode(node: Node): Node {\n\tconst copy = node.cloneNode(true);\n\tif (!(copy instanceof Element)) return copy;\n\n\tconst elements = [copy, ...copy.querySelectorAll('*')];\n\tconst ids = new Set(elements.map((element) => element.id).filter((id) => id !== ''));\n\tif (ids.size === 0) return copy;\n\n\tfor (const element of elements) prefixIds(element, ids);\n\n\treturn copy;\n}\n"],"mappings":";AAAA,MAAM,aAAa;AAEnB,MAAM,mCAAmB,IAAI,IAAI,CAAC,oBAAoB,iBAAiB,CAAC;AAExE,MAAM,iCAAiB,IAAI,IAAI,CAAC,QAAQ,YAAY,CAAC;AAErD,MAAM,mCAAmB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC;AAEjD,MAAM,gCAAgB,IAAI,IAAI;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD,CAAC;AAED,MAAM,eAAe;AAGrB,MAAM,aAAa;AAGnB,MAAM,kBAAkB;AAExB,SAAS,QAAQ,IAAoB;CACpC,IAAI;EACH,OAAO,mBAAmB,EAAE;CAC7B,QAAQ;EACP,OAAO;CACR;AACD;AAEA,SAAS,YAAY,OAAe,KAA0B;CAC7D,OAAO,MAAM,WAAW,eAAe,WAAW,OAAe,OAChE,IAAI,IAAI,QAAQ,EAAE,CAAC,IAAI,OAAO,MAAM,GAAG,aAAa,KAAK,MAAM,KAAK,SACrE;AACD;AAEA,SAAS,kBAAkB,MAAc,OAAe,KAA0B;CACjF,IAAI,eAAe,IAAI,IAAI,GAC1B,OAAO,MAAM,WAAW,GAAG,KAAK,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,IACnD,IAAI,aAAa,MAAM,MAAM,CAAC,MAC9B;CAEJ,IAAI,iBAAiB,IAAI,IAAI,GAC5B,OAAO,MACL,MAAM,KAAK,CAAC,CACZ,KAAK,OAAQ,IAAI,IAAI,EAAE,IAAI,aAAa,KAAK,EAAG,CAAC,CACjD,KAAK,GAAG;CAEX,IAAI,iBAAiB,IAAI,IAAI,GAC5B,OAAO,MAAM,WAAW,kBAAkB,WAAW,MAAc,OAClE,IAAI,IAAI,EAAE,IAAI,OAAO,aAAa,KAAK,SACxC;CAGD,OAAO,cAAc,IAAI,IAAI,IAAI,YAAY,OAAO,GAAG,IAAI;AAC5D;AAEA,SAAS,aAAa,MAAc,KAA0B;CAC7D,OAAO,YAAY,MAAM,GAAG,CAAC,CAAC,WAAW,aAAa,UAAU,OAC/D,IAAI,IAAI,EAAE,IAAI,IAAI,aAAa,OAAO,QACvC;AACD;AAEA,SAAS,UAAU,SAAkB,KAAwB;CAC5D,IAAI,QAAQ,OAAO,IAAI,QAAQ,KAAK,aAAa,QAAQ;CACzD,IAAI,QAAQ,cAAc,SAAS,QAAQ,cAAc,aAAa,QAAQ,aAAa,GAAG;CAC9F,KAAK,MAAM,aAAa,QAAQ,YAAY;EAC3C,IAAI,UAAU,SAAS,MAAM;EAE7B,MAAM,QAAQ,kBAAkB,UAAU,MAAM,UAAU,OAAO,GAAG;EACpE,IAAI,UAAU,UAAU,OAAO,UAAU,QAAQ;CAClD;AACD;AAGA,SAAgB,SAAS,MAAkB;CAC1C,MAAM,OAAO,KAAK,UAAU,IAAI;CAChC,IAAI,EAAE,gBAAgB,UAAU,OAAO;CAEvC,MAAM,WAAW,CAAC,MAAM,GAAG,KAAK,iBAAiB,GAAG,CAAC;CACrD,MAAM,MAAM,IAAI,IAAI,SAAS,KAAK,YAAY,QAAQ,EAAE,CAAC,CAAC,QAAQ,OAAO,OAAO,EAAE,CAAC;CACnF,IAAI,IAAI,SAAS,GAAG,OAAO;CAE3B,KAAK,MAAM,WAAW,UAAU,UAAU,SAAS,GAAG;CAEtD,OAAO;AACR"}

package/dist/dev/lib/crossfade.d.ts

@@ -0,0 +1,12 @@
+//#region src/lib/crossfade.d.ts
+interface CrossfadeOptions {
+  law?: 'linear' | 'power';
+  sharpness?: number;
+}
+interface CrossfadeGains {
+  a: number;
+  b: number;
+}
+export declare function crossfadeGains(position: number, options?: CrossfadeOptions): CrossfadeGains;
+//#endregion
+//# sourceMappingURL=crossfade.d.ts.map

package/dist/dev/lib/crossfade.js

@@ -0,0 +1,23 @@
+import { clampProportion } from "./math.js";
+
+//#region src/lib/crossfade.ts
+function progress(side, span) {
+	if (span === 0) return side > 0 ? 1 : 0;
+	return Math.min(1, side / span);
+}
+function crossfadeGains(position, options = {}) {
+	const at = clampProportion(position);
+	const span = 1 - clampProportion(options.sharpness ?? 0);
+	const gain = (side) => {
+		const reached = progress(side, span);
+		return options.law === "linear" ? reached : Math.sin(reached * Math.PI / 2);
+	};
+	return {
+		a: gain(1 - at),
+		b: gain(at)
+	};
+}
+
+//#endregion
+export { crossfadeGains };
+//# sourceMappingURL=crossfade.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"crossfade.js","names":[],"sources":["../../../src/lib/crossfade.ts"],"sourcesContent":["import { clampProportion } from '#lib/math.ts';\n\ninterface CrossfadeOptions {\n\tlaw?: 'linear' | 'power';\n\tsharpness?: number;\n}\n\ninterface CrossfadeGains {\n\ta: number;\n\tb: number;\n}\n\nfunction progress(side: number, span: number): number {\n\tif (span === 0) return side > 0 ? 1 : 0;\n\n\treturn Math.min(1, side / span);\n}\n\nexport function crossfadeGains(position: number, options: CrossfadeOptions = {}): CrossfadeGains {\n\tconst at = clampProportion(position);\n\tconst span = 1 - clampProportion(options.sharpness ?? 0);\n\tconst gain = (side: number): number => {\n\t\tconst reached = progress(side, span);\n\n\t\treturn options.law === 'linear' ? reached : Math.sin((reached * Math.PI) / 2);\n\t};\n\n\treturn { a: gain(1 - at), b: gain(at) };\n}\n"],"mappings":";;;AAYA,SAAS,SAAS,MAAc,MAAsB;CACrD,IAAI,SAAS,GAAG,OAAO,OAAO,IAAI,IAAI;CAEtC,OAAO,KAAK,IAAI,GAAG,OAAO,IAAI;AAC/B;AAEA,SAAgB,eAAe,UAAkB,UAA4B,CAAC,GAAmB;CAChG,MAAM,KAAK,gBAAgB,QAAQ;CACnC,MAAM,OAAO,IAAI,gBAAgB,QAAQ,aAAa,CAAC;CACvD,MAAM,QAAQ,SAAyB;EACtC,MAAM,UAAU,SAAS,MAAM,IAAI;EAEnC,OAAO,QAAQ,QAAQ,WAAW,UAAU,KAAK,IAAK,UAAU,KAAK,KAAM,CAAC;CAC7E;CAEA,OAAO;EAAE,GAAG,KAAK,IAAI,EAAE;EAAG,GAAG,KAAK,EAAE;CAAE;AACvC"}

package/dist/dev/lib/distribute.d.ts

@@ -0,0 +1,4 @@
+//#region src/lib/distribute.d.ts
+export type SplitMode = 'cascade' | 'equal' | 'proportional';
+//#endregion
+//# sourceMappingURL=distribute.d.ts.map