@pixerate/editor-svelte 0.197.0 → 0.198.0

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/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/package.json

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