@pixerate/editor-svelte 0.51.9 → 0.53.0

package/dist/animation-editor/AnimationEditor.svelte

@@ -1,30 +1,129 @@
 <script lang="ts">
-  import { motionIssueLine, type AnimationEditorController, type MotionFrameOptions } from '@pixerate/editor/animation-editor';
+  import { indexMotionNodes, motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
   import AnimationStage from './AnimationStage.svelte';
-  import ShotTimeline from './ShotTimeline.svelte';
+  import CommandInspector from './CommandInspector.svelte';
+  import CommandList from './CommandList.svelte';
+  import PlayheadScrubber from './PlayheadScrubber.svelte';
+  import SceneSettings from './SceneSettings.svelte';
+  import ShotInspector from './ShotInspector.svelte';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
     controller: AnimationEditorController;
     values?: MotionFrameOptions['values'];
+    /** Faded frames either side of the playhead (see `<AnimationStage onionSkin>`). Default: an Onion skin toggle. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel (see `<AnimationStage motionPaths>`). Default: a Motion paths toggle. */
+    motionPaths?: boolean | readonly string[];
     /** List the scene's issues under the timeline (default true). */
     showIssues?: boolean;
+    /**
+     * Show the hand-editing panels: the command list and inspector, the shot inspector, scene
+     * settings, undo / redo and picking on the stage (default true). False shows the stage,
+     * scrubber and issues only.
+     */
+    editable?: boolean;
     class?: string;
   }
 
-  let { controller, values, showIssues = true, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, showIssues = true, editable = true, class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const ONION: MotionOnionSkin = { before: 3, after: 1 };
+  const btn = 'rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40';
+  let picked: string | null = $state(null);
+  let onion = $state(false);
+  let paths = $state(false);
+  const nodes = $derived(indexMotionNodes(editor.scene.artwork.nodes));
+  const pickedValid = $derived(picked && nodes.has(picked) ? picked : null);
+  const command = $derived(editor.selection?.command !== undefined ? editor.scene.shots.find((s) => s.id === editor.selection!.shot)?.run[editor.selection.command] : undefined);
+  const targets = $derived(command && 'targets' in command ? command.targets : []);
+  const highlight = $derived(editable ? [...(pickedValid ? [pickedValid] : []), ...targets] : undefined);
+
+  function onpick(id: string | null, event: { shiftKey: boolean }) {
+    const sel = editor.selection;
+    if (event.shiftKey && id && command && 'targets' in command && sel?.command !== undefined && !editor.readOnly) {
+      const next = targets.includes(id) ? targets.filter((t) => t !== id) : [...targets, id];
+      if (next.length) controller.apply({ op: 'update_command', shot: sel.shot, command: sel.command, set: { targets: next } }, next.length > targets.length ? 'Add target' : 'Remove target');
+      return;
+    }
+    picked = id;
+  }
+  function onkeydown(e: KeyboardEvent) {
+    const el = e.target as HTMLElement;
+    if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z' || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName)) return;
+    e.preventDefault();
+    if (e.shiftKey) controller.redo();
+    else controller.undo();
+  }
 </script>
 
-<!-- Stage, shot timeline and issue list for an AnimationEditorController. -->
-<div class="flex flex-col gap-2 {className}" data-animation-editor="">
-  <AnimationStage {controller} {values} class="rounded-md border border-border bg-muted/40" />
-  <ShotTimeline {controller} />
-  {#if showIssues && view.current.issues.length > 0}
+{#snippet issueList()}
+  {#if showIssues && editor.issues.length > 0}
     <ul class="space-y-0.5 text-xs" aria-label="Animation issues">
-      {#each view.current.issues as issue, i (i)}
+      {#each editor.issues as issue, i (i)}
         <li class={issue.severity === 'error' ? 'text-red-500' : issue.severity === 'warning' ? 'text-amber-500' : 'text-muted-foreground'}>{motionIssueLine(issue)}</li>
       {/each}
     </ul>
   {/if}
-</div>
+{/snippet}
+
+<!--
+  A whole animation editor: the stage (click to pick an element, shift-click to toggle it as a
+  target of the selected command), the playhead scrubber, and panels to edit commands, shots and
+  scene settings by hand. Every edit is one undo step.
+-->
+{#if !editable}
+  <div class="flex flex-col gap-2 {className}" data-animation-editor="">
+    <AnimationStage {controller} {values} onionSkin={onionSkin} {motionPaths} class="rounded-md border border-border bg-muted/40" />
+    <PlayheadScrubber {controller} />
+    {@render issueList()}
+  </div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_20rem] {className}" data-animation-editor="" {onkeydown}>
+    <div class="flex min-w-0 flex-col gap-2">
+      <AnimationStage
+        {controller}
+        {values}
+        onionSkin={onionSkin ?? (onion ? ONION : undefined)}
+        motionPaths={motionPaths ?? paths}
+        {onpick}
+        {highlight}
+        class="rounded-md border border-border bg-muted/40"
+      />
+      <PlayheadScrubber {controller} />
+      <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+        <button type="button" class={btn} onclick={() => controller.undo()} disabled={!editor.canUndo} title={editor.canUndo ? `Undo ${editor.undoLabel}` : 'Nothing to undo'} data-undo="">Undo</button>
+        <button type="button" class={btn} onclick={() => controller.redo()} disabled={!editor.canRedo} title={editor.canRedo ? `Redo ${editor.redoLabel}` : 'Nothing to redo'} data-redo="">Redo</button>
+        {#if onionSkin === undefined}
+          <label class="flex items-center gap-1"><input type="checkbox" bind:checked={onion} /> Onion skin</label>
+        {/if}
+        {#if motionPaths === undefined}
+          <label class="flex items-center gap-1"><input type="checkbox" bind:checked={paths} /> Motion paths</label>
+        {/if}
+        <span class="ml-auto" data-picked-element={pickedValid ?? undefined}>
+          {#if pickedValid}
+            Picked <code class="text-rose-500">{pickedValid}</code>
+            <button type="button" class="underline" onclick={() => (picked = null)}>clear</button>
+          {:else}
+            Click the stage to pick an element; shift-click to toggle it as a target.
+          {/if}
+        </span>
+      </div>
+      {@render issueList()}
+    </div>
+    <div class="flex min-w-0 flex-col gap-3">
+      <CommandList {controller} targets={pickedValid ? [pickedValid] : undefined} />
+      <CommandInspector {controller} picked={pickedValid} class="border-t border-border pt-2" />
+      <details open class="border-t border-border pt-2">
+        <summary class="cursor-pointer text-xs font-medium">Shot</summary>
+        <ShotInspector {controller} class="mt-1" />
+      </details>
+      <details class="border-t border-border pt-2">
+        <summary class="cursor-pointer text-xs font-medium">Scene settings</summary>
+        <SceneSettings {controller} class="mt-1" />
+      </details>
+    </div>
+  </div>
+{/if}

package/dist/animation-editor/AnimationEditor.svelte.d.ts

@@ -1,9 +1,19 @@
-import { type AnimationEditorController, type MotionFrameOptions } from '@pixerate/editor/animation-editor';
+import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
 interface Props {
     controller: AnimationEditorController;
     values?: MotionFrameOptions['values'];
+    /** Faded frames either side of the playhead (see `<AnimationStage onionSkin>`). Default: an Onion skin toggle. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel (see `<AnimationStage motionPaths>`). Default: a Motion paths toggle. */
+    motionPaths?: boolean | readonly string[];
     /** List the scene's issues under the timeline (default true). */
     showIssues?: boolean;
+    /**
+     * Show the hand-editing panels: the command list and inspector, the shot inspector, scene
+     * settings, undo / redo and picking on the stage (default true). False shows the stage,
+     * scrubber and issues only.
+     */
+    editable?: boolean;
     class?: string;
 }
 declare const AnimationEditor: import("svelte").Component<Props, {}, "">;

package/dist/animation-editor/AnimationEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAM3H,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AnimationEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAUnK,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,kHAAkH;IAClH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oGAAoG;IACpG,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IAC1C,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/animation-editor/AnimationStage.svelte

@@ -1,30 +1,49 @@
 <script lang="ts">
-  import type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
     controller: AnimationEditorController;
     /** Control values to preview (`{ accent: "#0ea5e9" }`). */
     values?: MotionFrameOptions['values'];
+    /** Faded frames either side of the playhead. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
+    motionPaths?: boolean | readonly string[];
+    /**
+     * Called when the stage is clicked, with the id of the artwork node under the pointer (the
+     * innermost one; null for the background, ghosts and paths). Makes the stage pickable.
+     */
+    onpick?: (id: string | null, event: MouseEvent) => void;
+    /** Node ids to outline (e.g. the picked element and the selected command's targets). */
+    highlight?: readonly string[];
     class?: string;
   }
 
-  let { controller, values, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, onpick, highlight, class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
   const svg = $derived(
-    controller
-      .toSvg(view.current.time, { pretty: false, idPrefix: 'ae-', values })
-      .replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"')
+    highlightMotionSvg(
+      controller
+        .toSvg(view.current.time, { pretty: false, idPrefix: 'ae-', values, onionSkin, motionPaths })
+        .replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"'),
+      highlight ?? []
+    )
   );
+  function onclick(event: MouseEvent) {
+    onpick?.(motionNodeAtElement(view.current.scene, event.target as Element, event.currentTarget as Element), event);
+  }
 </script>
 
-<!-- The frame at the playhead, drawn as inline SVG scaled to the stage's width. -->
+<!-- The frame at the playhead as inline SVG (keeping node ids, so a click can pick an element). -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 <div
-  class="relative overflow-hidden {className}"
+  class="relative overflow-hidden {onpick ? 'cursor-crosshair' : ''} {className}"
   style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}"
   data-animation-stage=""
   role="img"
   aria-label="{view.current.scene.name} at {(view.current.time / 1000).toFixed(2)} s"
+  onclick={onpick ? onclick : undefined}
 >
   {@html svg}
 </div>

package/dist/animation-editor/AnimationStage.svelte.d.ts

@@ -1,8 +1,19 @@
-import type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
 interface Props {
     controller: AnimationEditorController;
     /** Control values to preview (`{ accent: "#0ea5e9" }`). */
     values?: MotionFrameOptions['values'];
+    /** Faded frames either side of the playhead. */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel: true for every node whose place changes, or a list of ids. */
+    motionPaths?: boolean | readonly string[];
+    /**
+     * Called when the stage is clicked, with the id of the artwork node under the pointer (the
+     * innermost one; null for the background, ghosts and paths). Makes the stage pickable.
+     */
+    onpick?: (id: string | null, event: MouseEvent) => void;
+    /** Node ids to outline (e.g. the picked element and the selected command's targets). */
+    highlight?: readonly string[];
     class?: string;
 }
 declare const AnimationStage: import("svelte").Component<Props, {}, "">;

package/dist/animation-editor/AnimationStage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationStage.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationStage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAIrG,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AnimationStage.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/AnimationStage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2C,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAIzK,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,gDAAgD;IAChD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,wFAAwF;IACxF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6BH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/animation-editor/CommandInspector.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import {
+    describeMotionElements,
+    motionCommandFields,
+    motionFieldEdit,
+    motionFlairPrimitive,
+    type AnimationEditorController,
+    type MotionFieldSpec,
+  } from '@pixerate/editor/animation-editor';
+  import EasePicker from './EasePicker.svelte';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** An element picked on the stage, offered as a target to add. */
+    picked?: string | null;
+    class?: string;
+  }
+
+  let { controller, picked = null, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const elements = $derived(describeMotionElements(editor.scene));
+  const shot = $derived(editor.selection ? editor.scene.shots.find((s) => s.id === editor.selection!.shot) : undefined);
+  const index = $derived(editor.selection?.command);
+  const command = $derived(shot && index !== undefined ? shot.run[index] : undefined);
+  const values = $derived((command ?? {}) as unknown as Record<string, unknown>);
+  const fields = $derived(command ? motionCommandFields(command.type) : []);
+  const primitive = $derived(command ? motionFlairPrimitive(command) : undefined);
+  const targets = $derived((values.targets as string[] | undefined) ?? []);
+  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);
+  function setLocal(text: string | null) {
+    localError = text ? { text, revision: editor.revision } : null;
+  }
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs';
+
+  function commit(field: MotionFieldSpec, raw: Parameters<typeof motionFieldEdit>[3]) {
+    if (!shot || index === undefined) return;
+    const edit = motionFieldEdit(shot.id, index, field, raw);
+    if ('error' in edit) {
+      setLocal(edit.error);
+      return;
+    }
+    setLocal(null);
+    controller.apply(edit, `Set ${field.label.toLowerCase()}`);
+  }
+  const name = (id: string) => elements.find((e) => e.id === id)?.name ?? id;
+  const str = (v: unknown) => (typeof v === 'string' ? v : '');
+  const numStr = (v: unknown) => (typeof v === 'number' ? String(v) : '');
+  const point = (v: unknown) => v as { x: number; y: number } | undefined;
+  const step = (f: MotionFieldSpec) => (f.kind === 'integer' ? 1 : f.unit === 'ms' ? 50 : f.unit === '0–1' ? 0.05 : 'any');
+</script>
+
+<!--
+  A form for the selected command, generated from MOTION_COMMAND_SCHEMA (the schema the agent
+  tools take): enums as selects, numbers with units and limits, node pickers and an ease picker.
+-->
+{#if !shot || index === undefined || !command}
+  <div class="text-xs text-muted-foreground {className}" data-command-inspector="">Select a command to edit it.</div>
+{:else}
+  <div class="flex flex-col gap-1.5 text-xs {className}" data-command-inspector="" data-command-type={command.type}>
+    <div class="flex items-center gap-2">
+      <span class="font-medium">{index + 1}. {command.type}</span>
+      {#if primitive}
+        <code class="rounded bg-muted px-1 text-[10px]" data-flair-primitive={primitive} title="The Flair motion primitive this command plays">{primitive}</code>
+      {:else}
+        <span class="text-[10px] text-muted-foreground">editor-only (no Flair primitive)</span>
+      {/if}
+    </div>
+    {#each ['main', 'timing'] as group (group)}
+      <fieldset class="grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1">
+        <legend class="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">{group === 'main' ? 'Command' : 'Timing'}</legend>
+        {#each fields.filter((f) => f.group === group) as field (field.name)}
+          {@const v = values[field.name]}
+          <!-- svelte-ignore a11y_label_has_associated_control -->
+          <label class="truncate text-muted-foreground" title={field.description}>{field.label}{field.required ? ' *' : ''}</label>
+          <div data-field={field.name}>
+            {#if field.kind === 'targets'}
+              <div class="flex flex-wrap items-center gap-1" data-targets="">
+                {#each targets as id (id)}
+                  <span class="flex items-center gap-0.5 rounded bg-muted px-1 text-[11px]" data-target={id}>
+                    {name(id)}
+                    {#if !editor.readOnly && targets.length > 1}
+                      <button type="button" aria-label="Remove {id}" onclick={() => commit(field, targets.filter((t) => t !== id))}>×</button>
+                    {/if}
+                  </span>
+                {/each}
+                {#if !editor.readOnly && picked && !targets.includes(picked)}
+                  <button type="button" class="rounded border border-rose-500 px-1 text-[11px] text-rose-500" onclick={() => commit(field, [...targets, picked!])} data-add-picked="">+ {name(picked)}</button>
+                {/if}
+                {#if !editor.readOnly}
+                  <select class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]" aria-label="Add target" value="" onchange={(e) => e.currentTarget.value && commit(field, [...targets, e.currentTarget.value])}>
+                    <option value="">+ target…</option>
+                    {#each elements.filter((e) => !targets.includes(e.id)) as e (e.id)}
+                      <option value={e.id}>{e.name ? `${e.name} (${e.id})` : e.id}</option>
+                    {/each}
+                  </select>
+                {/if}
+              </div>
+            {:else if field.kind === 'node'}
+              <select class={input} aria-label={field.label} title={field.description} disabled={editor.readOnly} value={str(v)} onchange={(e) => commit(field, e.currentTarget.value)}>
+                {#if !field.required}<option value="">—</option>{/if}
+                {#each elements.filter((e) => field.name !== 'path' || e.type === 'path') as e (e.id)}
+                  <option value={e.id}>{e.name ? `${e.name} (${e.id})` : e.id}{e.hidden ? ' · hidden' : ''}</option>
+                {/each}
+              </select>
+            {:else if field.kind === 'enum'}
+              <select class={input} aria-label={field.label} title={field.description} disabled={editor.readOnly} value={str(v)} onchange={(e) => commit(field, e.currentTarget.value)}>
+                {#if !field.required}<option value="">default</option>{/if}
+                {#each field.options ?? [] as o (o)}
+                  <option value={o}>{o}</option>
+                {/each}
+              </select>
+            {:else if field.kind === 'boolean'}
+              <input type="checkbox" aria-label={field.label} title={field.description} disabled={editor.readOnly} checked={v === true} onchange={(e) => commit(field, e.currentTarget.checked)} />
+            {:else if field.kind === 'ease'}
+              <EasePicker value={v as never} disabled={editor.readOnly} onchange={(ease) => commit(field, ease === undefined ? '' : (ease as string))} />
+            {:else if field.kind === 'color'}
+              <div class="flex items-center gap-1">
+                <input type="color" disabled={editor.readOnly} aria-label="{field.label} swatch" value={/^#[0-9a-f]{6}$/i.test(str(v)) ? str(v) : '#000000'} onchange={(e) => commit(field, e.currentTarget.value)} />
+                <input class={input} aria-label={field.label} title={field.description} disabled={editor.readOnly} placeholder="unchanged" value={str(v)} onchange={(e) => commit(field, e.currentTarget.value)} />
+              </div>
+            {:else if field.kind === 'point'}
+              {@const p = point(v)}
+              <div class="flex items-center gap-1">
+                <input class={input} type="number" disabled={editor.readOnly} aria-label="{field.label} x" placeholder="x" value={p ? String(p.x) : ''}
+                  onchange={(e) => commit(field, { x: e.currentTarget.value, y: p ? String(p.y) : e.currentTarget.value ? '0' : '' })} />
+                <input class={input} type="number" disabled={editor.readOnly} aria-label="{field.label} y" placeholder="y" value={p ? String(p.y) : ''}
+                  onchange={(e) => commit(field, { x: p ? String(p.x) : e.currentTarget.value ? '0' : '', y: e.currentTarget.value })} />
+              </div>
+            {:else if field.kind === 'number' || field.kind === 'integer' || field.kind === 'scale'}
+              <div class="flex items-center gap-1">
+                <input class={input} type="number" aria-label={field.label} title={field.description} disabled={editor.readOnly} min={field.min} max={field.max} step={step(field)} placeholder="default" value={numStr(v)} onchange={(e) => commit(field, e.currentTarget.value)} />
+                {#if field.unit}<span class="shrink-0 text-[10px] text-muted-foreground">{field.unit}</span>{/if}
+              </div>
+            {:else}
+              <input class={input} aria-label={field.label} title={field.description} disabled={editor.readOnly} value={str(v)} onchange={(e) => commit(field, e.currentTarget.value)} />
+            {/if}
+          </div>
+        {/each}
+      </fieldset>
+    {/each}
+    {#if message}
+      <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+    {/if}
+  </div>
+{/if}

package/dist/animation-editor/CommandInspector.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** An element picked on the stage, offered as a target to add. */
+    picked?: string | null;
+    class?: string;
+}
+declare const CommandInspector: import("svelte").Component<Props, {}, "">;
+type CommandInspector = ReturnType<typeof CommandInspector>;
+export default CommandInspector;
+//# sourceMappingURL=CommandInspector.svelte.d.ts.map

package/dist/animation-editor/CommandInspector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/CommandInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAKH,KAAK,yBAAyB,EAE/B,MAAM,mCAAmC,CAAC;AAK3C,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuIH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/animation-editor/CommandList.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import {
+    MOTION_COMMAND_TYPES,
+    defaultMotionCommand,
+    duplicateMotionCommandEdit,
+    motionCommandRows,
+    type AnimationEditorController,
+    type MotionCommandType,
+    type MotionEdit,
+  } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The shot to list (default: the selected shot, else the first). */
+    shot?: string;
+    /** Targets for a new command (e.g. the element picked on the stage); default: the selected command's. */
+    targets?: readonly string[];
+    class?: string;
+  }
+
+  let { controller, shot, targets, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const shotId = $derived(shot ?? editor.selection?.shot ?? editor.scene.shots[0]?.id);
+  const current = $derived(editor.scene.shots.find((s) => s.id === shotId));
+  const rows = $derived(current ? motionCommandRows(editor.scene, current.id) : []);
+  const selected = $derived(current && editor.selection?.shot === current.id ? editor.selection.command : undefined);
+  let type: MotionCommandType = $state('enter');
+  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);
+  function setLocal(text: string | null) {
+    localError = text ? { text, revision: editor.revision } : null;
+  }
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function run(edit: MotionEdit | MotionEdit[], label: string) {
+    setLocal(null);
+    return controller.apply(edit, label);
+  }
+  function add() {
+    if (!current) return;
+    const from = targets?.length ? targets : selected !== undefined ? ((current.run[selected] as { targets?: string[] }).targets ?? []) : [];
+    const command = defaultMotionCommand(type, from, editor.scene);
+    if ('error' in command) {
+      setLocal(command.error);
+      return;
+    }
+    const at = selected !== undefined ? selected + 1 : current.run.length;
+    if (run({ op: 'add_commands', shot: current.id, commands: [command], at }, `Add ${type}`).ok) controller.select({ shot: current.id, command: at });
+  }
+  function move(index: number, to: number) {
+    if (current && run({ op: 'move_command', shot: current.id, command: index, to }, 'Move command').ok) controller.select({ shot: current.id, command: to });
+  }
+  function duplicate(index: number) {
+    if (current && run(duplicateMotionCommandEdit(editor.scene, current.id, index), 'Duplicate command').ok) controller.select({ shot: current.id, command: index + 1 });
+  }
+  function setDelay(index: number, raw: string, before: number | undefined) {
+    if (!current) return;
+    const text = raw.trim();
+    if (text === String(before ?? '')) return;
+    const n = Number(text);
+    if (text && !(Number.isFinite(n) && n >= 0)) {
+      setLocal('Delay must be a number of ms, 0 or more.');
+      return;
+    }
+    run(text && n > 0 ? { op: 'update_command', shot: current.id, command: index, set: { delay: n } } : { op: 'update_command', shot: current.id, command: index, remove: ['delay'] }, 'Change delay');
+  }
+</script>
+
+<!--
+  A shot's commands in order: select one to inspect it, change `with` and `delay` inline, move,
+  duplicate or delete it, and add new ones. Each change is one controller.apply edit (one undo step).
+-->
+{#if !current}
+  <div class="text-xs text-muted-foreground {className}" data-command-list="">Add a shot to start.</div>
+{:else}
+  <div class="flex flex-col gap-1 text-xs {className}" data-command-list="" data-for-shot={current.id}>
+    <div class="font-medium">Commands in <span class="text-rose-500">{current.label ?? current.id}</span></div>
+    <ol class="flex flex-col gap-1" aria-label="Commands">
+      {#each rows as row (`${row.index}:${row.summary}`)}
+        {@const c = row.command as { with?: string; delay?: number }}
+        <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+        <li
+          class="flex flex-wrap items-center gap-1 rounded border px-1.5 py-1 {row.index === selected ? 'border-rose-500 bg-rose-500/10' : 'border-border'}"
+          data-command={row.index}
+          data-selected={row.index === selected || undefined}
+          onclick={() => controller.select({ shot: current.id, command: row.index })}
+        >
+          <span class="min-w-0 flex-1 truncate" title={row.summary}>{row.index + 1}. {row.summary}</span>
+          {#if row.flairPrimitive}
+            <code class="rounded bg-muted px-1 text-[10px] text-muted-foreground" data-flair-primitive={row.flairPrimitive}>{row.flairPrimitive}</code>
+          {/if}
+          <span class="tabular-nums text-[10px] text-muted-foreground">{((row.end - row.start) / 1000).toFixed(2)} s</span>
+          <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+          <div class="flex w-full items-center gap-1" onclick={(e) => e.stopPropagation()}>
+            <select
+              class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]"
+              aria-label="Starts"
+              value={c.with ?? 'after'}
+              disabled={editor.readOnly || row.index === 0}
+              onchange={(e) =>
+                run(
+                  e.currentTarget.value === 'after'
+                    ? { op: 'update_command', shot: current.id, command: row.index, remove: ['with'] }
+                    : { op: 'update_command', shot: current.id, command: row.index, set: { with: e.currentTarget.value } },
+                  'Change start'
+                )}
+            >
+              <option value="after">after previous</option>
+              <option value="previous">with previous</option>
+            </select>
+            <label class="flex items-center gap-0.5 text-muted-foreground">
+              +
+              <input
+                class="w-14 rounded border border-border bg-transparent px-1 py-0.5 text-[11px] tabular-nums"
+                type="number"
+                min="0"
+                step="50"
+                aria-label="Delay"
+                placeholder="0"
+                value={c.delay ?? ''}
+                disabled={editor.readOnly}
+                onchange={(e) => setDelay(row.index, e.currentTarget.value, c.delay)}
+              />
+              ms
+            </label>
+            <span class="ml-auto flex gap-0.5">
+              <button type="button" class={btn} aria-label="Move up" disabled={editor.readOnly || row.index === 0} onclick={() => move(row.index, row.index - 1)}>↑</button>
+              <button type="button" class={btn} aria-label="Move down" disabled={editor.readOnly || row.index === rows.length - 1} onclick={() => move(row.index, row.index + 1)}>↓</button>
+              <button type="button" class={btn} aria-label="Duplicate" disabled={editor.readOnly} onclick={() => duplicate(row.index)}>⧉</button>
+              <button type="button" class={btn} aria-label="Delete" disabled={editor.readOnly} onclick={() => run({ op: 'delete_commands', shot: current.id, commands: [row.index] }, 'Delete command')}>✕</button>
+            </span>
+          </div>
+        </li>
+      {/each}
+    </ol>
+    {#if !editor.readOnly}
+      <div class="flex items-center gap-1">
+        <select class="flex-1 rounded border border-border bg-transparent px-1 py-0.5" aria-label="New command type" bind:value={type}>
+          {#each MOTION_COMMAND_TYPES as t (t)}
+            <option value={t}>{t}</option>
+          {/each}
+        </select>
+        <button type="button" class={btn} onclick={add} data-add-command="">Add command</button>
+      </div>
+    {/if}
+    {#if message}
+      <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+    {/if}
+  </div>
+{/if}

package/dist/animation-editor/CommandList.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The shot to list (default: the selected shot, else the first). */
+    shot?: string;
+    /** Targets for a new command (e.g. the element picked on the stage); default: the selected command's. */
+    targets?: readonly string[];
+    class?: string;
+}
+declare const CommandList: import("svelte").Component<Props, {}, "">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;
+//# sourceMappingURL=CommandList.svelte.d.ts.map

package/dist/animation-editor/CommandList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandList.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/CommandList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAKH,KAAK,yBAAyB,EAG/B,MAAM,mCAAmC,CAAC;AAI3C,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yGAAyG;IACzG,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqHH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/animation-editor/EasePicker.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { MOTION_EASE_CHOICES, motionEaseKey, motionEasingCurve, motionEasingGuides, motionEasingPath, type MotionCommandBase } from '@pixerate/editor/animation-editor';
+
+  /** An easing (a preset name or a curve), as commands take it. */
+  type AnimationEasing = NonNullable<MotionCommandBase['ease']>;
+
+  interface Props {
+    /** The easing (undefined: the command type's default). */
+    value: AnimationEasing | undefined;
+    /** Called with the picked preset, or undefined for the default. */
+    onchange: (ease: AnimationEasing | undefined) => void;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let { value, onchange, disabled = false, class: className = '' }: Props = $props();
+  const W = 72;
+  const H = 44;
+  const key = $derived(motionEaseKey(value));
+  const curve = $derived(motionEasingCurve(value ?? 'ease-out'));
+  const guides = $derived(motionEasingGuides(curve, H));
+  const spring = $derived(typeof value === 'string' ? value.startsWith('spring') : value?.type === 'spring');
+</script>
+
+<!-- Picks an easing preset (springs included) and previews its curve, sampled with evaluateEasing. -->
+<div class="flex items-center gap-2 {className}" data-ease-picker="">
+  <select
+    class="min-w-0 flex-1 rounded border border-border bg-transparent px-1 py-0.5 text-xs"
+    aria-label="Ease"
+    value={key}
+    {disabled}
+    onchange={(e) => {
+      const v = e.currentTarget.value;
+      if (v === 'custom') return;
+      onchange(v ? (v as AnimationEasing) : undefined);
+    }}
+  >
+    {#each MOTION_EASE_CHOICES as c (c.value)}
+      <option value={c.value}>{c.label}</option>
+    {/each}
+    {#if key === 'custom'}<option value="custom">Custom</option>{/if}
+  </select>
+  <svg width={W} height={H} viewBox="0 0 {W} {H}" class="shrink-0 rounded border border-border" data-ease-curve={key || 'default'} aria-hidden="true">
+    <line x1={0} x2={W} y1={guides.zero} y2={guides.zero} stroke="currentColor" stroke-opacity={0.2} />
+    <line x1={0} x2={W} y1={guides.one} y2={guides.one} stroke="currentColor" stroke-opacity={0.2} stroke-dasharray="2 2" />
+    <path d={motionEasingPath(curve, W, H)} fill="none" stroke="#f43f5e" stroke-width={1.5} />
+  </svg>
+  {#if spring}<span class="text-[10px] tabular-nums text-muted-foreground">{Math.round(curve.durationMs)} ms</span>{/if}
+</div>

package/dist/animation-editor/EasePicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type MotionCommandBase } from '@pixerate/editor/animation-editor';
+/** An easing (a preset name or a curve), as commands take it. */
+type AnimationEasing = NonNullable<MotionCommandBase['ease']>;
+interface Props {
+    /** The easing (undefined: the command type's default). */
+    value: AnimationEasing | undefined;
+    /** Called with the picked preset, or undefined for the default. */
+    onchange: (ease: AnimationEasing | undefined) => void;
+    disabled?: boolean;
+    class?: string;
+}
+declare const EasePicker: import("svelte").Component<Props, {}, "">;
+type EasePicker = ReturnType<typeof EasePicker>;
+export default EasePicker;
+//# sourceMappingURL=EasePicker.svelte.d.ts.map

package/dist/animation-editor/EasePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EasePicker.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/EasePicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+F,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGtK,iEAAiE;AACjE,KAAK,eAAe,GAAG,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE9D,UAAU,KAAK;IACb,0DAA0D;IAC1D,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/animation-editor/PlayheadScrubber.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { motionBeatTime, motionCueTime, motionRulerTicks, type AnimationEditorController, type MotionIssue } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const span = $derived(Math.max(1, editor.duration));
+  let width = $state(600);
+  let track: HTMLDivElement | undefined = $state();
+  // Not bind:clientWidth: that needs ResizeObserver, which test DOMs (jsdom) lack.
+  $effect(() => {
+    const el = track;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => (width = el.clientWidth || 600));
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+  const ticks = $derived(motionRulerTicks(editor.duration, width || 600));
+  const beats = $derived.by(() => {
+    const out: number[] = [];
+    const grid = editor.scene.beat;
+    if (grid && grid.bpm > 0) for (let b = 0, t = motionBeatTime(grid, 0); t <= span && out.length < 400; t = motionBeatTime(grid, ++b)) if (t >= 0) out.push(t);
+    return out;
+  });
+  const seconds = (ms: number) => `${(ms / 1000).toFixed(2)} s`;
+  const pct = (ms: number) => `${(Math.min(span, Math.max(0, ms)) / span) * 100}%`;
+  const worst = (issues: readonly MotionIssue[]): 'error' | 'warning' | null =>
+    issues.some((i) => i.severity === 'error') ? 'error' : issues.some((i) => i.severity === 'warning') ? 'warning' : null;
+
+  function seekAt(clientX: number) {
+    const box = track!.getBoundingClientRect();
+    controller.seek(Math.min(1, Math.max(0, (clientX - box.left) / Math.max(1, box.width))) * span);
+  }
+  function onKey(event: KeyboardEvent) {
+    const step = event.shiftKey ? 1000 : 100;
+    if (event.key === 'ArrowRight') controller.seek(editor.time + step);
+    else if (event.key === 'ArrowLeft') controller.seek(editor.time - step);
+    else if (event.key === 'Home') controller.seek(0);
+    else if (event.key === 'End') controller.seek(editor.duration);
+    else if (event.key === ' ') controller.toggle();
+    else return;
+    event.preventDefault();
+  }
+</script>
+
+<!--
+  Play, pause and loop, a time ruler (with the beat grid and narration words when the scene has
+  them) to scrub by dragging, and one band per shot: click a band to select the shot and jump to it.
+-->
+<div class="flex flex-col gap-1 {className}" data-playhead-scrubber="" data-shot-timeline="">
+  <div class="flex items-center gap-2 text-xs">
+    <button type="button" class="rounded border border-border px-2 py-0.5" onclick={() => controller.toggle()} aria-label={editor.playing ? 'Pause' : 'Play'} disabled={!editor.shots.length}>
+      {editor.playing ? 'Pause' : 'Play'}
+    </button>
+    <button type="button" class="rounded border border-border px-2 py-0.5" onclick={() => { controller.pause(); controller.seek(0); }} aria-label="Back to start">⏮</button>
+    <label class="flex items-center gap-1 text-muted-foreground">
+      Loop
+      <select
+        class="rounded border border-border bg-transparent px-1 py-0.5"
+        value={editor.scene.loop ?? 'none'}
+        disabled={editor.readOnly}
+        aria-label="Loop"
+        onchange={(e) => controller.apply({ op: 'set_settings', loop: e.currentTarget.value as 'none' | 'loop' | 'ping-pong' }, 'Change loop')}
+      >
+        <option value="none">Off</option>
+        <option value="loop">Loop</option>
+        <option value="ping-pong">Ping-pong</option>
+      </select>
+    </label>
+    <span class="ml-auto tabular-nums text-muted-foreground" data-time="">{seconds(editor.time)} / {seconds(editor.duration)}</span>
+  </div>
+  <div
+    bind:this={track}
+    class="relative cursor-ew-resize select-none touch-none"
+    role="slider"
+    aria-label="Playhead"
+    aria-valuemin={0}
+    aria-valuemax={editor.duration}
+    aria-valuenow={Math.round(editor.time)}
+    tabindex="0"
+    data-scrub-track=""
+    onpointerdown={(e) => {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      seekAt(e.clientX);
+    }}
+    onpointermove={(e) => {
+      if (e.buttons & 1) seekAt(e.clientX);
+    }}
+    onkeydown={onKey}
+  >
+    <div class="relative h-5 border-b border-border text-[10px] text-muted-foreground" data-ruler="">
+      {#each beats as t, i (i)}
+        <div class="absolute bottom-0 h-1.5 w-px bg-sky-500/60" style="left:{pct(t)}" data-beat={i}></div>
+      {/each}
+      {#each editor.scene.narration?.words ?? [] as w, i (i)}
+        <div class="absolute top-0 h-1.5 w-px bg-emerald-500/70" style="left:{pct(w.start)}" title="“{w.text}” at {seconds(w.start)}" data-word={i}></div>
+      {/each}
+      {#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:{pct(t.time)}">
+          {#if t.label}<span class="absolute -top-0.5 left-1 whitespace-nowrap tabular-nums">{t.label}</span>{/if}
+        </div>
+      {/each}
+    </div>
+    <div class="mt-1 flex w-full gap-px" role="group" aria-label="Shots">
+      {#each editor.shots as shot, i (shot.id)}
+        {@const mark = worst(editor.issues.filter((x) => x.shot === shot.id))}
+        {@const cue = editor.scene.shots[i]?.at}
+        {@const cueTime = cue ? motionCueTime(editor.scene, cue) : undefined}
+        <button
+          type="button"
+          class="relative min-w-0 truncate rounded border px-1 py-1 text-left text-[11px] {editor.selection?.shot === shot.id ? 'border-rose-500 bg-rose-500/10' : 'border-border bg-muted/40'} {editor.currentShot === shot.id ? 'font-semibold' : ''}"
+          style="flex-grow:{Math.max(1, shot.end - shot.start)};flex-basis:0"
+          title="{shot.label ?? shot.id} · {seconds(shot.start)}–{seconds(shot.end)}{cueTime !== undefined ? ` · cued at ${seconds(cueTime)}` : ''}"
+          data-shot={shot.id}
+          data-issue={mark ?? undefined}
+          onpointerdown={(e) => e.stopPropagation()}
+          onclick={() => {
+            controller.select({ shot: shot.id });
+            controller.seekShot(shot.id);
+          }}
+        >
+          {#if mark}<span class={mark === 'error' ? 'text-red-500' : 'text-amber-500'}>● </span>{/if}{shot.label ?? shot.id}
+        </button>
+      {/each}
+    </div>
+    <div class="pointer-events-none absolute inset-y-0 w-0.5 -translate-x-1/2 bg-rose-500" style="left:{pct(editor.time)}" data-playhead=""></div>
+  </div>
+</div>

package/dist/animation-editor/PlayheadScrubber.svelte.d.ts

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

package/dist/animation-editor/PlayheadScrubber.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadScrubber.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/PlayheadScrubber.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,yBAAyB,EAAoB,MAAM,mCAAmC,CAAC;AAIpJ,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/animation-editor/SceneSettings.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { fitMotionSceneEdits, formatMotionNarration, parseMotionNarration, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    class?: string;
+  }
+
+  type Settings = Omit<Extract<MotionEdit, { op: 'set_settings' }>, 'op'>;
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const scene = $derived(editor.scene);
+  const beat = $derived(scene.beat);
+  const target = $derived(scene.target);
+  const narration = $derived(formatMotionNarration(scene.narration));
+  let localError = $state<{ text: string; revision: number } | null>(null);
+  let fitTo = $state('');
+  const fitSeconds = $derived(fitTo || String(target ? (target[0] + target[1]) / 2 : Math.round(editor.duration / 100) / 10));
+  // 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);
+  function setLocal(text: string | null) {
+    localError = text ? { text, revision: editor.revision } : null;
+  }
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs';
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function apply(edit: MotionEdit | MotionEdit[], label: string) {
+    setLocal(null);
+    return controller.apply(edit, label);
+  }
+  const settings = (set: Settings, label: string) => apply({ op: 'set_settings', ...set }, label);
+  function num(raw: string, what: string, ok: (n: number) => boolean, then: (n: number | null) => void) {
+    if (raw.trim() === '') return then(null);
+    const n = Number(raw);
+    if (!Number.isFinite(n) || !ok(n)) {
+      setLocal(what);
+      return;
+    }
+    then(n);
+  }
+  function setTarget(i: 0 | 1, raw: string) {
+    num(raw, 'Target lengths are seconds, 0 or more.', (n) => n >= 0, (n) => {
+      if (n === null) return settings({ target: null }, 'Clear target length');
+      const next: [number, number] = target ? [target[0], target[1]] : [n, n];
+      next[i] = n;
+      if (next[0] > next[1]) {
+        setLocal('The shortest target length must not be longer than the longest.');
+        return;
+      }
+      settings({ target: next }, 'Change target length');
+    });
+  }
+  function fit() {
+    const s = Number(fitSeconds);
+    if (!(Number.isFinite(s) && s > 0)) {
+      setLocal('Give the length to fit in seconds, above 0.');
+      return;
+    }
+    try {
+      const edits = fitMotionSceneEdits(scene, s * 1000);
+      if (edits.length) apply(edits, `Fit to ${s} s`);
+      else setLocal(null);
+    } catch (e) {
+      setLocal((e as Error).message);
+    }
+  }
+  function setNarration(text: string) {
+    if (text === narration) return;
+    const parsed = parseMotionNarration(text);
+    if ('error' in parsed) {
+      setLocal(parsed.error);
+      return;
+    }
+    settings({ narration: parsed.narration }, parsed.narration ? 'Change narration' : 'Clear narration');
+  }
+</script>
+
+<!--
+  Scene settings: loop, frame rate, stepped time, the wanted length with a Fit button
+  (fitMotionScene, as fit_animation does), a beat grid and narration words to cue shots to.
+-->
+<div class="flex flex-col gap-1.5 text-xs {className}" data-scene-settings="">
+  <div class="grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1">
+    <span class="text-muted-foreground">Loop</span>
+    <select class={input} aria-label="Scene loop" disabled={editor.readOnly} value={scene.loop ?? 'none'} onchange={(e) => settings({ loop: e.currentTarget.value as 'none' }, 'Change loop')}>
+      <option value="none">Off</option>
+      <option value="loop">Loop</option>
+      <option value="ping-pong">Ping-pong</option>
+    </select>
+    <span class="text-muted-foreground">Frame rate</span>
+    <div class="flex items-center gap-1">
+      <input class={input} type="number" min="1" max="120" aria-label="Frame rate" placeholder="30" disabled={editor.readOnly} value={scene.fps ?? ''}
+        onchange={(e) => num(e.currentTarget.value, 'Frame rate must be 1 to 120 fps.', (n) => n >= 1 && n <= 120, (n) => n !== null && settings({ fps: n }, 'Change frame rate'))} />
+      <span class="shrink-0 text-[10px] text-muted-foreground">fps</span>
+    </div>
+    <span class="text-muted-foreground" title="Hold changes on a grid of this many frames a second (12 = on twos); empty is smooth">Steps</span>
+    <div class="flex items-center gap-1">
+      <input class={input} type="number" min="1" max="120" aria-label="Steps" placeholder="smooth" disabled={editor.readOnly} value={scene.steps ?? ''}
+        onchange={(e) => num(e.currentTarget.value, 'Steps must be above 0 and at most 120 fps, or empty for smooth.', (n) => n > 0 && n <= 120, (n) => settings({ steps: n }, 'Change steps'))} />
+      <span class="shrink-0 text-[10px] text-muted-foreground">fps</span>
+    </div>
+    <span class="text-muted-foreground">Target length</span>
+    <div class="flex items-center gap-1">
+      <input class={input} type="number" min="0" step="0.5" aria-label="Target min" placeholder="min" disabled={editor.readOnly} value={target ? target[0] : ''} onchange={(e) => setTarget(0, e.currentTarget.value)} />
+      <input class={input} type="number" min="0" step="0.5" aria-label="Target max" placeholder="max" disabled={editor.readOnly} value={target ? target[1] : ''} onchange={(e) => setTarget(1, e.currentTarget.value)} />
+      <span class="shrink-0 text-[10px] text-muted-foreground">s</span>
+    </div>
+    <span class="text-muted-foreground">Fit to</span>
+    <div class="flex items-center gap-1">
+      <input class={input} type="number" min="0.1" step="0.5" aria-label="Fit to" value={fitSeconds} oninput={(e) => (fitTo = e.currentTarget.value)} />
+      <span class="shrink-0 text-[10px] text-muted-foreground">s</span>
+      <button type="button" class={btn} disabled={editor.readOnly || !scene.shots.length} onclick={fit} data-fit="" title="Change the shots' speeds so the scene lasts this long">Fit</button>
+    </div>
+    <span class="text-muted-foreground">Beat grid</span>
+    <div class="flex items-center gap-1" data-beat-grid="">
+      <input class={input} type="number" min="1" aria-label="BPM" placeholder="bpm" disabled={editor.readOnly} value={beat ? beat.bpm : ''}
+        onchange={(e) => num(e.currentTarget.value, 'BPM must be above 0.', (n) => n > 0, (n) => settings({ beat: n === null ? null : { ...(beat ?? {}), bpm: n } }, n === null ? 'Clear beat grid' : 'Change tempo'))} />
+      <input class={input} type="number" aria-label="Beat offset" placeholder="offset ms" disabled={editor.readOnly || !beat} value={beat?.offset ?? ''}
+        onchange={(e) => beat && num(e.currentTarget.value, 'The offset is a number of ms.', () => true, (n) => settings({ beat: { ...beat, offset: n ?? 0 } }, 'Change beat offset'))} />
+      <input class={input} type="number" min="1" step="1" aria-label="Meter" placeholder="4/bar" disabled={editor.readOnly || !beat} value={beat?.meter ?? ''}
+        onchange={(e) => beat && num(e.currentTarget.value, 'The meter is a whole number of beats a bar.', (n) => Number.isInteger(n) && n >= 1, (n) => settings({ beat: { ...beat, meter: n ?? 4 } }, 'Change meter'))} />
+    </div>
+  </div>
+  <label class="flex flex-col gap-0.5">
+    <span class="text-muted-foreground">Narration (a word a line: start ms, then the word)</span>
+    <textarea class="{input} h-20 font-mono" aria-label="Narration" placeholder={'0 Meet\n320 the\n480 badge'} disabled={editor.readOnly} value={narration} onchange={(e) => setNarration(e.currentTarget.value)}></textarea>
+  </label>
+  {#if message}
+    <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+  {/if}
+</div>

package/dist/animation-editor/SceneSettings.svelte.d.ts

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

package/dist/animation-editor/SceneSettings.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneSettings.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/SceneSettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoE,KAAK,yBAAyB,EAAmB,MAAM,mCAAmC,CAAC;AAIpK,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+HH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/animation-editor/ShotInspector.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { describeMotionElements, freshShotId, motionCueChoices, motionCueFromKey, motionCueKey, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The shot to edit (default: the selected shot, else the first). */
+    shot?: string;
+    class?: string;
+  }
+
+  let { controller, shot, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const elements = $derived(describeMotionElements(editor.scene));
+  const cues = $derived(motionCueChoices(editor.scene));
+  const id = $derived(shot ?? editor.selection?.shot ?? editor.scene.shots[0]?.id);
+  const index = $derived(editor.scene.shots.findIndex((s) => s.id === id));
+  const current = $derived(editor.scene.shots[index]);
+  const cueKey = $derived(current ? motionCueKey(current.at) : '');
+  const frame = $derived(current?.camera && 'frame' in current.camera ? current.camera.frame : '');
+  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);
+  function setLocal(text: string | null) {
+    localError = text ? { text, revision: editor.revision } : null;
+  }
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs';
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function apply(edit: MotionEdit | MotionEdit[], label: string) {
+    setLocal(null);
+    return controller.apply(edit, label);
+  }
+  function addShot() {
+    const newId = freshShotId(editor.scene, 'shot');
+    const at = index >= 0 ? index + 1 : editor.scene.shots.length;
+    if (apply({ op: 'insert_shots', shots: [{ id: newId, label: 'New shot', run: [] }], at }, 'Add shot').ok) {
+      controller.select({ shot: newId });
+      controller.seekShot(newId);
+    }
+  }
+  function number(key: 'hold' | 'speed', raw: string, label: string) {
+    const n = Number(raw);
+    if (raw.trim() === '') return apply({ op: 'update_shot', shot: current.id, remove: [key] }, label);
+    if (!Number.isFinite(n) || n < 0 || (key === 'speed' && n <= 0)) {
+      setLocal(key === 'speed' ? 'Speed must be a number above 0 (1 = as written).' : 'Hold must be a number of ms, 0 or more.');
+      return;
+    }
+    apply({ op: 'update_shot', shot: current.id, set: { [key]: n } }, label);
+  }
+  function rename(raw: string) {
+    apply(raw.trim() ? { op: 'update_shot', shot: current.id, set: { label: raw.trim() } } : { op: 'update_shot', shot: current.id, remove: ['label'] }, 'Rename shot');
+  }
+  function setCamera(v: string) {
+    if (!v) apply({ op: 'update_shot', shot: current.id, remove: ['camera'] }, 'Clear camera');
+    else if (v.startsWith('frame:')) apply({ op: 'update_shot', shot: current.id, set: { camera: { frame: v.slice(6), padding: 24 } } }, 'Frame camera');
+  }
+  function setCue(v: string) {
+    const cue = motionCueFromKey(v);
+    apply(cue ? { op: 'update_shot', shot: current.id, set: { at: cue } } : { op: 'update_shot', shot: current.id, remove: ['at'] }, 'Cue shot');
+  }
+</script>
+
+<!--
+  The selected shot: label, hold, speed, the node the camera frames and the cue it starts on (a
+  beat or a narration word). Also adds, moves and deletes shots. Every change is one undo step.
+-->
+<div class="flex flex-col gap-1.5 text-xs {className}" data-shot-inspector="">
+  <div class="flex items-center gap-1">
+    <span class="font-medium">Shot</span>
+    {#if current}<code class="text-[10px] text-muted-foreground">{current.id}</code>{/if}
+    <span class="ml-auto flex gap-0.5">
+      <button type="button" class={btn} disabled={editor.readOnly} onclick={addShot} data-add-shot="">+ Shot</button>
+      {#if current}
+        <button type="button" class={btn} aria-label="Move shot earlier" disabled={editor.readOnly || index === 0} onclick={() => apply({ op: 'move_shot', shot: current.id, to: index - 1 }, 'Move shot')}>←</button>
+        <button type="button" class={btn} aria-label="Move shot later" disabled={editor.readOnly || index === editor.scene.shots.length - 1} onclick={() => apply({ op: 'move_shot', shot: current.id, to: index + 1 }, 'Move shot')}>→</button>
+        <button type="button" class={btn} aria-label="Delete shot" disabled={editor.readOnly} onclick={() => apply({ op: 'delete_shots', shots: [current.id] }, 'Delete shot')}>✕</button>
+      {/if}
+    </span>
+  </div>
+  {#if current}
+    <div class="grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1">
+      <span class="text-muted-foreground">Label</span>
+      <input class={input} aria-label="Shot label" disabled={editor.readOnly} value={current.label ?? ''} onchange={(e) => rename(e.currentTarget.value)} />
+      <span class="text-muted-foreground">Hold</span>
+      <div class="flex items-center gap-1">
+        <input class={input} type="number" min="0" step="50" aria-label="Hold" placeholder="600" disabled={editor.readOnly} value={current.hold ?? ''} onchange={(e) => number('hold', e.currentTarget.value, 'Change hold')} />
+        <span class="text-[10px] text-muted-foreground">ms</span>
+      </div>
+      <span class="text-muted-foreground">Speed</span>
+      <div class="flex items-center gap-1">
+        <input class={input} type="number" min="0.05" step="0.05" aria-label="Speed" placeholder="1" disabled={editor.readOnly} value={current.speed ?? ''} onchange={(e) => number('speed', e.currentTarget.value, 'Change speed')} />
+        <span class="text-[10px] text-muted-foreground">×</span>
+      </div>
+      <span class="text-muted-foreground">Camera</span>
+      <select class={input} aria-label="Camera frames" disabled={editor.readOnly} value={current.camera ? (frame ? `frame:${frame}` : 'rect') : ''} onchange={(e) => setCamera(e.currentTarget.value)}>
+        <option value="">keep framing</option>
+        {#if current.camera && !frame}<option value="rect">a rectangle</option>{/if}
+        {#each elements as e (e.id)}
+          <option value="frame:{e.id}">frame {e.name ?? e.id}</option>
+        {/each}
+      </select>
+      <span class="text-muted-foreground">Starts on</span>
+      <select class={input} aria-label="Cue" disabled={editor.readOnly || index === 0} value={cueKey} onchange={(e) => setCue(e.currentTarget.value)}>
+        <option value="">after the shot before</option>
+        {#if cueKey && !cues.some((c) => c.value === cueKey)}<option value={cueKey}>{cueKey}</option>{/if}
+        {#each cues as c (c.value)}
+          <option value={c.value}>{c.label}</option>
+        {/each}
+      </select>
+      {#if !cues.length && index > 0}
+        <p class="col-span-2 text-[10px] text-muted-foreground">Add a beat grid or narration in the scene settings to cue shots to them.</p>
+      {/if}
+    </div>
+  {/if}
+  {#if message}
+    <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
+  {/if}
+</div>

package/dist/animation-editor/ShotInspector.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The shot to edit (default: the selected shot, else the first). */
+    shot?: string;
+    class?: string;
+}
+declare const ShotInspector: import("svelte").Component<Props, {}, "">;
+type ShotInspector = ReturnType<typeof ShotInspector>;
+export default ShotInspector;
+//# sourceMappingURL=ShotInspector.svelte.d.ts.map

package/dist/animation-editor/ShotInspector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShotInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/animation-editor/ShotInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyF,KAAK,yBAAyB,EAAmB,MAAM,mCAAmC,CAAC;AAIzL,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -2,11 +2,29 @@ import type { ComponentProps } from "svelte";
 import type AnimationEditorComponent from "./AnimationEditor.svelte";
 import type AnimationStageComponent from "./AnimationStage.svelte";
 import type ShotTimelineComponent from "./ShotTimeline.svelte";
+import type PlayheadScrubberComponent from "./PlayheadScrubber.svelte";
+import type CommandListComponent from "./CommandList.svelte";
+import type CommandInspectorComponent from "./CommandInspector.svelte";
+import type EasePickerComponent from "./EasePicker.svelte";
+import type ShotInspectorComponent from "./ShotInspector.svelte";
+import type SceneSettingsComponent from "./SceneSettings.svelte";
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
 export { default as AnimationStage } from "./AnimationStage.svelte";
 export { default as ShotTimeline } from "./ShotTimeline.svelte";
+export { default as PlayheadScrubber } from "./PlayheadScrubber.svelte";
+export { default as CommandList } from "./CommandList.svelte";
+export { default as CommandInspector } from "./CommandInspector.svelte";
+export { default as EasePicker } from "./EasePicker.svelte";
+export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as SceneSettings } from "./SceneSettings.svelte";
 export * from "./createAnimationEditor.svelte.js";
 export type AnimationEditorProps = ComponentProps<typeof AnimationEditorComponent>;
 export type AnimationStageProps = ComponentProps<typeof AnimationStageComponent>;
 export type ShotTimelineProps = ComponentProps<typeof ShotTimelineComponent>;
+export type PlayheadScrubberProps = ComponentProps<typeof PlayheadScrubberComponent>;
+export type CommandListProps = ComponentProps<typeof CommandListComponent>;
+export type CommandInspectorProps = ComponentProps<typeof CommandInspectorComponent>;
+export type EasePickerProps = ComponentProps<typeof EasePickerComponent>;
+export type ShotInspectorProps = ComponentProps<typeof ShotInspectorComponent>;
+export type SceneSettingsProps = ComponentProps<typeof SceneSettingsComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,mCAAmC,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/animation-editor/index.js

@@ -1,4 +1,10 @@
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
 export { default as AnimationStage } from "./AnimationStage.svelte";
 export { default as ShotTimeline } from "./ShotTimeline.svelte";
+export { default as PlayheadScrubber } from "./PlayheadScrubber.svelte";
+export { default as CommandList } from "./CommandList.svelte";
+export { default as CommandInspector } from "./CommandInspector.svelte";
+export { default as EasePicker } from "./EasePicker.svelte";
+export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as SceneSettings } from "./SceneSettings.svelte";
 export * from "./createAnimationEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.51.9",
+  "version": "0.53.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -123,7 +123,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.64.0"
+    "@pixerate/editor": "0.66.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",