@pixerate/editor-svelte 0.194.0 → 0.195.0

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

@@ -1,27 +1,35 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { brushEditorSections, PAINT_PROFILE, setBrushEditorValue, type Brush, type BrushHostProfile } from '@pixerate/editor/brushes';
-  import PaintSlider from './PaintSlider.svelte';
-  import PixelCanvas from './PixelCanvas.svelte';
-  import { button, chip } from './paintEditorRune.svelte.js';
+  import { brushEditorScope, brushEditorSections, PAINT_PROFILE, setBrushEditorValue, type Brush, type BrushHostProfile } from '@pixerate/editor/brushes';
+  import PaintSlider from '../paint-editor/PaintSlider.svelte';
+  import PixelCanvas from '../paint-editor/PixelCanvas.svelte';
+  import { button, chip } from './styles.js';
 
   interface Props {
     /** The brush being edited, as facets. */
     brush: Brush;
-    /** What the host renders (default the paint editor): other controls are left out. */
+    /**
+     * What the host renders (default the paint editor): only its sections, controls and options
+     * are shown. Facets of the brush it can't use stay as they are, named in a note.
+     */
     profile?: BrushHostProfile;
     /** Called with the whole brush after each change (normalised). */
     onchange: (brush: Brush) => void;
-    /** A live preview stroke of `brush` (e.g. `controller.brushThumbnail`). */
-    preview?: { width: number; height: number; data: Uint8ClampedArray } | null;
+    /** A live preview stroke of `brush`: pixels (e.g. `controller.brushThumbnail`) or an image URL. */
+    preview?: { width: number; height: number; data: Uint8ClampedArray } | string | null;
+    /** With it, a "Save" button (labelled `saveLabel`) saves the brush in place. */
+    onsave?: () => unknown;
+    /** The Save button's label (default "Save"; e.g. "Save a copy" for a built-in). */
+    saveLabel?: string;
     /** With it, a name field and "Save brush" save the brush under that name. */
     onsaveas?: (name: string) => unknown;
     /** Extra controls a host adds to a section (e.g. the sticker picker for stamps). */
     extra?: Snippet<[string]>;
     class?: string;
   }
-  let { brush, profile = PAINT_PROFILE, onchange, preview, onsaveas, extra, class: className = '' }: Props = $props();
+  let { brush, profile = PAINT_PROFILE, onchange, preview, onsave, saveLabel = 'Save', onsaveas, extra, class: className = '' }: Props = $props();
   const sections = $derived(brushEditorSections(brush, profile));
+  const scope = $derived(brushEditorScope(brush, profile));
   let problems = $state<string | null>(null);
   let name = $state('');
   const set = (path: string, value: unknown) => {
@@ -31,22 +39,32 @@
   };
   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 save = async () => {
+  const attemptSave = async (fn: () => unknown, after?: () => void) => {
     try {
-      await onsaveas?.(name.trim());
-      name = '';
+      await fn();
+      after?.();
       problems = null;
     } catch (e) {
       problems = (e as Error).message;
     }
   };
+  const save = () => attemptSave(() => onsaveas?.(name.trim()), () => (name = ''));
 </script>
 
-<!-- Edits a brush by its facets (brushEditorSections), with a live preview stroke and "Save as". Only what the host profile renders is shown. -->
+<!--
+  Edits a brush by its facets (brushEditorSections), with a live preview stroke, "Save" and "Save as". It needs no
+  editor controller, so every host that paints uses it. Only what the host profile uses is shown; what the brush has
+  for other hosts is kept and named (brushEditorScope). BrushLibraryEditor wires it to a brush library.
+-->
 <div class={`flex flex-col gap-2 ${className}`} data-testid="brush-editor">
-  {#if preview !== undefined}
+  {#if typeof preview === 'string'}
+    <img src={preview} alt="Brush preview" class="rounded object-contain" style="width: 100%; aspect-ratio: 4 / 1" />
+  {:else if preview !== undefined}
     <PixelCanvas pixels={preview} label="Brush preview" class="rounded" style={`width: 100%; aspect-ratio: ${preview ? `${preview.width} / ${preview.height}` : '4 / 1'}`} />
   {/if}
+  {#if scope.note}
+    <p class="text-[10px] text-amber-400" data-testid="brush-editor-scope" title={`${profile.name} shows only what it can use; these are kept unchanged when you save.`}>{scope.note}</p>
+  {/if}
   {#each sections as s (s.id)}
     <section class="flex flex-col gap-1.5" data-section={s.id} data-testid={s.id === 'behaviour' ? 'brush-engine' : undefined}>
       <span class="font-medium text-slate-300">{s.title}</span>
@@ -124,10 +142,13 @@
       {#if extra}{@render extra(s.id)}{/if}
     </section>
   {/each}
-  {#if onsaveas}
+  {#if onsave || onsaveas}
     <div class="flex flex-wrap items-center gap-1">
-      <input bind:value={name} placeholder="Brush name" aria-label="Brush name" class="w-28 rounded bg-slate-800 px-1.5 py-0.5" />
-      <button type="button" class={button} disabled={!name.trim()} onclick={save}>Save brush</button>
+      {#if onsave}<button type="button" class={button} onclick={() => attemptSave(onsave)}>{saveLabel}</button>{/if}
+      {#if onsaveas}
+        <input bind:value={name} placeholder="Brush name" aria-label="Brush name" class="w-28 rounded bg-slate-800 px-1.5 py-0.5" />
+        <button type="button" class={button} disabled={!name.trim()} onclick={save}>Save brush</button>
+      {/if}
     </div>
   {/if}
   {#if problems}<p role="alert" class="text-[11px] text-rose-400">{problems}</p>{/if}

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

@@ -3,16 +3,23 @@ import { type Brush, type BrushHostProfile } from '@pixerate/editor/brushes';
 interface Props {
     /** The brush being edited, as facets. */
     brush: Brush;
-    /** What the host renders (default the paint editor): other controls are left out. */
+    /**
+     * What the host renders (default the paint editor): only its sections, controls and options
+     * are shown. Facets of the brush it can't use stay as they are, named in a note.
+     */
     profile?: BrushHostProfile;
     /** Called with the whole brush after each change (normalised). */
     onchange: (brush: Brush) => void;
-    /** A live preview stroke of `brush` (e.g. `controller.brushThumbnail`). */
+    /** A live preview stroke of `brush`: pixels (e.g. `controller.brushThumbnail`) or an image URL. */
     preview?: {
         width: number;
         height: number;
         data: Uint8ClampedArray;
-    } | null;
+    } | string | null;
+    /** With it, a "Save" button (labelled `saveLabel`) saves the brush in place. */
+    onsave?: () => unknown;
+    /** The Save button's label (default "Save"; e.g. "Save a copy" for a built-in). */
+    saveLabel?: string;
     /** With it, a name field and "Save brush" save the brush under that name. */
     onsaveas?: (name: string) => unknown;
     /** Extra controls a host adds to a section (e.g. the sticker picker for stamps). */

package/dist/brushes/BrushLibraryEditor.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { brushColourHex, checkBrushEdit, newBrushFor, saveBrushEdit, type Brush, type BrushHostProfile, type BrushLibrary, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
+  import { button } from './styles.js';
+  import BrushEditor from './BrushEditor.svelte';
+
+  interface Props {
+    /** The shared brush library: saves go here, so every editor on it gets the brush. */
+    library: BrushLibrary;
+    /** The brush to edit (a library id); `null` or absent starts a new brush for the host. */
+    brushId?: string | null;
+    /** The host the brush is edited for: the editor shows only what it uses. */
+    profile: BrushHostProfile;
+    /** Draws the preview stroke (the host's renderer, as for `preview_brush`). Without it there is no preview. */
+    renderPreview?: BrushPreviewRenderer;
+    /** The preview colour for brushes with no solid default colour (default slate). */
+    previewColor?: string;
+    /** Called with the brush as saved (a copy has a new id): e.g. pick it in the host. */
+    onsaved?: (brush: Brush) => void;
+    /** With it, a Close button. */
+    onclose?: () => void;
+    class?: string;
+  }
+  let { library, brushId = null, profile, renderPreview, previewColor = '#64748b', onsaved, onclose, class: className = '' }: Props = $props();
+
+  let original = $state<Brush | null>(null);
+  let builtin = $state(false);
+  let draft = $state<Brush | null>(null);
+  let status = $state<string | null>(null);
+  let preview = $state<string | null>(null);
+
+  $effect(() => {
+    const lib = library;
+    const id = brushId;
+    const p = profile;
+    let live = true;
+    status = null;
+    void (async () => {
+      const entry = id ? await lib.get(id) : null;
+      if (!live) return;
+      original = entry?.brush ?? null;
+      builtin = !!entry?.builtin;
+      draft = entry?.brush ?? newBrushFor(p);
+    })();
+    return () => {
+      live = false;
+    };
+  });
+
+  const colour = $derived((draft && brushColourHex(draft.colour?.default ?? '', 'light')) || previewColor);
+  $effect(() => {
+    const d = draft;
+    const render = renderPreview;
+    const c = colour;
+    if (!d || !render) return;
+    let live = true;
+    Promise.resolve(render($state.snapshot(d) as Brush, { width: 240, height: 60, color: c.slice(0, 7) }))
+      .then((img) => live && (preview = img.data ? `data:${img.mimeType};base64,${img.data}` : null))
+      .catch(() => live && (preview = null));
+    return () => {
+      live = false;
+    };
+  });
+
+  const errors = $derived(draft ? checkBrushEdit(original, draft, profile).issues.filter((i) => i.severity === 'error') : []);
+
+  const save = async (name?: string) => {
+    const saved = await saveBrushEdit(library, { original: original && ($state.snapshot(original) as Brush), brush: $state.snapshot(draft!) as Brush, profile, ...(name !== undefined ? { name } : {}) });
+    original = saved.brush;
+    builtin = false;
+    draft = saved.brush;
+    status = `Saved “${saved.brush.name}”${saved.kept.length ? `, keeping what ${profile.name} can't use` : ''}.`;
+    onsaved?.(saved.brush);
+  };
+  const startNew = () => {
+    const from = draft ? ($state.snapshot(draft) as Brush) : null;
+    original = null;
+    builtin = false;
+    draft = newBrushFor(profile, from);
+    status = null;
+  };
+</script>
+
+<!--
+  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.
+-->
+{#if draft}
+  <div class={`flex flex-col gap-2 text-xs text-slate-200 ${className}`} data-testid="brush-library-editor">
+    <div class="flex items-center justify-between gap-2">
+      <span class="font-medium" data-testid="brush-library-editor-title">{original ? `${draft.name}${builtin ? ' (built in: saves a copy)' : ''}` : 'New brush'}</span>
+      <span class="flex gap-1">
+        <button type="button" class={button} title={`A new brush from this one, with only what ${profile.name} uses`} onclick={startNew}>New brush</button>
+        {#if onclose}<button type="button" class={button} onclick={onclose}>Close</button>{/if}
+      </span>
+    </div>
+    <BrushEditor
+      brush={draft}
+      {profile}
+      preview={renderPreview ? preview : undefined}
+      onchange={(next) => {
+        draft = next;
+        status = null;
+      }}
+      onsave={original ? () => save() : undefined}
+      saveLabel={builtin ? 'Save a copy' : 'Save'}
+      onsaveas={(name) => save(name)}
+    />
+    {#if errors.length}
+      <ul class="text-[11px] text-rose-400" data-testid="brush-library-editor-issues">
+        {#each errors as i (i.facet)}<li>{i.reason} {i.fix}</li>{/each}
+      </ul>
+    {/if}
+    {#if status}<p role="status" class="text-[11px] text-emerald-400">{status}</p>{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import { type Brush, type BrushHostProfile, type BrushLibrary, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
+interface Props {
+    /** The shared brush library: saves go here, so every editor on it gets the brush. */
+    library: BrushLibrary;
+    /** The brush to edit (a library id); `null` or absent starts a new brush for the host. */
+    brushId?: string | null;
+    /** The host the brush is edited for: the editor shows only what it uses. */
+    profile: BrushHostProfile;
+    /** Draws the preview stroke (the host's renderer, as for `preview_brush`). Without it there is no preview. */
+    renderPreview?: BrushPreviewRenderer;
+    /** The preview colour for brushes with no solid default colour (default slate). */
+    previewColor?: string;
+    /** Called with the brush as saved (a copy has a new id): e.g. pick it in the host. */
+    onsaved?: (brush: Brush) => void;
+    /** With it, a Close button. */
+    onclose?: () => void;
+    class?: string;
+}
+declare const BrushLibraryEditor: import("svelte").Component<Props, {}, "">;
+type BrushLibraryEditor = ReturnType<typeof BrushLibraryEditor>;
+export default BrushLibraryEditor;

package/dist/brushes/index.d.ts

@@ -1,5 +1,11 @@
 import type { ComponentProps } from 'svelte';
+import type BrushEditorComponent from './BrushEditor.svelte';
 import type BrushLibraryBrowserComponent from './BrushLibraryBrowser.svelte';
+import type BrushLibraryEditorComponent from './BrushLibraryEditor.svelte';
+export { default as BrushEditor } from './BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from './BrushLibraryBrowser.svelte';
+export { default as BrushLibraryEditor } from './BrushLibraryEditor.svelte';
 export { brushLibraryState } from './brushLibrary.svelte.js';
+export type BrushEditorProps = ComponentProps<typeof BrushEditorComponent>;
 export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowserComponent>;
+export type BrushLibraryEditorProps = ComponentProps<typeof BrushLibraryEditorComponent>;

package/dist/brushes/index.js

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

package/dist/brushes/styles.d.ts

@@ -0,0 +1,3 @@
+/** Button classes shared by the brush components and the paint editor's panels. */
+export declare const chip: (on: boolean) => string;
+export declare const button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";

package/dist/brushes/styles.js

@@ -0,0 +1,3 @@
+/** Button classes shared by the brush components and the paint editor's panels. */
+export const chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+export const button = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40';

package/dist/image-editor/BrushOptionsBar.svelte

@@ -24,18 +24,21 @@
   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 { IMAGE_PROFILE, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
   import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
+  import BrushLibraryEditor from '../brushes/BrushLibraryEditor.svelte';
   import { brushLibraryState } from '../brushes/brushLibrary.svelte.js';
 
   interface Props {
     controller: ImageEditorController;
     /** The row of paint tool buttons (default true); hide it when the host has its own toolbar. */
     showTools?: boolean;
+    /** Draws the brush editor's preview stroke (default: the controller's `brushPreview` option). */
+    renderBrushPreview?: BrushPreviewRenderer;
     class?: string;
   }
 
-  let { controller, showTools = true, class: className = '' }: Props = $props();
+  let { controller, showTools = true, renderBrushPreview, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -50,6 +53,7 @@
   });
   let error = $state<string | null>(null);
   let presetsOpen = $state(false);
+  let editing = $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);
@@ -82,7 +86,24 @@
 
   {#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>
+      <div class="flex flex-wrap gap-1">
+        <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>
+        <button type="button" aria-expanded={editing} class={imageChipClass(editing)} onclick={() => (editing = !editing)} title="Edit this brush, or make a new one, in the shared brush library">Edit brush…</button>
+      </div>
+      {#if editing}
+        <BrushLibraryEditor
+          library={controller.brushLibrary}
+          brushId={view.brushPreset}
+          profile={IMAGE_PROFILE}
+          renderPreview={renderBrushPreview ?? controller.brushPreview ?? undefined}
+          class="rounded border border-border bg-slate-950 p-2"
+          onsaved={(b) => {
+            error = null;
+            controller.setBrushPreset(b.id).catch((err) => (error = userErrorMessage(err)));
+          }}
+          onclose={() => (editing = false)}
+        />
+      {/if}
       {#if presetsOpen}
         <BrushLibraryBrowser
           entries={presets.entries}

package/dist/image-editor/BrushOptionsBar.svelte.d.ts

@@ -1,8 +1,11 @@
 import type { ImageEditorController } from '@pixerate/editor/image-editor';
+import { type BrushPreviewRenderer } from '@pixerate/editor/brushes';
 interface Props {
     controller: ImageEditorController;
     /** The row of paint tool buttons (default true); hide it when the host has its own toolbar. */
     showTools?: boolean;
+    /** Draws the brush editor's preview stroke (default: the controller's `brushPreview` option). */
+    renderBrushPreview?: BrushPreviewRenderer;
     class?: string;
 }
 declare const BrushOptionsBar: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/BrushPanel.svelte

@@ -3,7 +3,7 @@
   import { brushLoadColor, brushTakesPaint, downloadBytes, toggleStickerRef, DEFAULT_PAINT_GRADIENT, type PaintEditorController } from '@pixerate/editor/paint-editor';
   import { brushColourHex, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
   import { untrack } from 'svelte';
-  import BrushEditor from './BrushEditor.svelte';
+  import BrushEditor from '../brushes/BrushEditor.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/PaintSlider.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { SliderControl } from '@pixerate/editor/paint-editor';
+  // Core's `SliderControl` (paint-editor), written out so the brush editor, which other entries
+  // use, does not reach the paint editor's entry (tests/entry-isolation.test.ts).
+  type SliderControl = { path: string; label: string; min: number; max: number; step: number };
 
   interface Props {
     control: SliderControl;

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

@@ -1,4 +1,10 @@
-import type { SliderControl } from '@pixerate/editor/paint-editor';
+type SliderControl = {
+    path: string;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+};
 interface Props {
     control: SliderControl;
     value: number;

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

@@ -3,7 +3,7 @@ import type PaintEditorComponent from './PaintEditor.svelte';
 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 BrushEditorComponent from '../brushes/BrushEditor.svelte';
 import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
@@ -19,7 +19,7 @@ export { default as PaintEditor } from './PaintEditor.svelte';
 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 BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';

package/dist/paint-editor/index.js

@@ -2,7 +2,8 @@ export { default as PaintEditor } from './PaintEditor.svelte';
 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';
+// The brush editor moved to `@pixerate/editor-svelte/brushes`; it is exported here too.
+export { default as BrushEditor } from '../brushes/BrushEditor.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';

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

@@ -24,8 +24,7 @@ export declare function createPaintDirector(controller: PaintEditorController, o
     presence: PaintPresence;
     director: PaintDirector;
 };
-export declare const chip: (on: boolean) => string;
-export declare const button = "px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40";
+export { button, chip } from '../brushes/styles.js';
 export declare const panel = "flex flex-col gap-2 text-xs text-slate-200";
 /** Runs `fn` and returns the error message it threw (or a rejected promise's, through `onAsync`). */
 export declare function attempt(fn: () => unknown, onError: (msg: string | null) => void): void;

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

@@ -57,8 +57,7 @@ export function createPaintDirector(controller, options = {}) {
     const presence = new PaintPresence();
     return { presence, director: new PaintDirector(controller, presence, options) };
 }
-export const chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
-export const button = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40';
+export { button, chip } from '../brushes/styles.js';
 export const panel = 'flex flex-col gap-2 text-xs text-slate-200';
 /** Runs `fn` and returns the error message it threw (or a rejected promise's, through `onAsync`). */
 export function attempt(fn, onError) {

package/dist/vector/VectorAppearancePanel.svelte

@@ -12,21 +12,35 @@
     type VectorStrokeAlign,
     randomVectorBrushstrokeSeed
   } from '@pixerate/editor/vector';
+  import { isBrushLibrary, VECTOR_PROFILE, type Brush, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
   import { vectorStateOf } from './subscribe.svelte.js';
+  import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
+  import BrushLibraryEditor from '../brushes/BrushLibraryEditor.svelte';
+  import { brushLibraryState } from '../brushes/brushLibrary.svelte.js';
 
   /**
    * The appearance of the selection: its fill and stroke stacks (listed top first; add, remove,
    * reorder, show / hide, paint, opacity and blend mode per layer, width and alignment per
    * stroke), the node blend mode, and for one selected node its filters (drop and inner shadows,
-   * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it.
+   * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it. With
+   * the controller's `brushLibrary`, a brushstroke's "Brush…" picks from the library
+   * (`BrushLibraryBrowser`, `VECTOR_PROFILE`) and "Edit brush…" edits it (`BrushLibraryEditor`):
+   * saves go to the library and the stroke takes the saved brush.
    * Slider drags and typing are one undo step each.
    */
   interface Props {
     controller: VectorEditorController;
+    /** The brush editor's preview stroke (default: the controller's `brushPreview` option). */
+    renderBrushPreview?: BrushPreviewRenderer;
     class?: string;
   }
 
-  let { controller, class: className = '' }: Props = $props();
+  let { controller, renderBrushPreview, class: className = '' }: Props = $props();
+  // The brushstroke whose brush is being picked or edited.
+  let brushUi = $state<{ index: number; mode: 'pick' | 'edit' } | null>(null);
+  const library = $derived(controller.brushLibrary);
+  const brushEntries = brushLibraryState(() => (brushUi ? controller.brushLibrary : null), () => ({ profile: VECTOR_PROFILE }));
+  const toggleBrushUi = (index: number, mode: 'pick' | 'edit') => (brushUi = brushUi?.index === index && brushUi.mode === mode ? null : { index, mode });
 
   const store = vectorStateOf(() => controller);
   const view = $derived(store.current);
@@ -85,6 +99,28 @@
         </label>
         <button type="button" class={buttonClass} title="Remove" aria-label="Remove {name}" onclick={() => controller.removePaintLayer('stroke', l.index, { ids })}>×</button>
       </div>
+      {#if library}
+        <div class="flex gap-1">
+          <button type="button" class={buttonClass} aria-expanded={brushUi?.index === l.index && brushUi.mode === 'pick'} title="Pick a brush from the brush library" onclick={() => toggleBrushUi(l.index, 'pick')}>Brush…</button>
+          {#if isBrushLibrary(library)}
+            <button type="button" class={buttonClass} aria-expanded={brushUi?.index === l.index && brushUi.mode === 'edit'} title="Edit this brush, or make a new one, in the shared brush library" onclick={() => toggleBrushUi(l.index, 'edit')}>Edit brush…</button>
+          {/if}
+        </div>
+      {/if}
+      {#if brushUi?.index === l.index && brushUi.mode === 'pick'}
+        <BrushLibraryBrowser entries={brushEntries.entries} activeId={bs.brushId} profile={VECTOR_PROFILE} onselect={(id) => controller.setBrushstroke(l.index, { brushId: id }, { ids })} />
+      {/if}
+      {#if brushUi?.index === l.index && brushUi.mode === 'edit' && isBrushLibrary(library)}
+        <BrushLibraryEditor
+          {library}
+          brushId={bs.brushId}
+          profile={VECTOR_PROFILE}
+          renderPreview={renderBrushPreview ?? controller.brushPreview ?? undefined}
+          class="rounded border border-border bg-slate-950 p-2"
+          onsaved={(saved: Brush) => void controller.refreshBrushes().then(() => controller.setBrushstroke(l.index, { brushId: saved.id, keepColour: true }, { ids }))}
+          onclose={() => (brushUi = null)}
+        />
+      {/if}
     </div>
   {:else if l.unknownKind}
     <div class="text-[11px] text-muted-foreground" data-vector-layer="{l.kind}-{l.index}">{name}: {l.unknownKind} (not drawn by this version)</div>

package/dist/vector/VectorAppearancePanel.svelte.d.ts

@@ -1,13 +1,19 @@
 import { type VectorEditorController } from '@pixerate/editor/vector';
+import { type BrushPreviewRenderer } from '@pixerate/editor/brushes';
 /**
  * The appearance of the selection: its fill and stroke stacks (listed top first; add, remove,
  * reorder, show / hide, paint, opacity and blend mode per layer, width and alignment per
  * stroke), the node blend mode, and for one selected node its filters (drop and inner shadows,
- * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it.
+ * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it. With
+ * the controller's `brushLibrary`, a brushstroke's "Brush…" picks from the library
+ * (`BrushLibraryBrowser`, `VECTOR_PROFILE`) and "Edit brush…" edits it (`BrushLibraryEditor`):
+ * saves go to the library and the stroke takes the saved brush.
  * Slider drags and typing are one undo step each.
  */
 interface Props {
     controller: VectorEditorController;
+    /** The brush editor's preview stroke (default: the controller's `brushPreview` option). */
+    renderBrushPreview?: BrushPreviewRenderer;
     class?: string;
 }
 declare const VectorAppearancePanel: import("svelte").Component<Props, {}, "">;

package/package.json

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