@opendaw/studio-core 0.0.121 → 0.0.123

package/dist/project/ProjectEnv.d.ts

@@ -2,11 +2,15 @@ import { SampleLoaderManager, SoundfontLoaderManager } from "@opendaw/studio-ada
 import { Editing, Func } from "@opendaw/lib-std";
 import { BoxGraph } from "@opendaw/lib-box";
 import { AudioWorklets } from "../AudioWorklets";
+import { SampleService } from "../samples";
+import { SoundfontService } from "../soundfont";
 export interface ProjectEnv {
     audioContext: AudioContext;
     audioWorklets: AudioWorklets;
     sampleManager: SampleLoaderManager;
     soundfontManager: SoundfontLoaderManager;
+    sampleService: SampleService;
+    soundfontService: SoundfontService;
     createEditing?: Func<BoxGraph, Editing>;
 }
 //# sourceMappingURL=ProjectEnv.d.ts.map

package/dist/project/ProjectEnv.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectEnv.d.ts","sourceRoot":"","sources":["../../src/project/ProjectEnv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,OAAO,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,UAAU;IACvB,YAAY,EAAE,YAAY,CAAA;IAC1B,aAAa,EAAE,aAAa,CAAA;IAC5B,aAAa,EAAE,mBAAmB,CAAA;IAClC,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;CAC1C"}
+{"version":3,"file":"ProjectEnv.d.ts","sourceRoot":"","sources":["../../src/project/ProjectEnv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAE,sBAAsB,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,OAAO,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAA;AACxC,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAE7C,MAAM,WAAW,UAAU;IACvB,YAAY,EAAE,YAAY,CAAA;IAC1B,aAAa,EAAE,aAAa,CAAA;IAC5B,aAAa,EAAE,mBAAmB,CAAA;IAClC,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,EAAE,aAAa,CAAA;IAC5B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,aAAa,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;CAC1C"}

package/dist/project/audio/AudioContentFactory.d.ts

@@ -15,6 +15,7 @@ export declare namespace AudioContentFactory {
         warpMarkers?: ReadonlyArray<WarpMarkerTemplate>;
         waveformOffset?: number;
         gainInDb?: number;
+        disableQuantize?: boolean;
     };
     type Clip = Props & {
         index: int;
@@ -33,7 +34,7 @@ export declare namespace AudioContentFactory {
      * Calculates the duration of an audio region based on sample properties.
      * Returns duration in PPQN for stretched regions, or in seconds for non-stretched.
      */
-    const calculateDuration: (sample: Sample) => ppqn;
+    const calculateDuration: (sample: Sample, disableQuantize?: boolean) => ppqn;
     const createTimeStretchedRegion: (props: TimeStretchedProps & Region) => AudioRegionBox;
     const createPitchStretchedRegion: (props: PitchStretchedProps & Region) => AudioRegionBox;
     const createNotStretchedRegion: (props: NotStretchedProps & Region) => AudioRegionBox;

package/dist/project/audio/AudioContentFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioContentFactory.d.ts","sourceRoot":"","sources":["../../../src/project/audio/AudioContentFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAa,MAAM,EAAY,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAC,GAAG,EAAuC,MAAM,kBAAkB,CAAA;AAC1E,OAAO,EACH,YAAY,EACZ,YAAY,EAEZ,cAAc,EAEd,QAAQ,EAEX,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AAEvD,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG;QAChB,QAAQ,EAAE,QAAQ,CAAA;QAClB,WAAW,EAAE,QAAQ,CAAA;QACrB,YAAY,EAAE,YAAY,CAAA;QAC1B,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IAED,KAAY,IAAI,GAAG,KAAK,GAAG;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAA;IACzC,KAAY,MAAM,GAAG,KAAK,GAAG;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAE9D,KAAY,kBAAkB,GAAG;QAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;QACrC,YAAY,CAAC,EAAE,MAAM,CAAA;KACxB,GAAG,KAAK,CAAA;IAET,KAAY,mBAAmB,GAAG,EAA0C,GAAG,KAAK,CAAA;IAEpF,KAAY,iBAAiB,GAAG,EAA0C,GAAG,KAAK,CAAA;IAElF;;;OAGG;IACI,MAAM,iBAAiB,GAAI,QAAQ,MAAM,KAAG,IAQlD,CAAA;IAIM,MAAM,yBAAyB,GAAI,OAAO,kBAAkB,GAAG,MAAM,KAAG,cAM9E,CAAA;IAEM,MAAM,0BAA0B,GAAI,OAAO,mBAAmB,GAAG,MAAM,KAAG,cAEhF,CAAA;IAEM,MAAM,wBAAwB,GAAI,OAAO,iBAAiB,GAAG,MAAM,KAAG,cAgB5E,CAAA;IAIM,MAAM,uBAAuB,GAAI,OAAO,kBAAkB,GAAG,IAAI,KAAG,YAM1E,CAAA;IAEM,MAAM,wBAAwB,GAAI,OAAO,mBAAmB,GAAG,IAAI,KAAG,YAG5E,CAAA;IAEM,MAAM,sBAAsB,GAAI,OAAO,iBAAiB,GAAG,IAAI,KAAG,YAcxE,CAAA;CA6DJ"}
+{"version":3,"file":"AudioContentFactory.d.ts","sourceRoot":"","sources":["../../../src/project/audio/AudioContentFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAa,MAAM,EAAY,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAC,GAAG,EAAwC,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EACH,YAAY,EACZ,YAAY,EAEZ,cAAc,EAEd,QAAQ,EAEX,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AAEvD,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG;QAChB,QAAQ,EAAE,QAAQ,CAAA;QAClB,WAAW,EAAE,QAAQ,CAAA;QACrB,YAAY,EAAE,YAAY,CAAA;QAC1B,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAA;QAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,eAAe,CAAC,EAAE,OAAO,CAAA;KAC5B,CAAA;IAED,KAAY,IAAI,GAAG,KAAK,GAAG;QAAE,KAAK,EAAE,GAAG,CAAA;KAAE,CAAA;IACzC,KAAY,MAAM,GAAG,KAAK,GAAG;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAE9D,KAAY,kBAAkB,GAAG;QAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;QACrC,YAAY,CAAC,EAAE,MAAM,CAAA;KACxB,GAAG,KAAK,CAAA;IAET,KAAY,mBAAmB,GAAG,EAA0C,GAAG,KAAK,CAAA;IAEpF,KAAY,iBAAiB,GAAG,EAA0C,GAAG,KAAK,CAAA;IAElF;;;OAGG;IACI,MAAM,iBAAiB,GAAI,QAAQ,MAAM,EAAE,kBAAiB,OAAe,KAAG,IAOpF,CAAA;IAIM,MAAM,yBAAyB,GAAI,OAAO,kBAAkB,GAAG,MAAM,KAAG,cAM9E,CAAA;IAEM,MAAM,0BAA0B,GAAI,OAAO,mBAAmB,GAAG,MAAM,KAAG,cAEhF,CAAA;IAEM,MAAM,wBAAwB,GAAI,OAAO,iBAAiB,GAAG,MAAM,KAAG,cAgB5E,CAAA;IAIM,MAAM,uBAAuB,GAAI,OAAO,kBAAkB,GAAG,IAAI,KAAG,YAM1E,CAAA;IAEM,MAAM,wBAAwB,GAAI,OAAO,mBAAmB,GAAG,IAAI,KAAG,YAG5E,CAAA;IAEM,MAAM,sBAAsB,GAAI,OAAO,iBAAiB,GAAG,IAAI,KAAG,YAcxE,CAAA;CA+DJ"}

package/dist/project/audio/AudioContentFactory.js

@@ -1,6 +1,6 @@
 import { PPQN, TimeBase } from "@opendaw/lib-dsp";
 import { ColorCodes, TrackType } from "@opendaw/studio-adapters";
-import { isDefined, panic, quantizeCeil, UUID } from "@opendaw/lib-std";
+import { isDefined, panic, quantizeRound, UUID } from "@opendaw/lib-std";
 import { AudioClipBox, AudioPitchStretchBox, AudioRegionBox, AudioTimeStretchBox, ValueEventCollectionBox } from "@opendaw/studio-boxes";
 import { TransientPlayMode } from "@opendaw/studio-enums";
 import { AudioContentHelpers } from "./AudioContentHelpers";
@@ -10,14 +10,13 @@ export var AudioContentFactory;
      * Calculates the duration of an audio region based on sample properties.
      * Returns duration in PPQN for stretched regions, or in seconds for non-stretched.
      */
-    AudioContentFactory.calculateDuration = (sample) => {
+    AudioContentFactory.calculateDuration = (sample, disableQuantize = false) => {
         const { duration: durationInSeconds, bpm } = sample;
         if (bpm === 0) {
-            // Non-stretched: duration is in seconds
             return durationInSeconds;
         }
-        // Stretched: duration is in PPQN
-        return quantizeCeil(PPQN.secondsToPulses(durationInSeconds, bpm), PPQN.SemiQuaver);
+        const pulses = PPQN.secondsToPulses(durationInSeconds, bpm);
+        return disableQuantize ? pulses : quantizeRound(pulses, PPQN.SemiQuaver);
     };
     // --- Region Creation --- //
     AudioContentFactory.createTimeStretchedRegion = (props) => {
@@ -81,7 +80,8 @@ export var AudioContentFactory;
             return panic("Cannot create audio-region on non-audio track");
         }
         const { name, duration: durationInSeconds, bpm } = sample;
-        const durationInPPQN = props.duration ?? quantizeCeil(PPQN.secondsToPulses(durationInSeconds, bpm), PPQN.SemiQuaver);
+        const pulses = PPQN.secondsToPulses(durationInSeconds, bpm);
+        const durationInPPQN = props.duration ?? (!props.disableQuantize ? quantizeRound(pulses, PPQN.SemiQuaver) : pulses);
         if (isDefined(props.warpMarkers)) {
             AudioContentHelpers.addWarpMarkers(boxGraph, playMode, props.warpMarkers);
         }
@@ -110,7 +110,8 @@ export var AudioContentFactory;
             return panic("Cannot create audio-region on non-audio track");
         }
         const { name, duration: durationInSeconds, bpm } = sample;
-        const durationInPPQN = props.duration ?? quantizeCeil(PPQN.secondsToPulses(durationInSeconds, bpm), PPQN.SemiQuaver);
+        const pulses = PPQN.secondsToPulses(durationInSeconds, bpm);
+        const durationInPPQN = props.duration ?? (!props.disableQuantize ? quantizeRound(pulses, PPQN.SemiQuaver) : pulses);
         if (isDefined(props.warpMarkers)) {
             AudioContentHelpers.addWarpMarkers(boxGraph, playMode, props.warpMarkers);
         }

package/dist/samples/SampleService.d.ts

@@ -1,5 +1,6 @@
-import { Class, Procedure } from "@opendaw/lib-std";
+import { Class } from "@opendaw/lib-std";
 import { Box } from "@opendaw/lib-box";
+import { AudioData } from "@opendaw/lib-dsp";
 import { Sample } from "@opendaw/studio-adapters";
 import { AssetService } from "../AssetService";
 export declare class SampleService extends AssetService<Sample> {
@@ -9,8 +10,9 @@ export declare class SampleService extends AssetService<Sample> {
     protected readonly nameSingular: string;
     protected readonly boxType: Class<Box>;
     protected readonly filePickerOptions: FilePickerOptions;
-    constructor(audioContext: AudioContext, onUpdate: Procedure<Sample>);
-    importFile({ uuid, name, arrayBuffer, progressHandler }: AssetService.ImportArgs): Promise<Sample>;
+    constructor(audioContext: AudioContext);
+    importRecording(audioData: AudioData, name?: string): Promise<Sample>;
+    importFile({ uuid, name, arrayBuffer, progressHandler, origin }: AssetService.ImportArgs): Promise<Sample>;
     protected collectAllFiles(): Promise<ReadonlyArray<Sample>>;
 }
 //# sourceMappingURL=SampleService.d.ts.map

package/dist/samples/SampleService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SampleService.d.ts","sourceRoot":"","sources":["../../src/samples/SampleService.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,EAAe,SAAS,EAA2B,MAAM,kBAAkB,CAAA;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAKpC,OAAO,EAAC,MAAM,EAAiB,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAO5C,qBAAa,aAAc,SAAQ,YAAY,CAAC,MAAM,CAAC;;IAMvC,QAAQ,CAAC,YAAY,EAAE,YAAY;IAL/C,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAY;IACjD,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAW;IAClD,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAe;IACrD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAiC;gBAEnE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC;IAItE,UAAU,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAgC,EAAC,EACzD,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;cAyB5C,eAAe,IAAI,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;CAkBpE"}
+{"version":3,"file":"SampleService.d.ts","sourceRoot":"","sources":["../../src/samples/SampleService.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,EAA2B,MAAM,kBAAkB,CAAA;AACxE,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AACpC,OAAO,EAAC,SAAS,EAAc,MAAM,kBAAkB,CAAA;AAIvD,OAAO,EAAC,MAAM,EAAiB,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAO5C,qBAAa,aAAc,SAAQ,YAAY,CAAC,MAAM,CAAC;;IAMvC,QAAQ,CAAC,YAAY,EAAE,YAAY;IAL/C,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAY;IACjD,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAW;IAClD,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAe;IACrD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAiC;gBAEnE,YAAY,EAAE,YAAY;IAEzC,eAAe,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,GAAE,MAAoB,GAAG,OAAO,CAAC,MAAM,CAAC;IAUlF,UAAU,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAgC,EAAE,MAAiB,EAAC,EAC5E,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;cAyB5C,eAAe,IAAI,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;CAkBpE"}

package/dist/samples/SampleService.js

@@ -1,4 +1,4 @@
-import { Arrays, isUndefined, Progress, tryCatch, UUID } from "@opendaw/lib-std";
+import { Arrays, Progress, tryCatch, UUID } from "@opendaw/lib-std";
 import { AudioData, estimateBpm } from "@opendaw/lib-dsp";
 import { Promises } from "@opendaw/lib-runtime";
 import { SamplePeaks } from "@opendaw/lib-fusion";
@@ -15,11 +15,20 @@ export class SampleService extends AssetService {
     nameSingular = "Sample";
     boxType = AudioFileBox;
     filePickerOptions = FilePickerAcceptTypes.WavFiles;
-    constructor(audioContext, onUpdate) {
-        super(onUpdate);
+    constructor(audioContext) {
+        super();
         this.audioContext = audioContext;
     }
-    async importFile({ uuid, name, arrayBuffer, progressHandler = Progress.Empty }) {
+    async importRecording(audioData, name = "Recording") {
+        const arrayBuffer = WavFile.encodeFloats({
+            frames: audioData.frames.slice(),
+            numberOfFrames: audioData.numberOfFrames,
+            numberOfChannels: audioData.numberOfChannels,
+            sampleRate: audioData.sampleRate
+        });
+        return this.importFile({ name, arrayBuffer, origin: "recording" });
+    }
+    async importFile({ uuid, name, arrayBuffer, progressHandler = Progress.Empty, origin = "import" }) {
         console.debug(`importSample '${name}' (${arrayBuffer.byteLength >> 10}kb)`);
         uuid ??= await UUID.sha256(arrayBuffer);
         const audioData = await this.#decodeAudio(arrayBuffer);
@@ -28,14 +37,14 @@ export class SampleService extends AssetService {
         const peaks = await Workers.Peak.generateAsync(progressHandler, shifts, audioData.frames, audioData.numberOfFrames, audioData.numberOfChannels);
         const meta = {
             bpm: estimateBpm(duration),
-            name: isUndefined(name) ? "Unnnamed" : name,
+            name: name ?? "Unnnamed",
             duration,
             sample_rate: audioData.sampleRate,
-            origin: "import"
+            origin
         };
         await SampleStorage.get().save({ uuid, audio: audioData, peaks, meta });
         const sample = { uuid: UUID.toString(uuid), ...meta };
-        this.onUpdate(sample);
+        this.notifier.notify(sample);
         return sample;
     }
     async collectAllFiles() {

package/dist/soundfont/SoundfontService.d.ts

@@ -1,4 +1,4 @@
-import { Class, Option, Procedure } from "@opendaw/lib-std";
+import { Class, Option } from "@opendaw/lib-std";
 import { Box } from "@opendaw/lib-box";
 import { Soundfont } from "@opendaw/studio-adapters";
 import { AssetService } from "../AssetService";
@@ -8,7 +8,7 @@ export declare class SoundfontService extends AssetService<Soundfont> {
     protected readonly nameSingular: string;
     protected readonly boxType: Class<Box>;
     protected readonly filePickerOptions: FilePickerOptions;
-    constructor(onUpdate: Procedure<Soundfont>);
+    constructor();
     get local(): Option<ReadonlyArray<Soundfont>>;
     get remote(): Option<ReadonlyArray<Soundfont>>;
     importFile({ uuid, arrayBuffer }: AssetService.ImportArgs): Promise<Soundfont>;

package/dist/soundfont/SoundfontService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SoundfontService.d.ts","sourceRoot":"","sources":["../../src/soundfont/SoundfontService.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,EAAE,MAAM,EAAS,SAAS,EAAwB,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,OAAO,EAAC,SAAS,EAAoB,MAAM,0BAA0B,CAAA;AAIrE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAG5C,qBAAa,gBAAiB,SAAQ,YAAY,CAAC,SAAS,CAAC;;IACzD,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAe;IACpD,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAc;IACrD,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAmB;IACzD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAuC;gBAKlF,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC;IAY1C,IAAI,KAAK,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAqB;IAClE,IAAI,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAsB;IAE9D,UAAU,CAAC,EAAC,IAAI,EAAE,WAAW,EAAC,EAAE,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC;cA4ClE,eAAe,IAAI,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CAKvE"}
+{"version":3,"file":"SoundfontService.d.ts","sourceRoot":"","sources":["../../src/soundfont/SoundfontService.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,EAAE,MAAM,EAA+B,MAAM,kBAAkB,CAAA;AACpF,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,OAAO,EAAC,SAAS,EAAoB,MAAM,0BAA0B,CAAA;AAIrE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAG5C,qBAAa,gBAAiB,SAAQ,YAAY,CAAC,SAAS,CAAC;;IACzD,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAe;IACpD,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAc;IACrD,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAmB;IACzD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAuC;;IAgB9F,IAAI,KAAK,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAqB;IAClE,IAAI,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAsB;IAE9D,UAAU,CAAC,EAAC,IAAI,EAAE,WAAW,EAAC,EAAE,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC;cA4ClE,eAAe,IAAI,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;CAKvE"}

package/dist/soundfont/SoundfontService.js

@@ -13,8 +13,8 @@ export class SoundfontService extends AssetService {
     filePickerOptions = FilePickerAcceptTypes.SoundfontFiles;
     #local = Option.None;
     #remote = Option.None;
-    constructor(onUpdate) {
-        super(onUpdate);
+    constructor() {
+        super();
         Promise.all([
             SoundfontStorage.get().list(),
             OpenSoundfontAPI.get().all()
@@ -64,7 +64,7 @@ export class SoundfontService extends AssetService {
         if (!list.some(other => other.uuid === soundfont.uuid)) {
             list.push(soundfont);
         }
-        this.onUpdate(soundfont);
+        this.notifier.notify(soundfont);
         updater.terminate();
         return soundfont;
     }

package/dist/ui/renderer/audio.d.ts

@@ -1,9 +1,21 @@
 import { RegionBound } from "./env";
 import { Option } from "@opendaw/lib-std";
 import { LoopableRegion, TempoMap } from "@opendaw/lib-dsp";
+import { Peaks } from "@opendaw/lib-fusion";
 import { AudioFileBoxAdapter, AudioPlayMode } from "@opendaw/studio-adapters";
 import { TimelineRange } from "../timeline/TimelineRange";
 export declare namespace AudioRenderer {
-    const render: (context: CanvasRenderingContext2D, range: TimelineRange, file: AudioFileBoxAdapter, tempoMap: TempoMap, playMode: Option<AudioPlayMode>, waveformOffset: number, gain: number, { top, bottom }: RegionBound, contentColor: string, { rawStart, resultStart, resultEnd }: LoopableRegion.LoopCycle, clip?: boolean) => void;
+    type Segment = {
+        x0: number;
+        x1: number;
+        u0: number;
+        u1: number;
+        outside: boolean;
+    };
+    interface Strategy {
+        render(context: CanvasRenderingContext2D, segments: ReadonlyArray<Segment>, peaks: Peaks, bound: RegionBound, gain: number): void;
+    }
+    const DefaultStrategy: Strategy;
+    const render: (context: CanvasRenderingContext2D, range: TimelineRange, file: AudioFileBoxAdapter, tempoMap: TempoMap, playMode: Option<AudioPlayMode>, waveformOffset: number, gain: number, bound: RegionBound, contentColor: string, { rawStart, resultStart, resultEnd }: LoopableRegion.LoopCycle, clip?: boolean, strategy?: Strategy) => void;
 }
 //# sourceMappingURL=audio.d.ts.map

package/dist/ui/renderer/audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/audio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAW,cAAc,EAAyB,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAE1F,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AAEvD,yBAAiB,aAAa,CAAC;IASpB,MAAM,MAAM,GACf,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,MAAM,mBAAmB,EACzB,UAAU,QAAQ,EAClB,UAAU,MAAM,CAAC,aAAa,CAAC,EAC/B,gBAAgB,MAAM,EACtB,MAAM,MAAM,EACZ,iBAAe,WAAW,EAC1B,cAAc,MAAM,EACpB,sCAAoC,cAAc,CAAC,SAAS,EAC5D,OAAM,OAAc,SA2VvB,CAAA;CACJ"}
+{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/audio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAW,cAAc,EAAyB,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAC1F,OAAO,EAAC,KAAK,EAAe,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AAEvD,yBAAiB,aAAa,CAAC;IAC3B,KAAY,OAAO,GAAG;QAClB,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,EAAE,EAAE,MAAM,CAAA;QACV,OAAO,EAAE,OAAO,CAAA;KACnB,CAAA;IAED,UAAiB,QAAQ;QACrB,MAAM,CAAC,OAAO,EAAE,wBAAwB,EACjC,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,EAChC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;KAC7B;IAEM,MAAM,eAAe,EAAE,QAyB7B,CAAA;IAEM,MAAM,MAAM,GAAI,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,MAAM,mBAAmB,EACzB,UAAU,QAAQ,EAClB,UAAU,MAAM,CAAC,aAAa,CAAC,EAC/B,gBAAgB,MAAM,EACtB,MAAM,MAAM,EACZ,OAAO,WAAW,EAClB,cAAc,MAAM,EACpB,sCAAoC,cAAc,CAAC,SAAS,EAC5D,OAAM,OAAc,EACpB,WAAU,QAA0B,SAyU1D,CAAA;CACJ"}

package/dist/ui/renderer/audio.js

@@ -2,17 +2,39 @@ import { dbToGain, PPQN, TempoChangeGrid } from "@opendaw/lib-dsp";
 import { PeaksPainter } from "@opendaw/lib-fusion";
 export var AudioRenderer;
 (function (AudioRenderer) {
-    AudioRenderer.render = (context, range, file, tempoMap, playMode, waveformOffset, gain, { top, bottom }, contentColor, { rawStart, resultStart, resultEnd }, clip = true) => {
+    AudioRenderer.DefaultStrategy = {
+        render(context, segments, peaks, { top, bottom }, gain) {
+            const dpr = devicePixelRatio;
+            const actualTop = top * dpr;
+            const actualBottom = bottom * dpr;
+            const height = actualBottom - actualTop;
+            const numberOfChannels = peaks.numChannels;
+            const peaksHeight = Math.floor((height - 4) / numberOfChannels);
+            const scale = dbToGain(-gain);
+            for (const { x0, x1, u0, u1, outside } of segments) {
+                context.globalAlpha = outside ? 0.25 : 1.0;
+                for (let channel = 0; channel < numberOfChannels; channel++) {
+                    PeaksPainter.renderPixelStrips(context, peaks, channel, {
+                        u0,
+                        u1,
+                        v0: -scale,
+                        v1: +scale,
+                        x0,
+                        x1,
+                        y0: 3 + actualTop + channel * peaksHeight,
+                        y1: 3 + actualTop + (channel + 1) * peaksHeight
+                    });
+                }
+            }
+        }
+    };
+    AudioRenderer.render = (context, range, file, tempoMap, playMode, waveformOffset, gain, bound, contentColor, { rawStart, resultStart, resultEnd }, clip = true, strategy = AudioRenderer.DefaultStrategy) => {
         if (file.peaks.isEmpty()) {
             return;
         }
         const peaks = file.peaks.unwrap();
         const durationInSeconds = file.endInSeconds - file.startInSeconds;
         const numFrames = peaks.numFrames;
-        const numberOfChannels = peaks.numChannels;
-        const ht = bottom - top;
-        const peaksHeight = Math.floor((ht - 4) / numberOfChannels);
-        const scale = dbToGain(-gain);
         const segments = [];
         if (playMode.nonEmpty()) {
             const { warpMarkers } = playMode.unwrap();
@@ -258,20 +280,6 @@ export var AudioRenderer;
             }
         }
         context.fillStyle = contentColor;
-        for (const { x0, x1, u0, u1, outside } of segments) {
-            context.globalAlpha = outside && !clip ? 0.25 : 1.0;
-            for (let channel = 0; channel < numberOfChannels; channel++) {
-                PeaksPainter.renderBlocks(context, peaks, channel, {
-                    u0,
-                    u1,
-                    v0: -scale,
-                    v1: +scale,
-                    x0,
-                    x1,
-                    y0: 3 + top + channel * peaksHeight,
-                    y1: 3 + top + (channel + 1) * peaksHeight
-                });
-            }
-        }
+        strategy.render(context, segments, peaks, bound, gain);
     };
 })(AudioRenderer || (AudioRenderer = {}));

package/dist/ui/renderer/fading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fading.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/fading.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAEjC,yBAAiB,mBAAmB,CAAC;IAC1B,MAAM,MAAM,GAAI,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,QAAQ,cAAc,CAAC,MAAM,EAC7B,iBAAe,WAAW,EAC1B,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,OAAO,MAAM,KAAG,IAkDtC,CAAA;CACJ"}
+{"version":3,"file":"fading.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/fading.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAEjC,yBAAiB,mBAAmB,CAAC;IAC1B,MAAM,MAAM,GAAI,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,QAAQ,cAAc,CAAC,MAAM,EAC7B,iBAAe,WAAW,EAC1B,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,OAAO,MAAM,KAAG,IAqDtC,CAAA;CACJ"}

package/dist/ui/renderer/fading.js

@@ -2,6 +2,9 @@ import { Curve, TAU } from "@opendaw/lib-std";
 export var AudioFadingRenderer;
 (function (AudioFadingRenderer) {
     AudioFadingRenderer.render = (context, range, fading, { top, bottom }, startPPQN, endPPQN, color) => {
+        const dpr = devicePixelRatio;
+        const actualTop = top * dpr;
+        const actualBottom = bottom * dpr;
         const { inSlope: fadeInSlope, outSlope: fadeOutSlope } = fading;
         const duration = endPPQN - startPPQN;
         const totalFading = fading.in + fading.out;
@@ -10,46 +13,46 @@ export var AudioFadingRenderer;
         const fadeOut = fading.out * scale;
         context.strokeStyle = color;
         context.fillStyle = "rgba(0,0,0,0.25)";
-        context.lineWidth = devicePixelRatio;
+        context.lineWidth = dpr;
         if (fadeIn > 0) {
             const fadeInEndPPQN = startPPQN + fadeIn;
-            const x0 = range.unitToX(startPPQN) * devicePixelRatio;
-            const x1 = range.unitToX(fadeInEndPPQN) * devicePixelRatio;
+            const x0 = range.unitToX(startPPQN) * dpr;
+            const x1 = range.unitToX(fadeInEndPPQN) * dpr;
             const xn = x1 - x0;
             const path = new Path2D();
-            path.moveTo(x0, bottom);
+            path.moveTo(x0, actualBottom);
             let x = x0;
-            Curve.run(fadeInSlope, xn, bottom, top, y => path.lineTo(++x, y));
-            path.lineTo(x1, top);
+            Curve.run(fadeInSlope, xn, actualBottom, actualTop, y => path.lineTo(++x, y));
+            path.lineTo(x1, actualTop);
             context.stroke(path);
-            path.lineTo(x0, top);
-            path.lineTo(x0, bottom);
+            path.lineTo(x0, actualTop);
+            path.lineTo(x0, actualBottom);
             context.fill(path);
         }
         if (fadeOut > 0) {
-            const x0 = range.unitToX(endPPQN - fadeOut) * devicePixelRatio;
-            const x1 = range.unitToX(endPPQN) * devicePixelRatio;
+            const x0 = range.unitToX(endPPQN - fadeOut) * dpr;
+            const x1 = range.unitToX(endPPQN) * dpr;
             const xn = x1 - x0;
             const path = new Path2D();
-            path.moveTo(x0, top);
+            path.moveTo(x0, actualTop);
             let x = x0;
-            Curve.run(fadeOutSlope, xn, top, bottom, y => path.lineTo(++x, y));
-            path.lineTo(x1, bottom);
+            Curve.run(fadeOutSlope, xn, actualTop, actualBottom, y => path.lineTo(++x, y));
+            path.lineTo(x1, actualBottom);
             context.strokeStyle = color;
             context.stroke(path);
-            path.lineTo(x1, top);
-            path.lineTo(x0, top);
+            path.lineTo(x1, actualTop);
+            path.lineTo(x0, actualTop);
             context.fill(path);
         }
-        const handleRadius = 1.5 * devicePixelRatio;
-        const x0 = Math.max(range.unitToX(startPPQN + fadeIn), range.unitToX(startPPQN)) * devicePixelRatio;
-        const x1 = Math.min(range.unitToX(endPPQN - fadeOut), range.unitToX(endPPQN)) * devicePixelRatio;
+        const handleRadius = 1.5 * dpr;
+        const x0 = Math.max(range.unitToX(startPPQN + fadeIn), range.unitToX(startPPQN)) * dpr;
+        const x1 = Math.min(range.unitToX(endPPQN - fadeOut), range.unitToX(endPPQN)) * dpr;
         context.fillStyle = color;
         context.beginPath();
-        context.arc(x0, top, handleRadius, 0, TAU);
+        context.arc(x0, actualTop, handleRadius, 0, TAU);
         context.fill();
         context.beginPath();
-        context.arc(x1, top, handleRadius, 0, TAU);
+        context.arc(x1, actualTop, handleRadius, 0, TAU);
         context.fill();
     };
 })(AudioFadingRenderer || (AudioFadingRenderer = {}));

package/dist/ui/renderer/index.d.ts

@@ -2,5 +2,6 @@ export * from "./audio";
 export * from "./env";
 export * from "./fading";
 export * from "./notes";
+export * from "./riffle";
 export * from "./value";
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/renderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}

package/dist/ui/renderer/index.js

@@ -2,4 +2,5 @@ export * from "./audio";
 export * from "./env";
 export * from "./fading";
 export * from "./notes";
+export * from "./riffle";
 export * from "./value";

package/dist/ui/renderer/notes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notes.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/notes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAEtD,yBAAiB,aAAa,CAAC;IACpB,MAAM,MAAM,GAAI,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,YAAY,6BAA6B,EACzC,iBAAe,WAAW,EAC1B,cAAc,MAAM,EACpB,mDAAiD,cAAc,CAAC,SAAS,SAgB/F,CAAA;CACJ"}
+{"version":3,"file":"notes.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/notes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,6BAA6B,EAAC,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAEtD,yBAAiB,aAAa,CAAC;IACpB,MAAM,MAAM,GAAI,SAAS,wBAAwB,EACjC,OAAO,aAAa,EACpB,YAAY,6BAA6B,EACzC,iBAAe,WAAW,EAC1B,cAAc,MAAM,EACpB,mDAAiD,cAAc,CAAC,SAAS,SAmB/F,CAAA;CACJ"}

package/dist/ui/renderer/notes.js

@@ -1,7 +1,10 @@
 export var NotesRenderer;
 (function (NotesRenderer) {
     NotesRenderer.render = (context, range, collection, { top, bottom }, contentColor, { rawStart, regionStart, resultStart, resultEnd }) => {
-        const height = bottom - top;
+        const dpr = devicePixelRatio;
+        const actualTop = top * dpr;
+        const actualBottom = bottom * dpr;
+        const height = actualBottom - actualTop;
         context.fillStyle = contentColor;
         const padding = 8;
         const noteHeight = 5;
@@ -13,9 +16,9 @@ export var NotesRenderer;
                 continue;
             }
             const complete = Math.min(rawStart + note.complete, resultEnd);
-            const x0 = Math.floor(range.unitToX(position) * devicePixelRatio);
-            const x1 = Math.floor(range.unitToX(complete) * devicePixelRatio);
-            const y = top + padding + Math.floor(note.normalizedPitch() * (height - (padding * 2 + noteHeight)));
+            const x0 = Math.floor(range.unitToX(position) * dpr);
+            const x1 = Math.floor(range.unitToX(complete) * dpr);
+            const y = actualTop + padding + Math.floor(note.normalizedPitch() * (height - (padding * 2 + noteHeight)));
             context.fillRect(x0, y, Math.max(1, x1 - x0), noteHeight);
         }
     };

package/dist/ui/renderer/riffle.d.ts

@@ -0,0 +1,3 @@
+import { AudioRenderer } from "./audio";
+export declare const RiffleStrategy: AudioRenderer.Strategy;
+//# sourceMappingURL=riffle.d.ts.map

package/dist/ui/renderer/riffle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"riffle.d.ts","sourceRoot":"","sources":["../../../src/ui/renderer/riffle.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,QAuF1C,CAAA"}

package/dist/ui/renderer/riffle.js

@@ -0,0 +1,106 @@
+import { dbToGain } from "@opendaw/lib-dsp";
+import { Peaks } from "@opendaw/lib-fusion";
+export const RiffleStrategy = {
+    render(context, segments, peaks, { top, bottom }, gain) {
+        if (segments.length === 0) {
+            return;
+        }
+        const dpr = devicePixelRatio;
+        const actualTop = top * dpr;
+        const actualBottom = bottom * dpr;
+        const height = actualBottom - actualTop;
+        const numberOfChannels = peaks.numChannels;
+        const peaksHeight = Math.floor(height / numberOfChannels);
+        const gainScale = dbToGain(-gain);
+        const blockWidth = 3 * dpr;
+        // noinspection PointlessArithmeticExpressionJS
+        const gap = dpr * 1;
+        const pixelsPerBlock = blockWidth + gap;
+        let globalX0 = Infinity;
+        let globalX1 = -Infinity;
+        for (const { x0, x1 } of segments) {
+            globalX0 = Math.min(globalX0, Math.floor(x0));
+            globalX1 = Math.max(globalX1, Math.floor(x1));
+        }
+        if (globalX0 >= globalX1) {
+            return;
+        }
+        const seg0 = segments[0];
+        const pxPerUnit = (seg0.x1 - seg0.x0) / (seg0.u1 - seg0.u0);
+        const anchorX = seg0.x0 - seg0.u0 * pxPerUnit;
+        const gridPhase = ((globalX0 - anchorX) % pixelsPerBlock + pixelsPerBlock) % pixelsPerBlock;
+        const firstBlockX = globalX0 - gridPhase;
+        for (let channel = 0; channel < numberOfChannels; channel++) {
+            const data = peaks.data[channel];
+            const channelY0 = actualTop + channel * peaksHeight;
+            const channelY1 = actualTop + (channel + 1) * peaksHeight;
+            const centerY = (channelY0 + channelY1) / 2;
+            const yScale = (channelY1 - channelY0 - 1.0) / (gainScale * 2);
+            for (let bx = firstBlockX; bx < globalX1; bx += pixelsPerBlock) {
+                const bxEnd = bx + pixelsPerBlock;
+                let blockMin = 0.0;
+                let blockMax = 0.0;
+                let blockAlpha = 0.0;
+                let hasData = false;
+                for (const seg of segments) {
+                    const segX0 = Math.floor(seg.x0);
+                    const segX1 = Math.floor(seg.x1);
+                    if (segX0 >= bxEnd || segX1 <= bx) {
+                        continue;
+                    }
+                    const pixelSpan = seg.x1 - seg.x0;
+                    if (pixelSpan <= 0) {
+                        continue;
+                    }
+                    const uPerPx = (seg.u1 - seg.u0) / pixelSpan;
+                    const stage = peaks.nearest(uPerPx);
+                    if (stage === null) {
+                        continue;
+                    }
+                    const uPerPeak = stage.unitsEachPeak();
+                    const peaksPerPx = uPerPx / uPerPeak;
+                    const overflow = seg.x0 - segX0;
+                    const fromAtX0 = (seg.u0 - overflow * uPerPx) / uPerPx * peaksPerPx;
+                    const overlapStart = Math.max(bx, segX0);
+                    const overlapEnd = Math.min(bxEnd, segX1);
+                    const fromPeak = fromAtX0 + (overlapStart - segX0) * peaksPerPx;
+                    const toPeak = fromAtX0 + (overlapEnd - segX0) * peaksPerPx;
+                    const idxFrom = Math.max(0, Math.floor(fromPeak));
+                    const idxTo = Math.floor(toPeak);
+                    for (let idx = idxFrom; idx < idxTo; idx++) {
+                        const bits = data[stage.dataOffset + idx];
+                        blockMin = Math.min(Peaks.unpack(bits, 0), blockMin);
+                        blockMax = Math.max(Peaks.unpack(bits, 1), blockMax);
+                    }
+                    if (idxFrom < idxTo) {
+                        hasData = true;
+                    }
+                    blockAlpha = Math.max(blockAlpha, seg.outside ? 0.25 : 1.0);
+                }
+                if (!hasData) {
+                    continue;
+                }
+                context.globalAlpha = blockAlpha;
+                const x = Math.max(bx, globalX0);
+                const w = Math.min(blockWidth, Math.min(bxEnd, globalX1) - x);
+                if (w <= 0) {
+                    continue;
+                }
+                const yMin = channelY0 + Math.floor((blockMin + gainScale) * yScale);
+                const yMax = channelY0 + Math.floor((blockMax + gainScale) * yScale);
+                const ry0 = Math.max(channelY0, Math.min(yMin, yMax));
+                const ry1 = Math.min(channelY1, Math.max(yMin, yMax));
+                const finalY1 = ry0 === ry1 ? ry0 + 1 : ry1;
+                const maxDist = Math.max(centerY - ry0, finalY1 - centerY);
+                const symY0 = centerY - maxDist;
+                const symY1 = centerY + maxDist;
+                const h = symY1 - symY0;
+                const r = Math.min(dpr, w / 2, h / 2);
+                context.beginPath();
+                context.roundRect(x, symY0, w, h, r);
+                context.fill();
+            }
+        }
+        context.globalAlpha = 1.0;
+    }
+};