@pixerate/editor-svelte 0.56.1 → 0.57.0

package/dist/video-editor/ClipInspector.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { findVideoClip, formatVideoTimecode, VIDEO_TRANSITION_TYPES, type VideoEdit, type VideoEditorController, type VideoTransitionType } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const fps = $derived(editor.project.fps);
+  const at = $derived(editor.selection.length === 1 ? findVideoClip(editor.project, editor.selection[0]) : null);
+  const clip = $derived(at?.clip);
+  const disabled = $derived(editor.readOnly || !!at?.track.locked);
+  let localError = $state<{ text: string; revision: number } | null>(null);
+  // A local error shows until the editor changes; then the editor's own error (if any) shows.
+  const message = $derived((localError && localError.revision === editor.revision ? localError.text : null) ?? editor.error);
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs disabled:opacity-50';
+
+  function apply(edit: VideoEdit, label: string) {
+    localError = null;
+    return controller.apply(edit, label);
+  }
+  /** One field: a value sets it, `undefined` removes it (back to its default). */
+  function set(key: string, value: unknown, label: string) {
+    if (!clip) return;
+    apply(value === undefined ? { op: 'update_clip', clip: clip.id, remove: [key] } : { op: 'update_clip', clip: clip.id, set: { [key]: value } }, label);
+  }
+  /** A number field; empty removes it. */
+  function number(key: string, raw: string, label: string, check: { min?: number; max?: number; above?: number; what: string }) {
+    if (raw.trim() === '') return set(key, undefined, label);
+    const n = Number(raw);
+    if (!Number.isFinite(n) || (check.min !== undefined && n < check.min) || (check.max !== undefined && n > check.max) || (check.above !== undefined && n <= check.above)) {
+      localError = { text: check.what, revision: editor.revision };
+      return;
+    }
+    set(key, n, label);
+  }
+  /** A text field; empty removes it unless it is required. */
+  function text(key: string, raw: string, label: string, required = false) {
+    if (raw.trim() === '' && !required) return set(key, undefined, label);
+    if (raw.trim() === '') {
+      localError = { text: `${label.replace(/^Change /, '')} cannot be empty.`, revision: editor.revision };
+      return;
+    }
+    set(key, key === 'text' ? raw : raw.trim(), label);
+  }
+  function setTransition(type: string) {
+    if (!clip) return;
+    if (!type) apply({ op: 'set_transition', clip: clip.id, transition: null }, 'Remove transition');
+    else apply({ op: 'set_transition', clip: clip.id, transition: { ...clip.transition, type: type as VideoTransitionType, duration: clip.transition?.duration ?? 500 } }, 'Set transition');
+  }
+  function transitionDuration(raw: string) {
+    if (!clip?.transition) return;
+    const n = Number(raw);
+    if (!Number.isFinite(n) || n <= 0) {
+      localError = { text: 'Transition duration must be a number of ms above 0.', revision: editor.revision };
+      return;
+    }
+    apply({ op: 'set_transition', clip: clip.id, transition: { ...clip.transition, duration: n } }, 'Change transition');
+  }
+</script>
+
+<!--
+  The selected clip: its name, timing, opacity and fades; volume, speed and mute for media; text,
+  colours and size for titles; the colour of a colour clip; and the transition into it. Every
+  committed change is one undo step.
+-->
+<div class="flex flex-col gap-1.5 text-xs {className}" data-clip-inspector="" data-clip={clip?.id}>
+  {#if !clip}
+    <p class="text-muted-foreground" data-inspector-hint="">
+      {editor.selection.length > 1 ? `${editor.selection.length} clips selected; select one to edit it.` : 'Select a clip on the timeline to edit it.'}
+    </p>
+  {:else}
+    <div class="flex items-center gap-1">
+      <span class="font-medium">Clip</span>
+      <code class="text-[10px] text-muted-foreground">{clip.id}</code>
+      <span class="text-[10px] text-muted-foreground">{clip.type}</span>
+      {#if at?.track.locked}<span class="ml-auto text-[10px] text-amber-500">Track {at.track.name ?? at.track.id} is locked</span>{/if}
+    </div>
+    <div class="grid grid-cols-[5.5rem_1fr] items-center gap-x-2 gap-y-1">
+      <span class="text-muted-foreground">Name</span>
+      <input class={input} aria-label="Clip name" {disabled} value={clip.name ?? ''} onchange={(e) => text('name', e.currentTarget.value, 'Rename clip')} data-field="name" />
+      <span class="text-muted-foreground">Start</span>
+      <span class="tabular-nums" data-field="start">{formatVideoTimecode(clip.start, fps)}</span>
+      <span class="text-muted-foreground">Duration</span>
+      <span class="tabular-nums" data-field="duration">{formatVideoTimecode(clip.duration, fps)} ({(clip.duration / 1000).toFixed(2)} s)</span>
+      <span class="text-muted-foreground">Opacity</span>
+      <input class={input} type="number" min="0" max="1" step="0.05" placeholder="1" aria-label="Opacity" {disabled} value={clip.opacity ?? ''} onchange={(e) => number('opacity', e.currentTarget.value, 'Change opacity', { min: 0, max: 1, what: 'Opacity must be between 0 and 1.' })} data-field="opacity" />
+      <span class="text-muted-foreground">Fade in</span>
+      <input class={input} type="number" min="0" step="100" placeholder="0 ms" aria-label="Fade in" {disabled} value={clip.fadeIn ?? ''} onchange={(e) => number('fadeIn', e.currentTarget.value, 'Change fade in', { min: 0, what: 'Fade in must be a number of ms, 0 or more.' })} data-field="fadeIn" />
+      <span class="text-muted-foreground">Fade out</span>
+      <input class={input} type="number" min="0" step="100" placeholder="0 ms" aria-label="Fade out" {disabled} value={clip.fadeOut ?? ''} onchange={(e) => number('fadeOut', e.currentTarget.value, 'Change fade out', { min: 0, what: 'Fade out must be a number of ms, 0 or more.' })} data-field="fadeOut" />
+      {#if clip.type === 'media'}
+        <span class="text-muted-foreground">Volume</span>
+        <input class={input} type="number" min="0" step="0.05" placeholder="1" aria-label="Volume" {disabled} value={clip.volume ?? ''} onchange={(e) => number('volume', e.currentTarget.value, 'Change volume', { min: 0, what: 'Volume must be 0 or more (1 = unchanged).' })} data-field="volume" />
+        <span class="text-muted-foreground">Speed</span>
+        <input class={input} type="number" min="0.05" step="0.05" placeholder="1" aria-label="Speed" {disabled} value={clip.speed ?? ''} onchange={(e) => number('speed', e.currentTarget.value, 'Change speed', { above: 0, what: 'Speed must be a number above 0 (1 = normal speed).' })} data-field="speed" />
+        <span class="text-muted-foreground">Muted</span>
+        <input type="checkbox" class="justify-self-start" aria-label="Muted" {disabled} checked={!!clip.muted} onchange={(e) => set('muted', e.currentTarget.checked || undefined, e.currentTarget.checked ? 'Mute clip' : 'Unmute clip')} data-field="muted" />
+      {:else if clip.type === 'text'}
+        <span class="text-muted-foreground">Text</span>
+        <textarea class={input} rows="2" aria-label="Text" {disabled} value={clip.text} onchange={(e) => text('text', e.currentTarget.value, 'Change text', true)} data-field="text"></textarea>
+        <span class="text-muted-foreground">Colour</span>
+        <input class={input} placeholder="white" aria-label="Text colour" {disabled} value={clip.color ?? ''} onchange={(e) => text('color', e.currentTarget.value, 'Change text colour')} data-field="color" />
+        <span class="text-muted-foreground">Font size</span>
+        <input class={input} type="number" min="1" step="1" placeholder="64" aria-label="Font size" {disabled} value={clip.fontSize ?? ''} onchange={(e) => number('fontSize', e.currentTarget.value, 'Change font size', { above: 0, what: 'Font size must be a number of pixels above 0.' })} data-field="fontSize" />
+        <span class="text-muted-foreground">Background</span>
+        <input class={input} placeholder="none" aria-label="Text background" {disabled} value={clip.background ?? ''} onchange={(e) => text('background', e.currentTarget.value, 'Change text background')} data-field="background" />
+      {:else}
+        <span class="text-muted-foreground">Colour</span>
+        <input class={input} aria-label="Clip colour" {disabled} value={clip.color} onchange={(e) => text('color', e.currentTarget.value, 'Change colour', true)} data-field="color" />
+      {/if}
+      <span class="text-muted-foreground">Transition</span>
+      <div class="flex items-center gap-1">
+        <select class={input} aria-label="Transition" {disabled} value={clip.transition?.type ?? ''} onchange={(e) => setTransition(e.currentTarget.value)} data-field="transition">
+          <option value="">none</option>
+          {#each VIDEO_TRANSITION_TYPES as t (t)}
+            <option value={t}>{t}</option>
+          {/each}
+        </select>
+        {#if clip.transition}
+          <input class="{input} w-20" type="number" min="1" step="50" aria-label="Transition duration" {disabled} value={clip.transition.duration} onchange={(e) => transitionDuration(e.currentTarget.value)} data-field="transitionDuration" />
+          <span class="text-[10px] text-muted-foreground">ms</span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if message}
+    <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+  {/if}
+</div>

package/dist/video-editor/ClipInspector.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    class?: string;
+}
+declare const ClipInspector: import("svelte").Component<Props, {}, "">;
+type ClipInspector = ReturnType<typeof ClipInspector>;
+export default ClipInspector;
+//# sourceMappingURL=ClipInspector.svelte.d.ts.map

package/dist/video-editor/ClipInspector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/ClipInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA8E,KAAK,qBAAqB,EAA4B,MAAM,+BAA+B,CAAC;AAI/K,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkIH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/MediaBin.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import {
+    formatVideoSeconds,
+    probeVideoMedia,
+    videoAssetDropEdit,
+    videoAssetKindOf,
+    type VideoAsset,
+    type VideoAssetKind,
+    type VideoEditorController,
+  } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const assets = $derived(editor.project.assets);
+  let url = $state('');
+  let urlKind = $state<VideoAssetKind | ''>('');
+  let busy = $state(0);
+  let dragOver = $state(false);
+  let localError = $state<{ text: string; revision: number } | null>(null);
+  // A local error shows until the editor changes; then the editor's own error (if any) shows.
+  const message = $derived((localError && localError.revision === editor.revision ? localError.text : null) ?? editor.error);
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function fail(text: string) {
+    localError = { text, revision: editor.revision };
+  }
+
+  function addToTimeline(asset: VideoAsset) {
+    localError = null;
+    const edit = videoAssetDropEdit(editor.project, asset.id);
+    if (!edit) return fail(`There is no unlocked ${asset.kind === 'audio' ? 'audio' : 'video'} track to add "${asset.name ?? asset.id}" to.`);
+    const result = controller.apply(edit, 'Add clip');
+    const clip = result.ok ? result.outcomes[0]?.clip : undefined;
+    if (clip) controller.select([clip]);
+  }
+
+  /** Reads the media's length and size, then adds it as an asset (without them if it cannot be read). */
+  async function addAsset(src: string, kind: VideoAssetKind, name: string) {
+    busy++;
+    let probe: { duration?: number; width?: number; height?: number } = {};
+    let problem: string | null = null;
+    try {
+      const { kind: _kind, ...found } = await probeVideoMedia(src, kind);
+      probe = found;
+    } catch (error) {
+      problem = (error as Error).message;
+    } finally {
+      busy--;
+    }
+    localError = null;
+    const result = controller.apply({ op: 'add_asset', asset: { kind, src, name, ...probe } }, 'Add media');
+    if (result.ok && problem) fail(`${problem} It was added without its length; set one before using it.`);
+  }
+
+  function addFiles(files: FileList | readonly File[] | null | undefined) {
+    if (!files || editor.readOnly) return;
+    for (const file of Array.from(files)) {
+      const kind = videoAssetKindOf(file.type || file.name);
+      if (!kind) {
+        fail(`"${file.name}" is not a video, audio or image file.`);
+        continue;
+      }
+      // The object URL lives as long as the page: the project keeps referring to it.
+      void addAsset(URL.createObjectURL(file), kind, file.name);
+    }
+  }
+
+  function addUrl() {
+    const src = url.trim();
+    if (!src) return;
+    const kind = urlKind || videoAssetKindOf(src.split(/[?#]/)[0]);
+    if (!kind) return fail('Choose whether the URL is a video, audio or image: its extension does not say.');
+    url = '';
+    urlKind = '';
+    void addAsset(src, kind, src.split(/[?#]/)[0].replace(/^.*[\\/]/, '') || src);
+  }
+</script>
+
+<!--
+  The project's media: add files (pick or drop them) or a URL, then add each to the timeline at the
+  end of the first track of its kind. Every addition is one undo step.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="flex flex-col gap-1.5 rounded text-xs {dragOver ? 'outline-dashed outline-2 outline-rose-500' : ''} {className}"
+  data-media-bin=""
+  ondragover={(e) => {
+    if (editor.readOnly || !e.dataTransfer?.types.includes('Files')) return;
+    e.preventDefault();
+    dragOver = true;
+  }}
+  ondragleave={() => (dragOver = false)}
+  ondrop={(e) => {
+    dragOver = false;
+    if (editor.readOnly || !e.dataTransfer?.files.length) return;
+    e.preventDefault();
+    addFiles(e.dataTransfer.files);
+  }}
+>
+  <div class="flex items-center gap-1">
+    <span class="font-medium">Media</span>
+    {#if busy}<span class="text-muted-foreground" data-busy="">Reading…</span>{/if}
+    <label class="{btn} ml-auto cursor-pointer {editor.readOnly ? 'pointer-events-none opacity-40' : ''}">
+      Add files
+      <input
+        type="file"
+        class="sr-only"
+        multiple
+        accept="video/*,audio/*,image/*"
+        disabled={editor.readOnly}
+        aria-label="Add media files"
+        onchange={(e) => {
+          addFiles(e.currentTarget.files);
+          e.currentTarget.value = '';
+        }}
+        data-file-input=""
+      />
+    </label>
+  </div>
+  {#if assets.length}
+    <ul class="flex flex-col gap-0.5" aria-label="Media">
+      {#each assets as asset (asset.id)}
+        <li class="flex items-center gap-1 rounded border border-border px-1 py-0.5" data-asset={asset.id}>
+          <span class="rounded bg-muted px-1 text-[10px] text-muted-foreground">{asset.kind}</span>
+          <span class="min-w-0 flex-1 truncate" title={asset.src}>{asset.name ?? asset.id}</span>
+          {#if asset.duration !== undefined}<span class="tabular-nums text-muted-foreground">{formatVideoSeconds(asset.duration)}</span>{/if}
+          <button type="button" class={btn} disabled={editor.readOnly} onclick={() => addToTimeline(asset)} aria-label="Add {asset.name ?? asset.id} to timeline" data-add-to-timeline="">Add to timeline</button>
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <p class="text-muted-foreground">Drop video, audio or images here, or add them from a file or URL.</p>
+  {/if}
+  <form
+    class="flex items-center gap-1"
+    onsubmit={(e) => {
+      e.preventDefault();
+      addUrl();
+    }}
+  >
+    <input class="min-w-0 flex-1 rounded border border-border bg-transparent px-1 py-0.5" type="url" placeholder="https://…/clip.mp4" aria-label="Media URL" disabled={editor.readOnly} bind:value={url} data-url-input="" />
+    <select class="rounded border border-border bg-transparent px-1 py-0.5" aria-label="Media kind" disabled={editor.readOnly} bind:value={urlKind}>
+      <option value="">auto</option>
+      <option value="video">video</option>
+      <option value="audio">audio</option>
+      <option value="image">image</option>
+    </select>
+    <button type="submit" class={btn} disabled={editor.readOnly || !url.trim()} data-add-url="">Add URL</button>
+  </form>
+  {#if message}
+    <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+  {/if}
+</div>

package/dist/video-editor/MediaBin.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    class?: string;
+}
+declare const MediaBin: import("svelte").Component<Props, {}, "">;
+type MediaBin = ReturnType<typeof MediaBin>;
+export default MediaBin;
+//# sourceMappingURL=MediaBin.svelte.d.ts.map

package/dist/video-editor/MediaBin.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaBin.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/MediaBin.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmIH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/video-editor/VideoEditor.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
+  import ClipInspector from './ClipInspector.svelte';
+  import MediaBin from './MediaBin.svelte';
+  import VideoPreview from './VideoPreview.svelte';
+  import VideoTimeline from './VideoTimeline.svelte';
+  import VideoTransport from './VideoTransport.svelte';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    /** The editor to show (default: one made from `options`, destroyed with the component). */
+    controller?: VideoEditorController;
+    /** Options for the editor made when no `controller` is passed (read once). */
+    options?: VideoEditorOptions;
+    /**
+     * Show the editing panels: the media bin, clip inspector, edit buttons, dragging and edit keys
+     * (default true). False shows the preview, transport, timeline (scrub and select) and issues.
+     */
+    editable?: boolean;
+    /** Timeline zoom in pixels per second (default 100). Bindable. */
+    pxPerSecond?: number;
+    /** List the project's issues under the timeline (default true). */
+    showIssues?: boolean;
+    class?: string;
+  }
+
+  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, class: className = '' }: Props = $props();
+  let owned: VideoEditorController | null = null;
+  // A controller is made only when none is passed, and kept for the component's lifetime.
+  const ctl = $derived(controller ?? (owned ??= new VideoEditorController(options)));
+  onDestroy(() => owned?.destroy());
+  const view = videoEditorStateOf(() => ctl);
+  const editor = $derived(view.current);
+</script>
+
+{#snippet issueList()}
+  {#if showIssues && editor.issues.length > 0}
+    <ul class="space-y-0.5 text-xs" aria-label="Video issues" data-video-issues="">
+      {#each editor.issues as issue, i (i)}
+        <li class={issue.severity === 'error' ? 'text-red-500' : issue.severity === 'warning' ? 'text-amber-500' : 'text-muted-foreground'} data-issue={issue.code}>{issue.message}</li>
+      {/each}
+    </ul>
+  {/if}
+{/snippet}
+
+<!--
+  A whole video editor: the media bin, the preview, transport, the timeline (drag to move and trim,
+  keys to split and delete), the selected clip's inspector and the project's issues. Every edit is
+  one undo step.
+-->
+{#if !editable}
+  <div class="flex flex-col gap-2 {className}" data-video-editor="">
+    <VideoPreview controller={ctl} class="rounded-md" />
+    <VideoTransport controller={ctl} editable={false} />
+    <VideoTimeline controller={ctl} bind:pxPerSecond editable={false} />
+    {@render issueList()}
+  </div>
+{:else}
+  <div class="grid gap-3 lg:grid-cols-[14rem_minmax(0,1fr)_18rem] {className}" data-video-editor="">
+    <MediaBin controller={ctl} class="min-w-0" />
+    <div class="flex min-w-0 flex-col gap-2">
+      <VideoPreview controller={ctl} class="rounded-md" />
+      <VideoTransport controller={ctl} />
+    </div>
+    <ClipInspector controller={ctl} class="min-w-0" />
+    <div class="flex min-w-0 flex-col gap-2 lg:col-span-3">
+      <VideoTimeline controller={ctl} bind:pxPerSecond />
+      {@render issueList()}
+    </div>
+  </div>
+{/if}

package/dist/video-editor/VideoEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
+interface Props {
+    /** The editor to show (default: one made from `options`, destroyed with the component). */
+    controller?: VideoEditorController;
+    /** Options for the editor made when no `controller` is passed (read once). */
+    options?: VideoEditorOptions;
+    /**
+     * Show the editing panels: the media bin, clip inspector, edit buttons, dragging and edit keys
+     * (default true). False shows the preview, transport, timeline (scrub and select) and issues.
+     */
+    editable?: boolean;
+    /** Timeline zoom in pixels per second (default 100). Bindable. */
+    pxPerSecond?: number;
+    /** List the project's issues under the timeline (default true). */
+    showIssues?: boolean;
+    class?: string;
+}
+declare const VideoEditor: import("svelte").Component<Props, {}, "pxPerSecond">;
+type VideoEditor = ReturnType<typeof VideoEditor>;
+export default VideoEditor;
+//# sourceMappingURL=VideoEditor.svelte.d.ts.map

package/dist/video-editor/VideoEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAS7F,UAAU,KAAK;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/video-editor/VideoPreview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { formatVideoTimecode, VideoPreviewEngine, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Canvas pixels per frame pixel (default: the displayed width at the device pixel ratio, at most 1). */
+    resolution?: number;
+    class?: string;
+    style?: string;
+  }
+
+  let { controller, resolution, class: className = '', style = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const project = $derived(view.current.project);
+  let canvas: HTMLCanvasElement | undefined = $state();
+  // One engine per canvas, controller and resolution: it follows the controller by itself.
+  $effect(() => {
+    const el = canvas;
+    const source = controller;
+    const options = { resolution };
+    if (!el) return;
+    const engine = untrack(() => new VideoPreviewEngine(source, el, options));
+    return () => engine.destroy();
+  });
+</script>
+
+<!-- The frame at the playhead, drawn on a canvas with the project's aspect ratio; media plays in step with the timeline. -->
+<canvas
+  bind:this={canvas}
+  class="block w-full bg-black {className}"
+  style="aspect-ratio:{project.width} / {project.height};{style}"
+  data-video-preview=""
+  aria-label="{project.name ?? 'Video'} at {formatVideoTimecode(view.current.time, project.fps)}"
+></canvas>

package/dist/video-editor/VideoPreview.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Canvas pixels per frame pixel (default: the displayed width at the device pixel ratio, at most 1). */
+    resolution?: number;
+    class?: string;
+    style?: string;
+}
+declare const VideoPreview: import("svelte").Component<Props, {}, "">;
+type VideoPreview = ReturnType<typeof VideoPreview>;
+export default VideoPreview;
+//# sourceMappingURL=VideoPreview.svelte.d.ts.map

package/dist/video-editor/VideoPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreview.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoPreview.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA2C,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAIlH,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/video-editor/VideoTimeline.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+  import {
+    findVideoClip,
+    formatVideoTimecode,
+    planVideoClipDrag,
+    videoAssetMap,
+    videoClipLabel,
+    videoClipTint,
+    videoDropTracks,
+    videoRulerTicks,
+    type VideoClip,
+    type VideoClipDragMode,
+    type VideoClipDragPlan,
+    type VideoEditorController,
+    type VideoTrack,
+  } from '@pixerate/editor/video-editor';
+  import { onDestroy } from 'svelte';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Zoom: pixels per second of timeline (default 100). Bindable. */
+    pxPerSecond?: number;
+    /** Called when the zoom control changes `pxPerSecond`. */
+    onpxpersecondchange?: (pxPerSecond: number) => void;
+    /** Allow moving and trimming clips, the track toggles and the edit keys (default true). False still scrubs, selects and plays. */
+    editable?: boolean;
+    class?: string;
+  }
+
+  let { controller, pxPerSecond = $bindable(100), onpxpersecondchange, editable = true, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const project = $derived(editor.project);
+  const assets = $derived(videoAssetMap(project));
+  const px = $derived(Math.max(1, pxPerSecond));
+  const x = (ms: number) => (ms * px) / 1000;
+  /** Room after the last clip to drop and drag into. */
+  const span = $derived(Math.max(editor.duration + 5000, 10000));
+  const width = $derived(x(span));
+  const ticks = $derived(videoRulerTicks(span, px, project.fps));
+  const canEdit = $derived(editable && !editor.readOnly);
+  const HEADER = 144;
+  const ZOOM_MIN = 10;
+  const ZOOM_MAX = 2000;
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  let container: HTMLDivElement | undefined = $state();
+  let ruler: HTMLDivElement | undefined = $state();
+
+  interface Drag {
+    clip: string;
+    mode: VideoClipDragMode;
+    pointerX: number;
+    moved: boolean;
+    /** Whether the drag may edit (false: it only selects). */
+    edits: boolean;
+    additive: boolean;
+    plan: VideoClipDragPlan | null;
+  }
+  let drag = $state.raw<Drag | null>(null);
+
+  interface Item {
+    clip: VideoClip;
+    start: number;
+    duration: number;
+    dragging: boolean;
+  }
+  // While dragging, the clip is drawn where the plan puts it (possibly on another track).
+  const rows = $derived.by(() => {
+    const plan = drag?.plan ?? null;
+    const moving = plan && drag ? findVideoClip(project, drag.clip) : null;
+    return project.tracks.map((track) => {
+      const items: Item[] = [];
+      for (const clip of track.clips) {
+        if (moving && plan && clip.id === moving.clip.id) {
+          if (plan.track === track.id) items.push({ clip, start: plan.start, duration: plan.duration, dragging: true });
+        } else items.push({ clip, start: clip.start, duration: clip.duration, dragging: false });
+      }
+      if (moving && plan && plan.track === track.id && moving.track.id !== track.id) items.push({ clip: moving.clip, start: plan.start, duration: plan.duration, dragging: true });
+      return { track, items };
+    });
+  });
+
+  function setZoom(value: number) {
+    const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value)));
+    if (next === pxPerSecond) return;
+    pxPerSecond = next;
+    onpxpersecondchange?.(next);
+  }
+
+  function seekAt(clientX: number) {
+    const box = ruler!.getBoundingClientRect();
+    controller.seek(Math.max(0, ((clientX - box.left) * 1000) / px));
+  }
+
+  /** The track row under the pointer, when the clip may be dropped there. */
+  function trackAt(clientY: number, clip: string): string | undefined {
+    const allowed = videoDropTracks(project, clip);
+    for (const lane of container?.querySelectorAll<HTMLElement>('[data-lane]') ?? []) {
+      const box = lane.getBoundingClientRect();
+      if (box.height > 0 && clientY >= box.top && clientY < box.bottom) {
+        const id = lane.dataset.lane!;
+        return allowed.includes(id) ? id : undefined;
+      }
+    }
+    return undefined;
+  }
+
+  function onwindowmove(e: PointerEvent) {
+    const d = drag;
+    if (!d || !d.edits) return;
+    const dx = e.clientX - d.pointerX;
+    if (!d.moved && Math.abs(dx) < 3) return;
+    const clip = d.clip;
+    const plan = planVideoClipDrag(project, {
+      clip,
+      mode: d.mode,
+      delta: (dx * 1000) / px,
+      track: d.mode === 'move' ? trackAt(e.clientY, clip) : undefined,
+      ripple: e.altKey,
+      snap: (t) => controller.snap(t, { exclude: [clip] }).time,
+    });
+    drag = { ...d, moved: true, plan };
+  }
+
+  function onwindowup() {
+    const d = drag;
+    stopListening();
+    drag = null;
+    if (!d) return;
+    if (d.moved) {
+      const edit = d.plan?.edit;
+      if (edit) controller.apply(edit, edit.op === 'move_clip' ? 'Move clip' : edit.op === 'trim_clip' && edit.ripple ? 'Ripple trim' : 'Trim clip');
+    } else if (!d.additive) controller.select([d.clip]);
+  }
+
+  function oncancel() {
+    stopListening();
+    drag = null;
+  }
+
+  function stopListening() {
+    if (typeof window === 'undefined') return;
+    window.removeEventListener('pointermove', onwindowmove);
+    window.removeEventListener('pointerup', onwindowup);
+    window.removeEventListener('pointercancel', oncancel);
+  }
+  onDestroy(stopListening);
+
+  function onclipdown(e: PointerEvent, clip: VideoClip, track: VideoTrack) {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    container?.focus();
+    const additive = e.shiftKey || e.metaKey || e.ctrlKey;
+    if (additive) controller.select([clip.id], { add: true });
+    else if (!editor.selection.includes(clip.id)) controller.select([clip.id]);
+    const edge = (e.target as HTMLElement).closest('[data-edge]')?.getAttribute('data-edge');
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    drag = {
+      clip: clip.id,
+      mode: edge === 'start' ? 'trim-start' : edge === 'end' ? 'trim-end' : 'move',
+      pointerX: e.clientX,
+      moved: false,
+      edits: canEdit && !track.locked && !additive,
+      additive,
+      plan: null,
+    };
+    // On the window, not the block: a block dragged onto another track is drawn by another row.
+    stopListening();
+    window.addEventListener('pointermove', onwindowmove);
+    window.addEventListener('pointerup', onwindowup);
+    window.addEventListener('pointercancel', oncancel);
+  }
+
+  function toggleTrack(track: VideoTrack, key: 'muted' | 'hidden' | 'locked') {
+    const on = !track[key];
+    const verb = { muted: ['Mute', 'Unmute'], hidden: ['Hide', 'Show'], locked: ['Lock', 'Unlock'] }[key][on ? 0 : 1];
+    controller.apply({ op: 'update_track', track: track.id, set: { [key]: on } }, `${verb} track`);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    const el = e.target as HTMLElement;
+    if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable) return;
+    if (el.tagName === 'BUTTON' && (e.key === ' ' || e.key === 'Enter')) return;
+    const mod = e.metaKey || e.ctrlKey;
+    if (e.key === ' ') controller.toggle();
+    else if (e.key === 'ArrowLeft') controller.step(-1);
+    else if (e.key === 'ArrowRight') controller.step(1);
+    else if (e.key === 'Escape') controller.select(null);
+    else if (!editable) return;
+    else if (mod && e.key.toLowerCase() === 'z') {
+      if (e.shiftKey) controller.redo();
+      else controller.undo();
+    } else if (!mod && e.key.toLowerCase() === 's') controller.splitAtPlayhead();
+    else if (e.key === 'Delete' || e.key === 'Backspace') controller.deleteSelection({ ripple: e.shiftKey });
+    else return;
+    e.preventDefault();
+  }
+
+  const toggles = (track: VideoTrack) =>
+    [
+      { key: 'muted' as const, short: 'M', label: track.muted ? 'Unmute' : 'Mute' },
+      ...(track.kind === 'video' ? [{ key: 'hidden' as const, short: 'H', label: track.hidden ? 'Show' : 'Hide' }] : []),
+      { key: 'locked' as const, short: 'L', label: track.locked ? 'Unlock' : 'Lock' },
+    ];
+</script>
+
+<!--
+  The timeline: a ruler to scrub (with markers), the playhead, and a row per track with its
+  toggles and clips. Click a clip to select it (shift / ⌘ to add), drag it to move it (onto
+  another track of its kind), drag an edge to trim (alt: ripple). Keys: Space plays, ←/→ step a
+  frame, S splits, Delete deletes (shift: ripple), ⌘Z / ⇧⌘Z undo and redo. Every edit is one undo step.
+-->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+<div
+  bind:this={container}
+  class="flex flex-col gap-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-rose-500 {className}"
+  tabindex="0"
+  role="group"
+  aria-label="Timeline"
+  data-video-timeline=""
+  {onkeydown}
+>
+  <div class="flex items-center gap-1 text-muted-foreground">
+    <span class="tabular-nums" data-timecode="">{formatVideoTimecode(editor.time, project.fps)}</span>
+    <span class="ml-auto flex items-center gap-1" data-zoom="">
+      <button type="button" class={btn} aria-label="Zoom out" onclick={() => setZoom(px / 1.25)}>−</button>
+      <input type="range" min={ZOOM_MIN} max={ZOOM_MAX} step="1" value={px} aria-label="Zoom" class="w-24" oninput={(e) => setZoom(Number(e.currentTarget.value))} />
+      <button type="button" class={btn} aria-label="Zoom in" onclick={() => setZoom(px * 1.25)}>+</button>
+    </span>
+  </div>
+  <div class="relative overflow-x-auto rounded border border-border">
+    <div class="relative" style="width:{HEADER + width}px">
+      <div class="flex h-6 border-b border-border">
+        <div class="sticky left-0 z-20 shrink-0 bg-background" style="width:{HEADER}px"></div>
+        <div
+          bind:this={ruler}
+          class="relative cursor-ew-resize select-none touch-none text-[10px] text-muted-foreground"
+          style="width:{width}px"
+          role="slider"
+          tabindex="-1"
+          aria-label="Playhead"
+          aria-valuemin={0}
+          aria-valuemax={editor.duration}
+          aria-valuenow={Math.round(editor.time)}
+          data-ruler=""
+          onpointerdown={(e) => {
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            seekAt(e.clientX);
+          }}
+          onpointermove={(e) => {
+            if (e.buttons & 1) seekAt(e.clientX);
+          }}
+        >
+          {#each ticks as t (t.time)}
+            <div class="absolute bottom-0 w-px {t.major ? 'h-2.5 bg-muted-foreground/70' : 'h-1 bg-muted-foreground/40'}" style="left:{t.x}px">
+              {#if t.label}<span class="absolute -top-0.5 left-1 whitespace-nowrap tabular-nums">{t.label}</span>{/if}
+            </div>
+          {/each}
+          {#each project.markers ?? [] as m (m.id)}
+            <div
+              class="absolute top-0 h-2 w-2 -translate-x-1/2 rotate-45"
+              style="left:{x(m.time)}px;background:{m.color ?? '#f59e0b'}"
+              title="{m.label ?? m.id} · {formatVideoTimecode(m.time, project.fps)}"
+              data-marker={m.id}
+            ></div>
+          {/each}
+        </div>
+      </div>
+      {#each rows as row (row.track.id)}
+        {@const track = row.track}
+        <div class="flex h-12 border-b border-border last:border-b-0" data-track={track.id}>
+          <div class="sticky left-0 z-20 flex shrink-0 flex-col justify-center gap-0.5 border-r border-border bg-background px-1.5" style="width:{HEADER}px">
+            <div class="flex items-center gap-1">
+              <span class="truncate font-medium">{track.name ?? track.id}</span>
+              <span class="rounded bg-muted px-1 text-[10px] text-muted-foreground" data-track-kind="">{track.kind}</span>
+            </div>
+            <div class="flex gap-0.5">
+              {#each toggles(track) as t (t.key)}
+                <button
+                  type="button"
+                  class="{btn} {track[t.key] ? 'bg-muted text-foreground' : 'text-muted-foreground'}"
+                  aria-label="{t.label} {track.name ?? track.id}"
+                  aria-pressed={!!track[t.key]}
+                  title="{t.label} track"
+                  disabled={!canEdit}
+                  data-toggle={t.key}
+                  onclick={() => toggleTrack(track, t.key)}>{t.short}</button
+                >
+              {/each}
+            </div>
+          </div>
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            class="relative shrink-0 {track.locked ? 'bg-muted/60' : ''} {track.hidden || track.muted ? 'opacity-60' : ''}"
+            style="width:{width}px"
+            data-lane={track.id}
+            onpointerdown={(e) => {
+              if (e.button === 0 && !(e.shiftKey || e.metaKey || e.ctrlKey)) controller.select(null);
+            }}
+          >
+            {#each row.items as item (item.clip.id)}
+              {@const clip = item.clip}
+              {@const asset = clip.type === 'media' ? assets.get(clip.asset) : undefined}
+              {@const selected = editor.selection.includes(clip.id)}
+              <div
+                class="absolute inset-y-1 flex select-none touch-none items-center gap-1 overflow-hidden rounded px-1.5 text-[11px] text-white {selected ? 'outline outline-2 outline-offset-1 outline-rose-500' : ''} {item.dragging ? 'opacity-80 shadow-lg' : ''} {canEdit && !track.locked ? 'cursor-grab' : 'cursor-pointer'}"
+                style="left:{x(item.start)}px;width:{Math.max(2, x(item.duration))}px;background:{videoClipTint(clip, asset)}"
+                role="button"
+                tabindex="-1"
+                aria-pressed={selected}
+                title="{videoClipLabel(clip, asset)} · {formatVideoTimecode(item.start, project.fps)}–{formatVideoTimecode(item.start + item.duration, project.fps)}"
+                data-clip={clip.id}
+                data-selected={selected ? '' : undefined}
+                data-dragging={item.dragging ? '' : undefined}
+                onpointerdown={(e) => onclipdown(e, clip, track)}
+              >
+                {#if clip.transition}
+                  <span class="shrink-0 rounded bg-black/40 px-1 text-[9px]" title="{clip.transition.type} {clip.transition.duration} ms" data-transition={clip.transition.type}>⋈</span>
+                {/if}
+                <span class="truncate drop-shadow">{videoClipLabel(clip, asset)}</span>
+                {#if canEdit && !track.locked}
+                  <div class="absolute inset-y-0 left-0 w-1.5 cursor-ew-resize bg-white/0 hover:bg-white/40" data-edge="start" aria-hidden="true"></div>
+                  <div class="absolute inset-y-0 right-0 w-1.5 cursor-ew-resize bg-white/0 hover:bg-white/40" data-edge="end" aria-hidden="true"></div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+      <div class="pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-rose-500" style="left:{HEADER + x(editor.time)}px" data-playhead=""></div>
+    </div>
+  </div>
+  {#if editor.error}
+    <p class="text-red-500" role="alert" data-edit-error="">{editor.error}</p>
+  {/if}
+</div>

package/dist/video-editor/VideoTimeline.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Zoom: pixels per second of timeline (default 100). Bindable. */
+    pxPerSecond?: number;
+    /** Called when the zoom control changes `pxPerSecond`. */
+    onpxpersecondchange?: (pxPerSecond: number) => void;
+    /** Allow moving and trimming clips, the track toggles and the edit keys (default true). False still scrubs, selects and plays. */
+    editable?: boolean;
+    class?: string;
+}
+declare const VideoTimeline: import("svelte").Component<Props, {}, "pxPerSecond">;
+type VideoTimeline = ReturnType<typeof VideoTimeline>;
+export default VideoTimeline;
+//# sourceMappingURL=VideoTimeline.svelte.d.ts.map

package/dist/video-editor/VideoTimeline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTimeline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,qBAAqB,EAE3B,MAAM,+BAA+B,CAAC;AAKvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyQH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/VideoTransport.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { formatVideoTimecode, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Show the editing buttons: split, delete, ripple delete, undo and redo (default true). */
+    editable?: boolean;
+    class?: string;
+  }
+
+  let { controller, editable = true, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const fps = $derived(editor.project.fps);
+  const btn = 'rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40';
+  const locked = $derived(editor.readOnly);
+</script>
+
+<!-- Play / pause, frame steps, the playhead's timecode, and split, delete, undo and redo. -->
+<div class="flex flex-wrap items-center gap-1.5 text-xs {className}" data-video-transport="">
+  <button type="button" class={btn} aria-label="Step back one frame" onclick={() => controller.step(-1)} data-step-back="">◀︎|</button>
+  <button type="button" class={btn} aria-label={editor.playing ? 'Pause' : 'Play'} onclick={() => controller.toggle()} disabled={editor.duration <= 0} data-play="">
+    {editor.playing ? 'Pause' : 'Play'}
+  </button>
+  <button type="button" class={btn} aria-label="Step forward one frame" onclick={() => controller.step(1)} data-step-forward="">|▶︎</button>
+  <span class="tabular-nums text-muted-foreground" data-timecode="">{formatVideoTimecode(editor.time, fps)} / {formatVideoTimecode(editor.duration, fps)}</span>
+  {#if editable}
+    <span class="ml-auto flex flex-wrap gap-1">
+      <button type="button" class={btn} disabled={locked} onclick={() => controller.splitAtPlayhead()} title="Split at the playhead (S)" data-split="">Split</button>
+      <button type="button" class={btn} disabled={locked || !editor.selection.length} onclick={() => controller.deleteSelection()} title="Delete the selected clips (Delete)" data-delete="">Delete</button>
+      <button type="button" class={btn} disabled={locked || !editor.selection.length} onclick={() => controller.deleteSelection({ ripple: true })} title="Delete and close the gaps (Shift+Delete)" data-ripple-delete="">Ripple delete</button>
+      <button type="button" class={btn} disabled={locked || !editor.canUndo} onclick={() => controller.undo()} title={editor.canUndo ? `Undo ${editor.undoLabel}` : 'Nothing to undo'} data-undo="">Undo</button>
+      <button type="button" class={btn} disabled={locked || !editor.canRedo} onclick={() => controller.redo()} title={editor.canRedo ? `Redo ${editor.redoLabel}` : 'Nothing to redo'} data-redo="">Redo</button>
+    </span>
+  {/if}
+</div>

package/dist/video-editor/VideoTransport.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Show the editing buttons: split, delete, ripple delete, undo and redo (default true). */
+    editable?: boolean;
+    class?: string;
+}
+declare const VideoTransport: import("svelte").Component<Props, {}, "">;
+type VideoTransport = ReturnType<typeof VideoTransport>;
+export default VideoTransport;
+//# sourceMappingURL=VideoTransport.svelte.d.ts.map

package/dist/video-editor/VideoTransport.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTransport.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTransport.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI9F,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/video-editor/createVideoEditor.svelte.d.ts

@@ -0,0 +1,40 @@
+import { VideoEditorController, type VideoEditorOptions, type VideoEditorState, type VideoEditorToolProviderOptions, type VideoEditResult } from "@pixerate/editor/video-editor";
+import type { ToolRegistry } from "@pixerate/editor/tools";
+export interface SvelteVideoEditor {
+    readonly controller: VideoEditorController;
+    /** The controller's state (reactive, including the playhead while playing). */
+    readonly state: VideoEditorState;
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    /** Moves the playhead (ms). */
+    seek(time: number): void;
+    /** Moves the playhead by whole frames (negative steps back), pausing. */
+    step(frames: number): void;
+    undo(): void;
+    redo(): void;
+    /** Splits the selected clips (or every clip) under the playhead, as one undo step. */
+    splitAtPlayhead(): VideoEditResult;
+    /** Deletes the selected clips; `ripple` closes the gaps they leave. */
+    deleteSelection(options?: {
+        ripple?: boolean;
+    }): VideoEditResult;
+    /** Stops listening to the controller (and destroys it when this rune created it). */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: subscribes to a `VideoEditorController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export declare function createVideoEditor(controllerOrOptions?: VideoEditorController | VideoEditorOptions): SvelteVideoEditor;
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export declare function videoEditorStateOf(getController: () => VideoEditorController): {
+    readonly current: VideoEditorState;
+};
+/**
+ * Registers the video editor's agent tools (`get_video_project`, `add_video_clip`,
+ * `render_video_frame`, …) for the lifetime of the calling component (call it during
+ * initialisation). Pass a getter to follow a changing registry.
+ */
+export declare function useVideoEditorTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: VideoEditorController, options?: VideoEditorToolProviderOptions): void;
+//# sourceMappingURL=createVideoEditor.svelte.d.ts.map

package/dist/video-editor/createVideoEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/createVideoEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,qBAAqB,EAErB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,8BAA8B,EACnC,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAC3C,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,yEAAyE;IACzE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,sFAAsF;IACtF,eAAe,IAAI,eAAe,CAAC;IACnC,uEAAuE;IACvE,eAAe,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,eAAe,CAAC;IACjE,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,mBAAmB,GAAE,qBAAqB,GAAG,kBAAuB,GAAG,iBAAiB,CA0BzH;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAgBrH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,qBAAqB,EACjC,OAAO,GAAE,8BAAmC,GAC3C,IAAI,CAMN"}

package/dist/video-editor/createVideoEditor.svelte.js

@@ -0,0 +1,63 @@
+import { untrack } from "svelte";
+import { VideoEditorController, createVideoEditorToolProvider, } from "@pixerate/editor/video-editor";
+/**
+ * Svelte 5 rune: subscribes to a `VideoEditorController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export function createVideoEditor(controllerOrOptions = {}) {
+    const owned = !(controllerOrOptions instanceof VideoEditorController);
+    const controller = controllerOrOptions instanceof VideoEditorController ? controllerOrOptions : new VideoEditorController(controllerOrOptions);
+    let state = $state.raw(controller.getState());
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    return {
+        controller,
+        get state() {
+            return state;
+        },
+        play: () => controller.play(),
+        pause: () => controller.pause(),
+        toggle: () => controller.toggle(),
+        seek: (time) => controller.seek(time),
+        step: (frames) => controller.step(frames),
+        undo: () => void controller.undo(),
+        redo: () => void controller.redo(),
+        splitAtPlayhead: () => controller.splitAtPlayhead(),
+        deleteSelection: (options) => controller.deleteSelection(options),
+        destroy: () => {
+            unsubscribe();
+            if (owned)
+                controller.destroy();
+        },
+    };
+}
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export function videoEditorStateOf(getController) {
+    let view = $state.raw(untrack(() => getController().getState()));
+    $effect(() => {
+        const controller = getController();
+        view = controller.getState();
+        return untrack(() => controller.subscribe((next) => {
+            view = next;
+        }));
+    });
+    return {
+        get current() {
+            return view;
+        },
+    };
+}
+/**
+ * Registers the video editor's agent tools (`get_video_project`, `add_video_clip`,
+ * `render_video_frame`, …) for the lifetime of the calling component (call it during
+ * initialisation). Pass a getter to follow a changing registry.
+ */
+export function useVideoEditorTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVideoEditorToolProvider(controller, options));
+    });
+}

package/dist/video-editor/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "svelte";
+import type VideoEditorComponent from "./VideoEditor.svelte";
+import type VideoPreviewComponent from "./VideoPreview.svelte";
+import type VideoTransportComponent from "./VideoTransport.svelte";
+import type VideoTimelineComponent from "./VideoTimeline.svelte";
+import type ClipInspectorComponent from "./ClipInspector.svelte";
+import type MediaBinComponent from "./MediaBin.svelte";
+export { default as VideoEditor } from "./VideoEditor.svelte";
+export { default as VideoPreview } from "./VideoPreview.svelte";
+export { default as VideoTransport } from "./VideoTransport.svelte";
+export { default as VideoTimeline } from "./VideoTimeline.svelte";
+export { default as ClipInspector } from "./ClipInspector.svelte";
+export { default as MediaBin } from "./MediaBin.svelte";
+export * from "./createVideoEditor.svelte.js";
+export type VideoEditorProps = ComponentProps<typeof VideoEditorComponent>;
+export type VideoPreviewProps = ComponentProps<typeof VideoPreviewComponent>;
+export type VideoTransportProps = ComponentProps<typeof VideoTransportComponent>;
+export type VideoTimelineProps = ComponentProps<typeof VideoTimelineComponent>;
+export type ClipInspectorProps = ComponentProps<typeof ClipInspectorComponent>;
+export type MediaBinProps = ComponentProps<typeof MediaBinComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/video-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/video-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/video-editor/index.js

@@ -0,0 +1,7 @@
+export { default as VideoEditor } from "./VideoEditor.svelte";
+export { default as VideoPreview } from "./VideoPreview.svelte";
+export { default as VideoTransport } from "./VideoTransport.svelte";
+export { default as VideoTimeline } from "./VideoTimeline.svelte";
+export { default as ClipInspector } from "./ClipInspector.svelte";
+export { default as MediaBin } from "./MediaBin.svelte";
+export * from "./createVideoEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -73,6 +73,11 @@
       "svelte": "./dist/chart/index.js",
       "default": "./dist/chart/index.js"
     },
+    "./video-editor": {
+      "types": "./dist/video-editor/index.d.ts",
+      "svelte": "./dist/video-editor/index.js",
+      "default": "./dist/video-editor/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -109,6 +114,9 @@
       ],
       "chart": [
         "./dist/chart/index.d.ts"
+      ],
+      "video-editor": [
+        "./dist/video-editor/index.d.ts"
       ]
     }
   },
@@ -123,7 +131,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.74.0"
+    "@pixerate/editor": "0.76.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",