@pixerate/editor-svelte 0.187.2 → 0.189.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/PaintCanvas.svelte

@@ -10,11 +10,13 @@
     viewCssTransform,
     type PaintEditorController,
     type PaintPresence,
+    type PaintProposals,
     type PaintTool,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { paintEditorState } from './paintEditorRune.svelte.js';
   import PaintPresenceLayer from './PaintPresenceLayer.svelte';
+  import PaintProposalGhosts from './PaintProposalGhosts.svelte';
   import ReferencePanel from './ReferencePanel.svelte';
 
   interface Props {
@@ -29,9 +31,11 @@
     onerror?: (message: string | null) => void;
     /** Agent cursors to draw over the canvas (see `PaintDirector` and `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
   }
-  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, proposals, class: className = '' }: Props = $props();
 
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
@@ -201,6 +205,7 @@
   {#each snap.guides.references.filter((r) => r.visible) as r (r.id)}
     <ReferencePanel {controller} reference={r} />
   {/each}
+  {#if proposals}<PaintProposalGhosts {proposals} {transform} zoom={snap.view.zoom} />{/if}
   {#if presence}<PaintPresenceLayer {presence} view={snap.view} canvas={doc} viewport={size} />{/if}
   <div class="absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none" data-testid="paint-view-status">
     {Math.round(snap.view.zoom * 100)}% · {Math.round(snap.view.rotation)}°{snap.view.mirror ? ' · mirrored' : ''}

package/dist/paint-editor/PaintCanvas.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PaintEditorController, type PaintPresence, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
@@ -11,6 +11,8 @@ interface Props {
     onerror?: (message: string | null) => void;
     /** Agent cursors to draw over the canvas (see `PaintDirector` and `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
 }
 declare const PaintCanvas: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
   import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.svelte';
@@ -23,6 +23,8 @@
     height?: number | string;
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
@@ -35,7 +37,7 @@
     /** Bring the editor on screen (switch to its tab) before the agent acts. */
     onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+  let { controller, fileName, height = 720, presence, proposals, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
 
   /** Controls a paint plan can point at, by `{ kind: 'control', id }`. */
   const PAINT_CONTROLS: Record<string, string> = {
@@ -116,7 +118,7 @@
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
       <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
-      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} {proposals} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">

package/dist/paint-editor/PaintEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import { PaintPresence, type PaintEditorController } from '@pixerate/editor/paint-editor';
+import { PaintPresence, type PaintEditorController, type PaintProposals } from '@pixerate/editor/paint-editor';
 import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: PaintEditorController;
@@ -8,6 +8,8 @@ interface Props {
     height?: number | string;
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the

package/dist/paint-editor/PaintProposalGhosts.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { paintProposalGhost, type PaintProposals, type PaintProposalsState } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    proposals: PaintProposals;
+    /** The view's CSS transform (`viewCssTransform`). */
+    transform: string;
+    zoom: number;
+  }
+  let { proposals, transform, zoom }: Props = $props();
+
+  let pending = $state.raw<PaintProposalsState>({ proposals: [] });
+  $effect(() => {
+    pending = proposals.getState();
+    return proposals.subscribe((next) => {
+      pending = next;
+    });
+  });
+
+  /** Draws a ghost's pixels into its canvas. */
+  function ghost(node: HTMLCanvasElement, data: Uint8ClampedArray) {
+    const draw = (d: Uint8ClampedArray) => {
+      const ctx = node.getContext('2d');
+      if (ctx && typeof ImageData !== 'undefined') ctx.putImageData(new ImageData(new Uint8ClampedArray(d), node.width, node.height), 0, 0);
+    };
+    draw(data);
+    return { update: draw };
+  }
+</script>
+
+<!-- Pending paint proposals drawn over the canvas: each ghost where its paint would go, translucent with a dashed edge. -->
+{#each pending.proposals as p (p.id)}
+  {@const g = paintProposalGhost(p)}
+  {#if g}
+    <canvas
+      use:ghost={g.data}
+      width={g.width}
+      height={g.height}
+      data-paint-proposal={p.id}
+      title={p.rationale ? `${p.title}: ${p.rationale}` : p.title}
+      aria-label={`Suggested: ${p.title}`}
+      class="absolute left-0 top-0 pointer-events-none"
+      style={`transform: ${transform} translate(${g.x}px, ${g.y}px); transform-origin: 0 0; opacity: 0.7; outline: ${1.5 / zoom}px dashed #a78bfa; outline-offset: ${2 / zoom}px`}
+    ></canvas>
+  {/if}
+{/each}

package/dist/paint-editor/PaintProposalGhosts.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type PaintProposals } from '@pixerate/editor/paint-editor';
+interface Props {
+    proposals: PaintProposals;
+    /** The view's CSS transform (`viewCssTransform`). */
+    transform: string;
+    zoom: number;
+}
+declare const PaintProposalGhosts: import("svelte").Component<Props, {}, "">;
+type PaintProposalGhosts = ReturnType<typeof PaintProposalGhosts>;
+export default PaintProposalGhosts;

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';
@@ -31,6 +31,8 @@ export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
+export { createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintProposalStateRune } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;

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';
@@ -15,4 +16,6 @@ export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
+export { createPaintChangeWatcher, createPaintProposalState } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';

package/dist/paint-editor/paintProposalRune.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
+export interface PaintProposalStateRune {
+    /** The framework-free store (for `createPaintProposalToolProvider` and agents). */
+    readonly store: PaintProposals;
+    /** Pending proposals (reactive); pass `store` to `PaintCanvas` (`proposals`) to draw them as ghosts. */
+    readonly proposals: readonly PaintProposal[];
+    propose: PaintProposals['propose'];
+    accept: PaintProposals['accept'];
+    reject: PaintProposals['reject'];
+    clear: PaintProposals['clear'];
+}
+/**
+ * Paint an agent suggests without painting it, as a Svelte 5 rune: ghosts the user accepts
+ * (painted on a layer of their own as one undo step, made by the proposer) or dismisses. Pass
+ * `store` to `PaintCanvas` as `proposals` to draw the ghosts, and to
+ * `createPaintProposalToolProvider` for agents. The same API as React's `usePaintProposals`.
+ */
+export declare function createPaintProposalState(controller: PaintEditorController, options?: Omit<PaintProposalsOptions, 'controller'>): PaintProposalStateRune;
+export interface PaintChangeWatcherRune {
+    readonly feed: PaintChangeFeed;
+    /** The latest change (reactive). */
+    readonly last: PaintChange | null;
+}
+/**
+ * What changed in the painting, as a Svelte 5 rune: strokes, fills and layers added, removed or
+ * changed, and the start and end of each stroke, with who made it. For agents that paint
+ * alongside the user. Call during component initialisation; the feed stops on unmount. The same
+ * API as React's `usePaintChangeFeed`.
+ */
+export declare function createPaintChangeWatcher(controller: PaintEditorController, options?: {
+    onChange?: (change: PaintChange) => void;
+}): PaintChangeWatcherRune;

package/dist/paint-editor/paintProposalRune.svelte.js

@@ -0,0 +1,45 @@
+import { createPaintChangeFeed, createPaintProposals, } from '@pixerate/editor/paint-editor';
+/**
+ * Paint an agent suggests without painting it, as a Svelte 5 rune: ghosts the user accepts
+ * (painted on a layer of their own as one undo step, made by the proposer) or dismisses. Pass
+ * `store` to `PaintCanvas` as `proposals` to draw the ghosts, and to
+ * `createPaintProposalToolProvider` for agents. The same API as React's `usePaintProposals`.
+ */
+export function createPaintProposalState(controller, options = {}) {
+    const store = createPaintProposals({ ...options, controller });
+    let state = $state.raw(store.getState());
+    store.subscribe((next) => {
+        state = next;
+    });
+    return {
+        store,
+        get proposals() {
+            return state.proposals;
+        },
+        propose: store.propose,
+        accept: store.accept,
+        reject: store.reject,
+        clear: store.clear,
+    };
+}
+/**
+ * What changed in the painting, as a Svelte 5 rune: strokes, fills and layers added, removed or
+ * changed, and the start and end of each stroke, with who made it. For agents that paint
+ * alongside the user. Call during component initialisation; the feed stops on unmount. The same
+ * API as React's `usePaintChangeFeed`.
+ */
+export function createPaintChangeWatcher(controller, options = {}) {
+    const feed = createPaintChangeFeed(controller);
+    let last = $state.raw(null);
+    feed.subscribe((change) => {
+        last = change;
+        options.onChange?.(change);
+    });
+    $effect(() => () => feed.dispose());
+    return {
+        feed,
+        get last() {
+            return last;
+        },
+    };
+}

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.2",
+  "version": "0.189.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.1"
+    "@pixerate/editor": "0.256.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",