@pixerate/editor-svelte 0.182.1 → 0.185.0

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -4,8 +4,9 @@
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import { imageIconButtonClass } from './styles.js';
-  import type { EffectControl, ImageEditorController, LayerEffectKind } from '@pixerate/editor/image-editor';
-  import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/image-editor';
+  // From the raster entry, not the image editor's: the paint editor shows this panel too.
+  import type { EffectControl, LayerEffectKind, LayerEffectsController } from '@pixerate/editor/raster';
+  import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/raster';
   import { untrack } from 'svelte';
 
   /**
@@ -14,7 +15,8 @@
    * settings. Every change is one undo step (a slider drag is one step too).
    */
   interface Props {
-    controller: ImageEditorController;
+    /** The image editor's controller, the paint editor's, or anything else with layer effects. */
+    controller: LayerEffectsController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**

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

@@ -1,11 +1,12 @@
-import type { ImageEditorController } from '@pixerate/editor/image-editor';
+import type { LayerEffectsController } from '@pixerate/editor/raster';
 /**
  * A layer's effects (Photoshop's layer styles): the master switch, Scale Effects, an "Add
  * style" menu, and each effect with its enabled toggle, remove button and, when expanded, its
  * settings. Every change is one undo step (a slider drag is one step too).
  */
 interface Props {
-    controller: ImageEditorController;
+    /** The image editor's controller, the paint editor's, or anything else with layer effects. */
+    controller: LayerEffectsController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**

package/dist/paint-editor/BrushPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import StickerPicker from './StickerPicker.svelte';
   import {
     BLEND_MENU_GROUPS,
     BRUSH_ROTATIONS,
@@ -20,11 +21,21 @@
     PARTICLE_KIND_LABELS,
     PARTICLE_RENDERS,
     PARTICLE_RENDER_LABELS,
+    RIBBON_PAIRS,
+    RIBBON_PAIR_LABELS,
+    DOT_TEXTURE_ORDERS,
+    DOT_TEXTURE_ORDER_LABELS,
+    DOT_ROTATIONS,
+    DOT_ROTATION_LABELS,
+    toggleDotTexture,
     STAMP_KINDS,
     STAMP_LABELS,
-    toggleStamp,
+    toggleStickerRef,
     type ParticleKind,
     type ParticleRender,
+    type RibbonPairs,
+    type DotTextureOrder,
+    type DotRotation,
     type ImpastoTool,
     type WetMediumKind,
     type BlendMode,
@@ -150,17 +161,45 @@
             {#each PARTICLE_RENDERS as k (k)}<option value={k}>{PARTICLE_RENDER_LABELS[k]}</option>{/each}
           </select>
         </label>
+        {#if brush.particle.render === 'ribbon'}
+          <label class="flex items-center justify-between gap-2">
+            <span class="text-slate-400">Ribbon joins</span>
+            <select aria-label="Ribbon pairs" value={brush.particle.ribbonPairs} onchange={(e) => controller.setBrush({ particle: { ribbonPairs: e.currentTarget.value as RibbonPairs } })} class="rounded bg-slate-800 px-1 py-0.5">
+              {#each RIBBON_PAIRS as k (k)}<option value={k}>{RIBBON_PAIR_LABELS[k]}</option>{/each}
+            </select>
+          </label>
+        {/if}
+        {#if brush.particle.render === 'dot' || brush.particle.render === 'sequence'}
+          <div class="flex flex-wrap gap-1" role="group" aria-label="Dot textures" title="Stamps drawn instead of round dots (up to 4; none: round)">
+            {#each STAMP_KINDS as k (k)}
+              <button
+                type="button"
+                aria-pressed={brush.particle.dotTextures.includes(k)}
+                class={`px-1.5 py-0.5 rounded text-[10px] ${brush.particle.dotTextures.includes(k) ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300'}`}
+                onclick={() => controller.setBrush({ particle: { dotTextures: toggleDotTexture(brush.particle.dotTextures, k) } })}
+              >
+                {STAMP_LABELS[k]}
+              </button>
+            {/each}
+          </div>
+          {#if brush.particle.dotTextures.length > 0}
+            <label class="flex items-center justify-between gap-2">
+              <span class="text-slate-400">Texture order</span>
+              <select aria-label="Dot texture order" value={brush.particle.dotTextureOrder} onchange={(e) => controller.setBrush({ particle: { dotTextureOrder: e.currentTarget.value as DotTextureOrder } })} class="rounded bg-slate-800 px-1 py-0.5">
+                {#each DOT_TEXTURE_ORDERS as k (k)}<option value={k}>{DOT_TEXTURE_ORDER_LABELS[k]}</option>{/each}
+              </select>
+            </label>
+            <label class="flex items-center justify-between gap-2">
+              <span class="text-slate-400">Texture turn</span>
+              <select aria-label="Dot rotation" value={brush.particle.dotRotation} onchange={(e) => controller.setBrush({ particle: { dotRotation: e.currentTarget.value as DotRotation } })} class="rounded bg-slate-800 px-1 py-0.5">
+                {#each DOT_ROTATIONS as k (k)}<option value={k}>{DOT_ROTATION_LABELS[k]}</option>{/each}
+              </select>
+            </label>
+          {/if}
+        {/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/PaintLayersPanel.svelte

@@ -2,6 +2,7 @@
   import { BLEND_MENU_GROUPS, type BlendMode, type PaintEditorController, type PaintLayerInfo } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import LayerEffectsPanel from '../image-editor/LayerEffectsPanel.svelte';
 
   interface Props {
     controller: PaintEditorController;
@@ -128,6 +129,9 @@
           </label>
         </div>
       {/if}
+      <div class="border-t border-slate-800 pt-1.5" data-testid="paint-layer-effects" title="Live layer styles drawn from this layer's paint: glows, shadows, strokes">
+        <LayerEffectsPanel {controller} layerId={active.id} />
+      </div>
     </div>
   {/if}
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}

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