@xsynaptic/sonic-ui 0.18.0 → 0.19.0

package/dist/styles/waveform.css

@@ -92,7 +92,7 @@
 
 	.sonic-waveform {
 		--_sonic-waveform-inset: calc(
-			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
+			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0)
 		);
 		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
 		--_sonic-glass-depth: var(--sonic-glass-depth, calc(0.6 * var(--_sonic-relief)));
@@ -104,7 +104,11 @@
 		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
 		--_sonic-waveform-wave-edge: var(
 			--sonic-waveform-edge,
-			color-mix(in oklab, var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-waveform-lit) calc(100% - 55% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 		--_sonic-waveform-grid: var(--sonic-waveform-grid, var(--_sonic-etch));
 		--_sonic-waveform-ends: var(--sonic-waveform-ends, var(--_sonic-etch));
@@ -135,8 +139,15 @@
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: grab;
 
-		--_sonic-glass-radius: calc(
-			var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio, 0.08)
+		--_sonic-waveform-radius-own: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio)
+		);
+		--_sonic-glass-radius: var(
+			--_sonic-waveform-radius-own,
+			var(
+				--sonic-radius,
+				calc(var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio, 0.08))
+			)
 		);
 
 		border-radius: var(--_sonic-glass-radius);

package/dist/styles/wavestrip.css

@@ -111,7 +111,7 @@
 		--_sonic-wavestrip-groove-size: var(--sonic-wavestrip-groove-size, 0px);
 		--_sonic-wavestrip-marker-ratio: var(--sonic-wavestrip-marker-ratio, 0.065);
 		--_sonic-wavestrip-inset: calc(
-			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-inset-ratio, 0.1)
+			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-inset-ratio, 0)
 		);
 		--_sonic-unit: calc(var(--_sonic-wavestrip-size) / 32);
 		--_sonic-wavestrip-lit: var(--_sonic-lit);
@@ -143,8 +143,15 @@
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: ew-resize;
 
-		--_sonic-glass-radius: calc(
-			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-radius-ratio, 0.15)
+		--_sonic-wavestrip-radius-own: calc(
+			var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-radius-ratio)
+		);
+		--_sonic-glass-radius: var(
+			--_sonic-wavestrip-radius-own,
+			var(
+				--sonic-radius,
+				calc(var(--_sonic-wavestrip-size) * var(--sonic-wavestrip-radius-ratio, 0.15))
+			)
 		);
 
 		border-radius: var(--_sonic-glass-radius);
@@ -170,6 +177,7 @@
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
+		border-radius: max(0px, var(--_sonic-glass-radius) - var(--_sonic-wavestrip-inset));
 	}
 
 	.sonic-wavestrip-markers {

package/dist/styles/xy.css

@@ -41,7 +41,11 @@
 		touch-action: none;
 		cursor: crosshair;
 
-		--_sonic-glass-radius: calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio));
+		--_sonic-xy-radius-own: calc(var(--_sonic-xy-size) * var(--sonic-xy-radius-ratio));
+		--_sonic-glass-radius: var(
+			--_sonic-xy-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-xy-size) * var(--_sonic-xy-radius-ratio)))
+		);
 
 		border-radius: var(--_sonic-glass-radius);
 	}
@@ -144,7 +148,7 @@
 
 		cursor: var(--_sonic-xy-cursor);
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
-		transition: filter 120ms ease-out;
+		transition: filter var(--_sonic-fade-duration) ease-out;
 
 		&::before {
 			position: absolute;
@@ -156,9 +160,9 @@
 			border-radius: 50%;
 			box-shadow: var(--_sonic-xy-puck-ring);
 			transition:
-				background-color 120ms ease-out,
-				border-color 120ms ease-out,
-				box-shadow 120ms ease-out;
+				background-color var(--_sonic-fade-duration) ease-out,
+				border-color var(--_sonic-fade-duration) ease-out,
+				box-shadow var(--_sonic-fade-duration) ease-out;
 		}
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",
@@ -38,11 +38,6 @@
       "development": "./dist/dev/index.js",
       "import": "./dist/default/index.js"
     },
-    "./dat": {
-      "types": "./dist/dev/dat.d.ts",
-      "development": "./dist/dev/dat.js",
-      "import": "./dist/default/dat.js"
-    },
     "./define": {
       "types": "./dist/dev/define.d.ts",
       "development": "./dist/dev/define.js",

package/dist/default/dat.js

@@ -1,52 +0,0 @@
-import { clamp } from "./lib/math.js";
-
-//#region src/dat.ts
-function readVersion(view) {
-	const version = view.getInt32(0, true);
-	if (version === 1 || version === 2) return version;
-	throw new Error(`A .dat file of version ${String(version)} is not one this reads`);
-}
-function readDatHeader(buffer) {
-	if (buffer.byteLength < 20) throw new Error("A .dat header takes at least 20 bytes");
-	const view = new DataView(buffer);
-	const version = readVersion(view);
-	const dataOffset = version === 1 ? 20 : 24;
-	if (buffer.byteLength < dataOffset) throw new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);
-	const channels = version === 1 ? 1 : view.getInt32(20, true);
-	if (channels < 1) throw new Error("A .dat header names no channels");
-	const sampleRate = view.getInt32(8, true);
-	const samplesPerPixel = view.getInt32(12, true);
-	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
-	return {
-		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
-		channels,
-		dataOffset,
-		pairs: view.getUint32(16, true),
-		pairsPerSecond: sampleRate / samplesPerPixel,
-		sampleRate,
-		samplesPerPixel,
-		version
-	};
-}
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-function datByteRange(header, fromPair, toPair) {
-	const from = clamp(Math.floor(fromPair), 0, header.pairs);
-	const to = clamp(Math.ceil(toPair), from, header.pairs);
-	if (!(to > from)) return void 0;
-	const pairBytes = header.channels * 2 * header.bits / 8;
-	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
-}
-function readDatSamples(header, body, byteOffset = 0) {
-	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
-}
-function readDatPeaks(header, body, byteOffset = 0) {
-	return {
-		channels: header.channels,
-		fullScale: header.bits === 8 ? 128 : 32768,
-		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body, byteOffset)
-	};
-}
-
-//#endregion
-export { datByteRange, readDatHeader, readDatPeaks, readDatSamples };

package/dist/dev/dat.d.ts

@@ -1,20 +0,0 @@
-import { WaveformPeaks } from "./lib/waveform-buckets.js";
-//#region src/dat.d.ts
-export interface DatHeader {
-  bits: 8 | 16;
-  channels: number;
-  dataOffset: number;
-  pairs: number;
-  pairsPerSecond: number;
-  sampleRate: number;
-  samplesPerPixel: number;
-  version: 1 | 2;
-}
-export declare function readDatHeader(buffer: ArrayBuffer): DatHeader;
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-export declare function datByteRange(header: DatHeader, fromPair: number, toPair: number): [number, number] | undefined;
-export declare function readDatSamples(header: DatHeader, body: ArrayBuffer, byteOffset?: number): Int8Array | Int16Array;
-export declare function readDatPeaks(header: DatHeader, body: ArrayBuffer, byteOffset?: number): WaveformPeaks;
-//#endregion
-export type { WaveformPeaks };
-//# sourceMappingURL=dat.d.ts.map

package/dist/dev/dat.js

@@ -1,53 +0,0 @@
-import { clamp } from "./lib/math.js";
-
-//#region src/dat.ts
-function readVersion(view) {
-	const version = view.getInt32(0, true);
-	if (version === 1 || version === 2) return version;
-	throw new Error(`A .dat file of version ${String(version)} is not one this reads`);
-}
-function readDatHeader(buffer) {
-	if (buffer.byteLength < 20) throw new Error("A .dat header takes at least 20 bytes");
-	const view = new DataView(buffer);
-	const version = readVersion(view);
-	const dataOffset = version === 1 ? 20 : 24;
-	if (buffer.byteLength < dataOffset) throw new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);
-	const channels = version === 1 ? 1 : view.getInt32(20, true);
-	if (channels < 1) throw new Error("A .dat header names no channels");
-	const sampleRate = view.getInt32(8, true);
-	const samplesPerPixel = view.getInt32(12, true);
-	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
-	return {
-		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
-		channels,
-		dataOffset,
-		pairs: view.getUint32(16, true),
-		pairsPerSecond: sampleRate / samplesPerPixel,
-		sampleRate,
-		samplesPerPixel,
-		version
-	};
-}
-/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */
-function datByteRange(header, fromPair, toPair) {
-	const from = clamp(Math.floor(fromPair), 0, header.pairs);
-	const to = clamp(Math.ceil(toPair), from, header.pairs);
-	if (!(to > from)) return void 0;
-	const pairBytes = header.channels * 2 * header.bits / 8;
-	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
-}
-function readDatSamples(header, body, byteOffset = 0) {
-	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
-}
-function readDatPeaks(header, body, byteOffset = 0) {
-	return {
-		channels: header.channels,
-		fullScale: header.bits === 8 ? 128 : 32768,
-		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body, byteOffset)
-	};
-}
-
-//#endregion
-export { datByteRange, readDatHeader, readDatPeaks, readDatSamples };
-//# sourceMappingURL=dat.js.map

package/dist/dev/dat.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dat.js","names":[],"sources":["../../src/dat.ts"],"sourcesContent":["import type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nimport { clamp } from '#lib/math.ts';\n\nexport type { WaveformPeaks } from '#lib/waveform-buckets.ts';\n\nexport interface DatHeader {\n\tbits: 8 | 16;\n\tchannels: number;\n\tdataOffset: number;\n\tpairs: number;\n\tpairsPerSecond: number;\n\tsampleRate: number;\n\tsamplesPerPixel: number;\n\tversion: 1 | 2;\n}\n\nfunction readVersion(view: DataView): 1 | 2 {\n\tconst version = view.getInt32(0, true);\n\tif (version === 1 || version === 2) return version;\n\n\tthrow new Error(`A .dat file of version ${String(version)} is not one this reads`);\n}\n\nexport function readDatHeader(buffer: ArrayBuffer): DatHeader {\n\tif (buffer.byteLength < 20) throw new Error('A .dat header takes at least 20 bytes');\n\n\tconst view = new DataView(buffer);\n\tconst version = readVersion(view);\n\tconst dataOffset = version === 1 ? 20 : 24;\n\tif (buffer.byteLength < dataOffset) {\n\t\tthrow new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);\n\t}\n\n\tconst channels = version === 1 ? 1 : view.getInt32(20, true);\n\tif (channels < 1) throw new Error('A .dat header names no channels');\n\n\tconst sampleRate = view.getInt32(8, true);\n\tconst samplesPerPixel = view.getInt32(12, true);\n\tif (samplesPerPixel < 1) throw new Error('A .dat header names no samples per pixel');\n\n\treturn {\n\t\tbits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,\n\t\tchannels,\n\t\tdataOffset,\n\t\tpairs: view.getUint32(16, true),\n\t\tpairsPerSecond: sampleRate / samplesPerPixel,\n\t\tsampleRate,\n\t\tsamplesPerPixel,\n\t\tversion,\n\t};\n}\n\n/** An inclusive byte range for a `Range` header; `undefined` when the pairs asked for are empty */\nexport function datByteRange(\n\theader: DatHeader,\n\tfromPair: number,\n\ttoPair: number,\n): [number, number] | undefined {\n\tconst from = clamp(Math.floor(fromPair), 0, header.pairs);\n\tconst to = clamp(Math.ceil(toPair), from, header.pairs);\n\t// A server ignores an inverted `Range` and sends the whole file\n\tif (!(to > from)) return undefined;\n\n\tconst pairBytes = (header.channels * 2 * header.bits) / 8;\n\n\treturn [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];\n}\n\n// Typed arrays read the platform's byte order; every browser platform is little-endian, as the format is\n// A range response can end mid-sample; the odd byte is dropped\nexport function readDatSamples(\n\theader: DatHeader,\n\tbody: ArrayBuffer,\n\tbyteOffset = 0,\n): Int8Array | Int16Array {\n\treturn header.bits === 8\n\t\t? new Int8Array(body, byteOffset)\n\t\t: new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));\n}\n\nexport function readDatPeaks(header: DatHeader, body: ArrayBuffer, byteOffset = 0): WaveformPeaks {\n\treturn {\n\t\tchannels: header.channels,\n\t\tfullScale: header.bits === 8 ? 128 : 32_768,\n\t\tpairsPerSecond: header.pairsPerSecond,\n\t\tsamples: readDatSamples(header, body, byteOffset),\n\t};\n}\n"],"mappings":";;;AAiBA,SAAS,YAAY,MAAuB;CAC3C,MAAM,UAAU,KAAK,SAAS,GAAG,IAAI;CACrC,IAAI,YAAY,KAAK,YAAY,GAAG,OAAO;CAE3C,MAAM,IAAI,MAAM,0BAA0B,OAAO,OAAO,EAAE,uBAAuB;AAClF;AAEA,SAAgB,cAAc,QAAgC;CAC7D,IAAI,OAAO,aAAa,IAAI,MAAM,IAAI,MAAM,uCAAuC;CAEnF,MAAM,OAAO,IAAI,SAAS,MAAM;CAChC,MAAM,UAAU,YAAY,IAAI;CAChC,MAAM,aAAa,YAAY,IAAI,KAAK;CACxC,IAAI,OAAO,aAAa,YACvB,MAAM,IAAI,MAAM,aAAa,OAAO,OAAO,EAAE,qBAAqB,OAAO,UAAU,EAAE,OAAO;CAG7F,MAAM,WAAW,YAAY,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI;CAC3D,IAAI,WAAW,GAAG,MAAM,IAAI,MAAM,iCAAiC;CAEnE,MAAM,aAAa,KAAK,SAAS,GAAG,IAAI;CACxC,MAAM,kBAAkB,KAAK,SAAS,IAAI,IAAI;CAC9C,IAAI,kBAAkB,GAAG,MAAM,IAAI,MAAM,0CAA0C;CAEnF,OAAO;EACN,OAAO,KAAK,UAAU,GAAG,IAAI,IAAI,OAAO,IAAI,IAAI;EAChD;EACA;EACA,OAAO,KAAK,UAAU,IAAI,IAAI;EAC9B,gBAAgB,aAAa;EAC7B;EACA;EACA;CACD;AACD;;AAGA,SAAgB,aACf,QACA,UACA,QAC+B;CAC/B,MAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,GAAG,GAAG,OAAO,KAAK;CACxD,MAAM,KAAK,MAAM,KAAK,KAAK,MAAM,GAAG,MAAM,OAAO,KAAK;CAEtD,IAAI,EAAE,KAAK,OAAO,OAAO;CAEzB,MAAM,YAAa,OAAO,WAAW,IAAI,OAAO,OAAQ;CAExD,OAAO,CAAC,OAAO,aAAa,OAAO,WAAW,OAAO,aAAa,KAAK,YAAY,CAAC;AACrF;AAIA,SAAgB,eACf,QACA,MACA,aAAa,GACY;CACzB,OAAO,OAAO,SAAS,IACpB,IAAI,UAAU,MAAM,UAAU,IAC9B,IAAI,WAAW,MAAM,YAAY,KAAK,OAAO,KAAK,aAAa,cAAc,CAAC,CAAC;AACnF;AAEA,SAAgB,aAAa,QAAmB,MAAmB,aAAa,GAAkB;CACjG,OAAO;EACN,UAAU,OAAO;EACjB,WAAW,OAAO,SAAS,IAAI,MAAM;EACrC,gBAAgB,OAAO;EACvB,SAAS,eAAe,QAAQ,MAAM,UAAU;CACjD;AACD"}