@pixerate/editor-svelte 0.165.9 → 0.165.11

package/dist/effects/EffectThumbnail.svelte

@@ -11,16 +11,18 @@
     class?: string;
   }
 
+  const LABELS: Partial<Record<EffectSummary['kind'], string>> = { motion: 'Motion', camera: 'Camera' };
+
   let { provider, effect: item, width = 96, height = 54, class: className = '' }: Props = $props();
   let canvas = $state<HTMLCanvasElement | null>(null);
   let failed = $state(false);
 
   $effect(() => {
     // Reads only what picks the picture: setting `failed` below must not run this again.
-    const motion = item.kind === 'motion';
+    const pixelless = item.kind in LABELS;
     const request = { provider, item, size: { width, height } };
-    failed = motion;
-    if (motion) return;
+    failed = pixelless;
+    if (pixelless) return;
     let live = true;
     untrack(() => renderEffectThumbnail(request.provider, request.item, request.size)).then(
       (pixels) => {
@@ -38,14 +40,14 @@
   });
 </script>
 
-<!-- A preview of an effect drawn by the provider's own renderer; motion effects and failures show a label. -->
+<!-- A preview of an effect drawn by the provider's own renderer; motion effects, camera moves and failures show a label. -->
 <div
   class="relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] {className}"
   style="aspect-ratio: {width} / {height}"
   data-effect-thumbnail={item.id}
 >
   {#if failed}
-    <span class="absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground">{item.kind === 'motion' ? 'Motion' : 'No preview'}</span>
+    <span class="absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground">{LABELS[item.kind] ?? 'No preview'}</span>
   {:else}
     <canvas bind:this={canvas} {width} {height} class="h-full w-full" aria-hidden="true"></canvas>
   {/if}

package/dist/effects/EffectsBrowser.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { EFFECT_USE_LABELS, type EffectKind, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
+  import { EFFECT_USE_LABELS, effectOffered, type EffectKind, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';
   import EffectThumbnail from './EffectThumbnail.svelte';
 
   interface Props {
@@ -68,7 +68,7 @@
       live = false;
     };
   });
-  const allowed = (e: EffectSummary) => (!kinds || kinds.includes(e.kind)) && (uses ? e.kind !== 'motion' || uses.includes('motion') : e.kind !== 'motion') && (!uses || e.uses.some((u) => uses.includes(u)));
+  const allowed = (e: EffectSummary) => (!kinds || kinds.includes(e.kind)) && effectOffered(e, uses);
   const categories = $derived([...new Set(all.filter(allowed).map((e) => e.category))]);
   const shown = $derived(found.filter(allowed));
 </script>

package/package.json

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