@pixerate/editor-svelte 0.184.0 → 0.185.0

package/dist/paint-editor/BrushPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import StickerPicker from './StickerPicker.svelte';
   import {
     BLEND_MENU_GROUPS,
     BRUSH_ROTATIONS,
@@ -29,7 +30,7 @@
     toggleDotTexture,
     STAMP_KINDS,
     STAMP_LABELS,
-    toggleStamp,
+    toggleStickerRef,
     type ParticleKind,
     type ParticleRender,
     type RibbonPairs,
@@ -198,15 +199,7 @@
         {/if}
       {/if}
       {#if engine.stickerStamps}
-        <div class="flex flex-wrap gap-1" role="group" aria-label="Sticker stamps">
-          {#each STAMP_KINDS as k (k)}
-            <button
-              type="button"
-              aria-pressed={brush.sticker.stamps.includes(k)}
-              class={`px-1.5 py-0.5 rounded text-[10px] ${brush.sticker.stamps.includes(k) ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300'}`}
-              onclick={() => controller.setBrush({ sticker: { stamps: toggleStamp(brush.sticker.stamps, k) } })}>{STAMP_LABELS[k]}</button>
-          {/each}
-        </div>
+        <StickerPicker {controller} label="Sticker stamps" selected={brush.sticker.stamps} onpick={(ref) => controller.setBrush({ sticker: { stamps: toggleStickerRef(brush.sticker.stamps, ref) } })} />
       {/if}
       {#if engine.impastoTool}
         <label class="flex items-center justify-between gap-2">

package/dist/paint-editor/StickerPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { STAMP_KINDS, STAMP_LABELS, STICKER_SLIDERS, readPath, type PaintEditorController, type StampKind } from '@pixerate/editor/paint-editor';
+  import { STICKER_SLIDERS, readPath, stickerRefLabel, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import StickerPicker from './StickerPicker.svelte';
   import PaintSlider from './PaintSlider.svelte';
   import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
@@ -23,17 +24,25 @@
     <span class="font-medium text-slate-300">Stickers ({stickers.length})</span>
     <div class="flex max-h-24 flex-wrap gap-1 overflow-y-auto" role="listbox" aria-label="Stickers">
       {#each stickers as s (s.id)}
-        <button type="button" role="option" aria-selected={s.id === picked} title={`${STAMP_LABELS[s.stamp]} ${s.id}`} class={`h-5 w-5 rounded ring-1 ${s.id === picked ? 'ring-indigo-400' : 'ring-slate-700'}`} style={`background: ${s.color}`} onclick={() => controller.selectSticker(s.id)}></button>
+        <button type="button" role="option" aria-selected={s.id === picked} title={`${stickerRefLabel(s.ref)} ${s.id}`} class={`h-5 w-5 rounded ring-1 ${s.id === picked ? 'ring-indigo-400' : 'ring-slate-700'}`} style={`background: ${s.color}`} onclick={() => controller.selectSticker(s.id)}></button>
       {/each}
     </div>
     {#if sel}
       <div class="flex flex-col gap-1.5" data-testid="sticker-edit">
-        <label class="flex items-center justify-between gap-2">
-          <span class="text-slate-400">Stamp</span>
-          <select aria-label="Sticker stamp" value={sel.stamp} onchange={(e) => { const stamp = e.currentTarget.value as StampKind; run(() => controller.updateSticker(layerId, sel.id, { stamp })); }} class="rounded bg-slate-800 px-1 py-0.5">
-            {#each STAMP_KINDS as k (k)}<option value={k}>{STAMP_LABELS[k]}</option>{/each}
-          </select>
-        </label>
+        <span class="text-slate-400">Sticker</span>
+        <!-- The layer is redrawn, so the new sticker's art (and every other's) loads first. -->
+        <StickerPicker
+          {controller}
+          label="Sticker art"
+          selected={[sel.ref]}
+          onpick={(ref) => {
+            const id = sel.id;
+            void controller
+              .prepareStickers([ref, ...stickers.map((x) => x.ref)])
+              .then(() => run(() => controller.updateSticker(layerId, id, { ref })))
+              .catch((e: unknown) => run(() => { throw e; }));
+          }}
+        />
         <div class="flex items-center justify-between gap-2">
           <span class="text-slate-400">Position</span>
           <span class="flex gap-1">

package/dist/paint-editor/StickerPicker.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { StickerBrowser, type PaintEditorController } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    controller: PaintEditorController;
+    /** Refs shown as chosen. */
+    selected: readonly string[];
+    /** Called with a sticker's ref when it is clicked. */
+    onpick: (ref: string) => void;
+    /** Accessible name of the sticker list (default "Stickers"). */
+    label?: string;
+  }
+  let { controller, selected, onpick, label = 'Stickers' }: Props = $props();
+  const browser = $derived(new StickerBrowser(() => controller.stickersProvider));
+  let s = $state(new StickerBrowser(() => controller.stickersProvider).state);
+  $effect(() => {
+    const b = browser;
+    s = b.state;
+    const off = b.subscribe(() => (s = b.state));
+    void b.refresh();
+    const offProvider = controller.stickers.subscribe(() => void b.refresh());
+    return () => {
+      off();
+      offProvider();
+    };
+  });
+  const failed = $derived(selected.map((ref) => ({ ref, ...controller.stickerArtStatus(ref) })).filter((x) => x.status === 'failed'));
+</script>
+
+<!-- Stickers from the paint editor's sticker library, searchable, by category and a page at a time; clicking one calls onpick with its ref. -->
+<div class="flex flex-col gap-1" data-testid="sticker-picker">
+  <div class="flex items-center gap-1">
+    <input type="search" aria-label={`Search ${label.toLowerCase()}`} placeholder={`Search ${s.provider}`} value={s.query} oninput={(e) => void browser.setQuery(e.currentTarget.value)} class="min-w-0 flex-1 rounded bg-slate-800 px-1 py-0.5" />
+    {#if s.categories.length > 1}
+      <select aria-label="Sticker category" value={s.category} onchange={(e) => void browser.setCategory(e.currentTarget.value)} class="rounded bg-slate-800 px-1 py-0.5">
+        <option value="">All</option>
+        {#each s.categories as c (c.id)}<option value={c.id}>{c.name}</option>{/each}
+      </select>
+    {/if}
+  </div>
+  <div class="flex max-h-32 flex-wrap gap-1 overflow-y-auto" role="group" aria-label={label}>
+    {#each s.items as it (it.ref)}
+      <button
+        type="button"
+        aria-pressed={selected.includes(it.ref)}
+        title={`${it.name} (${it.ref}) · ${it.licence.name}`}
+        class={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] ${selected.includes(it.ref) ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300'}`}
+        onclick={() => onpick(it.ref)}
+      >
+        {#if it.thumbnail}<img src={it.thumbnail} alt="" class="h-4 w-4" />{/if}{it.name}
+      </button>
+    {/each}
+  </div>
+  <div class="flex items-center justify-between text-[10px] text-slate-500">
+    <span>{s.loading ? 'Loading…' : `${s.items.length} of ${s.total}`}</span>
+    {#if s.hasMore}<button type="button" class="text-indigo-300" onclick={() => void browser.more()}>More</button>{/if}
+  </div>
+  {#if s.error}<p role="alert" class="text-[11px] text-rose-400">{s.error}</p>{/if}
+  {#each failed as f (f.ref)}<p role="alert" class="text-[11px] text-rose-400">{f.ref}: {f.error}</p>{/each}
+</div>

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

@@ -0,0 +1,13 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    /** Refs shown as chosen. */
+    selected: readonly string[];
+    /** Called with a sticker's ref when it is clicked. */
+    onpick: (ref: string) => void;
+    /** Accessible name of the sticker list (default "Stickers"). */
+    label?: string;
+}
+declare const StickerPicker: import("svelte").Component<Props, {}, "">;
+type StickerPicker = ReturnType<typeof StickerPicker>;
+export default StickerPicker;

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

@@ -8,6 +8,7 @@ import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
 import type StickerPanelComponent from './StickerPanel.svelte';
+import type StickerPickerComponent from './StickerPicker.svelte';
 import type StrokePanelComponent from './StrokePanel.svelte';
 import type PaintEffectsPanelComponent from './PaintEffectsPanel.svelte';
 import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
@@ -20,6 +21,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
@@ -35,6 +37,7 @@ export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
 export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
+export type StickerPickerProps = ComponentProps<typeof StickerPickerComponent>;
 export type StrokePanelProps = ComponentProps<typeof StrokePanelComponent>;
 export type PaintEffectsPanelProps = ComponentProps<typeof PaintEffectsPanelComponent>;
 export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;

package/dist/paint-editor/index.js

@@ -7,6 +7,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as StickerPicker } from './StickerPicker.svelte';
 export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.184.0",
+  "version": "0.185.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.248.0"
+    "@pixerate/editor": "0.249.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",