@pixerate/editor-svelte 0.195.0 → 0.196.0

package/dist/brushes/BrushEditor.svelte

@@ -17,6 +17,8 @@
     onchange: (brush: Brush) => void;
     /** A live preview stroke of `brush`: pixels (e.g. `controller.brushThumbnail`) or an image URL. */
     preview?: { width: number; height: number; data: Uint8ClampedArray } | string | null;
+    /** The colour behind an image-URL preview, for transparent previews (see `brushPreviewColours`). */
+    previewBackground?: string;
     /** 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). */
@@ -27,7 +29,7 @@
     extra?: Snippet<[string]>;
     class?: string;
   }
-  let { brush, profile = PAINT_PROFILE, onchange, preview, onsave, saveLabel = 'Save', onsaveas, extra, class: className = '' }: Props = $props();
+  let { brush, profile = PAINT_PROFILE, onchange, preview, previewBackground, 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);
@@ -58,7 +60,7 @@
 -->
 <div class={`flex flex-col gap-2 ${className}`} data-testid="brush-editor">
   {#if typeof preview === 'string'}
-    <img src={preview} alt="Brush preview" class="rounded object-contain" style="width: 100%; aspect-ratio: 4 / 1" />
+    <img src={preview} alt="Brush preview" class="rounded object-contain" style={`width: 100%; aspect-ratio: 4 / 1${previewBackground ? `; background: ${previewBackground}` : ''}`} />
   {: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}

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

@@ -16,6 +16,8 @@ interface Props {
         height: number;
         data: Uint8ClampedArray;
     } | string | null;
+    /** The colour behind an image-URL preview, for transparent previews (see `brushPreviewColours`). */
+    previewBackground?: string;
     /** 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). */

package/dist/brushes/BrushLibraryEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { brushColourHex, checkBrushEdit, newBrushFor, saveBrushEdit, type Brush, type BrushHostProfile, type BrushLibrary, type BrushPreviewRenderer } from '@pixerate/editor/brushes';
+  import { brushPreviewColours, 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';
 
@@ -12,7 +12,12 @@
     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). */
+    /**
+     * What a transparent preview is shown on (#rrggbb, default white); the renderer's own `paper`
+     * wins. The preview colour is chosen to read on it (`brushPreviewColours`).
+     */
+    previewPaper?: string;
+    /** A fixed preview colour instead (overrides the brush's own and the contrast check). */
     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;
@@ -20,7 +25,7 @@
     onclose?: () => void;
     class?: string;
   }
-  let { library, brushId = null, profile, renderPreview, previewColor = '#64748b', onsaved, onclose, class: className = '' }: Props = $props();
+  let { library, brushId = null, profile, renderPreview, previewPaper = '#ffffff', previewColor, onsaved, onclose, class: className = '' }: Props = $props();
 
   let original = $state<Brush | null>(null);
   let builtin = $state(false);
@@ -46,7 +51,9 @@
     };
   });
 
-  const colour = $derived((draft && brushColourHex(draft.colour?.default ?? '', 'light')) || previewColor);
+  // The preview colour reads on what the preview is drawn on: the renderer's paper, or the box behind it.
+  const colours = $derived(draft ? brushPreviewColours($state.snapshot(draft) as Brush, { paper: renderPreview?.paper ?? previewPaper, profile }) : null);
+  const colour = $derived(previewColor ?? colours?.color ?? '#475569');
   $effect(() => {
     const d = draft;
     const render = renderPreview;
@@ -99,6 +106,7 @@
       brush={draft}
       {profile}
       preview={renderPreview ? preview : undefined}
+      previewBackground={colours?.background}
       onchange={(next) => {
         draft = next;
         status = null;

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

@@ -8,7 +8,12 @@ interface Props {
     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). */
+    /**
+     * What a transparent preview is shown on (#rrggbb, default white); the renderer's own `paper`
+     * wins. The preview colour is chosen to read on it (`brushPreviewColours`).
+     */
+    previewPaper?: string;
+    /** A fixed preview colour instead (overrides the brush's own and the contrast check). */
     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;

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, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
+  import { 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';
@@ -28,7 +28,7 @@
   const thumbs = $derived.by(() => {
     const list = library;
     void paper;
-    return untrack(() => new Map(list.map((b) => [b.id, controller.brushThumbnail(b.id, { width: thumbnailWidth, height: thumbnailHeight, color: '#26324a' })])));
+    return untrack(() => new Map(list.map((b) => [b.id, controller.brushThumbnail(b.id, { width: thumbnailWidth, height: thumbnailHeight, color: brushPreviewColours(controller.getBrushSpec(b.id)!, { paper: controller.getState().document.paper.color }).color })])));
   });
   const entries = $derived.by<BrushLibraryEntry[]>(() => {
     const list = library;

package/package.json

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