@drop-ai/ui-utils 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { TimelineViewport } from './viewport/TimelineViewport';
+export { TrackLayout } from './viewport/TrackLayout';
+export type { TrackLayoutEntry } from './viewport/TrackLayout';
+export { computePeaks, computePeaksFromSamples, recommendResolution } from './waveform/computePeaks';
+export { renderWaveform, renderStereoWaveform, renderWaveformFromSamples } from './waveform/renderWaveform';
+export type { WaveformRenderOptions } from './waveform/renderWaveform';
+export { computeRulerTicks } from './ruler/RulerTicks';
+export type { RulerTick, RulerTicksOptions } from './ruler/RulerTicks';
+export { PlayheadTracker } from './playhead/PlayheadTracker';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAC5G,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/index.js

@@ -0,0 +1,11 @@
+// ─── Viewport ───────────────────────────────────────────────────────────────
+export { TimelineViewport } from './viewport/TimelineViewport';
+export { TrackLayout } from './viewport/TrackLayout';
+// ─── Waveform ───────────────────────────────────────────────────────────────
+export { computePeaks, computePeaksFromSamples, recommendResolution } from './waveform/computePeaks';
+export { renderWaveform, renderStereoWaveform, renderWaveformFromSamples } from './waveform/renderWaveform';
+// ─── Ruler ──────────────────────────────────────────────────────────────────
+export { computeRulerTicks } from './ruler/RulerTicks';
+// ─── Playhead ───────────────────────────────────────────────────────────────
+export { PlayheadTracker } from './playhead/PlayheadTracker';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,+EAA+E;AAC/E,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAG5G,+EAA+E;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,+EAA+E;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/playhead/PlayheadTracker.d.ts

@@ -0,0 +1,45 @@
+import type { FrameCount } from '@drop-ai/core';
+import { Signal } from '@drop-ai/core';
+import type { TimelineViewport } from '../viewport/TimelineViewport';
+/**
+ * Tracks the transport position via `requestAnimationFrame` and converts
+ * the current frame into a pixel X coordinate.
+ *
+ * Framework-agnostic — connect to the `moved` signal to drive your UI.
+ *
+ * ```ts
+ * const tracker = new PlayheadTracker(viewport, () => engine.session.transportFrame);
+ * tracker.moved.connect(({ frame, x }) => {
+ *     playheadEl.style.transform = `translateX(${x}px)`;
+ * });
+ * tracker.start();
+ * ```
+ */
+export declare class PlayheadTracker {
+    /** Emitted on each animation frame with the current position. */
+    readonly moved: Signal<{
+        frame: FrameCount;
+        x: number;
+    }>;
+    private _viewport;
+    private _getFrame;
+    private _rafId;
+    private _followPlayhead;
+    /**
+     * @param viewport   The timeline viewport for frame → pixel conversion.
+     * @param getFrame   A callback that returns the current transport frame.
+     *                   Typically `() => engine.session.transportFrame`.
+     */
+    constructor(viewport: TimelineViewport, getFrame: () => FrameCount);
+    get isRunning(): boolean;
+    /** When true, the viewport will auto-scroll to keep the playhead visible. */
+    get followPlayhead(): boolean;
+    set followPlayhead(value: boolean);
+    /** Start the animation loop. */
+    start(): void;
+    /** Stop the animation loop. */
+    stop(): void;
+    /** Dispose the tracker and release resources. */
+    dispose(): void;
+}
+//# sourceMappingURL=PlayheadTracker.d.ts.map

package/dist/playhead/PlayheadTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadTracker.d.ts","sourceRoot":"","sources":["../../src/playhead/PlayheadTracker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAMrE;;;;;;;;;;;;;GAaG;AACH,qBAAa,eAAe;IACxB,iEAAiE;IACjE,SAAgB,KAAK;eAAuB,UAAU;WAAK,MAAM;OAAM;IAEvE,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,eAAe,CAAkB;IAEzC;;;;OAIG;gBACS,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU;IAKlE,IAAI,SAAS,IAAI,OAAO,CAAiC;IAEzD,6EAA6E;IAC7E,IAAI,cAAc,IAAI,OAAO,CAAiC;IAC9D,IAAI,cAAc,CAAC,KAAK,EAAE,OAAO,EAAmC;IAEpE,gCAAgC;IAChC,KAAK,IAAI,IAAI;IAgBb,+BAA+B;IAC/B,IAAI,IAAI,IAAI;IAOZ,iDAAiD;IACjD,OAAO,IAAI,IAAI;CAIlB"}

package/dist/playhead/PlayheadTracker.js

@@ -0,0 +1,65 @@
+import { Signal } from '@drop-ai/core';
+// ---------------------------------------------------------------------------
+// PlayheadTracker
+// ---------------------------------------------------------------------------
+/**
+ * Tracks the transport position via `requestAnimationFrame` and converts
+ * the current frame into a pixel X coordinate.
+ *
+ * Framework-agnostic — connect to the `moved` signal to drive your UI.
+ *
+ * ```ts
+ * const tracker = new PlayheadTracker(viewport, () => engine.session.transportFrame);
+ * tracker.moved.connect(({ frame, x }) => {
+ *     playheadEl.style.transform = `translateX(${x}px)`;
+ * });
+ * tracker.start();
+ * ```
+ */
+export class PlayheadTracker {
+    /**
+     * @param viewport   The timeline viewport for frame → pixel conversion.
+     * @param getFrame   A callback that returns the current transport frame.
+     *                   Typically `() => engine.session.transportFrame`.
+     */
+    constructor(viewport, getFrame) {
+        /** Emitted on each animation frame with the current position. */
+        this.moved = new Signal();
+        this._rafId = null;
+        this._followPlayhead = false;
+        this._viewport = viewport;
+        this._getFrame = getFrame;
+    }
+    get isRunning() { return this._rafId !== null; }
+    /** When true, the viewport will auto-scroll to keep the playhead visible. */
+    get followPlayhead() { return this._followPlayhead; }
+    set followPlayhead(value) { this._followPlayhead = value; }
+    /** Start the animation loop. */
+    start() {
+        if (this._rafId !== null)
+            return;
+        const tick = () => {
+            const frame = this._getFrame();
+            const x = this._viewport.frameToViewportPixel(frame);
+            if (this._followPlayhead) {
+                this._viewport.scrollToFrame(frame);
+            }
+            this.moved.emit({ frame, x });
+            this._rafId = requestAnimationFrame(tick);
+        };
+        this._rafId = requestAnimationFrame(tick);
+    }
+    /** Stop the animation loop. */
+    stop() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+    }
+    /** Dispose the tracker and release resources. */
+    dispose() {
+        this.stop();
+        this.moved.clear();
+    }
+}
+//# sourceMappingURL=PlayheadTracker.js.map

package/dist/playhead/PlayheadTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadTracker.js","sourceRoot":"","sources":["../../src/playhead/PlayheadTracker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,8EAA8E;AAC9E,kBAAkB;AAClB,8EAA8E;AAE9E;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,eAAe;IASxB;;;;OAIG;IACH,YAAY,QAA0B,EAAE,QAA0B;QAblE,iEAAiE;QACjD,UAAK,GAAG,IAAI,MAAM,EAAoC,CAAC;QAI/D,WAAM,GAAkB,IAAI,CAAC;QAC7B,oBAAe,GAAY,KAAK,CAAC;QAQrC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC9B,CAAC;IAED,IAAI,SAAS,KAAc,OAAO,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC;IAEzD,6EAA6E;IAC7E,IAAI,cAAc,KAAc,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAC9D,IAAI,cAAc,CAAC,KAAc,IAAI,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC;IAEpE,gCAAgC;IAChC,KAAK;QACD,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI;YAAE,OAAO;QACjC,MAAM,IAAI,GAAG,GAAG,EAAE;YACd,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAErD,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,CAAC;YAED,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC9C,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,+BAA+B;IAC/B,IAAI;QACA,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACvB,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;IACL,CAAC;IAED,iDAAiD;IACjD,OAAO;QACH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;CACJ"}

package/dist/ruler/RulerTicks.d.ts

@@ -0,0 +1,41 @@
+import type { FrameCount } from '@drop-ai/core';
+import { ClockMode } from '@drop-ai/core';
+import type { TimelineViewport } from '../viewport/TimelineViewport';
+export interface RulerTick {
+    /** Pixel X position (absolute, not viewport-relative). */
+    x: number;
+    /** Frame position corresponding to this tick. */
+    frame: FrameCount;
+    /** Display label (e.g. "1:30.000", "25", "01:02:03:00"). */
+    label: string;
+    /** True for major ticks (e.g. minute marks, bar starts). */
+    major: boolean;
+}
+export interface RulerTicksOptions {
+    viewport: TimelineViewport;
+    mode: ClockMode;
+    /** BPM — required for BBT mode. */
+    bpm?: number;
+    /** Time signature numerator — required for BBT mode (default: 4). */
+    timeSigNum?: number;
+    /** Time signature denominator — required for BBT mode (default: 4). */
+    timeSigDen?: number;
+}
+/**
+ * Compute ruler tick positions and labels for the visible viewport.
+ *
+ * Returns only ticks that fall within the current scroll window, so
+ * the caller can render them efficiently.
+ *
+ * ```ts
+ * const ticks = computeRulerTicks({
+ *     viewport,
+ *     mode: ClockMode.MINSEC,
+ * });
+ * for (const tick of ticks) {
+ *     ctx.fillText(tick.label, tick.x - viewport.scrollX, 18);
+ * }
+ * ```
+ */
+export declare function computeRulerTicks(options: RulerTicksOptions): RulerTick[];
+//# sourceMappingURL=RulerTicks.d.ts.map

package/dist/ruler/RulerTicks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RulerTicks.d.ts","sourceRoot":"","sources":["../../src/ruler/RulerTicks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAe,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAMrE,MAAM,WAAW,SAAS;IACtB,0DAA0D;IAC1D,CAAC,EAAE,MAAM,CAAC;IACV,iDAAiD;IACjD,KAAK,EAAE,UAAU,CAAC;IAClB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,GAAG,SAAS,EAAE,CAiCzE"}

package/dist/ruler/RulerTicks.js

@@ -0,0 +1,109 @@
+import { ClockMode, formatClock } from '@drop-ai/core';
+// ---------------------------------------------------------------------------
+// Tick interval selection
+// ---------------------------------------------------------------------------
+/**
+ * Choose a nice tick interval (in seconds) based on the current zoom level,
+ * so ticks are never too crowded or too sparse.
+ */
+function chooseTimeInterval(pixelsPerSecond) {
+    // Target roughly 80–150 px between major ticks
+    const targetPxGap = 100;
+    const rawInterval = targetPxGap / pixelsPerSecond;
+    // Snap to a "nice" interval
+    const nice = [0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
+    for (const n of nice) {
+        if (n >= rawInterval)
+            return n;
+    }
+    return 600;
+}
+// ---------------------------------------------------------------------------
+// computeRulerTicks
+// ---------------------------------------------------------------------------
+/**
+ * Compute ruler tick positions and labels for the visible viewport.
+ *
+ * Returns only ticks that fall within the current scroll window, so
+ * the caller can render them efficiently.
+ *
+ * ```ts
+ * const ticks = computeRulerTicks({
+ *     viewport,
+ *     mode: ClockMode.MINSEC,
+ * });
+ * for (const tick of ticks) {
+ *     ctx.fillText(tick.label, tick.x - viewport.scrollX, 18);
+ * }
+ * ```
+ */
+export function computeRulerTicks(options) {
+    const { viewport, mode, bpm = 120, timeSigNum = 4, timeSigDen = 4 } = options;
+    const { sampleRate, pixelsPerSecond, scrollX, viewportWidth } = viewport;
+    const ticks = [];
+    if (mode === ClockMode.BBT) {
+        return computeBBTTicks(sampleRate, pixelsPerSecond, scrollX, viewportWidth, bpm, timeSigNum, timeSigDen);
+    }
+    // Time-based modes: MINSEC, TIMECODE, SAMPLES
+    const interval = chooseTimeInterval(pixelsPerSecond);
+    const startSec = scrollX / pixelsPerSecond;
+    const endSec = (scrollX + viewportWidth) / pixelsPerSecond;
+    // Start from the first tick at or before the visible range
+    const firstTick = Math.floor(startSec / interval) * interval;
+    for (let sec = firstTick; sec <= endSec; sec += interval) {
+        if (sec < 0)
+            continue;
+        const frame = Math.round(sec * sampleRate);
+        const x = sec * pixelsPerSecond;
+        // Determine if major (e.g. every minute for MINSEC, every 10s if interval < 10)
+        const majorInterval = interval < 1 ? 1 : interval < 10 ? 10 : interval < 60 ? 60 : 600;
+        const major = Math.abs(sec % majorInterval) < 0.001;
+        const label = formatClock(frame, sampleRate, mode, bpm, timeSigNum);
+        ticks.push({ x, frame, label, major });
+    }
+    return ticks;
+}
+// ---------------------------------------------------------------------------
+// BBT ticks (bar/beat based)
+// ---------------------------------------------------------------------------
+function computeBBTTicks(sampleRate, pixelsPerSecond, scrollX, viewportWidth, bpm, timeSigNum, _timeSigDen) {
+    const ticks = [];
+    const beatsPerSecond = bpm / 60;
+    const secondsPerBeat = 1 / beatsPerSecond;
+    const secondsPerBar = secondsPerBeat * timeSigNum;
+    const pixelsPerBar = secondsPerBar * pixelsPerSecond;
+    // If bars are too narrow, skip some
+    const barSkip = pixelsPerBar < 20 ? Math.ceil(20 / pixelsPerBar) : 1;
+    const showBeats = pixelsPerBar > 60;
+    const startSec = scrollX / pixelsPerSecond;
+    const endSec = (scrollX + viewportWidth) / pixelsPerSecond;
+    const firstBar = Math.max(0, Math.floor(startSec / secondsPerBar));
+    const lastBar = Math.ceil(endSec / secondsPerBar);
+    for (let bar = firstBar; bar <= lastBar; bar += barSkip) {
+        const barSec = bar * secondsPerBar;
+        const barX = barSec * pixelsPerSecond;
+        const frame = Math.round(barSec * sampleRate);
+        ticks.push({
+            x: barX,
+            frame,
+            label: `${bar + 1}`,
+            major: true,
+        });
+        // Beat ticks within this bar
+        if (showBeats && barSkip === 1) {
+            for (let beat = 1; beat < timeSigNum; beat++) {
+                const beatSec = barSec + beat * secondsPerBeat;
+                const beatX = beatSec * pixelsPerSecond;
+                const beatFrame = Math.round(beatSec * sampleRate);
+                ticks.push({
+                    x: beatX,
+                    frame: beatFrame,
+                    label: `${bar + 1}.${beat + 1}`,
+                    major: false,
+                });
+            }
+        }
+    }
+    return ticks;
+}
+//# sourceMappingURL=RulerTicks.js.map

package/dist/ruler/RulerTicks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RulerTicks.js","sourceRoot":"","sources":["../../src/ruler/RulerTicks.ts"],"names":[],"mappings":"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"}

package/dist/viewport/TimelineViewport.d.ts

@@ -0,0 +1,80 @@
+import type { FrameCount } from '@drop-ai/core';
+import { Signal } from '@drop-ai/core';
+import { ZoomFocus } from '@drop-ai/core';
+/**
+ * Framework-agnostic timeline viewport state.
+ *
+ * Manages zoom level (`pixelsPerSecond`), horizontal scroll offset, and
+ * provides frame ↔ pixel conversion utilities needed by every DAW UI:
+ * waveform rendering, region positioning, playhead location, ruler ticks, etc.
+ *
+ * ```ts
+ * const vp = new TimelineViewport(44100);
+ * vp.changed.connect(() => render());
+ * vp.setPixelsPerSecond(100);
+ * const px = vp.frameToPixel(44100); // → 100
+ * ```
+ */
+export declare class TimelineViewport {
+    /** Emitted whenever pixelsPerSecond or scrollX changes. */
+    readonly changed: Signal<void>;
+    private _sampleRate;
+    private _pixelsPerSecond;
+    /** Horizontal scroll offset in pixels. */
+    private _scrollX;
+    /** Total duration of the session in seconds. */
+    private _duration;
+    /** Visible width of the viewport in pixels. */
+    private _viewportWidth;
+    constructor(sampleRate: number);
+    get sampleRate(): number;
+    get pixelsPerSecond(): number;
+    get scrollX(): number;
+    get duration(): number;
+    get viewportWidth(): number;
+    /** Frames per pixel — useful for peak resolution selection. */
+    get framesPerPixel(): number;
+    /** Total content width in pixels. */
+    get contentWidth(): number;
+    /** The first visible frame at the current scroll position. */
+    get visibleStartFrame(): FrameCount;
+    /** The last visible frame at the current scroll position. */
+    get visibleEndFrame(): FrameCount;
+    setnumber(sampleRate: number): void;
+    setDuration(seconds: number): void;
+    setViewportWidth(pixels: number): void;
+    setPixelsPerSecond(pps: number): void;
+    setScrollX(px: number): void;
+    /**
+     * Zoom in/out while keeping the given anchor stable on screen.
+     *
+     * @param direction  Positive = zoom in, negative = zoom out.
+     * @param focus      Where the zoom should be anchored.
+     * @param anchorPx   Pixel position of the mouse (for ZoomFocus.MOUSE).
+     * @param playheadFrame Current transport frame (for ZoomFocus.PLAYHEAD).
+     */
+    zoom(direction: number, focus?: ZoomFocus, anchorPx?: number, playheadFrame?: FrameCount): void;
+    zoomIn(focus?: ZoomFocus, anchorPx?: number, playheadFrame?: FrameCount): void;
+    zoomOut(focus?: ZoomFocus, anchorPx?: number, playheadFrame?: FrameCount): void;
+    /** Zoom to fit the entire session duration in the viewport. */
+    zoomToFit(): void;
+    /** Zoom to show the given frame range. */
+    zoomToRange(startFrame: FrameCount, endFrame: FrameCount): void;
+    /** Convert an absolute frame position to a pixel X offset (relative to content origin). */
+    frameToPixel(frame: FrameCount): number;
+    /** Convert a pixel X offset (relative to content origin) to a frame position. */
+    pixelToFrame(px: number): FrameCount;
+    /** Convert a frame to a pixel offset relative to the visible viewport. */
+    frameToViewportPixel(frame: FrameCount): number;
+    /** Convert a viewport-relative pixel to an absolute frame. */
+    viewportPixelToFrame(px: number): FrameCount;
+    /** Convert a duration in frames to a width in pixels. */
+    framesToWidth(frames: FrameCount): number;
+    /** Convert a width in pixels to a duration in frames. */
+    widthToFrames(px: number): FrameCount;
+    /** Scroll so the given frame is visible, optionally centered. */
+    scrollToFrame(frame: FrameCount, center?: boolean): void;
+    /** Returns true if the given frame is within the visible viewport. */
+    isFrameVisible(frame: FrameCount): boolean;
+}
+//# sourceMappingURL=TimelineViewport.d.ts.map

package/dist/viewport/TimelineViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineViewport.d.ts","sourceRoot":"","sources":["../../src/viewport/TimelineViewport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAe1C;;;;;;;;;;;;;GAaG;AACH,qBAAa,gBAAgB;IACzB,2DAA2D;IAC3D,SAAgB,OAAO,eAAsB;IAE7C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAa;IAC7B,gDAAgD;IAChD,OAAO,CAAC,SAAS,CAAa;IAC9B,+CAA+C;IAC/C,OAAO,CAAC,cAAc,CAAa;gBAEvB,UAAU,EAAE,MAAM;IAM9B,IAAI,UAAU,IAAI,MAAM,CAA6B;IACrD,IAAI,eAAe,IAAI,MAAM,CAAkC;IAC/D,IAAI,OAAO,IAAI,MAAM,CAA0B;IAC/C,IAAI,QAAQ,IAAI,MAAM,CAA2B;IACjD,IAAI,aAAa,IAAI,MAAM,CAAgC;IAE3D,+DAA+D;IAC/D,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,qCAAqC;IACrC,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,8DAA8D;IAC9D,IAAI,iBAAiB,IAAI,UAAU,CAElC;IAED,6DAA6D;IAC7D,IAAI,eAAe,IAAI,UAAU,CAEhC;IAID,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAOnC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAOlC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAOtC,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAQrC,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAU5B;;;;;;;OAOG;IACH,IAAI,CACA,SAAS,EAAE,MAAM,EACjB,KAAK,GAAE,SAA0B,EACjC,QAAQ,CAAC,EAAE,MAAM,EACjB,aAAa,CAAC,EAAE,UAAU,GAC3B,IAAI;IA8CP,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI;IAI9E,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI;IAI/E,+DAA+D;IAC/D,SAAS,IAAI,IAAI;IAOjB,0CAA0C;IAC1C,WAAW,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,GAAG,IAAI;IAW/D,2FAA2F;IAC3F,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAIvC,iFAAiF;IACjF,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU;IAIpC,0EAA0E;IAC1E,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAI/C,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU;IAI5C,yDAAyD;IACzD,aAAa,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM;IAIzC,yDAAyD;IACzD,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU;IAMrC,iEAAiE;IACjE,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,GAAE,OAAe,GAAG,IAAI;IAW/D,sEAAsE;IACtE,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO;CAI7C"}

package/dist/viewport/TimelineViewport.js

@@ -0,0 +1,215 @@
+import { Signal } from '@drop-ai/core';
+import { ZoomFocus } from '@drop-ai/core';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const MIN_PPS = 1;
+const MAX_PPS = 1000;
+const DEFAULT_PPS = 50;
+const ZOOM_FACTOR = 1.5;
+// ---------------------------------------------------------------------------
+// TimelineViewport
+// ---------------------------------------------------------------------------
+/**
+ * Framework-agnostic timeline viewport state.
+ *
+ * Manages zoom level (`pixelsPerSecond`), horizontal scroll offset, and
+ * provides frame ↔ pixel conversion utilities needed by every DAW UI:
+ * waveform rendering, region positioning, playhead location, ruler ticks, etc.
+ *
+ * ```ts
+ * const vp = new TimelineViewport(44100);
+ * vp.changed.connect(() => render());
+ * vp.setPixelsPerSecond(100);
+ * const px = vp.frameToPixel(44100); // → 100
+ * ```
+ */
+export class TimelineViewport {
+    constructor(sampleRate) {
+        /** Emitted whenever pixelsPerSecond or scrollX changes. */
+        this.changed = new Signal();
+        this._pixelsPerSecond = DEFAULT_PPS;
+        /** Horizontal scroll offset in pixels. */
+        this._scrollX = 0;
+        /** Total duration of the session in seconds. */
+        this._duration = 0;
+        /** Visible width of the viewport in pixels. */
+        this._viewportWidth = 0;
+        this._sampleRate = sampleRate;
+    }
+    // ── Getters ──────────────────────────────────────────────────────────
+    get sampleRate() { return this._sampleRate; }
+    get pixelsPerSecond() { return this._pixelsPerSecond; }
+    get scrollX() { return this._scrollX; }
+    get duration() { return this._duration; }
+    get viewportWidth() { return this._viewportWidth; }
+    /** Frames per pixel — useful for peak resolution selection. */
+    get framesPerPixel() {
+        return this._sampleRate / this._pixelsPerSecond;
+    }
+    /** Total content width in pixels. */
+    get contentWidth() {
+        return this._duration * this._pixelsPerSecond;
+    }
+    /** The first visible frame at the current scroll position. */
+    get visibleStartFrame() {
+        return this.pixelToFrame(this._scrollX);
+    }
+    /** The last visible frame at the current scroll position. */
+    get visibleEndFrame() {
+        return this.pixelToFrame(this._scrollX + this._viewportWidth);
+    }
+    // ── Setters ──────────────────────────────────────────────────────────
+    setnumber(sampleRate) {
+        if (this._sampleRate !== sampleRate) {
+            this._sampleRate = sampleRate;
+            this.changed.emit();
+        }
+    }
+    setDuration(seconds) {
+        if (this._duration !== seconds) {
+            this._duration = seconds;
+            this.changed.emit();
+        }
+    }
+    setViewportWidth(pixels) {
+        if (this._viewportWidth !== pixels) {
+            this._viewportWidth = pixels;
+            this.changed.emit();
+        }
+    }
+    setPixelsPerSecond(pps) {
+        const clamped = Math.max(MIN_PPS, Math.min(pps, MAX_PPS));
+        if (this._pixelsPerSecond !== clamped) {
+            this._pixelsPerSecond = clamped;
+            this.changed.emit();
+        }
+    }
+    setScrollX(px) {
+        const clamped = Math.max(0, Math.min(px, Math.max(0, this.contentWidth - this._viewportWidth)));
+        if (this._scrollX !== clamped) {
+            this._scrollX = clamped;
+            this.changed.emit();
+        }
+    }
+    // ── Zoom ─────────────────────────────────────────────────────────────
+    /**
+     * Zoom in/out while keeping the given anchor stable on screen.
+     *
+     * @param direction  Positive = zoom in, negative = zoom out.
+     * @param focus      Where the zoom should be anchored.
+     * @param anchorPx   Pixel position of the mouse (for ZoomFocus.MOUSE).
+     * @param playheadFrame Current transport frame (for ZoomFocus.PLAYHEAD).
+     */
+    zoom(direction, focus = ZoomFocus.LEFT, anchorPx, playheadFrame) {
+        const factor = direction > 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+        const newPps = Math.max(MIN_PPS, Math.min(this._pixelsPerSecond * factor, MAX_PPS));
+        if (newPps === this._pixelsPerSecond)
+            return;
+        // Determine anchor point in seconds
+        let anchorSec;
+        switch (focus) {
+            case ZoomFocus.MOUSE:
+                anchorSec = (this._scrollX + (anchorPx !== null && anchorPx !== void 0 ? anchorPx : 0)) / this._pixelsPerSecond;
+                break;
+            case ZoomFocus.PLAYHEAD:
+                anchorSec = (playheadFrame !== null && playheadFrame !== void 0 ? playheadFrame : 0) / this._sampleRate;
+                break;
+            case ZoomFocus.CENTER:
+                anchorSec = (this._scrollX + this._viewportWidth / 2) / this._pixelsPerSecond;
+                break;
+            case ZoomFocus.RIGHT:
+                anchorSec = (this._scrollX + this._viewportWidth) / this._pixelsPerSecond;
+                break;
+            case ZoomFocus.EDIT_POINT:
+            case ZoomFocus.LEFT:
+            default:
+                anchorSec = this._scrollX / this._pixelsPerSecond;
+                break;
+        }
+        // Compute where the anchor would land after zoom
+        const anchorRatio = anchorPx !== undefined
+            ? anchorPx / this._viewportWidth
+            : focus === ZoomFocus.CENTER ? 0.5
+                : focus === ZoomFocus.RIGHT ? 1
+                    : 0;
+        const oldPps = this._pixelsPerSecond;
+        this._pixelsPerSecond = newPps;
+        // Adjust scroll to keep anchor visually stable
+        const newAnchorPx = anchorSec * newPps;
+        this._scrollX = Math.max(0, newAnchorPx - anchorRatio * this._viewportWidth);
+        if (oldPps !== this._pixelsPerSecond) {
+            this.changed.emit();
+        }
+    }
+    zoomIn(focus, anchorPx, playheadFrame) {
+        this.zoom(1, focus, anchorPx, playheadFrame);
+    }
+    zoomOut(focus, anchorPx, playheadFrame) {
+        this.zoom(-1, focus, anchorPx, playheadFrame);
+    }
+    /** Zoom to fit the entire session duration in the viewport. */
+    zoomToFit() {
+        if (this._duration <= 0 || this._viewportWidth <= 0)
+            return;
+        this._pixelsPerSecond = Math.max(MIN_PPS, Math.min(this._viewportWidth / this._duration, MAX_PPS));
+        this._scrollX = 0;
+        this.changed.emit();
+    }
+    /** Zoom to show the given frame range. */
+    zoomToRange(startFrame, endFrame) {
+        if (this._viewportWidth <= 0)
+            return;
+        const durationSec = (endFrame - startFrame) / this._sampleRate;
+        if (durationSec <= 0)
+            return;
+        this._pixelsPerSecond = Math.max(MIN_PPS, Math.min(this._viewportWidth / durationSec, MAX_PPS));
+        this._scrollX = (startFrame / this._sampleRate) * this._pixelsPerSecond;
+        this.changed.emit();
+    }
+    // ── Frame ↔ Pixel conversion ─────────────────────────────────────────
+    /** Convert an absolute frame position to a pixel X offset (relative to content origin). */
+    frameToPixel(frame) {
+        return (frame / this._sampleRate) * this._pixelsPerSecond;
+    }
+    /** Convert a pixel X offset (relative to content origin) to a frame position. */
+    pixelToFrame(px) {
+        return (px / this._pixelsPerSecond) * this._sampleRate;
+    }
+    /** Convert a frame to a pixel offset relative to the visible viewport. */
+    frameToViewportPixel(frame) {
+        return this.frameToPixel(frame) - this._scrollX;
+    }
+    /** Convert a viewport-relative pixel to an absolute frame. */
+    viewportPixelToFrame(px) {
+        return this.pixelToFrame(px + this._scrollX);
+    }
+    /** Convert a duration in frames to a width in pixels. */
+    framesToWidth(frames) {
+        return (frames / this._sampleRate) * this._pixelsPerSecond;
+    }
+    /** Convert a width in pixels to a duration in frames. */
+    widthToFrames(px) {
+        return (px / this._pixelsPerSecond) * this._sampleRate;
+    }
+    // ── Scroll helpers ───────────────────────────────────────────────────
+    /** Scroll so the given frame is visible, optionally centered. */
+    scrollToFrame(frame, center = false) {
+        const px = this.frameToPixel(frame);
+        if (center) {
+            this.setScrollX(px - this._viewportWidth / 2);
+        }
+        else if (px < this._scrollX) {
+            this.setScrollX(px);
+        }
+        else if (px > this._scrollX + this._viewportWidth) {
+            this.setScrollX(px - this._viewportWidth);
+        }
+    }
+    /** Returns true if the given frame is within the visible viewport. */
+    isFrameVisible(frame) {
+        const px = this.frameToPixel(frame);
+        return px >= this._scrollX && px <= this._scrollX + this._viewportWidth;
+    }
+}
+//# sourceMappingURL=TimelineViewport.js.map

package/dist/viewport/TimelineViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineViewport.js","sourceRoot":"","sources":["../../src/viewport/TimelineViewport.ts"],"names":[],"mappings":"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"}

package/dist/viewport/TrackLayout.d.ts

@@ -0,0 +1,41 @@
+import type { TrackId } from '@drop-ai/core';
+import { Signal } from '@drop-ai/core';
+export interface TrackLayoutEntry {
+    trackId: TrackId;
+    y: number;
+    height: number;
+}
+/**
+ * Computes vertical positions for a list of tracks.
+ *
+ * ```ts
+ * const layout = new TrackLayout();
+ * layout.setTracks(['t1', 't2', 't3']);
+ * layout.setTrackHeight('t1', 120);
+ * const entry = layout.getEntry('t1'); // { trackId: 't1', y: 0, height: 120 }
+ * const t2 = layout.getEntry('t2');    // { trackId: 't2', y: 120, height: 80 }
+ * ```
+ */
+export declare class TrackLayout {
+    readonly changed: Signal<void>;
+    private _trackIds;
+    private _heights;
+    private _collapsed;
+    private _collapsedHeight;
+    private _cache;
+    /** Set the ordered list of track IDs (top to bottom). */
+    setTracks(trackIds: TrackId[]): void;
+    setTrackHeight(trackId: TrackId, height: number): void;
+    getTrackHeight(trackId: TrackId): number;
+    setCollapsed(trackId: TrackId, collapsed: boolean): void;
+    isCollapsed(trackId: TrackId): boolean;
+    /** Get all layout entries (ordered top → bottom). */
+    getEntries(): TrackLayoutEntry[];
+    /** Get layout entry for a specific track. */
+    getEntry(trackId: TrackId): TrackLayoutEntry | undefined;
+    /** Total height of all tracks. */
+    get totalHeight(): number;
+    /** Find the track at a given Y coordinate. */
+    getTrackAtY(y: number): TrackLayoutEntry | undefined;
+}
+//# sourceMappingURL=TrackLayout.d.ts.map

package/dist/viewport/TrackLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackLayout.d.ts","sourceRoot":"","sources":["../../src/viewport/TrackLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAcvC,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,WAAW;IACpB,SAAgB,OAAO,eAAsB;IAE7C,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,gBAAgB,CAA4B;IAGpD,OAAO,CAAC,MAAM,CAAmC;IAIjD,yDAAyD;IACzD,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI;IAMpC,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAStD,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM;IAKxC,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI;IASxD,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IAMtC,qDAAqD;IACrD,UAAU,IAAI,gBAAgB,EAAE;IAahC,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,gBAAgB,GAAG,SAAS;IAIxD,kCAAkC;IAClC,IAAI,WAAW,IAAI,MAAM,CAKxB;IAED,8CAA8C;IAC9C,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS;CAOvD"}

package/dist/viewport/TrackLayout.js

@@ -0,0 +1,101 @@
+import { Signal } from '@drop-ai/core';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DEFAULT_TRACK_HEIGHT = 80;
+const MIN_TRACK_HEIGHT = 24;
+const MAX_TRACK_HEIGHT = 500;
+/**
+ * Computes vertical positions for a list of tracks.
+ *
+ * ```ts
+ * const layout = new TrackLayout();
+ * layout.setTracks(['t1', 't2', 't3']);
+ * layout.setTrackHeight('t1', 120);
+ * const entry = layout.getEntry('t1'); // { trackId: 't1', y: 0, height: 120 }
+ * const t2 = layout.getEntry('t2');    // { trackId: 't2', y: 120, height: 80 }
+ * ```
+ */
+export class TrackLayout {
+    constructor() {
+        this.changed = new Signal();
+        this._trackIds = [];
+        this._heights = new Map();
+        this._collapsed = new Set();
+        this._collapsedHeight = MIN_TRACK_HEIGHT;
+        // Cached layout entries, invalidated on change.
+        this._cache = null;
+    }
+    // ── Configuration ────────────────────────────────────────────────────
+    /** Set the ordered list of track IDs (top to bottom). */
+    setTracks(trackIds) {
+        this._trackIds = trackIds;
+        this._cache = null;
+        this.changed.emit();
+    }
+    setTrackHeight(trackId, height) {
+        const clamped = Math.max(MIN_TRACK_HEIGHT, Math.min(height, MAX_TRACK_HEIGHT));
+        if (this._heights.get(trackId) !== clamped) {
+            this._heights.set(trackId, clamped);
+            this._cache = null;
+            this.changed.emit();
+        }
+    }
+    getTrackHeight(trackId) {
+        var _a;
+        if (this._collapsed.has(trackId))
+            return this._collapsedHeight;
+        return (_a = this._heights.get(trackId)) !== null && _a !== void 0 ? _a : DEFAULT_TRACK_HEIGHT;
+    }
+    setCollapsed(trackId, collapsed) {
+        const changed = collapsed ? !this._collapsed.has(trackId) : this._collapsed.has(trackId);
+        if (!changed)
+            return;
+        if (collapsed)
+            this._collapsed.add(trackId);
+        else
+            this._collapsed.delete(trackId);
+        this._cache = null;
+        this.changed.emit();
+    }
+    isCollapsed(trackId) {
+        return this._collapsed.has(trackId);
+    }
+    // ── Queries ──────────────────────────────────────────────────────────
+    /** Get all layout entries (ordered top → bottom). */
+    getEntries() {
+        if (this._cache)
+            return this._cache;
+        let y = 0;
+        const entries = [];
+        for (const trackId of this._trackIds) {
+            const height = this.getTrackHeight(trackId);
+            entries.push({ trackId, y, height });
+            y += height;
+        }
+        this._cache = entries;
+        return entries;
+    }
+    /** Get layout entry for a specific track. */
+    getEntry(trackId) {
+        return this.getEntries().find(e => e.trackId === trackId);
+    }
+    /** Total height of all tracks. */
+    get totalHeight() {
+        const entries = this.getEntries();
+        if (entries.length === 0)
+            return 0;
+        const last = entries[entries.length - 1];
+        return last.y + last.height;
+    }
+    /** Find the track at a given Y coordinate. */
+    getTrackAtY(y) {
+        const entries = this.getEntries();
+        for (let i = entries.length - 1; i >= 0; i--) {
+            if (y >= entries[i].y)
+                return entries[i];
+        }
+        return undefined;
+    }
+}
+//# sourceMappingURL=TrackLayout.js.map

package/dist/viewport/TrackLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackLayout.js","sourceRoot":"","sources":["../../src/viewport/TrackLayout.ts"],"names":[],"mappings":"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"}

package/dist/waveform/computePeaks.d.ts

@@ -0,0 +1,42 @@
+import type { PeakData } from '@drop-ai/core';
+/**
+ * Compute peak data from a raw `Float32Array` of audio samples.
+ *
+ * This produces one min/max/rms entry per `resolution` frames, suitable for
+ * waveform rendering at the matching zoom level.
+ *
+ * @param channelData  Raw PCM samples for a single channel.
+ * @param resolution   Number of source frames per peak entry.
+ * @returns            PeakData compatible with `Source.setPeakData()`.
+ *
+ * ```ts
+ * const data = audioBuffer.getChannelData(0);
+ * const peaks = computePeaksFromSamples(data, 512);
+ * source.setPeakData(512, peaks);
+ * ```
+ */
+export declare function computePeaksFromSamples(channelData: Float32Array, resolution: number): PeakData;
+/**
+ * Compute peak data from an `AudioBuffer`.
+ *
+ * Processes channel 0 by default. For stereo, call twice with different
+ * channel indices and store separately.
+ *
+ * @param audioBuffer  Decoded Web Audio buffer.
+ * @param resolution   Number of source frames per peak entry.
+ * @param channel      Channel index (default 0).
+ */
+export declare function computePeaks(audioBuffer: AudioBuffer, resolution: number, channel?: number): PeakData;
+/**
+ * Choose an appropriate peak resolution for a given zoom level.
+ *
+ * The idea: each peak entry should map to roughly 1 pixel. Since
+ * `framesPerPixel = sampleRate / pixelsPerSecond`, we pick the nearest
+ * power-of-two resolution that is ≤ framesPerPixel so we never render
+ * more than 1 peak per pixel.
+ *
+ * @param framesPerPixel  Current `sampleRate / pixelsPerSecond`.
+ * @returns               Recommended resolution (power of two, minimum 64).
+ */
+export declare function recommendResolution(framesPerPixel: number): number;
+//# sourceMappingURL=computePeaks.d.ts.map

package/dist/waveform/computePeaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computePeaks.d.ts","sourceRoot":"","sources":["../../src/waveform/computePeaks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CACnC,WAAW,EAAE,YAAY,EACzB,UAAU,EAAE,MAAM,GACnB,QAAQ,CA4BV;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CACxB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,MAAU,GACpB,QAAQ,CAEV;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAKlE"}

package/dist/waveform/computePeaks.js

@@ -0,0 +1,74 @@
+/**
+ * Compute peak data from a raw `Float32Array` of audio samples.
+ *
+ * This produces one min/max/rms entry per `resolution` frames, suitable for
+ * waveform rendering at the matching zoom level.
+ *
+ * @param channelData  Raw PCM samples for a single channel.
+ * @param resolution   Number of source frames per peak entry.
+ * @returns            PeakData compatible with `Source.setPeakData()`.
+ *
+ * ```ts
+ * const data = audioBuffer.getChannelData(0);
+ * const peaks = computePeaksFromSamples(data, 512);
+ * source.setPeakData(512, peaks);
+ * ```
+ */
+export function computePeaksFromSamples(channelData, resolution) {
+    const length = Math.ceil(channelData.length / resolution);
+    const min = new Float32Array(length);
+    const max = new Float32Array(length);
+    const rms = new Float32Array(length);
+    for (let i = 0; i < length; i++) {
+        const start = i * resolution;
+        const end = Math.min(start + resolution, channelData.length);
+        let lo = Infinity;
+        let hi = -Infinity;
+        let sumSq = 0;
+        for (let j = start; j < end; j++) {
+            const v = channelData[j];
+            if (v < lo)
+                lo = v;
+            if (v > hi)
+                hi = v;
+            sumSq += v * v;
+        }
+        const count = end - start;
+        min[i] = lo === Infinity ? 0 : lo;
+        max[i] = hi === -Infinity ? 0 : hi;
+        rms[i] = count > 0 ? Math.sqrt(sumSq / count) : 0;
+    }
+    return { min, max, rms, length, resolution };
+}
+/**
+ * Compute peak data from an `AudioBuffer`.
+ *
+ * Processes channel 0 by default. For stereo, call twice with different
+ * channel indices and store separately.
+ *
+ * @param audioBuffer  Decoded Web Audio buffer.
+ * @param resolution   Number of source frames per peak entry.
+ * @param channel      Channel index (default 0).
+ */
+export function computePeaks(audioBuffer, resolution, channel = 0) {
+    return computePeaksFromSamples(audioBuffer.getChannelData(channel), resolution);
+}
+/**
+ * Choose an appropriate peak resolution for a given zoom level.
+ *
+ * The idea: each peak entry should map to roughly 1 pixel. Since
+ * `framesPerPixel = sampleRate / pixelsPerSecond`, we pick the nearest
+ * power-of-two resolution that is ≤ framesPerPixel so we never render
+ * more than 1 peak per pixel.
+ *
+ * @param framesPerPixel  Current `sampleRate / pixelsPerSecond`.
+ * @returns               Recommended resolution (power of two, minimum 64).
+ */
+export function recommendResolution(framesPerPixel) {
+    const MIN_RESOLUTION = 64;
+    if (framesPerPixel <= MIN_RESOLUTION)
+        return MIN_RESOLUTION;
+    // Largest power of two ≤ framesPerPixel
+    return 1 << Math.floor(Math.log2(framesPerPixel));
+}
+//# sourceMappingURL=computePeaks.js.map

package/dist/waveform/computePeaks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computePeaks.js","sourceRoot":"","sources":["../../src/waveform/computePeaks.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,uBAAuB,CACnC,WAAyB,EACzB,UAAkB;IAElB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC;IAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAG,CAAC,GAAG,UAAU,CAAC;QAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAE7D,IAAI,EAAE,GAAG,QAAQ,CAAC;QAClB,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC;QACnB,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,CAAC,GAAG,EAAE;gBAAE,EAAE,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,GAAG,EAAE;gBAAE,EAAE,GAAG,CAAC,CAAC;YACnB,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC;QACnB,CAAC;QAED,MAAM,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC;QAC1B,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAClC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;AACjD,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,YAAY,CACxB,WAAwB,EACxB,UAAkB,EAClB,UAAkB,CAAC;IAEnB,OAAO,uBAAuB,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;AACpF,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,mBAAmB,CAAC,cAAsB;IACtD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,cAAc,IAAI,cAAc;QAAE,OAAO,cAAc,CAAC;IAC5D,wCAAwC;IACxC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;AACtD,CAAC"}

package/dist/waveform/renderWaveform.d.ts

@@ -0,0 +1,53 @@
+import type { PeakData, FrameCount } from '@drop-ai/core';
+export interface WaveformRenderOptions {
+    /** Canvas 2D rendering context to draw into. */
+    ctx: CanvasRenderingContext2D;
+    /** Pre-computed peak data. */
+    peaks: PeakData;
+    /** Pixel width of the canvas / draw area. */
+    width: number;
+    /** Pixel height of the canvas / draw area. */
+    height: number;
+    /** Fill color for the waveform (default: '#1a1a1a'). */
+    color?: string;
+    /** Start frame offset within the source (default: 0). */
+    sourceStart?: FrameCount;
+    /** Number of frames to render (default: entire peak data). */
+    sourceLength?: FrameCount;
+    /** Y offset for drawing (for stereo: top/bottom half). */
+    yOffset?: number;
+    /** Use logarithmic dB scaling (default: false). */
+    logScale?: boolean;
+}
+/**
+ * Draw a waveform from pre-computed `PeakData` onto a Canvas 2D context.
+ *
+ * This is a pure rendering function — it doesn't fetch buffers or manage
+ * state. Feed it the output of `computePeaks()` and a canvas context.
+ *
+ * ```ts
+ * const peaks = computePeaks(audioBuffer, 512);
+ * const ctx = canvas.getContext('2d')!;
+ * renderWaveform({ ctx, peaks, width: 800, height: 120 });
+ * ```
+ */
+export declare function renderWaveform(options: WaveformRenderOptions): void;
+/**
+ * Convenience: render a stereo waveform (L top half, R bottom half).
+ */
+export declare function renderStereoWaveform(ctx: CanvasRenderingContext2D, peaksL: PeakData, peaksR: PeakData, width: number, height: number, options?: Omit<WaveformRenderOptions, 'ctx' | 'peaks' | 'width' | 'height' | 'yOffset'>): void;
+/**
+ * Render a waveform directly from raw samples (no pre-computed peaks).
+ *
+ * Convenient for small regions or one-off rendering where pre-computing
+ * peaks isn't worth it. For large buffers, prefer `computePeaks()` +
+ * `renderWaveform()`.
+ */
+export declare function renderWaveformFromSamples(ctx: CanvasRenderingContext2D, channelData: Float32Array, width: number, height: number, options?: {
+    color?: string;
+    sourceStart?: number;
+    sourceLength?: number;
+    yOffset?: number;
+    logScale?: boolean;
+}): void;
+//# sourceMappingURL=renderWaveform.d.ts.map

package/dist/waveform/renderWaveform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderWaveform.d.ts","sourceRoot":"","sources":["../../src/waveform/renderWaveform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM1D,MAAM,WAAW,qBAAqB;IAClC,gDAAgD;IAChD,GAAG,EAAE,wBAAwB,CAAC;IAC9B,8BAA8B;IAC9B,KAAK,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAkBD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAwDnE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAChC,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,QAAQ,EAChB,MAAM,EAAE,QAAQ,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC,GACxF,IAAI,CAaN;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACrC,GAAG,EAAE,wBAAwB,EAC7B,WAAW,EAAE,YAAY,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GACF,IAAI,CAqCN"}

package/dist/waveform/renderWaveform.js

@@ -0,0 +1,118 @@
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function scaleAmpLog(v) {
+    if (v === 0)
+        return 0;
+    const sign = v < 0 ? -1 : 1;
+    const db = 20 * Math.log10(Math.abs(v));
+    const clamped = Math.max(-60, db);
+    return sign * ((clamped + 60) / 60);
+}
+// ---------------------------------------------------------------------------
+// renderWaveform
+// ---------------------------------------------------------------------------
+/**
+ * Draw a waveform from pre-computed `PeakData` onto a Canvas 2D context.
+ *
+ * This is a pure rendering function — it doesn't fetch buffers or manage
+ * state. Feed it the output of `computePeaks()` and a canvas context.
+ *
+ * ```ts
+ * const peaks = computePeaks(audioBuffer, 512);
+ * const ctx = canvas.getContext('2d')!;
+ * renderWaveform({ ctx, peaks, width: 800, height: 120 });
+ * ```
+ */
+export function renderWaveform(options) {
+    const { ctx, peaks, width, height, color = '#1a1a1a', sourceStart = 0, sourceLength, yOffset = 0, logScale = false, } = options;
+    const scale = logScale ? scaleAmpLog : (v) => v;
+    // Determine the range of peak entries to render
+    const peakStart = Math.floor(sourceStart / peaks.resolution);
+    const totalPeakEntries = sourceLength != null
+        ? Math.ceil(sourceLength / peaks.resolution)
+        : peaks.length - peakStart;
+    const peakEnd = Math.min(peakStart + totalPeakEntries, peaks.length);
+    const peakCount = peakEnd - peakStart;
+    if (peakCount <= 0)
+        return;
+    ctx.fillStyle = color;
+    const amp = height / 2;
+    // How many peak entries map to one pixel column
+    const entriesPerPixel = peakCount / width;
+    for (let px = 0; px < width; px++) {
+        const entryStart = peakStart + Math.floor(px * entriesPerPixel);
+        const entryEnd = Math.min(peakStart + Math.floor((px + 1) * entriesPerPixel), peakEnd);
+        let lo = Infinity;
+        let hi = -Infinity;
+        for (let e = entryStart; e < entryEnd; e++) {
+            if (peaks.min[e] < lo)
+                lo = peaks.min[e];
+            if (peaks.max[e] > hi)
+                hi = peaks.max[e];
+        }
+        // Fallback for very zoomed in (< 1 entry per pixel)
+        if (lo === Infinity) {
+            const idx = Math.min(entryStart, peaks.length - 1);
+            lo = peaks.min[idx];
+            hi = peaks.max[idx];
+        }
+        const sMin = scale(lo);
+        const sMax = scale(hi);
+        const y = yOffset + (1 - sMax) * amp;
+        const h = Math.max(1, (sMax - sMin) * amp);
+        ctx.fillRect(px, y, 1, h);
+    }
+}
+/**
+ * Convenience: render a stereo waveform (L top half, R bottom half).
+ */
+export function renderStereoWaveform(ctx, peaksL, peaksR, width, height, options) {
+    const halfHeight = height / 2;
+    renderWaveform(Object.assign({ ctx, peaks: peaksL, width, height: halfHeight, yOffset: 0 }, options));
+    // Draw separator
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.beginPath();
+    ctx.moveTo(0, halfHeight);
+    ctx.lineTo(width, halfHeight);
+    ctx.stroke();
+    renderWaveform(Object.assign({ ctx, peaks: peaksR, width, height: halfHeight, yOffset: halfHeight }, options));
+}
+/**
+ * Render a waveform directly from raw samples (no pre-computed peaks).
+ *
+ * Convenient for small regions or one-off rendering where pre-computing
+ * peaks isn't worth it. For large buffers, prefer `computePeaks()` +
+ * `renderWaveform()`.
+ */
+export function renderWaveformFromSamples(ctx, channelData, width, height, options) {
+    const { color = '#1a1a1a', sourceStart = 0, sourceLength, yOffset = 0, logScale = false, } = options !== null && options !== void 0 ? options : {};
+    const scale = logScale ? scaleAmpLog : (v) => v;
+    const sampleOffset = Math.max(0, Math.floor(sourceStart));
+    const sampleCount = sourceLength != null
+        ? Math.min(Math.floor(sourceLength), channelData.length - sampleOffset)
+        : channelData.length - sampleOffset;
+    ctx.fillStyle = color;
+    const amp = height / 2;
+    const step = Math.ceil(sampleCount / width);
+    for (let px = 0; px < width; px++) {
+        let lo = 1.0;
+        let hi = -1.0;
+        for (let j = 0; j < step; j++) {
+            const idx = sampleOffset + px * step + j;
+            if (idx >= channelData.length)
+                break;
+            const v = channelData[idx];
+            if (v < lo)
+                lo = v;
+            if (v > hi)
+                hi = v;
+        }
+        const sMin = scale(lo);
+        const sMax = scale(hi);
+        const y = yOffset + (1 - sMax) * amp;
+        const h = Math.max(1, (sMax - sMin) * amp);
+        ctx.fillRect(px, y, 1, h);
+    }
+}
+//# sourceMappingURL=renderWaveform.js.map

package/dist/waveform/renderWaveform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderWaveform.js","sourceRoot":"","sources":["../../src/waveform/renderWaveform.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@drop-ai/ui-utils",
+  "version": "0.2.0",
+  "description": "Framework-agnostic UI utilities for building DAW interfaces on top of @drop-ai/core",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@drop-ai/core": "0.3.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "daw",
+    "audio",
+    "ui",
+    "waveform",
+    "timeline",
+    "viewport"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/whizzkid/drop.ai",
+    "directory": "packages/ui-utils"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  }
+}