@pixerate/editor-svelte 0.172.0 → 0.174.0

package/dist/animation-editor/AnimationEffectsPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { indexMotionNodes, type AnimationEditorController, type MotionEffectResult } from '@pixerate/editor/animation-editor';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import EffectTemplates from '../effects/EffectTemplates.svelte';
   import AnimationEffectControls from './AnimationEffectControls.svelte';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
@@ -50,6 +51,7 @@
   {#if browse === 'motion'}
     <EffectsBrowser {provider} uses={['motion']} kinds={['motion']} title="Motion for {target}" onpick={(e) => ((browse = null), report(controller.applyMotionEffect(e.id, [target])))} />
   {/if}
+  <EffectTemplates {provider} disabled={ed.readOnly} fillLabel="New scene from template" onfill={(t, v) => controller.fillTemplate(t, v).then((r) => (r.ok && r.notes.length && (message = r.notes.join(' ')), r))} />
   {#if browse === 'vector'}
     <EffectsBrowser {provider} kinds={['vector']} title="Vector effects" onpick={(e) => ((browse = null), report(controller.addVectorEffect(e.id)))} />
   {/if}

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

@@ -5,7 +5,8 @@ export type CreateCanvasDocumentOptions<TNode extends CanvasNode = CanvasNode, T
  * Svelte 5 rune: the save / load / undo contract (kind `canvas`) for nodes and edges held in
  * `$state`, for `createEditorAutosave` or `createDocumentToolProvider`. Reads `getNodes()` /
  * `getEdges()` reactively, so changes the history does not see (a finished drag, an edge
- * removed by Svelte Flow) count too; selection, measuring and drag frames do not. Parity with
+ * removed by Svelte Flow) count too; selection, measuring, drag frames, `omitNodeKeys` /
+ * `omitEdgeKeys` and the viewport do not. Parity with
  * React's `useCanvasEditorDocument`. Call `destroy()` when done.
  */
 export declare function createCanvasDocument<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdgeLike = CanvasEdge>(options: CreateCanvasDocumentOptions<TNode, TEdge>): EditorDocument<CanvasEditorDocument<TNode, TEdge>>;

package/dist/canvas/createCanvasDocument.svelte.js

@@ -1,13 +1,10 @@
-import { createCanvasEditorDocument } from '@pixerate/editor/canvas';
-const contentKey = (nodes, edges) => JSON.stringify([
-    nodes.map(({ selected: _s, dragging: _d, measured: _m, resizing: _r, ...rest }) => rest),
-    edges.map(({ selected: _s, ...rest }) => rest)
-]);
+import { canvasDocumentContentKey, createCanvasEditorDocument } from '@pixerate/editor/canvas';
 /**
  * Svelte 5 rune: the save / load / undo contract (kind `canvas`) for nodes and edges held in
  * `$state`, for `createEditorAutosave` or `createDocumentToolProvider`. Reads `getNodes()` /
  * `getEdges()` reactively, so changes the history does not see (a finished drag, an edge
- * removed by Svelte Flow) count too; selection, measuring and drag frames do not. Parity with
+ * removed by Svelte Flow) count too; selection, measuring, drag frames, `omitNodeKeys` /
+ * `omitEdgeKeys` and the viewport do not. Parity with
  * React's `useCanvasEditorDocument`. Call `destroy()` when done.
  */
 export function createCanvasDocument(options) {
@@ -26,7 +23,7 @@ export function createCanvasDocument(options) {
             const edges = options.getEdges();
             if (nodes.some((n) => n.dragging))
                 return;
-            const key = contentKey(nodes, edges);
+            const key = canvasDocumentContentKey(nodes, edges, options);
             if (lastKey !== null && key !== lastKey)
                 listeners.forEach((listener) => listener());
             lastKey = key;

package/dist/effects/EffectTemplates.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { checkTemplateValues, isSubjectTemplateSlot, type EffectProvider, type EffectTemplateDescription, type EffectTemplateSummary } from '@pixerate/editor/effects';
+
+  interface Props {
+    /** The effects provider; nothing shows unless it has templates. */
+    provider: EffectProvider | null | undefined;
+    /** Fills the chosen template (the editor's `fillTemplate`). Resolves `{ ok: false, error }` to show the refusal; on success the form closes. */
+    onfill: (template: string, values: Record<string, unknown>) => Promise<{ ok: true } | { ok: false; error: string }>;
+    /** The button that fills (default "Use template"). */
+    fillLabel?: string;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let { provider, onfill, fillLabel = 'Use template', disabled = false, class: className = '' }: Props = $props();
+  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-2 py-0.5 text-[11px] disabled:opacity-40';
+
+  const supported = $derived(!!provider?.capabilities.supportsTemplates && !!provider.listTemplates && !!provider.describeTemplate);
+  let templates = $state<readonly EffectTemplateSummary[]>([]);
+  let chosen = $state('');
+  let description = $state<EffectTemplateDescription | null>(null);
+  let values = $state<Record<string, unknown>>({});
+  let message = $state<string | null>(null);
+  let busy = $state(false);
+
+  $effect(() => {
+    const p = provider;
+    const ok = supported;
+    let live = true;
+    templates = [];
+    chosen = '';
+    if (ok) void Promise.resolve(p!.listTemplates!()).then((t) => live && (templates = t), () => live && (templates = []));
+    return () => (live = false);
+  });
+
+  $effect(() => {
+    const id = chosen;
+    const p = provider;
+    let live = true;
+    description = null;
+    message = null;
+    if (!id || !supported) return;
+    void Promise.resolve(p!.describeTemplate!(id)).then(
+      (d) => {
+        if (!live) return;
+        description = d;
+        values = Object.fromEntries(d.slots.map((s) => [s.name, isSubjectTemplateSlot(s) ? '' : (s as { default: unknown }).default]));
+      },
+      (e: Error) => live && (message = e.message)
+    );
+    return () => (live = false);
+  });
+
+  // Empty subject fields are left out (their default, or left open); empty numbers too.
+  const given = $derived(Object.fromEntries(Object.entries(values).filter(([, v]) => v !== '')));
+  const problems = $derived(description ? checkTemplateValues(description.slots, given) : []);
+  const problemFor = (slot: string) => problems.find((p) => p.startsWith(`Slot "${slot}"`));
+
+  async function fill(e: SubmitEvent) {
+    e.preventDefault();
+    if (!description || problems.length) return;
+    busy = true;
+    const r = await onfill(description.id, given);
+    busy = false;
+    if (r.ok) chosen = '';
+    else message = r.error;
+  }
+</script>
+
+<!--
+  The provider's sequence templates: pick one, fill its slots in a form (built from
+  describeTemplate, checked with checkTemplateValues as you type) and use it. Hidden when the
+  provider has no templates.
+-->
+{#if supported && templates.length}
+  <div class="flex flex-col gap-1 text-xs {className}" data-effect-templates="">
+    <select class={input} aria-label="Template" {disabled} bind:value={chosen}>
+      <option value="">Templates…</option>
+      {#each templates as t (t.id)}<option value={t.id}>{t.name} ({t.shots} shots)</option>{/each}
+    </select>
+    {#if description}
+      <form class="flex flex-col gap-1 rounded border border-border p-1" data-template-form={description.id} onsubmit={fill}>
+        <p class="text-[11px] text-muted-foreground">{description.description}</p>
+        {#each description.slots as slot (slot.name)}
+          {@const id = `template-slot-${slot.name}`}
+          {@const error = problemFor(slot.name)}
+          <div class="flex flex-col gap-0.5" data-template-slot={slot.name}>
+            <label for={id} class="text-muted-foreground" title={slot.description}>{slot.label}</label>
+            {#if slot.type === 'color'}
+              <input {id} class="h-6 w-10" type="color" value={String(values[slot.name])} oninput={(e) => (values = { ...values, [slot.name]: e.currentTarget.value })} />
+            {:else if slot.type === 'number'}
+              <input {id} class={input} type="number" min={slot.min} max={slot.max} step={slot.integer ? 1 : 'any'} value={String(values[slot.name])} oninput={(e) => (values = { ...values, [slot.name]: e.currentTarget.value === '' ? '' : Number(e.currentTarget.value) })} />
+            {:else if slot.type === 'text'}
+              <div class="flex items-center gap-1">
+                <input {id} class={input} maxlength={slot.maxLength} value={String(values[slot.name])} oninput={(e) => (values = { ...values, [slot.name]: e.currentTarget.value })} />
+                {#if slot.maxLength !== undefined}<span class="text-[10px] text-muted-foreground">{String(values[slot.name]).length}/{slot.maxLength}</span>{/if}
+              </div>
+            {:else}
+              <input
+                {id}
+                class={input}
+                placeholder={slot.hasDefault ? 'URL or <svg> (default: a placeholder)' : 'URL or <svg> (empty: left open)'}
+                value={typeof values[slot.name] === 'string' ? (values[slot.name] as string) : ''}
+                oninput={(e) => (values = { ...values, [slot.name]: e.currentTarget.value })}
+              />
+            {/if}
+            {#if error}<p class="text-[11px] text-destructive">{error}</p>{/if}
+          </div>
+        {/each}
+        <div class="flex gap-1">
+          <button type="submit" class={btn} disabled={disabled || busy || problems.length > 0}>{fillLabel}</button>
+          <button type="button" class={btn} onclick={() => (chosen = '')}>Cancel</button>
+        </div>
+      </form>
+    {/if}
+    {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
+  </div>
+{/if}

package/dist/effects/EffectTemplates.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type EffectProvider } from '@pixerate/editor/effects';
+interface Props {
+    /** The effects provider; nothing shows unless it has templates. */
+    provider: EffectProvider | null | undefined;
+    /** Fills the chosen template (the editor's `fillTemplate`). Resolves `{ ok: false, error }` to show the refusal; on success the form closes. */
+    onfill: (template: string, values: Record<string, unknown>) => Promise<{
+        ok: true;
+    } | {
+        ok: false;
+        error: string;
+    }>;
+    /** The button that fills (default "Use template"). */
+    fillLabel?: string;
+    disabled?: boolean;
+    class?: string;
+}
+declare const EffectTemplates: import("svelte").Component<Props, {}, "">;
+type EffectTemplates = ReturnType<typeof EffectTemplates>;
+export default EffectTemplates;

package/dist/effects/index.d.ts

@@ -3,12 +3,15 @@ import type EffectsBrowserComponent from "./EffectsBrowser.svelte";
 import type EffectParametersComponent from "./EffectParameters.svelte";
 import type EffectThumbnailComponent from "./EffectThumbnail.svelte";
 import type EffectAuthoringEditorComponent from "./EffectAuthoringEditor.svelte";
+import type EffectTemplatesComponent from "./EffectTemplates.svelte";
 export { default as EffectsBrowser } from "./EffectsBrowser.svelte";
 export { default as EffectParameters } from "./EffectParameters.svelte";
 export { default as EffectThumbnail } from "./EffectThumbnail.svelte";
 export { default as EffectAuthoringEditor } from "./EffectAuthoringEditor.svelte";
+export { default as EffectTemplates } from "./EffectTemplates.svelte";
 export * from "./effects.svelte.js";
 export type EffectsBrowserProps = ComponentProps<typeof EffectsBrowserComponent>;
 export type EffectParametersProps = ComponentProps<typeof EffectParametersComponent>;
 export type EffectThumbnailProps = ComponentProps<typeof EffectThumbnailComponent>;
 export type EffectAuthoringEditorProps = ComponentProps<typeof EffectAuthoringEditorComponent>;
+export type EffectTemplatesProps = ComponentProps<typeof EffectTemplatesComponent>;

package/dist/effects/index.js

@@ -2,4 +2,5 @@ export { default as EffectsBrowser } from "./EffectsBrowser.svelte";
 export { default as EffectParameters } from "./EffectParameters.svelte";
 export { default as EffectThumbnail } from "./EffectThumbnail.svelte";
 export { default as EffectAuthoringEditor } from "./EffectAuthoringEditor.svelte";
+export { default as EffectTemplates } from "./EffectTemplates.svelte";
 export * from "./effects.svelte.js";

package/dist/video-editor/VideoEffectsPanel.svelte

@@ -2,6 +2,7 @@
   import { findVideoClip, isVideoKeyframes, openVideoClipEffectAuthoring, type VideoClipEffectAuthoring, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
   import { onDestroy } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import EffectTemplates from '../effects/EffectTemplates.svelte';
   import EffectAuthoringEditor from '../effects/EffectAuthoringEditor.svelte';
   import EffectControls from './EffectControls.svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
@@ -75,6 +76,7 @@
   {#if browse === 'generator'}
     <EffectsBrowser {provider} uses={['generator', 'title', 'overlay']} title="Generators and titles" onpick={(e) => ((browse = null), addEffectClip(e.id))} />
   {/if}
+  <EffectTemplates {provider} {disabled} fillLabel="Insert template" onfill={(t, v) => controller.fillTemplate(t, v, { at: Math.round(ed.time) }).then((r) => (r.ok && r.notes.length && (message = r.notes.join(' ')), r))} />
   {#if !clip}
     <p class="text-[11px] text-muted-foreground">Select a clip to see its effects.</p>
   {:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.172.0",
+  "version": "0.174.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.233.0"
+    "@pixerate/editor": "0.235.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",