@pixerate/editor-svelte 0.187.1 → 0.188.0

package/dist/{paint-editor → brushes}/BrushLibraryBrowser.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { brushLibraryGroups, type BrushHostProfile, type BrushLibraryEntry } from '@pixerate/editor/brushes';
-  import PixelCanvas from './PixelCanvas.svelte';
+  import Thumbnail from './Thumbnail.svelte';
 
   interface Props {
     /** The library's brushes (built-in presets and saved ones), as facets. */
@@ -10,8 +10,8 @@
     onselect: (id: string) => void;
     /** Only brushes this host renders. */
     profile?: BrushHostProfile;
-    /** A thumbnail for a brush (a test stroke). */
-    thumbnail?: (id: string) => { width: number; height: number; data: Uint8ClampedArray } | null;
+    /** A thumbnail for a brush (a test stroke): pixels, or an image URL. */
+    thumbnail?: (id: string) => { width: number; height: number; data: Uint8ClampedArray } | string | null | undefined;
     thumbnailWidth?: number;
     thumbnailHeight?: number;
     class?: string;
@@ -40,7 +40,7 @@
                 onclick={() => onselect(e.brush.id)}
               >
                 {#if thumbnail}
-                  <PixelCanvas pixels={thumbnail(e.brush.id)} label={`${e.brush.name} thumbnail`} class="rounded" style={`width: 100%; aspect-ratio: ${thumbnailWidth} / ${thumbnailHeight}`} />
+                  <Thumbnail image={thumbnail(e.brush.id) ?? null} label={`${e.brush.name} thumbnail`} style={`width: 100%; aspect-ratio: ${thumbnailWidth} / ${thumbnailHeight}`} />
                 {/if}
                 <span class="truncate text-[10px] text-slate-300">{e.brush.name}</span>
               </button>

package/dist/{paint-editor → brushes}/BrushLibraryBrowser.svelte.d.ts

@@ -7,12 +7,12 @@ interface Props {
     onselect: (id: string) => void;
     /** Only brushes this host renders. */
     profile?: BrushHostProfile;
-    /** A thumbnail for a brush (a test stroke). */
+    /** A thumbnail for a brush (a test stroke): pixels, or an image URL. */
     thumbnail?: (id: string) => {
         width: number;
         height: number;
         data: Uint8ClampedArray;
-    } | null;
+    } | string | null | undefined;
     thumbnailWidth?: number;
     thumbnailHeight?: number;
     class?: string;

package/dist/brushes/Thumbnail.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    /** RGBA pixels drawn on a canvas, or an image URL (e.g. a brushstroke swatch's data URL). */
+    image: { width: number; height: number; data: Uint8ClampedArray } | string | null;
+    label: string;
+    style?: string;
+  }
+  let { image, label, style = '' }: Props = $props();
+  let canvas = $state<HTMLCanvasElement | null>(null);
+
+  $effect(() => {
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx || !image || typeof image === 'string' || typeof ctx.createImageData !== 'function') return;
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const img = ctx.createImageData(image.width, image.height);
+    img.data.set(image.data);
+    ctx.putImageData(img, 0, 0);
+  });
+</script>
+
+{#if typeof image === 'string'}
+  <img src={image} alt={label} class="rounded object-contain" {style} />
+{:else}
+  <canvas bind:this={canvas} role="img" aria-label={label} class="rounded" {style} width={image?.width} height={image?.height}></canvas>
+{/if}

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** RGBA pixels drawn on a canvas, or an image URL (e.g. a brushstroke swatch's data URL). */
+    image: {
+        width: number;
+        height: number;
+        data: Uint8ClampedArray;
+    } | string | null;
+    label: string;
+    style?: string;
+}
+declare const Thumbnail: import("svelte").Component<Props, {}, "">;
+type Thumbnail = ReturnType<typeof Thumbnail>;
+export default Thumbnail;

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

@@ -0,0 +1,9 @@
+import type { BrushFilter, BrushLibrary, BrushLibraryEntry } from '@pixerate/editor/brushes';
+/**
+ * The brushes of a brush library as a rune (`filter`: e.g. `{ profile: CANVAS_PROFILE }` for what
+ * a host can paint), read again after every change to the library: a brush saved in another
+ * editor sharing it shows up. Empty until the first read. Call it during component setup.
+ */
+export declare function brushLibraryState(library: () => Pick<BrushLibrary, 'list' | 'subscribe'> | null | undefined, filter?: () => BrushFilter): {
+    readonly entries: BrushLibraryEntry[];
+};

package/dist/brushes/brushLibrary.svelte.js

@@ -0,0 +1,27 @@
+/**
+ * The brushes of a brush library as a rune (`filter`: e.g. `{ profile: CANVAS_PROFILE }` for what
+ * a host can paint), read again after every change to the library: a brush saved in another
+ * editor sharing it shows up. Empty until the first read. Call it during component setup.
+ */
+export function brushLibraryState(library, filter = () => ({})) {
+    let entries = $state([]);
+    $effect(() => {
+        const lib = library();
+        const f = filter();
+        if (!lib)
+            return;
+        let live = true;
+        const read = () => void lib.list(f).then((list) => live && (entries = list), () => undefined);
+        read();
+        const unsubscribe = lib.subscribe(read);
+        return () => {
+            live = false;
+            unsubscribe();
+        };
+    });
+    return {
+        get entries() {
+            return entries;
+        },
+    };
+}

package/dist/brushes/index.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'svelte';
+import type BrushLibraryBrowserComponent from './BrushLibraryBrowser.svelte';
+export { default as BrushLibraryBrowser } from './BrushLibraryBrowser.svelte';
+export { brushLibraryState } from './brushLibrary.svelte.js';
+export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowserComponent>;

package/dist/brushes/index.js

@@ -0,0 +1,2 @@
+export { default as BrushLibraryBrowser } from './BrushLibraryBrowser.svelte';
+export { brushLibraryState } from './brushLibrary.svelte.js';

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

@@ -33,7 +33,7 @@ export declare function createCanvasDraw<TNode extends CanvasNode = CanvasNode>(
         height: number;
     } | undefined;
     /** The dry paint presets `style.brush` accepts (loads the paint engine). */
-    listBrushes: typeof import("@pixerate/editor/canvas").listCanvasBrushes;
+    listBrushes: () => Promise<import("@pixerate/editor/canvas").CanvasBrushPreset[]>;
 };
 export type CanvasDraw<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasDraw<TNode>>;
 export {};

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

@@ -1,4 +1,5 @@
 import { type CanvasBrushPreset, type CanvasBrushSwatchOptions } from '@pixerate/editor/canvas';
+import type { BrushLibrary } from '@pixerate/editor/brushes';
 /**
  * Tells brushed `ShapeNode`s the canvas zoom so their paint stays sharp. Call it in the component
  * that renders `<SvelteFlow>`, with a getter of the live zoom. Nodes re-render only when the zoom
@@ -8,15 +9,19 @@ export declare function setShapeNodeZoom(getZoom: () => number): void;
 /** The bucketed canvas zoom for brushed shape nodes (1 when no `setShapeNodeZoom` is above). */
 export declare function getShapeNodeZoom(): () => number;
 /**
- * The dry paint presets a freehand stroke can be brushed with (loads the paint engine); with
- * `swatches`, each with a preview image (`renderCanvasBrushSwatch`) for a brush menu.
+ * The brushes a freehand stroke can be brushed with (loads the paint engine): the dry presets and,
+ * with `library`, its saved brushes the canvas can paint (each with its `spec`; pass it as the
+ * stroke style's `brushSpec`), read again when the library changes (`dispose` stops that). With
+ * `swatches`, each has a preview image (`renderCanvasBrushSwatch`) for a brush menu.
  */
 export declare function createCanvasBrushes(options?: {
     swatches?: CanvasBrushSwatchOptions;
+    library?: Pick<BrushLibrary, 'list' | 'subscribe'> | null;
 }): {
     readonly brushes: (CanvasBrushPreset & {
         swatch?: string;
     })[];
     readonly loading: boolean;
     readonly error: string | null;
+    dispose(): void;
 };

package/dist/canvas/shapeBrushstroke.svelte.js

@@ -14,16 +14,19 @@ export function getShapeNodeZoom() {
     return getContext(ZOOM_KEY) ?? (() => 1);
 }
 /**
- * The dry paint presets a freehand stroke can be brushed with (loads the paint engine); with
- * `swatches`, each with a preview image (`renderCanvasBrushSwatch`) for a brush menu.
+ * The brushes a freehand stroke can be brushed with (loads the paint engine): the dry presets and,
+ * with `library`, its saved brushes the canvas can paint (each with its `spec`; pass it as the
+ * stroke style's `brushSpec`), read again when the library changes (`dispose` stops that). With
+ * `swatches`, each has a preview image (`renderCanvasBrushSwatch`) for a brush menu.
  */
 export function createCanvasBrushes(options = {}) {
     let brushes = $state.raw([]);
     let loading = $state(true);
     let error = $state(null);
     const opts = options.swatches;
-    listCanvasBrushes()
-        .then(async (list) => (opts ? Promise.all(list.map(async (b) => ({ ...b, swatch: await renderCanvasBrushSwatch(b.id, opts) }))) : list))
+    const library = options.library ?? undefined;
+    const read = () => listCanvasBrushes(library)
+        .then(async (list) => (opts ? Promise.all(list.map(async (b) => ({ ...b, swatch: await renderCanvasBrushSwatch(b.id, opts, b.spec) }))) : list))
         .then((list) => {
         brushes = list;
         loading = false;
@@ -31,6 +34,8 @@ export function createCanvasBrushes(options = {}) {
         error = e instanceof Error ? e.message : String(e);
         loading = false;
     });
+    void read();
+    const unsubscribe = library?.subscribe(() => void read());
     return {
         get brushes() {
             return brushes;
@@ -40,6 +45,9 @@ export function createCanvasBrushes(options = {}) {
         },
         get error() {
             return error;
+        },
+        dispose() {
+            unsubscribe?.();
         }
     };
 }

package/dist/image-editor/BrushOptionsBar.svelte

@@ -24,6 +24,9 @@
   import { DEFAULT_PAINT_GRADIENT } from '@pixerate/editor/image-editor';
   import PaintGradientEditor from './PaintGradientEditor.svelte';
   import ControlSlider from './ControlSlider.svelte';
+  import { IMAGE_PROFILE } from '@pixerate/editor/brushes';
+  import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
+  import { brushLibraryState } from '../brushes/brushLibrary.svelte.js';
 
   interface Props {
     controller: ImageEditorController;
@@ -46,6 +49,10 @@
     return { tool: s.activeTool, sourceLabel: cloneSourceLabel(controller), cloneView: cloneTransformView(controller), ...s.paint };
   });
   let error = $state<string | null>(null);
+  let presetsOpen = $state(false);
+  // Read only while open: the list follows the library, so a brush saved in another editor shows up.
+  const presets = brushLibraryState(() => (presetsOpen ? controller.brushLibrary : null), () => ({ profile: IMAGE_PROFILE }));
+  const presetName = $derived(presets.entries.find((e) => e.brush.id === view.brushPreset)?.brush.name ?? view.brushPreset);
 
   
 
@@ -73,6 +80,23 @@
     </div>
   {/if}
 
+  {#if view.tool === 'brush' || view.tool === 'mixer' || view.tool === 'eraser'}
+    <div class="flex flex-col gap-1" data-testid="brush-presets">
+      <button type="button" aria-expanded={presetsOpen} class={imageChipClass(presetsOpen)} onclick={() => (presetsOpen = !presetsOpen)} title="Paint with a brush from the brush library">Brush presets{presetName ? `: ${presetName}` : ''}</button>
+      {#if presetsOpen}
+        <BrushLibraryBrowser
+          entries={presets.entries}
+          activeId={view.brushPreset ?? undefined}
+          profile={IMAGE_PROFILE}
+          onselect={(id) => {
+            error = null;
+            controller.setBrushPreset(id).catch((err) => (error = userErrorMessage(err)));
+          }}
+        />
+      {/if}
+    </div>
+  {/if}
+
   <div class="flex items-center gap-2" role="group" aria-label="Colours">
     <label class="flex items-center gap-1">
       <ImageColor label="Foreground colour" value={view.foreground} oninput={(foreground) => controller.setPaintOptions({ foreground })} />

package/dist/paint-editor/BrushPanel.svelte

@@ -4,7 +4,7 @@
   import { PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
   import { untrack } from 'svelte';
   import BrushEditor from './BrushEditor.svelte';
-  import BrushLibraryBrowser from './BrushLibraryBrowser.svelte';
+  import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
   import PaintGradientEditor from './PaintGradientEditor.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 

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

@@ -4,7 +4,7 @@ import type PaintCanvasComponent from './PaintCanvas.svelte';
 import type PaintToolbarComponent from './PaintToolbar.svelte';
 import type BrushPanelComponent from './BrushPanel.svelte';
 import type BrushEditorComponent from './BrushEditor.svelte';
-import type BrushLibraryBrowserComponent from './BrushLibraryBrowser.svelte';
+import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
@@ -19,7 +19,7 @@ export { default as PaintCanvas } from './PaintCanvas.svelte';
 export { default as PaintToolbar } from './PaintToolbar.svelte';
 export { default as BrushPanel } from './BrushPanel.svelte';
 export { default as BrushEditor } from './BrushEditor.svelte';
-export { default as BrushLibraryBrowser } from './BrushLibraryBrowser.svelte';
+export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';

package/dist/paint-editor/index.js

@@ -3,7 +3,8 @@ export { default as PaintCanvas } from './PaintCanvas.svelte';
 export { default as PaintToolbar } from './PaintToolbar.svelte';
 export { default as BrushPanel } from './BrushPanel.svelte';
 export { default as BrushEditor } from './BrushEditor.svelte';
-export { default as BrushLibraryBrowser } from './BrushLibraryBrowser.svelte';
+// The library browser moved to `@pixerate/editor-svelte/brushes`; it is exported here too.
+export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';

package/dist/vector/VectorAppearancePanel.svelte

@@ -10,8 +10,7 @@
     type VectorFilterType,
     type VectorFiltersPanelItem,
     type VectorStrokeAlign,
-    randomVectorBrushstrokeSeed,
-    vectorBrushstrokeBrushes
+    randomVectorBrushstrokeSeed
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
 
@@ -32,6 +31,8 @@
   const store = vectorStateOf(() => controller);
   const view = $derived(store.current);
   const panel = $derived(getVectorAppearancePanel(view));
+  // Follows the editor state, which changes when the brush library is read again.
+  const brushes = $derived.by(() => (void view, controller.listBrushstrokeBrushes()));
 
   const buttonClass =
     'inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40';
@@ -72,7 +73,7 @@
         <input type="checkbox" aria-label="{name} visible" title="Show" checked={l.visible} onchange={(e) => update(l, { visible: e.currentTarget.checked })} />
         <input type="color" aria-label="{name} colour" class="h-7 w-10 cursor-pointer rounded border border-border bg-background" value={l.color ?? '#000000'} oninput={(e) => controller.setBrushstroke(l.index, { color: e.currentTarget.value }, { ids, merge: true })} onblur={() => controller.endMergedEdit()} />
         <select aria-label="{name} brush" class={selectClass} value={bs.brushId} onchange={(e) => controller.setBrushstroke(l.index, { brushId: e.currentTarget.value }, { ids })}>
-          {#each vectorBrushstrokeBrushes() as b (b.id)}<option value={b.id}>{b.name}</option>{/each}
+          {#each brushes as b (b.id)}<option value={b.id}>{b.name}</option>{/each}
         </select>
         <input type="number" min="0.5" step="0.5" aria-label="{name} brush size" title="Brush size" class={numberClass} value={bs.size} oninput={(e) => {
           const n = parseFloat(e.currentTarget.value);
@@ -169,7 +170,7 @@
         onclick={() => controller.addPaintLayer(kind, {}, { ids })}>+</button
       >
       {#if kind === 'stroke'}
-        <button type="button" class={buttonClass} title="Add a brushstroke (a natural-media brush along the path)" aria-label="Add brushstroke" data-vector-add-brushstroke="" disabled={!ids.length} onclick={() => controller.addBrushstroke({ brushId: vectorBrushstrokeBrushes()[0].id, seed: randomVectorBrushstrokeSeed() }, { ids })}>✎+</button>
+        <button type="button" class={buttonClass} title="Add a brushstroke (a natural-media brush along the path)" aria-label="Add brushstroke" data-vector-add-brushstroke="" disabled={!ids.length} onclick={() => controller.addBrushstroke({ brushId: brushes[0].id, seed: randomVectorBrushstrokeSeed() }, { ids })}>✎+</button>
       {/if}
     </div>
     <!-- Top layer first, as it draws. -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.187.1",
+  "version": "0.188.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -48,6 +48,11 @@
       "svelte": "./dist/paint-editor/index.js",
       "default": "./dist/paint-editor/index.js"
     },
+    "./brushes": {
+      "types": "./dist/brushes/index.d.ts",
+      "svelte": "./dist/brushes/index.js",
+      "default": "./dist/brushes/index.js"
+    },
     "./commands": {
       "types": "./dist/commands/index.d.ts",
       "svelte": "./dist/commands/index.js",
@@ -170,7 +175,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.254.0"
+    "@pixerate/editor": "0.255.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",