@dawcore/components 0.0.19 → 0.0.20

package/dist/index.js

@@ -230,7 +230,7 @@ var DawTrackElement = class extends import_lit2.LitElement {
     this.pan = 0;
     this.muted = false;
     this.soloed = false;
-    this.renderMode = "waveform";
+    this._renderMode = "waveform";
     this.spectrogramConfig = null;
     this.trackId = crypto.randomUUID();
     // Track removal is detected by the editor's MutationObserver,
@@ -238,6 +238,21 @@ var DawTrackElement = class extends import_lit2.LitElement {
     // cannot bubble events to ancestors).
     this._hasRendered = false;
   }
+  get renderMode() {
+    return this._renderMode;
+  }
+  set renderMode(value) {
+    const old = this._renderMode;
+    let next = value;
+    if (next === "both") {
+      console.warn(
+        `[dawcore] <daw-track render-mode="both"> is not yet supported; falling back to 'spectrogram'`
+      );
+      next = "spectrogram";
+    }
+    this._renderMode = next;
+    this.requestUpdate("renderMode", old);
+  }
   // Light DOM so <daw-clip> children are queryable.
   createRenderRoot() {
     return this;
@@ -300,8 +315,8 @@ __decorateClass([
   (0, import_decorators2.property)({ type: Boolean })
 ], DawTrackElement.prototype, "soloed", 2);
 __decorateClass([
-  (0, import_decorators2.property)({ attribute: "render-mode" })
-], DawTrackElement.prototype, "renderMode", 2);
+  (0, import_decorators2.property)({ attribute: "render-mode", noAccessor: true })
+], DawTrackElement.prototype, "renderMode", 1);
 __decorateClass([
   (0, import_decorators2.property)({ attribute: false })
 ], DawTrackElement.prototype, "spectrogramConfig", 2);
@@ -1246,7 +1261,7 @@ function isDomClip(desc) {
 }
 
 // src/elements/daw-editor.ts
-var import_core8 = require("@waveform-playlist/core");
+var import_core9 = require("@waveform-playlist/core");
 
 // src/workers/peaksWorker.ts
 var import_waveform_data = __toESM(require("waveform-data"));
@@ -2774,15 +2789,7 @@ var RecordingController = class {
 
 // src/controllers/spectrogram-controller.ts
 var import_spectrogram = require("@dawcore/spectrogram");
-var LIBRARY_DEFAULTS = {
-  fftSize: 2048,
-  windowFunction: "hann",
-  frequencyScale: "mel",
-  minFrequency: 0,
-  gainDb: 20,
-  rangeDb: 80
-};
-var LIBRARY_DEFAULT_COLOR_MAP = "viridis";
+var import_core4 = require("@waveform-playlist/core");
 var SpectrogramController = class {
   constructor(host, workerFactory) {
     this.orchestrator = null;
@@ -2856,7 +2863,21 @@ var SpectrogramController = class {
         const detail = e.detail;
         this.host.dispatchEvent(
           new CustomEvent("daw-spectrogram-ready", {
-            detail,
+            detail: { trackId: detail.trackId, generation: detail.generation },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      this.orchestrator.addEventListener("viewport-error", (e) => {
+        const detail = e.detail;
+        this.host.dispatchEvent(
+          new CustomEvent("daw-spectrogram-error", {
+            detail: {
+              trackId: detail.trackId,
+              generation: detail.generation,
+              error: detail.error
+            },
             bubbles: true,
             composed: true
           })
@@ -2877,18 +2898,18 @@ var SpectrogramController = class {
       track = c;
       break;
     }
-    return { ...LIBRARY_DEFAULTS, ...this.editorConfig ?? {}, ...track ?? {} };
+    return { ...import_core4.SPECTROGRAM_DEFAULTS, ...this.editorConfig ?? {}, ...track ?? {} };
   }
   mergedColorMap() {
     for (const c of this.trackColorMaps.values()) {
-      return c ?? LIBRARY_DEFAULT_COLOR_MAP;
+      return c ?? import_core4.DEFAULT_SPECTROGRAM_COLOR_MAP;
     }
-    return this.editorColorMap ?? LIBRARY_DEFAULT_COLOR_MAP;
+    return this.editorColorMap ?? import_core4.DEFAULT_SPECTROGRAM_COLOR_MAP;
   }
 };
 
 // src/interactions/pointer-handler.ts
-var import_core4 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 
 // src/interactions/constants.ts
 var DRAG_THRESHOLD = 3;
@@ -2998,10 +3019,10 @@ var PointerHandler = class {
     const h = this._host;
     if (h.scaleMode === "beats") {
       let tick = px * h.ticksPerPixel;
-      tick = (0, import_core4.snapTickToGrid)(tick, h.snapTo, h._meterEntries, h.ppqn);
+      tick = (0, import_core5.snapTickToGrid)(tick, h.snapTo, h._meterEntries, h.ppqn);
       return h._ticksToSeconds(tick);
     }
-    return (0, import_core4.pixelsToSeconds)(px, h.samplesPerPixel, h.effectiveSampleRate);
+    return (0, import_core5.pixelsToSeconds)(px, h.samplesPerPixel, h.effectiveSampleRate);
   }
   _timeToPx(time) {
     const h = this._host;
@@ -3093,7 +3114,7 @@ var PointerHandler = class {
 };
 
 // src/interactions/clip-pointer-handler.ts
-var import_core5 = require("@waveform-playlist/core");
+var import_core6 = require("@waveform-playlist/core");
 var ClipPointerHandler = class {
   constructor(host) {
     this._mode = null;
@@ -3127,7 +3148,7 @@ var ClipPointerHandler = class {
       const anchorTick = h._secondsToTicks(anchorSeconds);
       const deltaTicks = totalDeltaPx * h.ticksPerPixel;
       const targetTick = anchorTick + deltaTicks;
-      const snappedTick = h.snapTo !== "off" ? (0, import_core5.snapTickToGrid)(targetTick, h.snapTo, h._meterEntries, h.ppqn) : targetTick;
+      const snappedTick = h.snapTo !== "off" ? (0, import_core6.snapTickToGrid)(targetTick, h.snapTo, h._meterEntries, h.ppqn) : targetTick;
       const snappedSeconds = h._ticksToSeconds(snappedTick);
       const snappedSample = Math.round(snappedSeconds * h.effectiveSampleRate);
       return snappedSample - anchorSample;
@@ -3390,7 +3411,7 @@ var ClipPointerHandler = class {
 };
 
 // src/interactions/file-loader.ts
-var import_core6 = require("@waveform-playlist/core");
+var import_core7 = require("@waveform-playlist/core");
 async function loadFiles(host, files) {
   if (!files) {
     console.warn("[dawcore] loadFiles called with null/undefined");
@@ -3412,7 +3433,7 @@ async function loadFiles(host, files) {
       host._audioCache.delete(blobUrl);
       host._resolvedSampleRate = audioBuffer.sampleRate;
       const name = file.name.replace(/\.\w+$/, "");
-      const clip = (0, import_core6.createClip)({
+      const clip = (0, import_core7.createClip)({
         audioBuffer,
         startSample: 0,
         durationSamples: audioBuffer.length,
@@ -3436,7 +3457,7 @@ async function loadFiles(host, files) {
       );
       host._peaksData = new Map(host._peaksData).set(clip.id, peakData);
       const trackId = crypto.randomUUID();
-      const track = (0, import_core6.createTrack)({ name, clips: [clip] });
+      const track = (0, import_core7.createTrack)({ name, clips: [clip] });
       track.id = trackId;
       host._tracks = new Map(host._tracks).set(trackId, {
         name,
@@ -3598,7 +3619,7 @@ function stringifyReason(reason) {
 }
 
 // src/interactions/recording-clip.ts
-var import_core7 = require("@waveform-playlist/core");
+var import_core8 = require("@waveform-playlist/core");
 function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamples = 0) {
   let trimmedBuf = buf;
   if (offsetSamples > 0 && offsetSamples < buf.length) {
@@ -3613,7 +3634,7 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
     }
     trimmedBuf = trimmed;
   }
-  const clip = (0, import_core7.createClip)({
+  const clip = (0, import_core8.createClip)({
     audioBuffer: trimmedBuf,
     startSample,
     durationSamples: durSamples,
@@ -3936,7 +3957,10 @@ var DawEditorElement = class extends import_lit14.LitElement {
      * `_selectedTrackId`, etc.) — most of which don't affect the spectrogram
      * viewport. Skip the cross-controller call when nothing changed.
      *
-     * The orchestrator dedupes too, but this avoids the call entirely.
+     * The orchestrator dedupes identical viewports too, so removing this cache
+     * wouldn't change observable behavior — but it would push a fresh
+     * `setViewport` call (with object allocation) into every Lit reactive
+     * update for properties unrelated to the viewport.
      */
     this._lastSpectrogramViewport = null;
     // --- Track Events ---
@@ -4179,9 +4203,10 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this._spectrogramController?.unregisterCanvas(canvasId);
   }
   /**
-   * Push a clip's decoded audio into the spectrogram controller. No-op
-   * unless the track is in spectrogram render-mode and the controller
-   * already exists (it bootstraps from canvas registration).
+   * Forward a clip's AudioBuffer to the spectrogram controller if the parent
+   * track is in spectrogram render-mode. Eagerly creates the controller via
+   * `_ensureSpectrogramController` so the audio data is queued for the first
+   * render — even if no canvases have been registered yet.
    */
   _maybeRegisterSpectrogramClipAudio(trackId, clip) {
     const descriptor = this._tracks.get(trackId);
@@ -4632,7 +4657,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     let clip;
     if (waveformData) {
       const wdRate = waveformData.sample_rate;
-      clip = (0, import_core8.createClip)({
+      clip = (0, import_core9.createClip)({
         audioBuffer,
         waveformData,
         startSample: Math.round(clipDesc.start * wdRate),
@@ -4645,7 +4670,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
       });
       this._peakPipeline.cacheWaveformData(audioBuffer, waveformData);
     } else {
-      clip = (0, import_core8.createClipFromSeconds)({
+      clip = (0, import_core9.createClipFromSeconds)({
         audioBuffer,
         startTime: clipDesc.start,
         duration: clipDesc.duration || audioBuffer.duration,
@@ -4725,7 +4750,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     const noteSpanSeconds = notes.length ? notes.reduce((max, n) => Math.max(max, n.time + n.duration), 0) : 0;
     const sourceDurationSamples = Math.ceil(Math.max(noteSpanSeconds, clipDesc.duration, 1) * sr);
     const requestedDurationSamples = clipDesc.duration > 0 ? Math.round(clipDesc.duration * sr) : sourceDurationSamples;
-    const clip = (0, import_core8.createClip)({
+    const clip = (0, import_core9.createClip)({
       startSample: Math.round(clipDesc.start * sr),
       durationSamples: requestedDurationSamples,
       offsetSamples: Math.round(clipDesc.offset * sr),
@@ -4934,7 +4959,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           const waveformData = await waveformDataPromise;
           if (waveformData) {
             const wdRate = waveformData.sample_rate;
-            const clip2 = (0, import_core8.createClip)({
+            const clip2 = (0, import_core9.createClip)({
               waveformData,
               startSample: Math.round(clipDesc.start * wdRate),
               durationSamples: Math.round((clipDesc.duration || waveformData.duration) * wdRate),
@@ -4959,7 +4984,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
             });
             this._peaksData = new Map(this._peaksData).set(clip2.id, peakData);
             this._minSamplesPerPixel = Math.max(this._minSamplesPerPixel, waveformData.scale);
-            const previewTrack = (0, import_core8.createTrack)({
+            const previewTrack = (0, import_core9.createTrack)({
               name: descriptor.name,
               clips: [clip2],
               volume: descriptor.volume,
@@ -5015,7 +5040,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           }
         }
       }
-      const track = (0, import_core8.createTrack)({
+      const track = (0, import_core9.createTrack)({
         name: descriptor.name,
         clips,
         volume: descriptor.volume,
@@ -5298,6 +5323,13 @@ var DawEditorElement = class extends import_lit14.LitElement {
     }
     const oldDesc = this._tracks.get(trackId);
     if (!oldDesc) return;
+    let normalizedRenderMode = partial.renderMode;
+    if (normalizedRenderMode === "both") {
+      console.warn(
+        `[dawcore] render-mode="both" is not yet supported; falling back to 'spectrogram'`
+      );
+      normalizedRenderMode = "spectrogram";
+    }
     const newDesc = {
       ...oldDesc,
       ...partial.name !== void 0 && { name: partial.name },
@@ -5305,7 +5337,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
       ...partial.pan !== void 0 && { pan: partial.pan },
       ...partial.muted !== void 0 && { muted: partial.muted },
       ...partial.soloed !== void 0 && { soloed: partial.soloed },
-      ...partial.renderMode !== void 0 && { renderMode: partial.renderMode }
+      ...normalizedRenderMode !== void 0 && { renderMode: normalizedRenderMode }
     };
     this._tracks = new Map(this._tracks).set(trackId, newDesc);
     if (this._engine) {
@@ -5793,7 +5825,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           width = Math.round(endTick / this.ticksPerPixel) - clipLeft;
         } else {
           clipLeft = Math.floor(clip.startSample / spp);
-          width = (0, import_core8.clipPixelWidth)(clip.startSample, clip.durationSamples, spp);
+          width = (0, import_core9.clipPixelWidth)(clip.startSample, clip.durationSamples, spp);
         }
         let clipSegments;
         let segmentChannels;
@@ -6415,7 +6447,7 @@ DawRecordButtonElement = __decorateClass([
 // src/elements/daw-keyboard-shortcuts.ts
 var import_lit18 = require("lit");
 var import_decorators16 = require("lit/decorators.js");
-var import_core9 = require("@waveform-playlist/core");
+var import_core10 = require("@waveform-playlist/core");
 var DawKeyboardShortcutsElement = class extends import_lit18.LitElement {
   constructor() {
     super(...arguments);
@@ -6435,7 +6467,7 @@ var DawKeyboardShortcutsElement = class extends import_lit18.LitElement {
       const shortcuts = this.shortcuts;
       if (shortcuts.length === 0) return;
       try {
-        (0, import_core9.handleKeyboardEvent)(e, shortcuts, true);
+        (0, import_core10.handleKeyboardEvent)(e, shortcuts, true);
       } catch (err) {
         console.warn("[dawcore] Keyboard shortcut failed (key=" + e.key + "): " + String(err));
         const target = this._editor ?? this;
@@ -6602,6 +6634,7 @@ var DawSpectrogramElement = class extends import_lit19.LitElement {
     this.originX = 0;
     this._canvases = [];
     this._registeredCanvasIds = [];
+    this._warnedNoHost = false;
   }
   get samplesPerPixel() {
     return this._samplesPerPixel;
@@ -6668,7 +6701,15 @@ var DawSpectrogramElement = class extends import_lit19.LitElement {
   }
   _registerCanvases() {
     const editor = this._findHostEditor();
-    if (!editor || typeof editor._spectrogramRegisterCanvas !== "function") return;
+    if (!editor || typeof editor._spectrogramRegisterCanvas !== "function") {
+      if (!this._warnedNoHost) {
+        this._warnedNoHost = true;
+        console.warn(
+          "[dawcore] <daw-spectrogram> (clip " + this.clipId + ") could not find host <daw-editor>. Canvases will not render. Ensure the element is mounted inside a <daw-editor>."
+        );
+      }
+      return;
+    }
     for (let i = 0; i < this._canvases.length; i++) {
       const canvas = this._canvases[i];
       const canvasId = this.clipId + "-ch" + this.channelIndex + "-chunk" + i;