@pixerate/editor-svelte 0.133.3 → 0.136.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -101,7 +101,7 @@
   }
 
   function addLayer() {
-    selectedId = controller.addAdjustmentLayer(newKind);
+    selectedId = controller.addAdjustmentLayer({ kind: newKind, useSelection: true });
     channel = 'master';
     range = -1;
   }

package/dist/image-editor/ChannelsPanel.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { imageSectionTitleClass } from './styles.js';
+  import type { AlphaChannel, ImageEditorController } from '@pixerate/editor/image-editor';
+  import { channelThumbnail, selectionModeFromModifiers } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in CSS pixels (default 32). */
+    thumbnailSize?: number;
+    class?: string;
+  }
+
+  let { controller, thumbnailSize = 32, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const snapshot = $derived.by(() => {
+    void tick;
+    return {
+      channels: controller.getChannels(),
+      hasSelection: Boolean(controller.getSelection()),
+      quickMask: controller.quickMaskEditing,
+    };
+  });
+  let activeId = $state<string | null>(null);
+  let renaming = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  const active = $derived(snapshot.channels.find((c) => c.id === activeId) ?? null);
+
+  function attempt(fn: () => unknown) {
+    error = null;
+    try {
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  /** Draws a channel's thumbnail (nothing without a 2D context). */
+  function thumb(canvas: HTMLCanvasElement, channel: AlphaChannel) {
+    const draw = (c: AlphaChannel) => {
+      const ctx = canvas.getContext('2d');
+      if (!ctx || typeof ctx.createImageData !== 'function') return;
+      const px = channelThumbnail(c, 64);
+      canvas.width = px.width;
+      canvas.height = px.height;
+      const img = ctx.createImageData(px.width, px.height);
+      img.data.set(px.data);
+      ctx.putImageData(img, 0, 0);
+    };
+    draw(channel);
+    return { update: draw };
+  }
+
+  const btn = (on = false) =>
+    `px-2 py-1 rounded-md border text-[11px] transition-colors disabled:opacity-40 ${
+      on ? 'bg-primary border-primary text-primary-foreground' : 'bg-background border-border text-foreground hover:bg-accent hover:text-accent-foreground'
+    }`;
+</script>
+
+<!--
+  The Channels panel: alpha channels (saved selections) with thumbnails, an eye to show each as a
+  tint, click to load it as the selection (Shift adds, Alt subtracts, both intersect), double-click
+  to rename; Save Selection, Add to Channel, Duplicate and Delete; and the Quick Mask mode switch.
+-->
+<div data-testid="channels-panel" class="flex flex-col gap-2 text-xs {className}">
+  <div class="flex items-center justify-between">
+    <span class={imageSectionTitleClass}>Channels</span>
+    <button type="button" aria-pressed={snapshot.quickMask} class={btn(snapshot.quickMask)} title="Paint the selection: white selects, black deselects (Q)" onclick={() => controller.setQuickMaskMode(!snapshot.quickMask)}>Quick Mask</button>
+  </div>
+  {#if snapshot.channels.length === 0}
+    <p class="text-muted-foreground">No channels. Save a selection to keep it.</p>
+  {/if}
+  <ul role="list" class="flex flex-col gap-0.5">
+    {#each snapshot.channels as c (c.id)}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+      <li
+        data-testid="channel-row"
+        aria-current={c.id === activeId ? "true" : undefined}
+        class="flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none {c.id === activeId ? 'bg-primary/30 ring-1 ring-primary' : 'hover:bg-muted'}"
+        onclick={(e) => {
+          activeId = c.id;
+          attempt(() => controller.loadSelectionFromChannel(c.id, { mode: selectionModeFromModifiers(e, 'replace') }));
+        }}
+        ondblclick={() => (renaming = c.id)}
+      >
+        <button
+          type="button"
+          aria-label={`${c.visible ? 'Hide' : 'Show'} ${c.name}`}
+          aria-pressed={c.visible}
+          class="w-4 text-muted-foreground"
+          onclick={(e) => {
+            e.stopPropagation();
+            attempt(() => controller.setChannelProperties(c.id, { visible: !c.visible }));
+          }}>{c.visible ? '●' : '○'}</button>
+        <canvas use:thumb={c} aria-hidden="true" style="width: {thumbnailSize}px; height: {thumbnailSize}px" class="shrink-0 rounded object-contain ring-1 ring-border bg-black"></canvas>
+        {#if renaming === c.id}
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            autofocus
+            aria-label="Channel name"
+            value={c.name}
+            class="min-w-0 flex-1 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+            onclick={(e) => e.stopPropagation()}
+            onblur={(e) => {
+              const v = (e.currentTarget as HTMLInputElement).value;
+              renaming = null;
+              if (v.trim() && v !== c.name) attempt(() => controller.setChannelProperties(c.id, { name: v }));
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+              if (e.key === 'Escape') renaming = null;
+            }}
+          />
+        {:else}
+          <span class="min-w-0 flex-1 truncate">{c.name}</span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={btn()} disabled={!snapshot.hasSelection} onclick={() => attempt(() => (activeId = controller.saveSelection().id))}>Save Selection</button>
+    <button type="button" class={btn()} disabled={!active || !snapshot.hasSelection} title="Add the selection to the channel" onclick={() => attempt(() => controller.saveSelection({ channelId: active!.id, mode: 'add' }))}>Add to Channel</button>
+    <button type="button" class={btn()} disabled={!active} onclick={() => attempt(() => (activeId = controller.duplicateChannel(active!.id).id))}>Duplicate</button>
+    <button
+      type="button"
+      class={btn()}
+      disabled={!active}
+      onclick={() =>
+        attempt(() => {
+          controller.deleteChannel(active!.id);
+          activeId = null;
+        })}>Delete</button>
+  </div>
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in CSS pixels (default 32). */
+    thumbnailSize?: number;
+    class?: string;
+}
+declare const ChannelsPanel: import("svelte").Component<Props, {}, "">;
+type ChannelsPanel = ReturnType<typeof ChannelsPanel>;
+export default ChannelsPanel;

package/dist/image-editor/ImageEditor.svelte

@@ -34,6 +34,7 @@
   import BrushOptionsBar from './BrushOptionsBar.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
+  import ChannelsPanel from './ChannelsPanel.svelte';
   import FreeTransformOptionsBar from './FreeTransformOptionsBar.svelte';
   import ShapeOptionsBar from './ShapeOptionsBar.svelte';
   import TypeOptionsBar from './TypeOptionsBar.svelte';
@@ -954,6 +955,7 @@
             onOptionsChange={(next) => (selectionOptions = next)}
             selection={editor.state.selection ?? null}
             quickMask={Boolean(editor.state.quickMask)}
+            selectionDisplay={editor.state.selectionDisplay}
           />
           {#if selectionError}
             <p role="alert" class="text-destructive">{selectionError}</p>
@@ -977,6 +979,7 @@
             selection={editor.state.selection ?? null}
             layers={editor.state.adjustments.layers}
           />
+          <ChannelsPanel controller={editor.controller} />
         </div>
       {/if}
 

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -23,6 +23,8 @@
     measureCanvasViewport,
     watchCanvasViewport,
     startMarchingAnts,
+    handleSelectionShortcut,
+    handleQuickMaskKey,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -594,6 +596,32 @@
     if (paintGesture.error) report('paint', paintGesture.error);
   }
 
+  $effect(() => {
+    if (mode !== 'select' || typeof window === 'undefined') return;
+    const gesture = selectionGesture;
+    // The polygonal lasso: Enter closes it, Escape cancels, Backspace removes the last corner.
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      // Leave Copy to the page while text on it is selected.
+      if (window.getSelection?.()?.toString()) return;
+      if (handleQuickMaskKey(editor.controller, e)) {
+        e.preventDefault();
+        return;
+      }
+      if (handleSelectionShortcut(editor.controller, e, (message) => report('select', message))) {
+        e.preventDefault();
+        return;
+      }
+      if (gesture.key(e.key)) {
+        e.preventDefault();
+        selectionDraft = gesture.draftPath;
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
   $effect(() => {
     if (mode !== 'paint' || typeof window === 'undefined') return;
     const c = editor.controller;
@@ -663,7 +691,10 @@
     if (mode === 'select') {
       const gesture = selectionGesture;
       const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
-      void gesture.begin(imgPt, e).then(() => report('select', gesture.error));
+      void gesture.begin(imgPt, e).then(() => {
+        report('select', gesture.error);
+        selectionDraft = gesture.draftPath;
+      });
       return;
     }
 
@@ -771,7 +802,7 @@
 
     if (mode === 'select') {
       const gesture = selectionGesture;
-      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false))) {
+      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), e)) {
         selectionDraft = gesture.draftPath;
         renderCanvas();
       }
@@ -924,7 +955,8 @@
       const gesture = selectionGesture;
       if (gesture.active) {
         gesture.end(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), e);
-        selectionDraft = null;
+        // A polygonal lasso stays open between clicks.
+        selectionDraft = gesture.draftPath;
         renderCanvas();
       }
       return;

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -162,7 +162,7 @@
     </div>
     {#if browse === 'filter'}
       {@const id = layer.id}
-      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
+      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id, { useSelection: true })))} />
     {/if}
   {/if}
   {#if layer && all.some((f) => f.kind === 'effect')}

package/dist/image-editor/LayersPanel.svelte

@@ -8,6 +8,8 @@
     downloadPsd,
     dropPlacement,
     dropZone,
+    maskThumbnailClick,
+    layerThumbnailClick,
     layerBadge,
     layerEffectsBadge,
     layerHasThumbnail,
@@ -333,6 +335,13 @@
             <canvas
               use:paint={thumb(layer)}
               aria-label={`${row.label} pixels`}
+              data-testid="layer-thumbnail"
+              onclick={(e) => {
+                if (e.ctrlKey || e.metaKey) {
+                  e.stopPropagation();
+                  attempt(() => layerThumbnailClick(controller, layer, e));
+                }
+              }}
               style="width: {thumbnailSize}px; height: {thumbnailSize}px"
               class={thumbClass(row.active && snapshot.activeTarget === 'pixels' && Boolean(layer.mask))}
             ></canvas>
@@ -371,8 +380,7 @@
             class={thumbClass(row.active && snapshot.activeTarget === 'mask')}
             onclick={(e) => {
               e.stopPropagation();
-              if (e.shiftKey) attempt(() => controller.setLayerMaskProps(layer.id, { enabled: layer.mask!.enabled === false }));
-              else attempt(() => controller.setActiveLayer(layer.id, 'mask'));
+              attempt(() => maskThumbnailClick(controller, layer, e));
             }}
           ></canvas>
         {/if}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -3,12 +3,16 @@
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import type {
+    ColorRangePreset,
     ImageEditorController,
+    SelectionDisplay,
     SelectionMask,
     SelectionModifyOp,
     SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
   import {
+    COLOR_RANGE_PRESETS,
+    COLOR_RANGE_PRESET_LABELS,
     SELECTION_MODES,
     SELECTION_MODE_LABELS,
     SELECTION_TOOLS,
@@ -24,10 +28,12 @@
     selection?: SelectionMask | null;
     /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
     quickMask?: boolean;
+    /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
+    selectionDisplay?: SelectionDisplay;
     class?: string;
   }
 
-  let { controller, options, onOptionsChange, selection, quickMask, class: className = '' }: Props = $props();
+  let { controller, options, onOptionsChange, selection, quickMask, selectionDisplay, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -38,10 +44,60 @@
     void tick;
     return selection === undefined ? controller.getSelection() : selection;
   });
-  const qm = $derived.by(() => {
+  const display = $derived.by((): SelectionDisplay => {
     void tick;
-    return quickMask ?? Boolean(controller.getState().quickMask);
+    return selectionDisplay ?? (quickMask === undefined ? controller.getSelectionDisplay() : quickMask ? 'quickMask' : 'ants');
   });
+  const DISPLAYS: { id: SelectionDisplay; label: string }[] = [
+    { id: 'ants', label: 'Ants' },
+    { id: 'quickMask', label: 'Quick Mask' },
+    { id: 'none', label: 'Hidden' },
+  ];
+  const numberInput = 'w-14 bg-background border border-border rounded px-1 py-0.5 text-foreground';
+
+  // Color Range presets.
+  let preset = $state<ColorRangePreset>('reds');
+  let rangeStatus = $state<string | null>(null);
+  const canReselect = $derived.by(() => {
+    void tick;
+    void sel;
+    return controller.canReselect();
+  });
+  let colorStatus = $state<string | null>(null);
+  let strokeWidth = $state(4);
+  let strokeLocation = $state<'inside' | 'center' | 'outside'>('outside');
+  function edit(fn: () => unknown) {
+    colorStatus = null;
+    try {
+      fn();
+    } catch (err) {
+      colorStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
+  async function runColor(op: 'grow' | 'similar') {
+    colorStatus = null;
+    const opts = { tolerance: options.tolerance, sampleMerged: options.sampleMerged, sample: options.sample };
+    try {
+      await (op === 'grow' ? controller.growSelection(opts) : controller.selectSimilar(opts));
+    } catch (err) {
+      colorStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
+  async function applyPreset() {
+    rangeStatus = null;
+    try {
+      await controller.selectColorRangePreset(preset, {
+        mode: options.mode,
+        feather: options.feather ?? 0,
+        invert: options.rangeInvert ?? false,
+        falloff: options.fuzziness ?? 20,
+        sampleMerged: options.sampleMerged,
+        sample: options.sample,
+      });
+    } catch (err) {
+      rangeStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
 
   let radius = $state(2);
 
@@ -69,8 +125,8 @@
   }
 
   const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
-    { op: 'grow', label: 'Grow' },
-    { op: 'shrink', label: 'Shrink' },
+    { op: 'expand', label: 'Expand' },
+    { op: 'contract', label: 'Contract' },
     { op: 'feather', label: 'Feather' },
     { op: 'border', label: 'Border' },
     { op: 'smooth', label: 'Smooth' },
@@ -114,6 +170,18 @@
         <ImageCheckbox label="Contiguous" checked={options.contiguous} onchange={(on) => set({ contiguous: on })} />
         Contiguous
       </label>
+      <label class="flex items-center gap-2 text-foreground">
+        Distance
+        <ImageSelect
+          label="Colour distance"
+          value={options.distance}
+          options={[
+            { value: 'rgb', label: 'RGB' },
+            { value: 'perceptual', label: 'Perceptual' },
+          ]}
+          onchange={(v) => set({ distance: v as 'rgb' | 'perceptual' })}
+        />
+      </label>
       <label class="flex items-center gap-2 text-foreground">
         <ImageCheckbox label="Sample adjusted image" checked={options.sampleMerged} onchange={(on) => set({ sampleMerged: on })} />
         Sample adjusted image
@@ -132,6 +200,64 @@
       </label>
     </div>
   {/if}
+  {#if options.tool === 'polygon'}
+    <p class="text-muted-foreground">Click to add corners (Shift for 45°), drag for a free-hand stretch; double-click, Enter or a click on the first corner closes it, Backspace removes a corner, Escape cancels.</p>
+  {/if}
+  {#if options.tool === 'range'}
+    <div data-testid="color-range-options" class="flex flex-col gap-2">
+      <p class="text-muted-foreground">Click a colour to select it; Shift-click adds a colour, Alt-click removes one.</p>
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-muted-foreground">
+          <span>Fuzziness</span>
+          <span class="font-mono">{options.fuzziness ?? 40}</span>
+        </span>
+        <ImageRange label="Fuzziness" min={0} max={200} step={1} value={options.fuzziness ?? 40} oninput={(v) => set({ fuzziness: v })} />
+      </label>
+      <label class="flex items-center gap-1 text-muted-foreground">
+        Localized radius
+        <input
+          type="number"
+          min="0"
+          step="1"
+          aria-label="Localized radius"
+          value={options.localized ?? 0}
+          oninput={(e) => set({ localized: Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0) })}
+          class={numberInput}
+        />
+        px
+      </label>
+      <label class="flex items-center gap-2 text-foreground">
+        <ImageCheckbox label="Invert" checked={options.rangeInvert ?? false} onchange={(on) => set({ rangeInvert: on })} />
+        Invert
+      </label>
+      <div class="flex items-center gap-1">
+        <ImageSelect
+          label="Color Range preset"
+          value={preset}
+          options={COLOR_RANGE_PRESETS.map((p) => ({ value: p, label: COLOR_RANGE_PRESET_LABELS[p] }))}
+          onchange={(v) => (preset = v as ColorRangePreset)}
+        />
+        <button type="button" class={btn(false)} onclick={() => void applyPreset()}>Select</button>
+      </div>
+      {#if rangeStatus}
+        <p role="status" class="text-muted-foreground">{rangeStatus}</p>
+      {/if}
+    </div>
+  {/if}
+  <label class="flex items-center gap-1 text-muted-foreground">
+    Feather
+    <input
+      type="number"
+      min="0"
+      max="1000"
+      step="0.5"
+      aria-label="Feather"
+      value={options.feather ?? 0}
+      oninput={(e) => set({ feather: Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0) })}
+      class={numberInput}
+    />
+    px
+  </label>
   {#if canSegment}
     <form
       data-testid="select-subject"
@@ -167,7 +293,15 @@
     <button type="button" class={btn(false)} onclick={() => controller.selectAll()}>Select All</button>
     <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.deselect()}>Deselect</button>
     <button type="button" class={btn(false)} onclick={() => controller.invertSelection()}>Inverse</button>
-    <button type="button" aria-pressed={qm} class={btn(qm)} onclick={() => controller.setQuickMask(!qm)}>Quick Mask</button>
+    <button type="button" class={btn(false)} disabled={!canReselect} onclick={() => controller.reselect()}>Reselect</button>
+    <button type="button" class={btn(false)} disabled={!sel} title="Add connected pixels of a selected colour (wand tolerance)" onclick={() => void runColor('grow')}>Grow</button>
+    <button type="button" class={btn(false)} disabled={!sel} title="Add every pixel of a selected colour (wand tolerance)" onclick={() => void runColor('similar')}>Similar</button>
+  </div>
+  <div role="group" aria-label="Show selection" class="flex flex-wrap items-center gap-1">
+    <span class="text-muted-foreground">Show</span>
+    {#each DISPLAYS as d (d.id)}
+      <button type="button" aria-pressed={display === d.id} class={btn(display === d.id)} onclick={() => controller.setSelectionDisplay(d.id)}>{d.label}</button>
+    {/each}
   </div>
   <div class="flex flex-wrap items-center gap-1">
     <label class="flex items-center gap-1 text-muted-foreground">
@@ -180,12 +314,53 @@
         aria-label="Modify radius"
         value={radius}
         oninput={(e) => (radius = Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0))}
-        class="w-14 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+        class={numberInput}
       />
     </label>
     {#each MODIFY_OPS as m (m.op)}
       <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.modifySelection(m.op, radius)}>{m.label}</button>
     {/each}
   </div>
+  <div role="group" aria-label="Edit selection" class="flex flex-wrap items-center gap-1">
+    <label class="flex items-center gap-1 text-muted-foreground">
+      Stroke
+      <input
+        type="number"
+        min="1"
+        max="250"
+        step="1"
+        aria-label="Stroke width"
+        value={strokeWidth}
+        oninput={(e) => (strokeWidth = Math.min(250, Math.max(1, Number((e.currentTarget as HTMLInputElement).value) || 1)))}
+        class={numberInput}
+      />
+      px
+    </label>
+    <ImageSelect
+      label="Stroke location"
+      value={strokeLocation}
+      options={[
+        { value: 'outside', label: 'Outside' },
+        { value: 'center', label: 'Center' },
+        { value: 'inside', label: 'Inside' },
+      ]}
+      onchange={(v) => (strokeLocation = v as 'inside' | 'center' | 'outside')}
+    />
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.strokeSelection({ width: strokeWidth, location: strokeLocation }))}>Stroke</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.cropToSelection())}>Crop to Selection</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.contentAwareFill({ output: 'new-layer' }))}>Content-Aware Fill</button>
+  </div>
+  <div role="group" aria-label="Clipboard" class="flex flex-wrap gap-1">
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.copyPixels())}>Copy</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.copyPixels({ merged: true }))}>Copy Merged</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.cutPixels())}>Cut</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.pastePixels('new-layer'))}>Paste</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.pastePixels('in-place'))}>Paste in Place</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.pastePixels('into'))}>Paste Into</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.pastePixels('outside'))}>Paste Outside</button>
+  </div>
+  {#if colorStatus}
+    <p role="status" class="text-muted-foreground">{colorStatus}</p>
+  {/if}
   <p data-testid="selection-status" class="text-muted-foreground">{describeSelection(sel)}</p>
 </div>

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

@@ -1,4 +1,4 @@
-import type { ImageEditorController, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
+import type { ImageEditorController, SelectionDisplay, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
 interface Props {
     controller: ImageEditorController;
     options: SelectionToolOptions;
@@ -7,6 +7,8 @@ interface Props {
     selection?: SelectionMask | null;
     /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
     quickMask?: boolean;
+    /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
+    selectionDisplay?: SelectionDisplay;
     class?: string;
 }
 declare const SelectionOptionsBar: import("svelte").Component<Props, {}, "">;

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

@@ -8,6 +8,7 @@ import type CurvesEditorComponent from "./CurvesEditor.svelte";
 import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
+import type ChannelsPanelComponent from "./ChannelsPanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
 import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
@@ -31,6 +32,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
@@ -56,6 +58,7 @@ export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
 export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
+export type ChannelsPanelProps = ComponentProps<typeof ChannelsPanelComponent>;
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;

package/dist/image-editor/index.js

@@ -10,6 +10,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.133.3",
+  "version": "0.136.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.183.0"
+    "@pixerate/editor": "0.186.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",