@dawcore/components 0.0.2 → 0.0.4

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   ClipPointerHandler: () => ClipPointerHandler,
   DawClipElement: () => DawClipElement,
   DawEditorElement: () => DawEditorElement,
+  DawKeyboardShortcutsElement: () => DawKeyboardShortcutsElement,
   DawPauseButtonElement: () => DawPauseButtonElement,
   DawPlayButtonElement: () => DawPlayButtonElement,
   DawPlayheadElement: () => DawPlayheadElement,
@@ -1133,6 +1134,13 @@ var PeakPipeline = class {
     this._baseScale = baseScale;
     this._bits = bits;
   }
+  /**
+   * Inject externally-loaded WaveformData (e.g., from a .dat file) into the cache.
+   * Prevents worker generation for this AudioBuffer on all subsequent calls.
+   */
+  cacheWaveformData(audioBuffer, waveformData) {
+    this._cache.set(audioBuffer, waveformData);
+  }
   /**
    * Generate PeakData for a clip from its AudioBuffer.
    * Uses cached WaveformData when available; otherwise generates via worker.
@@ -1140,8 +1148,9 @@ var PeakPipeline = class {
    */
   async generatePeaks(audioBuffer, samplesPerPixel, isMono, offsetSamples, durationSamples) {
     const waveformData = await this._getWaveformData(audioBuffer);
+    const effectiveScale = this._clampScale(waveformData, samplesPerPixel);
     try {
-      return extractPeaks(waveformData, samplesPerPixel, isMono, offsetSamples, durationSamples);
+      return extractPeaks(waveformData, effectiveScale, isMono, offsetSamples, durationSamples);
     } catch (err) {
       console.warn("[dawcore] extractPeaks failed: " + String(err));
       throw err;
@@ -1149,23 +1158,29 @@ var PeakPipeline = class {
   }
   /**
    * Re-extract peaks for all clips at a new zoom level using cached WaveformData.
-   * Only works for zoom levels coarser than (or equal to) the cached base scale.
-   * Returns a new Map of clipId → PeakData. Clips without cached data or where
-   * the target scale is finer than the cached base are skipped.
+   * Returns a new Map of clipId → PeakData. Clips without cached data are skipped.
+   * When the requested scale is finer than cached data, peaks are clamped to the
+   * cached scale and a single summary warning is logged.
    */
   reextractPeaks(clipBuffers, samplesPerPixel, isMono, clipOffsets) {
     const result = /* @__PURE__ */ new Map();
+    let clampedCount = 0;
+    let clampedScale = 0;
     for (const [clipId, audioBuffer] of clipBuffers) {
       const cached = this._cache.get(audioBuffer);
       if (cached) {
-        if (samplesPerPixel < cached.scale) continue;
+        const effectiveScale = this._clampScale(cached, samplesPerPixel, false);
+        if (effectiveScale !== samplesPerPixel) {
+          clampedCount++;
+          clampedScale = effectiveScale;
+        }
         try {
           const offsets = clipOffsets?.get(clipId);
           result.set(
             clipId,
             extractPeaks(
               cached,
-              samplesPerPixel,
+              effectiveScale,
               isMono,
               offsets?.offsetSamples,
               offsets?.durationSamples
@@ -1176,8 +1191,42 @@ var PeakPipeline = class {
         }
       }
     }
+    if (clampedCount > 0) {
+      console.warn(
+        "[dawcore] Requested zoom " + samplesPerPixel + " spp is finer than pre-computed peaks (" + clampedScale + " spp) \u2014 " + clampedCount + " clip(s) using available resolution"
+      );
+    }
     return result;
   }
+  /**
+   * Clamp requested scale to cached WaveformData scale.
+   * WaveformData.resample() can only go coarser — if the requested zoom is
+   * finer than the cached data, use the cached scale. Set warn=true to log
+   * (default); reextractPeaks passes false and logs a single summary instead.
+   */
+  _clampScale(waveformData, requestedScale, warn = true) {
+    if (requestedScale < waveformData.scale) {
+      if (warn) {
+        console.warn(
+          "[dawcore] Requested zoom " + requestedScale + " spp is finer than pre-computed peaks (" + waveformData.scale + " spp) \u2014 using available resolution"
+        );
+      }
+      return waveformData.scale;
+    }
+    return requestedScale;
+  }
+  /**
+   * Return the coarsest (largest) scale among cached WaveformData entries
+   * that correspond to the given clip buffers. Returns 0 if none are cached.
+   */
+  getMaxCachedScale(clipBuffers) {
+    let max = 0;
+    for (const audioBuffer of clipBuffers.values()) {
+      const cached = this._cache.get(audioBuffer);
+      if (cached && cached.scale > max) max = cached.scale;
+    }
+    return max;
+  }
   terminate() {
     this._worker?.terminate();
     this._worker = null;
@@ -2229,6 +2278,13 @@ var ClipPointerHandler = class {
     this._isDragging = false;
     this._lastDeltaPx = 0;
     this._cumulativeDeltaSamples = 0;
+    if (this._host.engine) {
+      this._host.engine.beginTransaction();
+    } else {
+      console.warn(
+        "[dawcore] beginDrag: engine unavailable, drag mutations will not be grouped for undo"
+      );
+    }
     if (mode === "trim-left" || mode === "trim-right") {
       const container = this._host.shadowRoot?.querySelector(
         `.clip-container[data-clip-id="${clipId}"]`
@@ -2267,8 +2323,8 @@ var ClipPointerHandler = class {
       const incrementalDeltaPx = totalDeltaPx - this._lastDeltaPx;
       this._lastDeltaPx = totalDeltaPx;
       const incrementalDeltaSamples = Math.round(incrementalDeltaPx * this._host.samplesPerPixel);
-      this._cumulativeDeltaSamples += incrementalDeltaSamples;
-      engine.moveClip(this._trackId, this._clipId, incrementalDeltaSamples, true);
+      const applied = engine.moveClip(this._trackId, this._clipId, incrementalDeltaSamples, true);
+      this._cumulativeDeltaSamples += applied;
     } else {
       const boundary = this._mode === "trim-left" ? "left" : "right";
       const rawDeltaSamples = Math.round(totalDeltaPx * this._host.samplesPerPixel);
@@ -2357,9 +2413,18 @@ var ClipPointerHandler = class {
               }
             })
           );
+        } else {
+          console.warn(
+            "[dawcore] engine unavailable at trim drop \u2014 trim not applied for clip " + this._clipId
+          );
         }
       }
     } finally {
+      if (this._isDragging && this._cumulativeDeltaSamples !== 0) {
+        this._host.engine?.commitTransaction();
+      } else {
+        this._host.engine?.abortTransaction();
+      }
       this._reset();
     }
   }
@@ -2470,6 +2535,7 @@ async function loadFiles(host, files) {
         clips: [
           {
             src: "",
+            peaksSrc: "",
             start: 0,
             duration: audioBuffer.duration,
             offset: 0,
@@ -2555,6 +2621,7 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
       const sr = host.effectiveSampleRate;
       const clipDesc = {
         src: "",
+        peaksSrc: "",
         start: startSample / sr,
         duration: durSamples / sr,
         offset: 0,
@@ -2595,6 +2662,35 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
 
 // src/interactions/split-handler.ts
 function splitAtPlayhead(host) {
+  const wasPlaying = host.isPlaying;
+  const time = host.currentTime;
+  if (!canSplitAtTime(host, time)) return false;
+  if (wasPlaying) {
+    host.stop();
+  }
+  let result;
+  try {
+    result = performSplit(host, time);
+  } catch (err) {
+    console.warn("[dawcore] splitAtPlayhead failed: " + String(err));
+    result = false;
+  }
+  if (wasPlaying) {
+    host.play(time);
+  }
+  return result;
+}
+function canSplitAtTime(host, time) {
+  const { engine } = host;
+  if (!engine) return false;
+  const state5 = engine.getState();
+  if (!state5.selectedTrackId) return false;
+  const track = state5.tracks.find((t) => t.id === state5.selectedTrackId);
+  if (!track) return false;
+  const atSample = Math.round(time * host.effectiveSampleRate);
+  return !!findClipAtSample(track.clips, atSample);
+}
+function performSplit(host, time) {
   const { engine } = host;
   if (!engine) return false;
   const stateBefore = engine.getState();
@@ -2602,7 +2698,7 @@ function splitAtPlayhead(host) {
   if (!selectedTrackId) return false;
   const track = tracks.find((t) => t.id === selectedTrackId);
   if (!track) return false;
-  const atSample = Math.round(host.currentTime * host.effectiveSampleRate);
+  const atSample = Math.round(time * host.effectiveSampleRate);
   const clip = findClipAtSample(track.clips, atSample);
   if (!clip) return false;
   const originalClipId = clip.id;
@@ -2727,11 +2823,29 @@ function findAudioBufferForClip(host, clip, track) {
   return null;
 }
 
+// src/interactions/peaks-loader.ts
+var import_waveform_data2 = __toESM(require("waveform-data"));
+async function loadWaveformDataFromUrl(src) {
+  const response = await fetch(src);
+  if (!response.ok) {
+    throw new Error("[dawcore] Failed to fetch peaks data: " + response.statusText);
+  }
+  const { pathname } = new URL(src, globalThis.location?.href ?? "http://localhost");
+  const isBinary = pathname.toLowerCase().endsWith(".dat");
+  if (isBinary) {
+    const arrayBuffer = await response.arrayBuffer();
+    return import_waveform_data2.default.create(arrayBuffer);
+  } else {
+    const json = await response.json();
+    return import_waveform_data2.default.create(json);
+  }
+}
+
 // src/elements/daw-editor.ts
 var DawEditorElement = class extends import_lit12.LitElement {
   constructor() {
     super(...arguments);
-    this.samplesPerPixel = 1024;
+    this._samplesPerPixel = 1024;
     this.waveHeight = 128;
     this.timescale = false;
     this.mono = false;
@@ -2758,9 +2872,12 @@ var DawEditorElement = class extends import_lit12.LitElement {
     this._engine = null;
     this._enginePromise = null;
     this._audioCache = /* @__PURE__ */ new Map();
+    this._peaksCache = /* @__PURE__ */ new Map();
     this._clipBuffers = /* @__PURE__ */ new Map();
     this._clipOffsets = /* @__PURE__ */ new Map();
     this._peakPipeline = new PeakPipeline();
+    /** Coarsest scale from pre-computed peaks — zoom cannot go finer than this. 0 = no limit. */
+    this._minSamplesPerPixel = 0;
     this._trackElements = /* @__PURE__ */ new Map();
     this._childObserver = null;
     this._audioResume = new AudioResumeController(this);
@@ -2809,6 +2926,19 @@ var DawEditorElement = class extends import_lit12.LitElement {
     this._onTrackControl = (e) => {
       const { trackId, prop, value } = e.detail ?? {};
       if (!trackId || !prop || !DawEditorElement._CONTROL_PROPS.has(prop)) return;
+      if (this._selectedTrackId !== trackId) {
+        this._setSelectedTrackId(trackId);
+        if (this._engine) {
+          this._engine.selectTrack(trackId);
+        }
+        this.dispatchEvent(
+          new CustomEvent("daw-track-select", {
+            bubbles: true,
+            composed: true,
+            detail: { trackId }
+          })
+        );
+      }
       const oldDescriptor = this._tracks.get(trackId);
       if (oldDescriptor) {
         const descriptor = { ...oldDescriptor, [prop]: value };
@@ -2866,20 +2996,24 @@ var DawEditorElement = class extends import_lit12.LitElement {
         );
       }
     };
-    this._onKeyDown = (e) => {
-      if (!this.interactiveClips) return;
-      if (e.key === "s" || e.key === "S") {
-        if (e.ctrlKey || e.metaKey || e.altKey) return;
-        const tag = e.target?.tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA") return;
-        if (e.target?.isContentEditable) return;
-        e.preventDefault();
-        this.splitAtPlayhead();
-      }
-    };
     // --- Recording ---
     this.recordingStream = null;
   }
+  get samplesPerPixel() {
+    return this._samplesPerPixel;
+  }
+  set samplesPerPixel(value) {
+    const old = this._samplesPerPixel;
+    if (!Number.isFinite(value) || value <= 0) return;
+    const clamped = this._minSamplesPerPixel > 0 && value < this._minSamplesPerPixel ? this._minSamplesPerPixel : value;
+    if (clamped !== value) {
+      console.warn(
+        "[dawcore] Zoom " + value + " spp rejected \u2014 pre-computed peaks limit is " + this._minSamplesPerPixel + " spp"
+      );
+    }
+    this._samplesPerPixel = clamped;
+    this.requestUpdate("samplesPerPixel", old);
+  }
   get _clipHandler() {
     return this.interactiveClips ? this._clipPointer : null;
   }
@@ -2942,10 +3076,6 @@ var DawEditorElement = class extends import_lit12.LitElement {
   // --- Lifecycle ---
   connectedCallback() {
     super.connectedCallback();
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    this.addEventListener("keydown", this._onKeyDown);
     this.addEventListener("daw-track-connected", this._onTrackConnected);
     this.addEventListener("daw-track-update", this._onTrackUpdate);
     this.addEventListener("daw-track-control", this._onTrackControl);
@@ -2971,7 +3101,6 @@ var DawEditorElement = class extends import_lit12.LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._onKeyDown);
     this.removeEventListener("daw-track-connected", this._onTrackConnected);
     this.removeEventListener("daw-track-update", this._onTrackUpdate);
     this.removeEventListener("daw-track-control", this._onTrackControl);
@@ -2980,9 +3109,11 @@ var DawEditorElement = class extends import_lit12.LitElement {
     this._childObserver = null;
     this._trackElements.clear();
     this._audioCache.clear();
+    this._peaksCache.clear();
     this._clipBuffers.clear();
     this._clipOffsets.clear();
     this._peakPipeline.terminate();
+    this._minSamplesPerPixel = 0;
     try {
       this._disposeEngine();
     } catch (err) {
@@ -3032,6 +3163,7 @@ var DawEditorElement = class extends import_lit12.LitElement {
     if (this._engine) {
       this._engine.removeTrack(trackId);
     }
+    this._minSamplesPerPixel = this._peakPipeline.getMaxCachedScale(this._clipBuffers);
     if (nextEngine.size === 0) {
       this._currentTime = 0;
       this._stopPlayhead();
@@ -3043,6 +3175,7 @@ var DawEditorElement = class extends import_lit12.LitElement {
     if (clipEls.length === 0 && trackEl.src) {
       clips.push({
         src: trackEl.src,
+        peaksSrc: "",
         start: 0,
         duration: 0,
         offset: 0,
@@ -3056,6 +3189,7 @@ var DawEditorElement = class extends import_lit12.LitElement {
       for (const clipEl of clipEls) {
         clips.push({
           src: clipEl.src,
+          peaksSrc: clipEl.peaksSrc,
           start: clipEl.start,
           duration: clipEl.duration,
           offset: clipEl.offset,
@@ -3083,7 +3217,77 @@ var DawEditorElement = class extends import_lit12.LitElement {
       const clips = [];
       for (const clipDesc of descriptor.clips) {
         if (!clipDesc.src) continue;
-        const audioBuffer = await this._fetchAndDecode(clipDesc.src);
+        const waveformDataPromise = clipDesc.peaksSrc ? this._fetchPeaks(clipDesc.peaksSrc) : null;
+        const audioPromise = this._fetchAndDecode(clipDesc.src);
+        let waveformData = null;
+        if (waveformDataPromise) {
+          try {
+            waveformData = await waveformDataPromise;
+          } catch (err) {
+            console.warn(
+              "[dawcore] Failed to load peaks from " + clipDesc.peaksSrc + ": " + String(err) + " \u2014 falling back to AudioBuffer generation"
+            );
+          }
+        }
+        if (waveformData) {
+          const clip2 = (0, import_core4.createClipFromSeconds)({
+            waveformData,
+            startTime: clipDesc.start,
+            duration: clipDesc.duration || waveformData.duration,
+            offset: clipDesc.offset,
+            gain: clipDesc.gain,
+            name: clipDesc.name,
+            sampleRate: waveformData.sample_rate,
+            sourceDuration: waveformData.duration
+          });
+          const effectiveScale = Math.max(this.samplesPerPixel, waveformData.scale);
+          const peakData2 = extractPeaks(
+            waveformData,
+            effectiveScale,
+            this.mono,
+            clip2.offsetSamples,
+            clip2.durationSamples
+          );
+          this._clipOffsets.set(clip2.id, {
+            offsetSamples: clip2.offsetSamples,
+            durationSamples: clip2.durationSamples
+          });
+          this._peaksData = new Map(this._peaksData).set(clip2.id, peakData2);
+          this._minSamplesPerPixel = Math.max(this._minSamplesPerPixel, waveformData.scale);
+          const previewTrack = (0, import_core4.createTrack)({
+            name: descriptor.name,
+            clips: [clip2],
+            volume: descriptor.volume,
+            pan: descriptor.pan,
+            muted: descriptor.muted,
+            soloed: descriptor.soloed
+          });
+          previewTrack.id = trackId;
+          this._engineTracks = new Map(this._engineTracks).set(trackId, previewTrack);
+          this._recomputeDuration();
+          let audioBuffer2;
+          try {
+            audioBuffer2 = await audioPromise;
+          } catch (audioErr) {
+            const nextPeaks = new Map(this._peaksData);
+            nextPeaks.delete(clip2.id);
+            this._peaksData = nextPeaks;
+            this._clipOffsets.delete(clip2.id);
+            const nextEngine = new Map(this._engineTracks);
+            nextEngine.delete(trackId);
+            this._engineTracks = nextEngine;
+            this._minSamplesPerPixel = this._peakPipeline.getMaxCachedScale(this._clipBuffers);
+            this._recomputeDuration();
+            throw audioErr;
+          }
+          this._resolvedSampleRate = audioBuffer2.sampleRate;
+          const updatedClip = { ...clip2, audioBuffer: audioBuffer2 };
+          this._clipBuffers = new Map(this._clipBuffers).set(clip2.id, audioBuffer2);
+          this._peakPipeline.cacheWaveformData(audioBuffer2, waveformData);
+          clips.push(updatedClip);
+          continue;
+        }
+        const audioBuffer = await audioPromise;
         this._resolvedSampleRate = audioBuffer.sampleRate;
         const clip = (0, import_core4.createClipFromSeconds)({
           audioBuffer,
@@ -3165,6 +3369,16 @@ var DawEditorElement = class extends import_lit12.LitElement {
       throw err;
     }
   }
+  _fetchPeaks(src) {
+    const cached = this._peaksCache.get(src);
+    if (cached) return cached;
+    const promise = loadWaveformDataFromUrl(src).catch((err) => {
+      this._peaksCache.delete(src);
+      throw err;
+    });
+    this._peaksCache.set(src, promise);
+    return promise;
+  }
   _recomputeDuration() {
     let maxSample = 0;
     for (const track of this._engineTracks.values()) {
@@ -3263,18 +3477,71 @@ var DawEditorElement = class extends import_lit12.LitElement {
     this._stopPlayhead();
     this.dispatchEvent(new CustomEvent("daw-stop", { bubbles: true, composed: true }));
   }
+  /** Toggle between play and pause. */
+  togglePlayPause() {
+    if (this._isPlaying) {
+      this.pause();
+    } else {
+      this.play();
+    }
+  }
   seekTo(time) {
-    if (!this._engine) return;
-    this._engine.seek(time);
-    this._currentTime = time;
+    if (!this._engine) {
+      console.warn("[dawcore] seekTo: engine not ready, call ignored");
+      return;
+    }
+    if (this._isPlaying) {
+      this.stop();
+      this.play(time);
+    } else {
+      this._engine.seek(time);
+      this._currentTime = time;
+      this._stopPlayhead();
+    }
+  }
+  /** Undo the last structural edit. */
+  undo() {
+    if (!this._engine) {
+      console.warn("[dawcore] undo: engine not ready, call ignored");
+      return;
+    }
+    this._engine.undo();
+  }
+  /** Redo the last undone edit. */
+  redo() {
+    if (!this._engine) {
+      console.warn("[dawcore] redo: engine not ready, call ignored");
+      return;
+    }
+    this._engine.redo();
+  }
+  /** Whether undo is available. */
+  get canUndo() {
+    return this._engine?.canUndo ?? false;
+  }
+  /** Whether redo is available. */
+  get canRedo() {
+    return this._engine?.canRedo ?? false;
   }
   /** Split the clip under the playhead on the selected track. */
   splitAtPlayhead() {
     return splitAtPlayhead({
       effectiveSampleRate: this.effectiveSampleRate,
       currentTime: this._currentTime,
+      isPlaying: this._isPlaying,
       engine: this._engine,
-      dispatchEvent: (e) => this.dispatchEvent(e)
+      dispatchEvent: (e) => this.dispatchEvent(e),
+      stop: () => {
+        this._engine?.stop();
+        this._stopPlayhead();
+      },
+      // Call engine.play directly (synchronous) — not the async editor play()
+      // which yields to microtask queue via await engine.init(). Engine is
+      // already initialized at split time; the async gap causes audio desync.
+      play: (time) => {
+        this._engine?.play(time);
+        this._startPlayhead();
+      }
     });
   }
   get currentTime() {
@@ -3524,8 +3791,8 @@ DawEditorElement.styles = [
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
-  (0, import_decorators10.property)({ type: Number, attribute: "samples-per-pixel" })
-], DawEditorElement.prototype, "samplesPerPixel", 2);
+  (0, import_decorators10.property)({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+], DawEditorElement.prototype, "samplesPerPixel", 1);
 __decorateClass([
   (0, import_decorators10.property)({ type: Number, attribute: "wave-height" })
 ], DawEditorElement.prototype, "waveHeight", 2);
@@ -3874,12 +4141,183 @@ __decorateClass([
 DawRecordButtonElement = __decorateClass([
   (0, import_decorators13.customElement)("daw-record-button")
 ], DawRecordButtonElement);
+
+// src/elements/daw-keyboard-shortcuts.ts
+var import_lit16 = require("lit");
+var import_decorators14 = require("lit/decorators.js");
+var import_core5 = require("@waveform-playlist/core");
+var DawKeyboardShortcutsElement = class extends import_lit16.LitElement {
+  constructor() {
+    super(...arguments);
+    this.playback = false;
+    this.splitting = false;
+    this.undo = false;
+    // --- JS properties for remapping ---
+    this.playbackShortcuts = null;
+    this.splittingShortcuts = null;
+    this.undoShortcuts = null;
+    /** Additional custom shortcuts. */
+    this.customShortcuts = [];
+    this._editor = null;
+    this._cachedShortcuts = null;
+    // --- Event handler ---
+    this._onKeyDown = (e) => {
+      const shortcuts = this.shortcuts;
+      if (shortcuts.length === 0) return;
+      try {
+        (0, import_core5.handleKeyboardEvent)(e, shortcuts, true);
+      } catch (err) {
+        console.warn("[dawcore] Keyboard shortcut failed (key=" + e.key + "): " + String(err));
+        const target = this._editor ?? this;
+        target.dispatchEvent(
+          new CustomEvent("daw-error", {
+            bubbles: true,
+            composed: true,
+            detail: { operation: "keyboard-shortcut", key: e.key, error: err }
+          })
+        );
+      }
+    };
+  }
+  /** All active shortcuts (read-only, cached). */
+  get shortcuts() {
+    if (!this._cachedShortcuts) {
+      this._cachedShortcuts = this._buildShortcuts();
+    }
+    return this._cachedShortcuts;
+  }
+  /** Invalidate cached shortcuts when Lit properties change. */
+  updated() {
+    this._cachedShortcuts = null;
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback();
+    this._editor = this.closest("daw-editor");
+    if (!this._editor) {
+      console.warn(
+        "[dawcore] <daw-keyboard-shortcuts> must be placed inside a <daw-editor>. Preset shortcuts (playback, splitting, undo) will be inactive; only customShortcuts will fire."
+      );
+    }
+    document.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._onKeyDown);
+    this._editor = null;
+  }
+  // No shadow DOM — render-less element
+  createRenderRoot() {
+    return this;
+  }
+  // --- Shortcut building ---
+  _buildShortcuts() {
+    const editor = this._editor;
+    if (!editor) return this.customShortcuts;
+    const result = [];
+    if (this.playback) {
+      const map = this.playbackShortcuts;
+      result.push(
+        this._makeShortcut(
+          map?.playPause ?? { key: " ", ctrlKey: false, metaKey: false },
+          () => editor.togglePlayPause(),
+          "Play/Pause"
+        ),
+        this._makeShortcut(
+          map?.stop ?? { key: "Escape", ctrlKey: false, metaKey: false },
+          () => editor.stop(),
+          "Stop"
+        ),
+        this._makeShortcut(
+          map?.rewindToStart ?? { key: "0", ctrlKey: false, metaKey: false },
+          () => editor.seekTo(0),
+          "Rewind to start"
+        )
+      );
+    }
+    if (this.splitting) {
+      const map = this.splittingShortcuts;
+      const binding = map?.splitAtPlayhead ?? {
+        key: "s",
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false
+      };
+      result.push(this._makeShortcut(binding, () => editor.splitAtPlayhead(), "Split at playhead"));
+    }
+    if (this.undo) {
+      const map = this.undoShortcuts;
+      const undoBinding = map?.undo ?? { key: "z" };
+      const redoBinding = map?.redo ?? { key: "z", shiftKey: true };
+      if (undoBinding.ctrlKey === void 0 && undoBinding.metaKey === void 0) {
+        const undoShift = undoBinding.shiftKey === void 0 ? { shiftKey: false } : {};
+        result.push(
+          this._makeShortcut(
+            { ...undoBinding, ctrlKey: true, ...undoShift },
+            () => editor.undo(),
+            "Undo"
+          ),
+          this._makeShortcut(
+            { ...undoBinding, metaKey: true, ...undoShift },
+            () => editor.undo(),
+            "Undo"
+          )
+        );
+      } else {
+        result.push(this._makeShortcut(undoBinding, () => editor.undo(), "Undo"));
+      }
+      if (redoBinding.ctrlKey === void 0 && redoBinding.metaKey === void 0) {
+        const redoShift = redoBinding.shiftKey === void 0 ? { shiftKey: true } : {};
+        result.push(
+          this._makeShortcut(
+            { ...redoBinding, ctrlKey: true, ...redoShift },
+            () => editor.redo(),
+            "Redo"
+          ),
+          this._makeShortcut(
+            { ...redoBinding, metaKey: true, ...redoShift },
+            () => editor.redo(),
+            "Redo"
+          )
+        );
+      } else {
+        result.push(this._makeShortcut(redoBinding, () => editor.redo(), "Redo"));
+      }
+    }
+    result.push(...this.customShortcuts);
+    return result;
+  }
+  _makeShortcut(binding, action, description) {
+    return {
+      key: binding.key,
+      ...binding.ctrlKey !== void 0 && { ctrlKey: binding.ctrlKey },
+      ...binding.shiftKey !== void 0 && { shiftKey: binding.shiftKey },
+      ...binding.metaKey !== void 0 && { metaKey: binding.metaKey },
+      ...binding.altKey !== void 0 && { altKey: binding.altKey },
+      action,
+      description
+    };
+  }
+};
+__decorateClass([
+  (0, import_decorators14.property)({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "playback", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "splitting", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "undo", 2);
+DawKeyboardShortcutsElement = __decorateClass([
+  (0, import_decorators14.customElement)("daw-keyboard-shortcuts")
+], DawKeyboardShortcutsElement);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AudioResumeController,
   ClipPointerHandler,
   DawClipElement,
   DawEditorElement,
+  DawKeyboardShortcutsElement,
   DawPauseButtonElement,
   DawPlayButtonElement,
   DawPlayheadElement,