@pixerate/editor-svelte 0.184.0 → 0.186.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,30 @@
+<script lang="ts">
+  import type { PaintEditorController, StickerProvider } from '@pixerate/editor/paint-editor';
+  import StickerLibraryPicker from '../stickers/StickerLibraryPicker.svelte';
+
+  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();
+  // The library set later (setStickersProvider) replaces this one; null until the effect runs.
+  let changed = $state<StickerProvider | null>(null);
+  $effect(() => {
+    changed = null;
+    return controller.stickers.subscribe((p) => (changed = p));
+  });
+  const provider = $derived(changed ?? controller.stickersProvider);
+  const failed = $derived(selected.map((ref) => ({ ref, ...controller.stickerArtStatus(ref) })).filter((x) => x.status === 'failed'));
+</script>
+
+<!-- Stickers from the paint editor's sticker library (followed when it changes); clicking one calls onpick with its ref. Chosen stickers whose art failed to load say why. -->
+<StickerLibraryPicker {provider} {selected} {label} onpick={(it) => onpick(it.ref)}>
+  {#snippet footer()}
+    {#each failed as f (f.ref)}<p role="alert" class="text-[11px] text-rose-400">{f.ref}: {f.error}</p>{/each}
+  {/snippet}
+</StickerLibraryPicker>

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/dist/stickers/StickerInsertPanel.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { insertSticker, type StickerInsertHost, type StickerProvider } from '@pixerate/editor/stickers';
+  import StickerLibraryPicker from './StickerLibraryPicker.svelte';
+
+  interface Props {
+    provider: StickerProvider;
+    /** Where stickers go: `createVectorStickerHost`, `createImageStickerHost`, `createCanvasStickerHost` or your own. */
+    host: StickerInsertHost;
+    /** Called with what was inserted (its id, ref, size and licence). */
+    oninserted?: (result: Awaited<ReturnType<typeof insertSticker>>) => void;
+    class?: string;
+  }
+  let { provider, host, oninserted, class: className = '' }: Props = $props();
+  let tint = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  let busy = $state(false);
+</script>
+
+<!-- Pick a sticker to insert it into an editor (one undo step), centred at its natural size, tinted when asked: the panel counterpart of insert_sticker. -->
+<div class={`flex flex-col gap-1.5 text-xs ${className}`} data-testid="sticker-insert">
+  <StickerLibraryPicker
+    {provider}
+    label="Insert sticker"
+    onpick={(it) => {
+      busy = true;
+      error = null;
+      insertSticker(provider, host, { ref: it.ref, ...(tint && it.tintable ? { color: tint } : {}) })
+        .then((r) => oninserted?.(r))
+        .catch((e: unknown) => (error = e instanceof Error ? e.message : String(e)))
+        .finally(() => (busy = false));
+    }}
+  />
+  <label class="flex items-center gap-2">
+    <input type="checkbox" aria-label="Tint stickers" checked={tint !== null} onchange={(e) => (tint = e.currentTarget.checked ? '#2563eb' : null)} /> Tint
+    {#if tint !== null}<input type="color" aria-label="Sticker tint" value={tint} oninput={(e) => (tint = e.currentTarget.value)} />{/if}
+    {#if busy}<span class="text-slate-500">Inserting…</span>{/if}
+  </label>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

package/dist/stickers/StickerInsertPanel.svelte.d.ts

@@ -0,0 +1,12 @@
+import { insertSticker, type StickerInsertHost, type StickerProvider } from '@pixerate/editor/stickers';
+interface Props {
+    provider: StickerProvider;
+    /** Where stickers go: `createVectorStickerHost`, `createImageStickerHost`, `createCanvasStickerHost` or your own. */
+    host: StickerInsertHost;
+    /** Called with what was inserted (its id, ref, size and licence). */
+    oninserted?: (result: Awaited<ReturnType<typeof insertSticker>>) => void;
+    class?: string;
+}
+declare const StickerInsertPanel: import("svelte").Component<Props, {}, "">;
+type StickerInsertPanel = ReturnType<typeof StickerInsertPanel>;
+export default StickerInsertPanel;

package/dist/stickers/StickerLibraryPicker.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { StickerBrowser, type StickerBrowserItem, type StickerBrowserState, type StickerProvider } from '@pixerate/editor/stickers';
+
+  interface Props {
+    /** The sticker library (e.g. `editorStickers()`, a host's, or `combineStickerProviders([...])`). */
+    provider: StickerProvider;
+    /** Refs shown as chosen. */
+    selected?: readonly string[];
+    /** Called with a sticker when it is clicked. */
+    onpick: (sticker: StickerBrowserItem) => void;
+    /** Accessible name of the sticker list (default "Stickers"). */
+    label?: string;
+    /** Shown under the list (e.g. load errors). */
+    footer?: Snippet;
+    class?: string;
+  }
+  let { provider, selected = [], onpick, label = 'Stickers', footer, class: className = '' }: Props = $props();
+  const browser = $derived(new StickerBrowser(() => provider));
+  let s = $state<StickerBrowserState | null>(null);
+  $effect(() => {
+    const b = browser;
+    s = b.state;
+    const off = b.subscribe(() => (s = b.state));
+    void b.refresh();
+    return off;
+  });
+</script>
+
+<!-- Stickers from a sticker library: searchable, by category and a page at a time, each sticker's licence in its tooltip; clicking one calls onpick. -->
+<div class={`flex flex-col gap-1 ${className}`} data-testid="sticker-picker">
+  {#if s}
+    <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}${it.licence.attribution ? ` · ${it.licence.attribution}` : ''}`}
+          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)}
+        >
+          {#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}
+  {/if}
+  {@render footer?.()}
+</div>

package/dist/stickers/StickerLibraryPicker.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import { type StickerBrowserItem, type StickerProvider } from '@pixerate/editor/stickers';
+interface Props {
+    /** The sticker library (e.g. `editorStickers()`, a host's, or `combineStickerProviders([...])`). */
+    provider: StickerProvider;
+    /** Refs shown as chosen. */
+    selected?: readonly string[];
+    /** Called with a sticker when it is clicked. */
+    onpick: (sticker: StickerBrowserItem) => void;
+    /** Accessible name of the sticker list (default "Stickers"). */
+    label?: string;
+    /** Shown under the list (e.g. load errors). */
+    footer?: Snippet;
+    class?: string;
+}
+declare const StickerLibraryPicker: import("svelte").Component<Props, {}, "">;
+type StickerLibraryPicker = ReturnType<typeof StickerLibraryPicker>;
+export default StickerLibraryPicker;

package/dist/stickers/index.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'svelte';
+import type StickerLibraryPickerComponent from './StickerLibraryPicker.svelte';
+import type StickerInsertPanelComponent from './StickerInsertPanel.svelte';
+export { default as StickerLibraryPicker } from './StickerLibraryPicker.svelte';
+export { default as StickerInsertPanel } from './StickerInsertPanel.svelte';
+export type StickerLibraryPickerProps = ComponentProps<typeof StickerLibraryPickerComponent>;
+export type StickerInsertPanelProps = ComponentProps<typeof StickerInsertPanelComponent>;

package/dist/stickers/index.js

@@ -0,0 +1,2 @@
+export { default as StickerLibraryPicker } from './StickerLibraryPicker.svelte';
+export { default as StickerInsertPanel } from './StickerInsertPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.184.0",
+  "version": "0.186.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -23,6 +23,11 @@
       "svelte": "./dist/effects/index.js",
       "default": "./dist/effects/index.js"
     },
+    "./stickers": {
+      "types": "./dist/stickers/index.d.ts",
+      "svelte": "./dist/stickers/index.js",
+      "default": "./dist/stickers/index.js"
+    },
     "./spreadsheet": {
       "types": "./dist/spreadsheet/index.d.ts",
       "svelte": "./dist/spreadsheet/index.js",
@@ -165,7 +170,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.248.0"
+    "@pixerate/editor": "0.250.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",