@pixerate/editor-svelte 0.103.3 → 0.105.0

package/README.md

@@ -82,7 +82,7 @@ Tables are on by default in `createRichTextPreset` (`table: false` turns them of
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, Select & Mask (`SelectionOptionsBar`, `RefineEdgePanel`: magic wand, marquees, lasso, Refine Edge, layer masks), and `onInpaint` / `onRemoveBackground` AI hooks |
 | `@pixerate/editor-svelte/paint-editor` | `PaintEditor`, `createReactivePaintEditor`: natural-media painting with `PaintCanvas` (pen pressure, tilt and twist, coalesced and predicted events, palm rejection, view rotation and mirroring), `PaintToolbar` (tools, symmetry, perspective, tracing and reference images, save / open, PNG / JPEG / PSD), `BrushPanel` (library with thumbnails), `PaperPanel`, `ColorPanel` (wheel, harmonies, swatches, mixing pad) and `PaintLayersPanel` |
 | `@pixerate/editor-svelte/commands` | `CommandPalette`, `createCommandPalette` (`hotkey: "Mod+K"`; call `destroy()` when done), `createCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
-| `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done), `createEditorAutosave` (the same for any editor's `EditorDocument`, e.g. `createMermaidDiagram().editorDocument`; `restore` loads the snapshot into the editor) and `<RecoveryPrompt>` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/vector` | `VectorEditor` (toolbar, canvas and style panel), `VectorCanvas` (SVG canvas forwarding pointer, wheel, keyboard and clipboard events), `VectorToolbar`, `VectorStylePanel`, `VectorSceneNodes`, `VectorGradientDefs`, `createVectorEditor` (call `destroy()` when done) and `useVectorCommands` over `@pixerate/editor/vector` (see [the vector editor guide](../../docs/vector-editor.md)) |
 | `@pixerate/editor-svelte/chart` | `ChartEditor` (toolbar, chart, inspector and data grid), `ChartCanvas` (SVG chart with selection, drag-to-edit and keyboard editing), `ChartDataGrid`, `ChartInspector`, `createChartEditor` (call `destroy()` when done) and `useChartCommands` over `@pixerate/editor/chart` (see [the chart editor guide](../../docs/chart-editor.md)) |

package/dist/animation-editor/AnimationEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { indexMotionNodes, motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+  import { indexMotionNodes, motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+  import AnimationRecordPanel from './AnimationRecordPanel.svelte';
   import AnimationStage from './AnimationStage.svelte';
   import CommandInspector from './CommandInspector.svelte';
   import CommandList from './CommandList.svelte';
@@ -70,6 +71,7 @@
   let picked: string | null = $state(null);
   let onion = $state(false);
   let paths = $state(false);
+  let recordMode: MotionRecordGestureMode = $state('move');
   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);
@@ -106,8 +108,9 @@
 
 <!--
   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.
+  target of the selected command), the playhead scrubber, a Record button to perform changes live
+  on the stage and keep them as a shot, and panels to edit commands, shots and scene settings by
+  hand. Every edit is one undo step.
 -->
 {#if !editable}
   <div bind:this={root} class="relative flex flex-col gap-2 {className}" data-animation-editor="">
@@ -132,6 +135,7 @@
         motionPaths={motionPaths ?? paths}
         {onpick}
         {highlight}
+        {recordMode}
         class="rounded-md border border-border bg-muted/40"
       />
       <PlayheadScrubber {controller} />
@@ -153,6 +157,9 @@
           {/if}
         </span>
       </div>
+      {#if !editor.readOnly}
+        <AnimationRecordPanel {controller} node={pickedValid} mode={recordMode} onmodechange={(m) => (recordMode = m)} class="border-t border-border pt-2" />
+      {/if}
       {@render issueList()}
     </div>
     <div class="flex min-w-0 flex-col gap-3">

package/dist/animation-editor/AnimationRecordPanel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { MOTION_RECORD_GESTURE_MODES, type AnimationEditorController, type MotionRecordGestureMode, type MotionTakeSample } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The element the paint and opacity controls record (e.g. the one picked on the stage). */
+    node?: string | null;
+    /** What a stage drag does while recording (pass the same to `<AnimationStage recordMode>`). */
+    mode: MotionRecordGestureMode;
+    onmodechange: (mode: MotionRecordGestureMode) => void;
+    class?: string;
+  }
+
+  let { controller, node = null, mode, onmodechange, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const pose = $derived(editor.recording && node ? controller.pose(node) : null);
+  const btn = 'rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40';
+  const MODE_LABELS: Record<MotionRecordGestureMode, string> = { move: 'Move', scale: 'Scale', rotate: 'Rotate' };
+  const hex6 = (c: string | undefined) => (c && /^#[0-9a-f]{6}/i.test(c) ? c.slice(0, 7).toLowerCase() : '#000000');
+  const sample = (values: Omit<MotionTakeSample, 'node' | 't'>) => node && controller.recordSample(node, values);
+</script>
+
+<!--
+  Record a take: Record plays on from the end of the scene while you drag elements on the stage
+  (moving, scaling or turning them, as `mode` says) and change the picked element's paint and
+  opacity; Stop keeps the performance as a new shot of ordinary commands, one undo step.
+-->
+<div class="flex flex-wrap items-center gap-2 text-xs {className}" data-animation-record="">
+  {#if editor.recording}
+    <button type="button" class="{btn} border-red-500 text-red-600" onclick={() => controller.stopRecording()} data-record-stop="">■ Stop</button>
+    <button type="button" class={btn} onclick={() => controller.cancelRecording()} data-record-cancel="">Cancel</button>
+    <button type="button" class={btn} onclick={() => controller.toggle()}>{editor.playing ? 'Pause' : 'Resume'}</button>
+    <span class="tabular-nums text-red-600" aria-live="polite">● REC {(editor.recording.elapsed / 1000).toFixed(1)} s · {editor.recording.samples} samples</span>
+  {:else}
+    <button type="button" class={btn} onclick={() => controller.startRecording()} disabled={editor.readOnly} title="Perform changes live on the stage and keep them as a new shot" data-record-start="">● Record</button>
+  {/if}
+  <span class="flex items-center gap-1" role="radiogroup" aria-label="Drag to">
+    Drag to
+    {#each MOTION_RECORD_GESTURE_MODES as m (m)}
+      <label class="flex items-center gap-0.5"><input type="radio" name="animation-record-mode" checked={mode === m} onchange={() => onmodechange(m)} /> {MODE_LABELS[m]}</label>
+    {/each}
+  </span>
+  {#if pose}
+    <span class="flex items-center gap-2" data-record-paint="">
+      {#if pose.fill !== undefined}
+        <label class="flex items-center gap-1">Fill <input type="color" value={hex6(pose.fill)} oninput={(e) => sample({ fill: e.currentTarget.value })} /></label>
+      {/if}
+      {#if pose.stroke !== undefined}
+        <label class="flex items-center gap-1">Stroke <input type="color" value={hex6(pose.stroke)} oninput={(e) => sample({ stroke: e.currentTarget.value })} /></label>
+      {/if}
+      <label class="flex items-center gap-1">Opacity <input type="range" min="0" max="1" step="0.01" value={pose.opacity} oninput={(e) => sample({ opacity: Number(e.currentTarget.value) })} /></label>
+    </span>
+  {/if}
+  {#if editor.recording && !node}
+    <span class="text-muted-foreground">Drag an element; click one to record its paint and opacity.</span>
+  {/if}
+  {#if !editor.recording && editor.error && /record/i.test(editor.error)}
+    <span class="text-amber-600">{editor.error}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type AnimationEditorController, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The element the paint and opacity controls record (e.g. the one picked on the stage). */
+    node?: string | null;
+    /** What a stage drag does while recording (pass the same to `<AnimationStage recordMode>`). */
+    mode: MotionRecordGestureMode;
+    onmodechange: (mode: MotionRecordGestureMode) => void;
+    class?: string;
+}
+declare const AnimationRecordPanel: import("svelte").Component<Props, {}, "">;
+type AnimationRecordPanel = ReturnType<typeof AnimationRecordPanel>;
+export default AnimationRecordPanel;

package/dist/animation-editor/AnimationStage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
@@ -17,11 +17,40 @@
     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[];
+    /**
+     * While the controller records a take (`startRecording`), what dragging an element does:
+     * `move` it, `scale` it about its centre or `rotate` it (default `move`). Each pointer move
+     * is a sample of the take.
+     */
+    recordMode?: MotionRecordGestureMode;
     class?: string;
   }
 
-  let { controller, values, onionSkin, motionPaths, onpick, highlight, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, onpick, highlight, recordMode = 'move', class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
+  const recording = $derived(view.current.recording);
+  let dragging: number | null = null;
+  const point = (e: PointerEvent) => controller.clientToDocument((e.currentTarget as Element).getBoundingClientRect(), e.clientX, e.clientY);
+  function onpointerdown(e: PointerEvent) {
+    const id = motionNodeAtElement(view.current.scene, e.target as Element, e.currentTarget as Element);
+    if (!id || !controller.beginRecordGesture(id, recordMode, point(e))) return;
+    dragging = e.pointerId;
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    e.preventDefault();
+  }
+  function onpointermove(e: PointerEvent) {
+    if (dragging === e.pointerId) controller.updateRecordGesture(point(e));
+  }
+  function onpointerup(e: PointerEvent) {
+    if (dragging !== e.pointerId) return;
+    dragging = null;
+    controller.endRecordGesture();
+  }
+  function onpointercancel() {
+    dragging = null;
+    controller.endRecordGesture();
+  }
+  // Re-drawn on every state change (a recorded sample changes the frame without moving the playhead).
   const svg = $derived(
     highlightMotionSvg(
       controller
@@ -38,12 +67,17 @@
 <!-- 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 {onpick ? 'cursor-crosshair' : ''} {className}"
+  class="relative overflow-hidden {recording ? 'cursor-grab touch-none' : onpick ? 'cursor-crosshair' : ''} {className}"
   style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}"
   data-animation-stage=""
+  data-recording={recording ? '' : undefined}
   role="img"
   aria-label="{view.current.scene.name} at {(view.current.time / 1000).toFixed(2)} s"
   onclick={onpick ? onclick : undefined}
+  onpointerdown={recording ? onpointerdown : undefined}
+  onpointermove={recording ? onpointermove : undefined}
+  onpointerup={recording ? onpointerup : undefined}
+  onpointercancel={recording ? onpointercancel : undefined}
 >
   {@html svg}
 </div>

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

@@ -1,4 +1,4 @@
-import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
 interface Props {
     controller: AnimationEditorController;
     /** Control values to preview (`{ accent: "#0ea5e9" }`). */
@@ -14,6 +14,12 @@ interface Props {
     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[];
+    /**
+     * While the controller records a take (`startRecording`), what dragging an element does:
+     * `move` it, `scale` it about its centre or `rotate` it (default `move`). Each pointer move
+     * is a sample of the take.
+     */
+    recordMode?: MotionRecordGestureMode;
     class?: string;
 }
 declare const AnimationStage: import("svelte").Component<Props, {}, "">;

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

@@ -8,6 +8,7 @@ import type CommandInspectorComponent from "./CommandInspector.svelte";
 import type EasePickerComponent from "./EasePicker.svelte";
 import type ShotInspectorComponent from "./ShotInspector.svelte";
 import type SceneSettingsComponent from "./SceneSettings.svelte";
+import type AnimationRecordPanelComponent from "./AnimationRecordPanel.svelte";
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
 export { default as AnimationStage } from "./AnimationStage.svelte";
 export { default as ShotTimeline } from "./ShotTimeline.svelte";
@@ -18,6 +19,7 @@ export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
+export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";
 export type AnimationEditorProps = ComponentProps<typeof AnimationEditorComponent>;
 export type AnimationStageProps = ComponentProps<typeof AnimationStageComponent>;
@@ -28,3 +30,4 @@ export type CommandInspectorProps = ComponentProps<typeof CommandInspectorCompon
 export type EasePickerProps = ComponentProps<typeof EasePickerComponent>;
 export type ShotInspectorProps = ComponentProps<typeof ShotInspectorComponent>;
 export type SceneSettingsProps = ComponentProps<typeof SceneSettingsComponent>;
+export type AnimationRecordPanelProps = ComponentProps<typeof AnimationRecordPanelComponent>;

package/dist/animation-editor/index.js

@@ -8,4 +8,5 @@ export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
+export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";

package/dist/canvas/createMermaidDiagram.svelte.d.ts

@@ -1,4 +1,5 @@
-import { DiagramController, type DiagramActionResult, type DiagramControllerOptions, type DiagramState, type EditOp, type MermaidDocument } from '@pixerate/editor/diagram';
+import { DiagramController, type DiagramActionResult, type DiagramControllerOptions, type DiagramState, type EditOp, type DiagramEditorDocument, type MermaidDocument } from '@pixerate/editor/diagram';
+import type { EditorDocument } from '@pixerate/editor/persistence';
 import { type DiagramLayout, type DiagramLayoutOptions, type DiagramScene, type DiagramSceneTheme, type MermaidFlowEdge, type MermaidFlowNode } from '@pixerate/editor/canvas';
 export interface CreateMermaidDiagramOptions extends DiagramControllerOptions {
     /** Layout spacing and node measuring for new nodes (stored positions always win). */
@@ -16,6 +17,11 @@ type Placed = {
 };
 export interface SvelteMermaidDiagram {
     readonly controller: DiagramController;
+    /**
+     * The save / load / undo contract for this diagram: pass it to `createEditorAutosave`
+     * (`@pixerate/editor-svelte/persistence`) or `createDocumentToolProvider`.
+     */
+    readonly editorDocument: EditorDocument<DiagramEditorDocument>;
     /** The controller's state (reactive). */
     readonly state: DiagramState;
     readonly document: MermaidDocument;

package/dist/canvas/createMermaidDiagram.svelte.js

@@ -1,4 +1,4 @@
-import { DiagramController } from '@pixerate/editor/diagram';
+import { DiagramController, createDiagramEditorDocument } from '@pixerate/editor/diagram';
 import { CSS_VARIABLE_DIAGRAM_SCENE_THEME, DiagramStream, blendDiagramLayout, diagramRenameOp, familySceneFromLayout, easeDiagramTween, mermaidMovesFromCanvas, mermaidToCanvas } from '@pixerate/editor/canvas';
 /**
  * Svelte 5 rune: a Mermaid diagram on a Svelte Flow canvas. Subscribes to a
@@ -19,8 +19,10 @@ view = {}) {
     const unsubscribe = controller.subscribe((next) => {
         state = next;
     });
+    const editorDocument = createDiagramEditorDocument(controller);
     return {
         controller,
+        editorDocument,
         get state() {
             return state;
         },
@@ -68,7 +70,10 @@ view = {}) {
         select: (ids) => controller.select(ids),
         undo: () => void controller.undo(),
         redo: () => void controller.redo(),
-        destroy: unsubscribe
+        destroy: () => {
+            unsubscribe();
+            editorDocument.destroy();
+        }
     };
 }
 /**

package/dist/persistence/editorAutosave.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type EditorDocument, type EditorDocumentFile, type LoadReport } from "@pixerate/editor/persistence";
+import { type CreateAutosaveOptions, type SvelteAutosave } from "./autosave.svelte.js";
+export interface CreateEditorAutosaveOptions extends Omit<CreateAutosaveOptions<EditorDocumentFile>, "key" | "getSnapshot" | "serialize" | "deserialize" | "history"> {
+    /** Snapshot key (default the document's `kind`). */
+    key?: string;
+}
+export interface SvelteEditorAutosave extends Omit<SvelteAutosave<EditorDocumentFile>, "restore"> {
+    /** Loads the recovered snapshot into the document and starts autosaving. */
+    restore(): LoadReport | undefined;
+}
+/**
+ * `createAutosave` for any editor's `EditorDocument` (e.g.
+ * `createMermaidDiagram(...).editorDocument`): snapshots it as an
+ * `EditorDocumentFile` after each change, and `restore` loads a recovered
+ * snapshot straight into the editor. Status and recovery stay reactive.
+ */
+export declare function createEditorAutosave(doc: EditorDocument, options: CreateEditorAutosaveOptions): SvelteEditorAutosave;

package/dist/persistence/editorAutosave.svelte.js

@@ -0,0 +1,40 @@
+import { parseEditorDocument, toEditorDocumentFile, } from "@pixerate/editor/persistence";
+import { createAutosave } from "./autosave.svelte.js";
+/**
+ * `createAutosave` for any editor's `EditorDocument` (e.g.
+ * `createMermaidDiagram(...).editorDocument`): snapshots it as an
+ * `EditorDocumentFile` after each change, and `restore` loads a recovered
+ * snapshot straight into the editor. Status and recovery stay reactive.
+ */
+export function createEditorAutosave(doc, options) {
+    const autosave = createAutosave({
+        ...options,
+        key: options.key ?? doc.kind,
+        getSnapshot: () => toEditorDocumentFile(doc),
+        deserialize: (text) => parseEditorDocument(text, { kind: doc.kind }),
+        history: doc,
+    });
+    return {
+        get status() {
+            return autosave.status;
+        },
+        get recovery() {
+            return autosave.recovery;
+        },
+        get pendingRecovery() {
+            return autosave.pendingRecovery;
+        },
+        restore() {
+            const snapshot = autosave.restore();
+            return snapshot ? doc.loadDocument(snapshot, { history: "reset" }) : undefined;
+        },
+        discard: () => autosave.discard(),
+        ready: () => autosave.ready(),
+        flushNow: () => autosave.flushNow(),
+        markClean: () => autosave.markClean(),
+        notifyChange: () => autosave.notifyChange(),
+        checked: autosave.checked,
+        controller: autosave.controller,
+        destroy: () => autosave.destroy(),
+    };
+}

package/dist/persistence/index.d.ts

@@ -2,4 +2,5 @@ import type { ComponentProps } from "svelte";
 import type RecoveryPromptComponent from "./RecoveryPrompt.svelte";
 export { default as RecoveryPrompt } from "./RecoveryPrompt.svelte";
 export * from "./autosave.svelte.js";
+export * from "./editorAutosave.svelte.js";
 export type RecoveryPromptProps = ComponentProps<typeof RecoveryPromptComponent>;

package/dist/persistence/index.js

@@ -1,2 +1,3 @@
 export { default as RecoveryPrompt } from "./RecoveryPrompt.svelte";
 export * from "./autosave.svelte.js";
+export * from "./editorAutosave.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.103.3",
+  "version": "0.105.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -144,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.144.0"
+    "@pixerate/editor": "0.146.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",