@pixerate/editor-svelte 0.51.8 → 0.52.0

package/dist/animation-editor/AnimationEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { motionIssueLine, type AnimationEditorController, type MotionFrameOptions } from '@pixerate/editor/animation-editor';
+  import { motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
   import AnimationStage from './AnimationStage.svelte';
   import ShotTimeline from './ShotTimeline.svelte';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
@@ -7,18 +7,22 @@
   interface Props {
     controller: AnimationEditorController;
     values?: MotionFrameOptions['values'];
+    /** Faded frames either side of the playhead (see `<AnimationStage onionSkin>`). */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel (see `<AnimationStage motionPaths>`). */
+    motionPaths?: boolean | readonly string[];
     /** List the scene's issues under the timeline (default true). */
     showIssues?: boolean;
     class?: string;
   }
 
-  let { controller, values, showIssues = true, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, showIssues = true, class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
 </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" />
+  <AnimationStage {controller} {values} {onionSkin} {motionPaths} class="rounded-md border border-border bg-muted/40" />
   <ShotTimeline {controller} />
   {#if showIssues && view.current.issues.length > 0}
     <ul class="space-y-0.5 text-xs" aria-label="Animation issues">

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

@@ -1,7 +1,11 @@
-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>`). */
+    onionSkin?: MotionOnionSkin;
+    /** Draw where nodes travel (see `<AnimationStage motionPaths>`). */
+    motionPaths?: boolean | readonly string[];
     /** List the scene's issues under the timeline (default true). */
     showIssues?: boolean;
     class?: string;

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,EAAmB,KAAK,yBAAyB,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAMjJ,UAAU,KAAK;IACb,UAAU,EAAE,yBAAyB,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,mFAAmF;IACnF,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IAC1C,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"}

package/dist/animation-editor/AnimationStage.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
-  import type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+  import type { AnimationEditorController, MotionFrameOptions, 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[];
     class?: string;
   }
 
-  let { controller, values, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
   const svg = $derived(
     controller
-      .toSvg(view.current.time, { pretty: false, idPrefix: 'ae-', values })
+      .toSvg(view.current.time, { pretty: false, idPrefix: 'ae-', values, onionSkin, motionPaths })
       .replace(/<svg ([^>]*?)width="[^"]*" height="[^"]*"/, '<svg $1width="100%" height="100%"')
   );
 </script>

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

@@ -1,8 +1,12 @@
-import type { AnimationEditorController, MotionFrameOptions } from '@pixerate/editor/animation-editor';
+import type { AnimationEditorController, MotionFrameOptions, 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[];
     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,KAAK,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAItH,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.51.8",
+  "version": "0.52.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.63.0"
+    "@pixerate/editor": "0.65.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",