@dawcore/components 0.0.7 → 0.0.9

package/README.md

@@ -9,9 +9,12 @@ Framework-agnostic Web Components for multi-track audio editing. Drop `<daw-edit
 - **Canvas waveforms** — Chunked rendering with virtual scrolling for large timelines
 - **Drag interactions** — Move clips, trim boundaries, split at playhead
 - **Keyboard shortcuts** — Play/pause, split, undo/redo via `<daw-keyboard-shortcuts>`
+- **Undo/redo** — Full transaction-based undo with Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z
 - **File drop** — Drag audio files onto the editor to add tracks
-- **Recording** — Live mic recording with waveform preview (optional)
+- **Recording** — Live mic recording with waveform preview, pause/resume, cancelable clip creation
 - **Pre-computed peaks** — Instant waveform rendering from `.dat` files before audio decodes
+- **Track controls** — Volume, pan, mute, solo per track via `<daw-track-controls>`
+- **Transport access** — Tempo, metronome, count-in, meter, effects via `@dawcore/transport`
 - **CSS theming** — Dark mode by default, fully customizable via CSS custom properties
 - **Native Web Audio** — Uses `@dawcore/transport` for playback scheduling. No Tone.js dependency.
 
@@ -87,6 +90,96 @@ For instant waveform rendering before audio finishes decoding:
 
 The `.dat` file renders the waveform immediately. Audio decodes in the background for playback.
 
+## Transport Access
+
+Access the native transport for tempo, metronome, count-in, meter, and effects:
+
+```javascript
+const editor = document.getElementById('editor');
+
+// Transport is available after first track loads
+editor.addEventListener('daw-play', () => {
+  const transport = editor.engine?.adapter?.transport;
+  if (!transport) return;
+
+  // Tempo & meter
+  transport.setTempo(140);
+  transport.setMeter(3, 4);
+
+  // Metronome (default click sounds built in)
+  transport.setMetronomeEnabled(true);
+
+  // Count-in
+  transport.setCountIn(true);
+  transport.setCountInBars(1);
+  transport.setCountInMode('always');
+
+  transport.on('countIn', ({ beat, totalBeats }) => {
+    console.log(beat + '/' + totalBeats);
+  });
+
+  // Effects hook — insert any AudioNode chain
+  transport.connectTrackOutput('track-id', reverbNode);
+});
+```
+
+## Programmatic File Loading
+
+```javascript
+const editor = document.getElementById('editor');
+const result = await editor.loadFiles(fileList);
+// result: { loaded: string[], failed: Array<{ file, error }> }
+```
+
+## Recording
+
+```html
+<daw-editor id="editor" samples-per-pixel="1024" wave-height="100">
+  <daw-track name="Recording"></daw-track>
+</daw-editor>
+
+<daw-transport for="editor">
+  <daw-play-button></daw-play-button>
+  <daw-pause-button></daw-pause-button>
+  <daw-stop-button></daw-stop-button>
+  <daw-record-button></daw-record-button>
+</daw-transport>
+
+<script type="module">
+  const editor = document.getElementById('editor');
+  // Consumer provides the mic stream
+  const stream = await navigator.mediaDevices.getUserMedia({
+    audio: { channelCount: { ideal: 2 } }  // request stereo when available
+  });
+  editor.recordingStream = stream;
+
+  // Cancelable — prevent default to handle the AudioBuffer yourself
+  editor.addEventListener('daw-recording-complete', (e) => {
+    // e.preventDefault(); // skip automatic clip creation
+    console.log('recorded:', e.detail.audioBuffer);
+  });
+</script>
+```
+
+## Keyboard Shortcuts
+
+Add `<daw-keyboard-shortcuts>` as a child of `<daw-editor>`:
+
+```html
+<daw-editor id="editor">
+  <daw-keyboard-shortcuts playback splitting undo></daw-keyboard-shortcuts>
+  <!-- ... tracks ... -->
+</daw-editor>
+```
+
+| Attribute | Shortcuts |
+|-----------|-----------|
+| `playback` | Space (play/pause), Enter (stop) |
+| `splitting` | S (split at playhead) |
+| `undo` | Cmd/Ctrl+Z (undo), Cmd/Ctrl+Shift+Z (redo) |
+
+Custom shortcuts via JS properties: `playbackShortcuts`, `splittingShortcuts`, `undoShortcuts`, `customShortcuts`.
+
 ## CSS Theming
 
 Style with CSS custom properties on `<daw-editor>` or any ancestor:
@@ -109,45 +202,78 @@ daw-editor {
 }
 ```
 
-## Recording
+## Elements
 
-```html
-<daw-editor id="editor" samples-per-pixel="1024" wave-height="100">
-  <daw-track name="Recording"></daw-track>
-</daw-editor>
+### `<daw-editor>`
 
-<daw-transport for="editor">
-  <daw-play-button></daw-play-button>
-  <daw-pause-button></daw-pause-button>
-  <daw-stop-button></daw-stop-button>
-  <daw-record-button></daw-record-button>
-</daw-transport>
+Core orchestrator. Attributes:
 
-<script type="module">
-  const editor = document.getElementById('editor');
-  // Consumer provides the mic stream
-  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-  editor.recordingStream = stream;
-</script>
-```
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `samples-per-pixel` | number | `1024` | Zoom level |
+| `sample-rate` | number | `48000` | AudioContext sample rate hint |
+| `wave-height` | number | `100` | Track waveform height in pixels |
+| `timescale` | boolean | `false` | Show time ruler |
+| `clip-headers` | boolean | `false` | Show clip name headers |
+| `interactive-clips` | boolean | `false` | Enable drag/trim/split |
+| `mono` | boolean | `false` | Merge stereo to mono display |
+| `eager-resume` | boolean | `false` | Resume AudioContext on first user gesture |
 
-## Events
+JS properties: `audioContext`, `recordingStream`, `engine`.
+
+Methods: `loadFiles(fileList)`, `splitAtPlayhead()`.
+
+### `<daw-track>`
+
+Declarative track data. Attributes: `src`, `name`, `volume`, `pan`, `muted`, `soloed`, `mono`.
+
+### `<daw-clip>`
 
-Listen for editor events on the `<daw-editor>` element:
+Declarative clip data. Attributes: `src`, `peaks-src`, `start`, `duration`, `offset`, `gain`.
+
+### `<daw-transport for="editor-id">`
+
+Container that resolves target editor. Children: `<daw-play-button>`, `<daw-pause-button>`, `<daw-stop-button>`, `<daw-record-button>`.
+
+### `<daw-track-controls>`
+
+Per-track UI for volume, pan, mute, solo. Receives state from editor, dispatches `daw-track-control` and `daw-track-remove` events.
+
+### `<daw-keyboard-shortcuts>`
+
+Render-less child of `<daw-editor>`. Boolean attributes: `playback`, `splitting`, `undo`.
+
+## Events
 
 ```javascript
 const editor = document.getElementById('editor');
 
-editor.addEventListener('daw-play', () => console.log('playing'));
-editor.addEventListener('daw-pause', () => console.log('paused'));
-editor.addEventListener('daw-stop', () => console.log('stopped'));
-editor.addEventListener('daw-seek', (e) => console.log('seek:', e.detail.time));
-editor.addEventListener('daw-selection', (e) => console.log('selection:', e.detail));
-editor.addEventListener('daw-track-select', (e) => console.log('track:', e.detail.trackId));
-editor.addEventListener('daw-clip-move', (e) => console.log('move:', e.detail));
-editor.addEventListener('daw-clip-trim', (e) => console.log('trim:', e.detail));
-editor.addEventListener('daw-clip-split', (e) => console.log('split:', e.detail));
-editor.addEventListener('daw-track-error', (e) => console.error('error:', e.detail));
+// Playback
+editor.addEventListener('daw-play', () => {});
+editor.addEventListener('daw-pause', () => {});
+editor.addEventListener('daw-stop', () => {});
+editor.addEventListener('daw-seek', (e) => console.log(e.detail.time));
+
+// Selection & tracks
+editor.addEventListener('daw-selection', (e) => console.log(e.detail));
+editor.addEventListener('daw-track-select', (e) => console.log(e.detail.trackId));
+
+// Clip interactions
+editor.addEventListener('daw-clip-move', (e) => console.log(e.detail));
+editor.addEventListener('daw-clip-trim', (e) => console.log(e.detail));
+editor.addEventListener('daw-clip-split', (e) => console.log(e.detail));
+
+// Recording
+editor.addEventListener('daw-recording-start', (e) => console.log(e.detail));
+editor.addEventListener('daw-recording-complete', (e) => {
+  // e.preventDefault() to skip automatic clip creation
+  console.log(e.detail.audioBuffer);
+});
+
+// Errors
+editor.addEventListener('daw-track-error', (e) => console.error(e.detail));
+editor.addEventListener('daw-error', (e) => console.error(e.detail));
+editor.addEventListener('daw-files-load-error', (e) => console.error(e.detail));
 ```
 
 ## Custom AudioContext
@@ -161,10 +287,6 @@ editor.audioContext = new AudioContext({ sampleRate: 48000, latencyHint: 0 });
 
 Set this before tracks load. The provided context is used for decoding, playback, and recording.
 
-## API
-
-See [COMPONENTS.md](./COMPONENTS.md) for the full element and attribute reference.
-
 ## License
 
 MIT

package/dist/index.js

@@ -3475,8 +3475,8 @@ var DawEditorElement = class extends import_lit12.LitElement {
         syncPeaksForChangedClips(this, engineState.tracks);
       }
     });
-    engine.on("timeupdate", (time) => {
-      this._currentTime = time;
+    engine.on("pause", () => {
+      this._currentTime = engine.getCurrentTime();
     });
     engine.on("stop", () => {
       this._currentTime = engine.getCurrentTime();
@@ -3576,7 +3576,7 @@ var DawEditorElement = class extends import_lit12.LitElement {
   splitAtPlayhead() {
     return splitAtPlayhead({
       effectiveSampleRate: this.effectiveSampleRate,
-      currentTime: this._currentTime,
+      currentTime: this.currentTime,
       isPlaying: this._isPlaying,
       engine: this._engine,
       dispatchEvent: (e) => this.dispatchEvent(e),
@@ -3594,6 +3594,9 @@ var DawEditorElement = class extends import_lit12.LitElement {
     });
   }
   get currentTime() {
+    if (this._isPlaying && this._engine) {
+      return this._engine.getCurrentTime();
+    }
     return this._currentTime;
   }
   get isRecording() {
@@ -3651,8 +3654,12 @@ var DawEditorElement = class extends import_lit12.LitElement {
     const playhead = this._getPlayhead();
     if (!playhead || !this._engine) return;
     const engine = this._engine;
+    const ctx = this.audioContext;
     playhead.startAnimation(
-      () => engine.getCurrentTime(),
+      () => {
+        const latency = "outputLatency" in ctx ? ctx.outputLatency : 0;
+        return Math.max(0, engine.getCurrentTime() - latency);
+      },
       this.effectiveSampleRate,
       this.samplesPerPixel
     );