@dawcore/components 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -2179,6 +2179,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}"]`
@@ -2217,8 +2224,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);
@@ -2307,9 +2314,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();
     }
   }
@@ -2545,6 +2561,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();
@@ -2552,7 +2597,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;
@@ -2759,6 +2804,19 @@ var DawEditorElement = class extends LitElement8 {
     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 };
@@ -2816,17 +2874,6 @@ var DawEditorElement = class extends LitElement8 {
         );
       }
     };
-    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;
   }
@@ -2892,10 +2939,6 @@ var DawEditorElement = class extends LitElement8 {
   // --- 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);
@@ -2921,7 +2964,6 @@ var DawEditorElement = class extends LitElement8 {
   }
   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);
@@ -3213,18 +3255,71 @@ var DawEditorElement = class extends LitElement8 {
     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() {
@@ -3824,11 +3919,182 @@ __decorateClass([
 DawRecordButtonElement = __decorateClass([
   customElement13("daw-record-button")
 ], DawRecordButtonElement);
+
+// src/elements/daw-keyboard-shortcuts.ts
+import { LitElement as LitElement11 } from "lit";
+import { customElement as customElement14, property as property9 } from "lit/decorators.js";
+import { handleKeyboardEvent } from "@waveform-playlist/core";
+var DawKeyboardShortcutsElement = class extends LitElement11 {
+  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 {
+        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([
+  property9({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "playback", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "splitting", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], DawKeyboardShortcutsElement.prototype, "undo", 2);
+DawKeyboardShortcutsElement = __decorateClass([
+  customElement14("daw-keyboard-shortcuts")
+], DawKeyboardShortcutsElement);
 export {
   AudioResumeController,
   ClipPointerHandler,
   DawClipElement,
   DawEditorElement,
+  DawKeyboardShortcutsElement,
   DawPauseButtonElement,
   DawPlayButtonElement,
   DawPlayheadElement,