@clipkit/editor 1.0.0

package/dist/panels/timeline/Waveform.js

@@ -0,0 +1,63 @@
+// Clip waveform — draws REAL min/max peaks (A3's extractWaveformPeaks,
+// cached per URL) onto a canvas sized to the clip. Decode failures
+// (silent video containers, CORS) just render nothing.
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { extractWaveformPeaks } from '@clipkit/playback';
+export function Waveform({ url, trimStart = 0, mediaWindow, color, className, }) {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        let cancelled = false;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        extractWaveformPeaks(url)
+            .then((wf) => {
+            if (cancelled || !canvasRef.current)
+                return;
+            draw(canvasRef.current, wf, trimStart, mediaWindow, color);
+        })
+            .catch(() => {
+            /* no decodable audio — leave the clip body plain */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, trimStart, mediaWindow, color]);
+    return (_jsx("canvas", { ref: canvasRef, className: className, style: { width: '100%', height: '100%', display: 'block' } }));
+}
+function draw(canvas, wf, trimStart, mediaWindow, color) {
+    const rect = canvas.getBoundingClientRect();
+    const w = Math.max(1, Math.floor(rect.width));
+    const h = Math.max(1, Math.floor(rect.height));
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const windowSec = mediaWindow ?? Math.max(0, wf.duration - trimStart);
+    if (windowSec <= 0)
+        return;
+    const startBucket = trimStart * wf.peaksPerSecond;
+    const bucketsPerPx = (windowSec * wf.peaksPerSecond) / w;
+    const mid = h / 2;
+    const totalBuckets = wf.peaks.length / 2;
+    ctx.fillStyle = color ?? 'rgba(255, 255, 255, 0.28)';
+    for (let x = 0; x < w; x++) {
+        const b0 = Math.floor(startBucket + x * bucketsPerPx);
+        const b1 = Math.max(b0 + 1, Math.floor(startBucket + (x + 1) * bucketsPerPx));
+        let min = 0;
+        let max = 0;
+        for (let b = b0; b < b1 && b < totalBuckets; b++) {
+            if (b < 0)
+                continue;
+            min = Math.min(min, wf.peaks[b * 2]);
+            max = Math.max(max, wf.peaks[b * 2 + 1]);
+        }
+        const y0 = mid - max * (mid - 1);
+        const y1 = mid - min * (mid - 1);
+        ctx.fillRect(x, y0, 1, Math.max(1, y1 - y0));
+    }
+}
+//# sourceMappingURL=Waveform.js.map

package/dist/panels/timeline/Waveform.js.map

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

package/dist/panels/timeline/clip-style.d.ts

@@ -0,0 +1,10 @@
+export interface ClipStyle {
+    bg: string;
+    border: string;
+    /** Waveform tint (audio-carrying types). */
+    wave?: string;
+}
+export declare const CLIP_STYLES: Record<string, ClipStyle>;
+export declare const DEFAULT_CLIP_STYLE: ClipStyle;
+export declare function clipStyleOf(type: string): ClipStyle;
+//# sourceMappingURL=clip-style.d.ts.map

package/dist/panels/timeline/clip-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip-style.d.ts","sourceRoot":"","sources":["../../../src/panels/timeline/clip-style.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAUjD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAAgD,CAAC;AAElF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAEnD"}

package/dist/panels/timeline/clip-style.js

@@ -0,0 +1,20 @@
+// Clip palette — the reference shot's type-coloring: magenta caption/
+// text runs, orange images, red shapes, purple groups, blue video
+// with lighter waveforms, green audio with teal waveforms. Selected
+// clips lighten + ring; locked dim.
+export const CLIP_STYLES = {
+    caption: { bg: '#a82e63', border: '#c2457a' },
+    text: { bg: '#9c2d74', border: '#b8478f' },
+    image: { bg: '#a85b1d', border: '#c27636' },
+    shape: { bg: '#a33b2e', border: '#bd5547' },
+    group: { bg: '#5d49a8', border: '#7763c2' },
+    video: { bg: '#2d5d9c', border: '#4777b8', wave: 'rgba(168, 205, 255, 0.55)' },
+    audio: { bg: '#1d7a58', border: '#36946f', wave: 'rgba(94, 230, 178, 0.65)' },
+    svg: { bg: '#2d8a96', border: '#47a4b0' },
+    particles: { bg: '#8a2d96', border: '#a447b0' },
+};
+export const DEFAULT_CLIP_STYLE = { bg: '#4a4a4a', border: '#5e5e5e' };
+export function clipStyleOf(type) {
+    return CLIP_STYLES[type] ?? DEFAULT_CLIP_STYLE;
+}
+//# sourceMappingURL=clip-style.js.map

package/dist/panels/timeline/clip-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clip-style.js","sourceRoot":"","sources":["../../../src/panels/timeline/clip-style.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,kEAAkE;AAClE,oEAAoE;AACpE,oCAAoC;AASpC,MAAM,CAAC,MAAM,WAAW,GAA8B;IACpD,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC7C,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC1C,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC3C,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC3C,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC3C,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,2BAA2B,EAAE;IAC9E,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,0BAA0B,EAAE;IAC7E,GAAG,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IACzC,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAElF,MAAM,UAAU,WAAW,CAAC,IAAY;IACtC,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC;AACjD,CAAC"}

package/dist/panels/timeline/filmstrip.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Cached filmstrip frame for `url` at `mediaTime` (seconds into the
+ * media), scaled to `height` px. Returns null while decoding; calls
+ * `onReady` when a newly-decoded frame for this URL is available.
+ */
+export declare function filmstripFrame(url: string, mediaTime: number, height: number, onReady: () => void): ImageBitmap | null;
+//# sourceMappingURL=filmstrip.d.ts.map

package/dist/panels/timeline/filmstrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filmstrip.d.ts","sourceRoot":"","sources":["../../../src/panels/timeline/filmstrip.ts"],"names":[],"mappings":"AA8HA;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,IAAI,GAClB,WAAW,GAAG,IAAI,CAUpB"}

package/dist/panels/timeline/filmstrip.js

@@ -0,0 +1,135 @@
+// Filmstrip frame sampler (EDITORS — ruled by Ian 2026-06-12:
+// FRONTEND ONLY, no backend, no storage). Per source URL, a hidden
+// <video> seeks to requested media times and captures frames as
+// ImageBitmaps held in an in-memory LRU. Nothing is persisted — the
+// cache lives for the session and rebuilds on reload.
+//
+// Usage: filmstripFrame(url, mediaTime, height, onReady) returns the
+// cached frame or null; when null, it queues a decode and calls
+// onReady once the frame lands so the caller can redraw.
+const MAX_FRAMES_PER_URL = 240; // LRU cap; visible clips request few.
+class Sampler {
+    #video;
+    #ready = false;
+    #failed = false;
+    #aspect = 16 / 9;
+    #cache = new Map();
+    #queue = [];
+    #seeking = false;
+    #listeners = new Set();
+    constructor(url) {
+        const v = document.createElement('video');
+        v.muted = true;
+        v.crossOrigin = 'anonymous';
+        v.preload = 'auto';
+        v.playsInline = true;
+        v.src = url;
+        this.#video = v;
+        const onLoaded = () => {
+            this.#ready = true;
+            if (v.videoWidth && v.videoHeight)
+                this.#aspect = v.videoWidth / v.videoHeight;
+            this.#pump();
+        };
+        v.addEventListener('loadeddata', onLoaded, { once: true });
+        v.addEventListener('error', () => {
+            this.#failed = true;
+            this.#queue.length = 0;
+        });
+        // Some browsers need a load() nudge for metadata.
+        v.load();
+    }
+    get aspect() {
+        return this.#aspect;
+    }
+    onReady(cb) {
+        this.#listeners.add(cb);
+    }
+    /** Cached frame, or null (decode queued). */
+    frame(mediaTime, height) {
+        if (this.#failed)
+            return null;
+        const key = bucketKey(mediaTime, height);
+        const hit = this.#cache.get(key);
+        if (hit) {
+            // LRU touch.
+            this.#cache.delete(key);
+            this.#cache.set(key, hit);
+            return hit;
+        }
+        if (!this.#queue.some((p) => p.key === key)) {
+            this.#queue.push({ mediaTime, height, key });
+            this.#pump();
+        }
+        return null;
+    }
+    #pump() {
+        if (this.#seeking || !this.#ready || this.#failed)
+            return;
+        const next = this.#queue.shift();
+        if (!next)
+            return;
+        if (this.#cache.has(next.key)) {
+            this.#pump();
+            return;
+        }
+        this.#seeking = true;
+        const v = this.#video;
+        const onSeeked = () => {
+            v.removeEventListener('seeked', onSeeked);
+            createImageBitmap(v, { resizeHeight: Math.round(next.height * 2), resizeQuality: 'low' })
+                .then((bmp) => {
+                this.#cache.set(next.key, bmp);
+                while (this.#cache.size > MAX_FRAMES_PER_URL) {
+                    const oldest = this.#cache.keys().next().value;
+                    if (oldest === undefined)
+                        break;
+                    this.#cache.get(oldest)?.close();
+                    this.#cache.delete(oldest);
+                }
+                for (const cb of this.#listeners)
+                    cb();
+            })
+                .catch(() => {
+                // CORS-tainted or decode failure → give up on this URL.
+                this.#failed = true;
+            })
+                .finally(() => {
+                this.#seeking = false;
+                this.#pump();
+            });
+        };
+        v.addEventListener('seeked', onSeeked);
+        try {
+            v.currentTime = Math.max(0, next.mediaTime);
+        }
+        catch {
+            v.removeEventListener('seeked', onSeeked);
+            this.#seeking = false;
+            this.#failed = true;
+        }
+    }
+}
+const samplers = new Map();
+function bucketKey(mediaTime, height) {
+    // Quantize to 0.5s so adjacent requests share a decode.
+    return `${Math.round(mediaTime * 2) / 2}:${height}`;
+}
+/**
+ * Cached filmstrip frame for `url` at `mediaTime` (seconds into the
+ * media), scaled to `height` px. Returns null while decoding; calls
+ * `onReady` when a newly-decoded frame for this URL is available.
+ */
+export function filmstripFrame(url, mediaTime, height, onReady) {
+    let s = samplers.get(url);
+    if (!s) {
+        s = new Sampler(url);
+        s.onReady(onReady);
+        samplers.set(url, s);
+    }
+    else {
+        s.onReady(onReady);
+    }
+    return s.frame(mediaTime, height);
+}
+//# sourceMappingURL=filmstrip.js.map

package/dist/panels/timeline/filmstrip.js.map

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

package/dist/panels/timeline/timeline-layout.d.ts

@@ -0,0 +1,65 @@
+import type { Element } from '@clipkit/protocol';
+export declare const ROW_H = 32;
+export declare const LANE_H = 24;
+export declare const RULER_H = 24;
+export declare const HEADER_W = 116;
+export declare const CLIP_INSET = 3;
+export interface ClipRect {
+    id: string;
+    element: Element;
+    layer: number;
+    /** Seconds. */
+    time: number;
+    dur: number;
+    /** Content-space px. */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface LaneKeyframe {
+    animIndex: number;
+    kfIndex: number;
+    time: number;
+    x: number;
+    y: number;
+}
+export interface Lane {
+    elementId: string;
+    property: string;
+    animIndex: number;
+    y: number;
+    h: number;
+    keyframes: LaneKeyframe[];
+}
+export interface LayerRow {
+    layer: number;
+    y: number;
+    h: number;
+    /** The element whose keyframe lanes are expanded on this row, if any. */
+    expandedId: string | null;
+    /** First element on the row carrying keyframe_animations (for the chevron). */
+    animId: string | null;
+}
+export interface TimelineLayout {
+    layers: LayerRow[];
+    clips: ClipRect[];
+    lanes: Lane[];
+    contentW: number;
+    contentH: number;
+    duration: number;
+    pxPerSec: number;
+}
+/** Layers present, ascending — layer 1 (front/on top) is the first/top row. */
+export declare function listLayers(source: {
+    elements: readonly Element[];
+}): number[];
+export declare function buildLayout(source: {
+    elements: readonly Element[];
+}, duration: number, pxPerSec: number, expanded: ReadonlySet<string>): TimelineLayout;
+/** Inclusive index range of layers intersecting [scrollTop, scrollTop+viewH]. */
+export declare function visibleLayerRange(layers: readonly LayerRow[], scrollTop: number, viewH: number): {
+    start: number;
+    end: number;
+};
+//# sourceMappingURL=timeline-layout.d.ts.map

package/dist/panels/timeline/timeline-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-layout.d.ts","sourceRoot":"","sources":["../../../src/panels/timeline/timeline-layout.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAY,MAAM,mBAAmB,CAAC;AAS3D,eAAO,MAAM,KAAK,KAAK,CAAC;AACxB,eAAO,MAAM,MAAM,KAAK,CAAC;AACzB,eAAO,MAAM,OAAO,KAAK,CAAC;AAC1B,eAAO,MAAM,QAAQ,MAAM,CAAC;AAI5B,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,wBAAwB;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,yEAAyE;IACzE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+EAA+E;IAC/E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,MAAM,EAAE;IAAE,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAA;CAAE,GAAG,MAAM,EAAE,CAI7E;AAKD,wBAAgB,WAAW,CACzB,MAAM,EAAE;IAAE,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAA;CAAE,EACxC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAC5B,cAAc,CA4EhB;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,SAAS,QAAQ,EAAE,EAC3B,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAehC"}

package/dist/panels/timeline/timeline-layout.js

@@ -0,0 +1,118 @@
+// Timeline layout model (EDITORS D9) — the single source of truth for
+// BOTH the canvas painter and the DOM hit-test overlay in the hybrid
+// canvas timeline. Pure: given the source + zoom + expansion set it
+// returns content-space rectangles (y grows downward from 0 at the
+// first layer row, x = seconds * pxPerSec). The canvas draws these
+// offset by scroll; the overlay places hit-rects at the same coords.
+import { elementDuration, elementTime, elementLayer, } from '@clipkit/editor-core';
+// Row/layer height. Matches the basic editor's compact 32px track — the
+// representation Ian preferred. With CLIP_INSET=3 each side the clip bar is 26px.
+export const ROW_H = 32;
+export const LANE_H = 24;
+export const RULER_H = 24;
+export const HEADER_W = 116;
+// px top/bottom inside the row. 3 (not 2) so the bar clears the now-visible row
+// separators: the clip's centered border stroke overhangs ~0.75px, which ate
+// most of a 2px gap and made the bar look like it touched the line.
+export const CLIP_INSET = 3;
+/** Layers present, ascending — layer 1 (front/on top) is the first/top row. */
+export function listLayers(source) {
+    const set = new Set();
+    for (const el of source.elements)
+        set.add(elementLayer(el));
+    return [...set].sort((a, b) => a - b);
+}
+const kfTime = (k) => typeof k.time === 'number' ? k.time : parseFloat(String(k.time)) || 0;
+export function buildLayout(source, duration, pxPerSec, expanded) {
+    const layerNums = listLayers(source);
+    const layers = [];
+    const clips = [];
+    const lanes = [];
+    let y = 0;
+    for (const layer of layerNums) {
+        const rowEls = source.elements.filter((el) => elementLayer(el) === layer);
+        const expandedEl = rowEls.find((el) => el.id && expanded.has(el.id)) ?? null;
+        const animEl = rowEls.find((el) => el.id && (el.keyframe_animations?.length ?? 0) > 0) ?? null;
+        const laneAnims = expandedEl?.keyframe_animations ?? [];
+        const rowH = ROW_H + laneAnims.length * LANE_H;
+        layers.push({
+            layer,
+            y,
+            h: rowH,
+            expandedId: expandedEl?.id ?? null,
+            animId: animEl?.id ?? null,
+        });
+        for (const el of rowEls) {
+            if (!el.id)
+                continue;
+            const t = elementTime(el);
+            const d = elementDuration(el, duration);
+            clips.push({
+                id: el.id,
+                element: el,
+                layer,
+                time: t,
+                dur: d,
+                x: t * pxPerSec,
+                y: y + CLIP_INSET,
+                w: Math.max(20, d * pxPerSec),
+                h: ROW_H - CLIP_INSET * 2,
+            });
+        }
+        if (expandedEl) {
+            const start = elementTime(expandedEl);
+            laneAnims.forEach((anim, ai) => {
+                const laneY = y + ROW_H + ai * LANE_H;
+                lanes.push({
+                    elementId: expandedEl.id,
+                    property: anim.property,
+                    animIndex: ai,
+                    y: laneY,
+                    h: LANE_H,
+                    keyframes: anim.keyframes.map((k, ki) => {
+                        const kt = kfTime(k);
+                        return {
+                            animIndex: ai,
+                            kfIndex: ki,
+                            time: kt,
+                            x: (start + kt) * pxPerSec,
+                            y: laneY + LANE_H / 2,
+                        };
+                    }),
+                });
+            });
+        }
+        y += rowH;
+    }
+    return {
+        layers,
+        clips,
+        lanes,
+        contentW: Math.max(1, Math.ceil(duration * pxPerSec)) + 240,
+        contentH: y,
+        duration,
+        pxPerSec,
+    };
+}
+/** Inclusive index range of layers intersecting [scrollTop, scrollTop+viewH]. */
+export function visibleLayerRange(layers, scrollTop, viewH) {
+    if (layers.length === 0)
+        return { start: 0, end: 0 };
+    const top = scrollTop;
+    const bottom = scrollTop + viewH;
+    let start = layers.length;
+    let end = 0;
+    for (let i = 0; i < layers.length; i++) {
+        const r = layers[i];
+        if (r.y + r.h >= top && r.y <= bottom) {
+            if (i < start)
+                start = i;
+            if (i + 1 > end)
+                end = i + 1;
+        }
+    }
+    if (start > end)
+        return { start: 0, end: 0 };
+    return { start, end };
+}
+//# sourceMappingURL=timeline-layout.js.map

package/dist/panels/timeline/timeline-layout.js.map

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

package/dist/types.d.ts

@@ -0,0 +1,68 @@
+import type { Source } from '@clipkit/protocol';
+import type { AssetStore, EditorConfiguration } from '@clipkit/editor-core';
+/** A render resolution the export dialog offers. Free in-browser — WebCodecs
+ *  upscales the canvas; no backend needed. */
+export type ExportResolution = 'source' | '720p' | '1080p' | '1440p' | '4k';
+/** Export quality tier — maps to encoder bitrate. */
+export type ExportQuality = 'standard' | 'high';
+/**
+ * A format the export dialog offers. The editor renders these GENERICALLY — it
+ * has no knowledge of codecs or how any format is produced. The default is just
+ * `[{ id: 'mp4', label: 'MP4' }]` (the free in-browser path). Consumers inject
+ * additional formats (ProRes, AV1, transparent, …) and handle them in
+ * `onRender`; the chosen `id` is echoed back there. Same pattern as `assetStore`.
+ */
+export interface ExportFormatOption {
+    /** Stable id echoed back in `onRender`'s request (e.g. 'mp4', 'prores'). */
+    id: string;
+    /** Display label, e.g. 'MP4 (H.264)' or 'ProRes 4444'. */
+    label: string;
+    /** Optional cosmetic badge shown by the label, e.g. 'uses credits'. */
+    badge?: string;
+}
+/** What the user chose in the export dialog, passed to `onRender`. */
+export interface ExportRequest {
+    /** The chosen `ExportFormatOption.id`. */
+    format: string;
+    resolution: ExportResolution;
+    quality: ExportQuality;
+}
+export interface EditorProps {
+    /** The Source the editor loads on first render. */
+    initialSource: Source;
+    /**
+     * Where the media bin reads and writes. Omit to use a zero-config local
+     * store (IndexedDB — files persist in the browser, no backend). Inject your
+     * own adapter (Supabase, S3, your API) to wire real storage; the editor only
+     * ever calls list/upload/remove, so it stays storage-agnostic.
+     */
+    assetStore?: AssetStore;
+    /**
+     * What this editor instance IS (views, dock, knob exposure).
+     * Defaults to ADVANCED_CONFIGURATION. Pass BASIC_CONFIGURATION — or
+     * your own object — to reshape the editor without forking it.
+     */
+    configuration?: EditorConfiguration;
+    /** Fired whenever the Source changes (mutation, undo, …). */
+    onSourceChange?: (source: Source) => void;
+    /**
+     * Render handler — fired with the Source and the user's export choice
+     * (format/resolution/quality) from the export dialog. The button is hidden
+     * when omitted. The editor produces nothing itself; the consumer decides how
+     * each format renders (browser MP4, cloud API, …).
+     */
+    onRender?: (source: Source, request: ExportRequest) => void;
+    /**
+     * Formats the export dialog offers. Defaults to `[{ id: 'mp4', label: 'MP4' }]`
+     * — the free in-browser path. Inject more (ProRes, AV1, transparent, …) to
+     * extend the dialog without the editor knowing what they are.
+     */
+    exportFormats?: ExportFormatOption[];
+    rendering?: boolean;
+    renderProgress?: number;
+    /** Renderer backend override; defaults to 'auto'. */
+    backend?: 'auto' | 'webgpu' | 'webgl2';
+    /** Light or dark theme. Defaults to 'dark'. */
+    theme?: 'light' | 'dark';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE5E;8CAC8C;AAC9C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;IACX,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,sEAAsE;AACtE,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,mDAAmD;IACnD,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B"}

package/dist/types.js

@@ -0,0 +1,3 @@
+// Public types for @clipkit/editor (the configurable editor shell).
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oEAAoE"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@clipkit/editor",
+  "version": "1.0.0",
+  "description": "The Clipkit editor — one configurable, registry-driven editor over the Source schema. BASIC and ADVANCED ship as configurations of the same component tree (<Editor configuration={…}>), powered by @clipkit/editor-core.",
+  "license": "Apache-2.0",
+  "repository": { "type": "git", "url": "git+https://github.com/clipkit-video/clipkit.git", "directory": "packages/editor" },
+  "homepage": "https://clipkit.dev",
+  "bugs": "https://github.com/clipkit-video/clipkit/issues",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@clipkit/editor-core": "^1.0.0",
+    "@clipkit/playback": "^1.0.0",
+    "@clipkit/protocol": "^1.0.0",
+    "@clipkit/runtime": "^1.0.0",
+    "@clipkit/sfx": "^1.0.0",
+    "@clipkit/speech-to-text": "^1.0.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
+    "@lezer/highlight": "^1.2.3",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}