@pixerate/editor-svelte 0.185.0 → 0.186.0

package/dist/paint-editor/StickerPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { StickerBrowser, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import type { PaintEditorController, StickerProvider } from '@pixerate/editor/paint-editor';
+  import StickerLibraryPicker from '../stickers/StickerLibraryPicker.svelte';
 
   interface Props {
     controller: PaintEditorController;
@@ -11,50 +12,19 @@
     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);
+  // The library set later (setStickersProvider) replaces this one; null until the effect runs.
+  let changed = $state<StickerProvider | null>(null);
   $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();
-    };
+    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, 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>
+<!-- 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

@@ -1,4 +1,4 @@
-import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+import type { PaintEditorController } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** Refs shown as chosen. */

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.185.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.249.0"
+    "@pixerate/editor": "0.250.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",