@pixerate/editor-svelte 0.196.3 → 0.198.0

package/dist/animation-editor/AnimationEffectControls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AnimationEditorController, MotionEffectResult } from '@pixerate/editor/animation-editor';
+  import { pathControlsOf } from '@pixerate/editor/effects';
   import EffectParameters from '../effects/EffectParameters.svelte';
   import { effectDescriptionOf } from '../effects/effects.svelte.js';
 
@@ -8,11 +9,20 @@
     instance: string;
     effect: string;
     values: Readonly<Record<string, unknown>>;
+    pathNodes?: readonly string[];
+    defaultPathNode?: string;
+    disabled?: boolean;
   }
 
-  let { controller, instance, effect, values }: Props = $props();
+  let { controller, instance, effect, values, pathNodes = [], defaultPathNode = '', disabled = false }: Props = $props();
   const loaded = effectDescriptionOf(() => controller.effectsProvider, () => effect);
   let message = $state<string | null>(null);
+  let pathNode = $state('');
+  let words = $state('');
+  const chosenPathNode = $derived(
+    pathNode && pathNodes.includes(pathNode) ? pathNode : defaultPathNode && pathNodes.includes(defaultPathNode) ? defaultPathNode : pathNodes[0] ?? ''
+  );
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
   const report = (r: Promise<MotionEffectResult>) => void r.then((x) => (message = x.ok ? null : x.error));
 </script>
 
@@ -24,9 +34,45 @@
 {:else if !loaded.description}
   <p class="text-[11px] text-muted-foreground">Loading…</p>
 {:else}
+  {@const description = loaded.description}
+  {@const pathControls = description.kind === 'vector' ? pathControlsOf(description) : []}
+  {#if pathControls.length > 0}
+    <div class="mb-1 flex flex-wrap items-center gap-1" data-effect-part="path">
+      <span class="text-muted-foreground">Path</span>
+      <select
+        class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]"
+        aria-label="Path node"
+        value={chosenPathNode}
+        disabled={disabled || !pathNodes.length}
+        onchange={(e) => (pathNode = e.currentTarget.value)}
+      >
+        <option value="">Path node…</option>
+        {#each pathNodes as id (id)}<option value={id}>{id}</option>{/each}
+      </select>
+      <button type="button" class={btn} disabled={disabled || !chosenPathNode} onclick={() => report(controller.setVectorEffectPath(instance, { node: chosenPathNode }))}>
+        Use path node
+      </button>
+      {#if controller.effectsProvider.pathFromText}
+        <input
+          class="w-24 rounded border border-border bg-transparent px-1 py-0.5"
+          aria-label="Words to write along the path"
+          placeholder="Words"
+          bind:value={words}
+          {disabled}
+        />
+        <button type="button" class={btn} disabled={disabled || !words.trim()} onclick={() => report(controller.setVectorEffectPath(instance, { text: words }))}>
+          Write
+        </button>
+      {/if}
+      <button type="button" class={btn} {disabled} onclick={() => report(controller.updateMotionEffect(instance, { [pathControls[0]]: '' }))}>
+        Clear path
+      </button>
+    </div>
+  {/if}
   <EffectParameters
-    description={loaded.description}
+    {description}
     {values}
+    {disabled}
     onchange={(k, v, g) => report(controller.updateMotionEffect(instance, { [k]: v as never }, { merge: g ?? undefined }))}
     onreset={(k) => report(controller.updateMotionEffect(instance, { [k]: null }))}
     onpreset={(v) => report(controller.updateMotionEffect(instance, v as never))}

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

@@ -4,6 +4,9 @@ interface Props {
     instance: string;
     effect: string;
     values: Readonly<Record<string, unknown>>;
+    pathNodes?: readonly string[];
+    defaultPathNode?: string;
+    disabled?: boolean;
 }
 declare const AnimationEffectControls: import("svelte").Component<Props, {}, "">;
 type AnimationEffectControls = ReturnType<typeof AnimationEffectControls>;

package/dist/animation-editor/AnimationEffectsPanel.svelte

@@ -16,16 +16,24 @@
   const view = animationEditorStateOf(() => controller);
   const ed = $derived(view.current);
   const provider = $derived(ed.effectsProvider);
+  const applied = $derived.by(() => {
+    void ed.scene;
+    return controller.appliedEffects();
+  });
   const nodes = $derived([...indexMotionNodes(ed.scene.artwork.nodes).keys()]);
+  const pathNodes = $derived.by(() => {
+    const vectorGroups = new Set(applied.filter((e) => e.kind === 'vector').map((e) => e.instance));
+    const own = ed.scene.artwork.nodes.filter((n) => !vectorGroups.has(n.id));
+    return [...indexMotionNodes(own).values()].filter((e) => e.node.type === 'path').map((e) => e.node.id);
+  });
   let chosen = $state('');
   const target = $derived(node && nodes.includes(node) ? node : chosen && nodes.includes(chosen) ? chosen : '');
   let browse = $state<null | 'motion' | 'vector'>(null);
+  let vectorPathNode = $state('');
+  let vectorWords = $state('');
+  const activeVectorPathNode = $derived(vectorPathNode && pathNodes.includes(vectorPathNode) ? vectorPathNode : '');
   let open = $state<string | null>(null);
   let message = $state<string | null>(null);
-  const applied = $derived.by(() => {
-    void ed.scene;
-    return controller.appliedEffects();
-  });
   const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
   function report(r: MotionEffectResult | Promise<MotionEffectResult>) {
     void Promise.resolve(r).then((x) => (message = x.ok ? (x.notes.length ? x.notes.join(' ') : null) : x.error));
@@ -53,7 +61,46 @@
   {/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)))} />
+    <div class="space-y-1">
+      <div class="flex flex-wrap items-center gap-1" data-effect-part="vector-path">
+        <span class="text-muted-foreground">Path</span>
+        <select
+          class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]"
+          aria-label="Path node for vector effect"
+          value={activeVectorPathNode}
+          disabled={ed.readOnly || !pathNodes.length}
+          onchange={(e) => (vectorPathNode = e.currentTarget.value)}
+        >
+          <option value="">Default path</option>
+          {#each pathNodes as id (id)}<option value={id}>{id}</option>{/each}
+        </select>
+        {#if provider?.pathFromText}
+          <input
+            class="w-24 rounded border border-border bg-transparent px-1 py-0.5"
+            aria-label="Words for vector effect path"
+            placeholder="Words"
+            bind:value={vectorWords}
+            disabled={ed.readOnly}
+          />
+        {/if}
+      </div>
+      <EffectsBrowser
+        {provider}
+        kinds={['vector']}
+        title="Vector effects"
+        onpick={(e) => {
+          browse = null;
+          const path = e.accepts?.includes('path')
+            ? vectorWords.trim()
+              ? { text: vectorWords }
+              : activeVectorPathNode
+                ? { node: activeVectorPathNode }
+                : undefined
+            : undefined;
+          report(controller.addVectorEffect(e.id, path ? { path } : undefined));
+        }}
+      />
+    </div>
   {/if}
   <ol class="space-y-1">
     {#each applied as e (e.instance)}
@@ -64,7 +111,7 @@
           </button>
           <button type="button" class={btn} disabled={ed.readOnly} aria-label="Remove {e.name ?? e.effect}" onclick={() => report(controller.removeMotionEffect(e.instance))}>✕</button>
         </div>
-        {#if open === e.instance}<div class="mt-1"><AnimationEffectControls {controller} instance={e.instance} effect={e.effect} values={e.values} /></div>{/if}
+        {#if open === e.instance}<div class="mt-1"><AnimationEffectControls {controller} instance={e.instance} effect={e.effect} values={e.values} {pathNodes} defaultPathNode={target} disabled={ed.readOnly} /></div>{/if}
       </li>
     {/each}
   </ol>

package/dist/brushes/BrushEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { brushEditorScope, brushEditorSections, PAINT_PROFILE, setBrushEditorValue, type Brush, type BrushHostProfile } from '@pixerate/editor/brushes';
+  import { brushEditorScope, brushEditorSections, PAINT_PROFILE, setBrushEditorValue, withBrushSource, type Brush, type BrushHostProfile, type BrushSource } from '@pixerate/editor/brushes';
   import PaintSlider from '../paint-editor/PaintSlider.svelte';
   import PixelCanvas from '../paint-editor/PixelCanvas.svelte';
   import { button, chip } from './styles.js';
@@ -27,10 +27,17 @@
     onsaveas?: (name: string) => unknown;
     /** Extra controls a host adds to a section (e.g. the sticker picker for stamps). */
     extra?: Snippet<[string]>;
+    /** The library's image sources, offered as stamps and as grain. */
+    sources?: ReadonlyArray<Pick<BrushSource, 'id' | 'name'>>;
+    /**
+     * With it, "Add image…" buttons for an image tip and for grain: it stores the picked file as a
+     * source (e.g. `addBrushSourceFromFile`) and returns its `source:<id>` ref.
+     */
+    onaddsource?: (file: File) => Promise<string>;
     class?: string;
   }
-  let { brush, profile = PAINT_PROFILE, onchange, preview, previewBackground, onsave, saveLabel = 'Save', onsaveas, extra, class: className = '' }: Props = $props();
-  const sections = $derived(brushEditorSections(brush, profile));
+  let { brush, profile = PAINT_PROFILE, onchange, preview, previewBackground, onsave, saveLabel = 'Save', onsaveas, extra, sources, onaddsource, class: className = '' }: Props = $props();
+  const sections = $derived(brushEditorSections(brush, profile, { sources }));
   const scope = $derived(brushEditorScope(brush, profile));
   let problems = $state<string | null>(null);
   let name = $state('');
@@ -39,6 +46,17 @@
     problems = r.problems.length ? r.problems.join(' ') : null;
     if (r.brush !== brush) onchange(r.brush);
   };
+  /** Stores a picked image as a source and makes it the tip or the grain. */
+  const addSource = async (file: File | undefined, as: 'tip' | 'grain') => {
+    if (!file || !onaddsource) return;
+    try {
+      const r = withBrushSource(brush, await onaddsource(file), as);
+      problems = r.problems.length ? r.problems.join(' ') : null;
+      onchange(r.brush);
+    } catch (e) {
+      problems = (e as Error).message;
+    }
+  };
   const setColour = (path: string, light: string, dark: string | null) => set(path, dark === null ? light : { light, dark });
   const setAt = (path: string, list: Array<string | { light: string; dark: string }>, i: number, entry: string | { light: string; dark: string }) => set(path, list.map((x, j) => (j === i ? entry : x)));
   const attemptSave = async (fn: () => unknown, after?: () => void) => {
@@ -140,6 +158,23 @@
             {/each}
           </div>
         {/if}
+        {#if onaddsource && (c.path === 'tip.stamps' || c.path === 'tip.grain.source')}
+          {@const label = c.path === 'tip.stamps' ? 'Add image tip…' : 'Add grain image…'}
+          <label class={`${button} cursor-pointer self-start`}>
+            {label}
+            <input
+              type="file"
+              accept="image/*"
+              aria-label={label}
+              class="sr-only"
+              onchange={(e) => {
+                const file = e.currentTarget.files?.[0];
+                e.currentTarget.value = '';
+                void addSource(file, c.path === 'tip.stamps' ? 'tip' : 'grain');
+              }}
+            />
+          </label>
+        {/if}
       {/each}
       {#if extra}{@render extra(s.id)}{/if}
     </section>

package/dist/brushes/BrushEditor.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type Brush, type BrushHostProfile } from '@pixerate/editor/brushes';
+import { type Brush, type BrushHostProfile, type BrushSource } from '@pixerate/editor/brushes';
 interface Props {
     /** The brush being edited, as facets. */
     brush: Brush;
@@ -26,6 +26,13 @@ interface Props {
     onsaveas?: (name: string) => unknown;
     /** Extra controls a host adds to a section (e.g. the sticker picker for stamps). */
     extra?: Snippet<[string]>;
+    /** The library's image sources, offered as stamps and as grain. */
+    sources?: ReadonlyArray<Pick<BrushSource, 'id' | 'name'>>;
+    /**
+     * With it, "Add image…" buttons for an image tip and for grain: it stores the picked file as a
+     * source (e.g. `addBrushSourceFromFile`) and returns its `source:<id>` ref.
+     */
+    onaddsource?: (file: File) => Promise<string>;
     class?: string;
 }
 declare const BrushEditor: import("svelte").Component<Props, {}, "">;

package/dist/brushes/BrushLibraryEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { brushPreviewColours, checkBrushEdit, newBrushFor, saveBrushEdit, type Brush, type BrushHostProfile, type BrushLibrary, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
+  import { addBrushSourceFromFile, brushPreviewColours, checkBrushEdit, newBrushFor, saveBrushEdit, type Brush, type BrushHostProfile, type BrushLibrary, type BrushPreviewRenderer, type BrushSource } from '@pixerate/editor/brushes';
   import { button } from './styles.js';
   import BrushEditor from './BrushEditor.svelte';
 
@@ -32,6 +32,20 @@
   let draft = $state<Brush | null>(null);
   let status = $state<string | null>(null);
   let preview = $state<string | null>(null);
+  let sources = $state<BrushSource[]>([]);
+
+  // The library's image sources, for image tips and grain (kept current as sources are added).
+  $effect(() => {
+    const lib = library;
+    let live = true;
+    const read = () => void lib.listSources().then((list) => live && (sources = list), () => undefined);
+    read();
+    const off = lib.subscribe(read);
+    return () => {
+      live = false;
+      off();
+    };
+  });
 
   $effect(() => {
     const lib = library;
@@ -91,7 +105,7 @@
   BrushEditor on a brush library for one host: loads the brush, edits a draft and saves it with saveBrushEdit. A saved
   brush is changed in place, a built-in is saved as a copy, "Save brush" saves under a new name, and "New brush" starts
   from the current one with only what the host uses. Facets the host can't use are kept on save; a new brush must pass
-  the host's check.
+  the host's check. Images added for an image tip or grain are stored in the library as sources.
 -->
 {#if draft}
   <div class={`flex flex-col gap-2 text-xs text-slate-200 ${className}`} data-testid="brush-library-editor">
@@ -114,6 +128,8 @@
       onsave={original ? () => save() : undefined}
       saveLabel={builtin ? 'Save a copy' : 'Save'}
       onsaveas={(name) => save(name)}
+      {sources}
+      onaddsource={async (file) => (await addBrushSourceFromFile(library, file)).ref}
     />
     {#if errors.length}
       <ul class="text-[11px] text-rose-400" data-testid="brush-library-editor-issues">

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

@@ -41,8 +41,18 @@ export declare function createCanvasDraw<TNode extends CanvasNode = CanvasNode>(
     selectBrush: (id: string | null, choice?: {
         keepColour?: boolean;
     }) => Promise<import("@pixerate/editor/canvas").CanvasBrushPreset | null>;
-    /** Sets the colour scheme that picks the side of a brush's light / dark default colour. */
-    setColorScheme: (scheme: "light" | "dark") => void;
+    readonly colorScheme: "light" | "dark";
+    /**
+     * Sets the colour scheme that picks the side of a brush's light / dark default colour; a
+     * stroke colour taken from one (`selectBrush`) follows.
+     */
+    setColorScheme(scheme: "light" | "dark"): void;
+    /** "Keep my colour": choosing a brush keeps the stroke colour. */
+    readonly colorLocked: boolean;
+    /** Locks the stroke colour ("Keep my colour"): `selectBrush` then keeps it. */
+    setColorLocked: (locked: boolean) => void;
+    /** What the brush picker is set to (brush, colour, scheme, lock), read now; `canvas.selectBrush` returns it. */
+    brushSettings: () => import("@pixerate/editor/canvas").CanvasBrushChoice;
 };
 export type CanvasDraw<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasDraw<TNode>>;
 export {};

package/dist/canvas/createCanvasDraw.svelte.js

@@ -5,8 +5,14 @@ import { createCanvasDrawController } from '@pixerate/editor/canvas';
 export function createCanvasDraw(options) {
     let tool = $state.raw(options.tool ?? 'select');
     let activeStroke = $state.raw(null);
+    let colorLocked = $state(!!options.colorLocked);
+    let colorScheme = $state(options.colorScheme === 'dark' ? 'dark' : 'light');
     const controller = createCanvasDrawController({
         ...options,
+        onColorLockChange: (locked) => {
+            colorLocked = locked;
+            options.onColorLockChange?.(locked);
+        },
         onToolChange: (nextTool) => {
             tool = nextTool;
             style = controller.style;
@@ -53,7 +59,24 @@ export function createCanvasDraw(options) {
          * Resolves to the preset; rejects for a brush the canvas can't paint.
          */
         selectBrush: controller.selectBrush,
-        /** Sets the colour scheme that picks the side of a brush's light / dark default colour. */
-        setColorScheme: controller.setColorScheme
+        get colorScheme() {
+            return colorScheme;
+        },
+        /**
+         * Sets the colour scheme that picks the side of a brush's light / dark default colour; a
+         * stroke colour taken from one (`selectBrush`) follows.
+         */
+        setColorScheme(scheme) {
+            controller.setColorScheme(scheme);
+            colorScheme = controller.colorScheme;
+        },
+        /** "Keep my colour": choosing a brush keeps the stroke colour. */
+        get colorLocked() {
+            return colorLocked;
+        },
+        /** Locks the stroke colour ("Keep my colour"): `selectBrush` then keeps it. */
+        setColorLocked: controller.setColorLocked,
+        /** What the brush picker is set to (brush, colour, scheme, lock), read now; `canvas.selectBrush` returns it. */
+        brushSettings: controller.brushSettings
     };
 }

package/dist/paint-editor/BrushPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import StickerPicker from './StickerPicker.svelte';
   import { brushLoadColor, brushTakesPaint, downloadBytes, toggleStickerRef, DEFAULT_PAINT_GRADIENT, type PaintEditorController } from '@pixerate/editor/paint-editor';
-  import { brushColourHex, brushPreviewColours, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
+  import { addBrushSourceFromFile, brushColourHex, brushPreviewColours, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
   import { untrack } from 'svelte';
   import BrushEditor from '../brushes/BrushEditor.svelte';
   import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
@@ -39,6 +39,11 @@
     void brush;
     return untrack(() => controller.getBrushSpec()!);
   });
+  // The image sources the editor paints with, read again after every change (sources added to the library).
+  const sources = $derived.by(() => {
+    void snap;
+    return untrack(() => controller.brushSources.all());
+  });
   // Previewed in the brush's own default colour when it has one, else the paint colour.
   const own = $derived(typeof spec.colour?.default === 'string' && /^#[0-9a-f]{6}/i.test(spec.colour.default) ? spec.colour.default.slice(0, 7) : undefined);
   const preview = $derived.by(() => {
@@ -92,10 +97,19 @@
   {/if}
 {/snippet}
 
-<!-- The brush library (BrushLibraryBrowser) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. -->
+<!-- The brush library (BrushLibraryBrowser) and the active brush in the BrushEditor, plus the brush gradient, sticker stamps, what the brush carries, import and export. Images picked for an image tip or grain go into the brush library as sources. -->
 <div class={`${panel} ${className}`} data-testid="brush-panel">
   <BrushLibraryBrowser {entries} activeId={brush.id} onselect={(id) => controller.setBrush({ id })} thumbnail={(id) => thumbs.get(id) ?? null} {thumbnailWidth} {thumbnailHeight} />
-  <BrushEditor brush={spec} profile={PAINT_PROFILE} {preview} onchange={(next) => run(() => controller.setBrushSpec(next))} onsaveas={(name) => controller.saveBrush({ id: slug(name), name })} {extra} />
+  <BrushEditor
+    brush={spec}
+    profile={PAINT_PROFILE}
+    {preview}
+    onchange={(next) => run(() => controller.setBrushSpec(next))}
+    onsaveas={(name) => controller.saveBrush({ id: slug(name), name })}
+    sources={sources}
+    onaddsource={async (file) => (await addBrushSourceFromFile(controller.brushLibrary, file)).ref}
+    {extra}
+  />
   <div class="flex flex-wrap items-center gap-1">
     <button type="button" class={button} onclick={() => run(async () => downloadBytes(JSON.stringify(await controller.exportBrushes(), null, 2), 'brushes.json', 'application/json'))}>Export</button>
     <button type="button" class={button} onclick={() => fileInput?.click()}>Import…</button>

package/dist/vector/VectorAppearancePanel.svelte

@@ -211,6 +211,12 @@
     </div>
     <!-- Top layer first, as it draws. -->
     {#each [...layers].reverse() as l (`${l.kind}-${l.index}`)}{@render layerRow(l, layers.length, ids)}{/each}
+    {#if kind === 'stroke' && layers.some((l) => l.brushstroke)}
+      <!-- Editor state: brushstrokes added or rebrushed from now on keep their colour. -->
+      <label class="flex items-center gap-1 text-[11px] text-muted-foreground" title="Choosing a brush keeps the stroke's colour instead of taking the brush's default colour">
+        <input type="checkbox" aria-label="Keep my colour" data-vector-keep-colour="" checked={view.colorLocked} onchange={(e) => controller.setColorLocked(e.currentTarget.checked)} /> Keep my colour when choosing a brush
+      </label>
+    {/if}
   </div>
 {/snippet}
 

package/package.json

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