@pixerate/editor-svelte 0.67.0 → 0.69.0

package/dist/image-editor/BrushOptionsBar.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { ImageEditorController } from '@pixerate/editor/image-editor';
+  import { BRUSH_OPTION_CONTROLS, PAINT_TOOLS } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+  import ControlSlider from './ControlSlider.svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    // `subscribe` calls the listener at once: untracked, or the effect would depend on `tick`.
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const view = $derived.by(() => {
+    void tick;
+    const s = controller.getState();
+    return { tool: s.activeTool, ...s.paint };
+  });
+  let error = $state<string | null>(null);
+
+  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+
+  function attempt(fn: () => unknown) {
+    try {
+      error = null;
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="brush-options">
+  <div class="flex gap-1" role="toolbar" aria-label="Paint tools">
+    {#each PAINT_TOOLS as t (t.id)}
+      <button
+        type="button"
+        aria-pressed={view.tool === t.id}
+        title={`${t.label} (${t.shortcut})`}
+        class={chip(view.tool === t.id)}
+        onclick={() => controller.setTool(t.id)}>{t.label}</button>
+    {/each}
+  </div>
+
+  <div class="flex items-center gap-2" role="group" aria-label="Colours">
+    <label class="flex items-center gap-1">
+      <input
+        type="color"
+        aria-label="Foreground colour"
+        value={view.foreground}
+        oninput={(e) => controller.setPaintOptions({ foreground: (e.target as HTMLInputElement).value })}
+        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+      />
+      <span class="text-slate-400">FG</span>
+    </label>
+    <label class="flex items-center gap-1">
+      <input
+        type="color"
+        aria-label="Background colour"
+        value={view.background}
+        oninput={(e) => controller.setPaintOptions({ background: (e.target as HTMLInputElement).value })}
+        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+      />
+      <span class="text-slate-400">BG</span>
+    </label>
+    <button type="button" title="Swap colours (X)" class={chip(false)} onclick={() => controller.swapPaintColors()}>Swap</button>
+    <button type="button" title="Default colours (D)" class={chip(false)} onclick={() => controller.resetPaintColors()}>Default</button>
+  </div>
+
+  {#each BRUSH_OPTION_CONTROLS as spec (spec.id)}
+    <ControlSlider {spec} value={view.brush[spec.id]} onchange={(v) => controller.setPaintOptions({ brush: { [spec.id]: v } })} />
+  {/each}
+
+  <div class="flex flex-wrap gap-3 text-slate-300" role="group" aria-label="Pressure">
+    <label class="flex items-center gap-1.5">
+      <input
+        type="checkbox"
+        aria-label="Pressure controls size"
+        checked={view.brush.pressureSize}
+        onchange={(e) => controller.setPaintOptions({ brush: { pressureSize: (e.target as HTMLInputElement).checked } })}
+        class="accent-indigo-500"
+      />
+      Pressure size
+    </label>
+    <label class="flex items-center gap-1.5">
+      <input
+        type="checkbox"
+        aria-label="Pressure controls opacity"
+        checked={view.brush.pressureOpacity}
+        onchange={(e) => controller.setPaintOptions({ brush: { pressureOpacity: (e.target as HTMLInputElement).checked } })}
+        class="accent-indigo-500"
+      />
+      Pressure opacity
+    </label>
+  </div>
+
+  <div class="flex gap-1">
+    <button type="button" class={chip(false)} onclick={() => attempt(() => controller.fillPixels())}>Fill</button>
+    <button type="button" class={chip(false)} onclick={() => attempt(() => controller.clearPixels())}>Clear</button>
+  </div>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    class?: string;
+}
+declare const BrushOptionsBar: import("svelte").Component<Props, {}, "">;
+type BrushOptionsBar = ReturnType<typeof BrushOptionsBar>;
+export default BrushOptionsBar;
+//# sourceMappingURL=BrushOptionsBar.svelte.d.ts.map

package/dist/image-editor/BrushOptionsBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrushOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/BrushOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMzE,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/image-editor/ImageEditor.svelte

@@ -9,6 +9,7 @@
     InpaintHook,
     RemoveBackgroundHook,
     ImageEditorAIHooks,
+    ImageEditorFit,
   } from '@pixerate/editor/image-editor';
   import {
     canvasToImagePoint,
@@ -22,11 +23,16 @@
     readAdjustmentControls,
     DEFAULT_SELECTION_TOOL_OPTIONS,
     SelectionGesture,
+    PaintGesture,
+    handlePaintShortcut,
+    pointerPressure,
     type SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
   import ControlSlider from './ControlSlider.svelte';
   import Histogram from './Histogram.svelte';
   import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
+  import LayersPanel from './LayersPanel.svelte';
+  import BrushOptionsBar from './BrushOptionsBar.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
   import { onDestroy, untrack } from 'svelte';
@@ -42,6 +48,7 @@
     onInpaint?: InpaintHook;
     onRemoveBackground?: RemoveBackgroundHook;
     aiHooks?: ImageEditorAIHooks;
+    fit?: ImageEditorFit;
   }
 
   let {
@@ -54,6 +61,7 @@
     onInpaint,
     onRemoveBackground,
     aiHooks,
+    fit,
   }: Props = $props();
 
   const internalEditor = createReactiveImageEditor();
@@ -65,11 +73,15 @@
 
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
-  let activeTab = $state<'crop' | 'adjust' | 'select' | 'annotate' | 'depth' | 'ai'>('crop');
+  let activeTab = $state<'crop' | 'adjust' | 'layers' | 'paint' | 'select' | 'annotate' | 'depth' | 'ai'>('crop');
 
   // Selection tools (magic wand, marquees, lasso): options bar state and the pointer gesture.
   let selectionOptions = $state<SelectionToolOptions>({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
   const selectionGesture = $derived(new SelectionGesture(editor.controller, () => selectionOptions));
+  // Paint tools (Move, Brush, Eraser): the pointer gesture and the brush cursor.
+  const paintGesture = $derived(new PaintGesture(editor.controller));
+  let brushCursor: ImagePoint | null = null;
+  let paintError = $state<string | null>(null);
   let selectionDraft = $state.raw<ImagePoint[] | null>(null);
   let selectionError = $state<string | null>(null);
   let activeCropRatio = $state<number | null>(null);
@@ -81,6 +93,9 @@
   let isInpainting = $state(false);
   let aiError = $state<string | null>(null);
   let aiSuccess = $state<string | null>(null);
+  /** Where AI results go: by layer count (auto), a new layer / mask, or replacing the Background. */
+  let aiTarget = $state<'auto' | 'new-layer' | 'replace'>('auto');
+  const aiOptions = $derived(aiTarget === 'auto' ? {} : { target: aiTarget });
 
   const effectiveOnInpaint = $derived(onInpaint || aiHooks?.onInpaint);
   const effectiveOnRemoveBg = $derived(onRemoveBackground || aiHooks?.onRemoveBackground);
@@ -94,12 +109,12 @@
     aiSuccess = null;
     isRemovingBg = true;
     try {
-      // AI hooks work on the untransformed source image (natural pixels); crop, rotation,
-      // adjustments and annotations stay non-destructive and are re-applied on top.
-      const imageDataUrl = await editor.toSourceDataURL();
+      // AI hooks work in natural pixels (no crop or rotation): the source when the result replaces
+      // it, the composite of the layers when the result becomes a layer or mask.
+      const imageDataUrl = await editor.controller.toAIInputDataURL(aiOptions);
       const result = await effectiveOnRemoveBg({ imageDataUrl });
       if (typeof result === 'string') {
-        await editor.applyBackgroundRemovedImage(result);
+        await editor.applyBackgroundRemovedImage(result, aiOptions);
         aiSuccess = 'Background removed successfully!';
       } else {
         aiSuccess = 'Background removal complete.';
@@ -125,7 +140,7 @@
     isInpainting = true;
     try {
       // Source image and mask share natural image space so they line up exactly.
-      const imageDataUrl = await editor.toSourceDataURL();
+      const imageDataUrl = await editor.controller.toAIInputDataURL(aiOptions);
       const maskDataUrl = await editor.toMaskDataURL({
         useAnnotations: inpaintMaskMode === 'annotations',
         useCrop: inpaintMaskMode === 'crop',
@@ -137,7 +152,7 @@
         cropBox: inpaintMaskMode === 'crop' ? editor.state.crop : null,
       });
       if (typeof result === 'string') {
-        await editor.applyInpaintedImage(result);
+        await editor.applyInpaintedImage(result, aiOptions);
         aiSuccess = 'Inpainting applied successfully!';
       } else {
         aiSuccess = 'Inpainting complete.';
@@ -193,15 +208,66 @@
     await editor.controller.render(canvasEl, {
       viewportWidth: vpWidth,
       viewportHeight: vpHeight,
+      fit,
       showCropOverlay: activeTab === 'crop',
       showSelectionOverlay: true,
       interactive: true,
       draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,
       draftSelectionPath: selectionDraft,
+      brushCursor:
+        activeTab === 'paint' && brushCursor && editor.controller.getState().activeTool !== 'move'
+          ? { ...brushCursor, diameter: editor.controller.getState().paint.brush.size }
+          : null,
     });
   }
 
+  // Paint tools: pointer events (coalesced samples, pointer capture) into strokes and moves.
+  function paintSamples(e: PointerEvent) {
+    const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [];
+    const list = events.length ? events : [e];
+    const rect = canvasEl!.getBoundingClientRect();
+    const sx = rect.width > 0 ? canvasEl!.width / rect.width : 1;
+    const sy = rect.height > 0 ? canvasEl!.height / rect.height : 1;
+    const s = editor.controller.getState();
+    return list.map((ev) => ({
+      ...canvasToImagePoint({ x: (ev.clientX - rect.left) * sx, y: (ev.clientY - rect.top) * sy }, s, canvasEl!.width, canvasEl!.height, false),
+      pressure: pointerPressure(ev),
+    }));
+  }
+  function handlePaintPointerDown(e: PointerEvent) {
+    if (activeTab !== 'paint' || e.button !== 0 || !canvasEl) return;
+    e.preventDefault();
+    try {
+      canvasEl.setPointerCapture?.(e.pointerId);
+    } catch {
+      // Synthetic events have no active pointer to capture.
+    }
+    paintError = paintGesture.down(paintSamples(e)[0]);
+  }
+  function handlePaintPointerMove(e: PointerEvent) {
+    if (activeTab !== 'paint' || !canvasEl) return;
+    const samples = paintSamples(e);
+    brushCursor = samples[samples.length - 1] ?? null;
+    if (paintGesture.active) paintGesture.moveTo(samples);
+    else void renderCanvas();
+  }
+  function handlePaintPointerUp() {
+    if (activeTab !== 'paint' || !paintGesture.active) return;
+    paintGesture.up();
+    if (paintGesture.error) paintError = paintGesture.error;
+  }
+
+  $effect(() => {
+    if (activeTab !== 'paint' || typeof window === 'undefined') return;
+    const c = editor.controller;
+    const onKey = (e: KeyboardEvent) => {
+      if (handlePaintShortcut(c, e)) e.preventDefault();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
   $effect(() => {
     // Re-render when editor state or activeTab changes
     void editor.state;
@@ -659,6 +725,30 @@
       >
         Adjustments
       </button>
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'layers';
+          editor.setTool('select');
+        }}
+        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'layers'
+          ? 'bg-indigo-600 text-white shadow'
+          : 'text-slate-400 hover:text-slate-200'}"
+      >
+        Layers
+      </button>
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'paint';
+          editor.setTool('brush');
+        }}
+        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'paint'
+          ? 'bg-indigo-600 text-white shadow'
+          : 'text-slate-400 hover:text-slate-200'}"
+      >
+        Paint
+      </button>
       <button
         type="button"
         onclick={() => {
@@ -798,7 +888,12 @@
         onmousemove={handleMouseMove}
         onmouseup={handleMouseUp}
         onmouseleave={handleMouseUp}
-        class="absolute inset-0 w-full h-full block"
+        onpointerdown={handlePaintPointerDown}
+        onpointermove={handlePaintPointerMove}
+        onpointerup={handlePaintPointerUp}
+        onpointercancel={() => paintGesture.cancel()}
+        data-testid="image-editor-canvas"
+        class="absolute inset-0 w-full h-full block {activeTab === 'paint' ? 'touch-none cursor-crosshair' : ''}"
       ></canvas>
     </div>
 
@@ -978,6 +1073,26 @@
       {/if}
 
       <!-- TAB 3: ANNOTATIONS -->
+      {#if activeTab === 'layers'}
+        <div class="flex flex-col gap-3 text-xs">
+          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Layers</span>
+          <LayersPanel controller={editor.controller} />
+        </div>
+      {/if}
+
+      {#if activeTab === 'paint'}
+        <div class="flex flex-col gap-3 text-xs">
+          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Paint</span>
+          <BrushOptionsBar controller={editor.controller} />
+          {#if paintError}
+            <p role="alert" class="text-rose-400" data-testid="paint-error">{paintError}</p>
+          {/if}
+          <div class="border-t border-slate-700/60 pt-3">
+            <LayersPanel controller={editor.controller} />
+          </div>
+        </div>
+      {/if}
+
       {#if activeTab === 'annotate'}
         <div class="flex flex-col gap-3 text-xs">
           <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
@@ -1227,6 +1342,18 @@
       <!-- TAB 5: AI TOOLS / INPAINTING & BACKGROUND REMOVAL -->
       {#if activeTab === 'ai'}
         <div class="flex flex-col gap-4 text-xs">
+          <label class="flex items-center justify-between gap-2 text-slate-300">
+            <span>Results go to</span>
+            <select
+              aria-label="AI result target"
+              bind:value={aiTarget}
+              class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1"
+            >
+              <option value="auto">{editor.controller.isMultiLayer ? 'Auto (new layer)' : 'Auto (replace image)'}</option>
+              <option value="new-layer">New layer / mask</option>
+              <option value="replace">Replace image</option>
+            </select>
+          </label>
           <!-- Background Removal Section -->
           <div class="p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5">
             <div class="flex items-center justify-between">

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

@@ -1,4 +1,4 @@
-import type { ExportOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks } from '@pixerate/editor/image-editor';
+import type { ExportOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ImageEditorFit } from '@pixerate/editor/image-editor';
 import { type ReactiveImageEditor } from './imageEditorState.svelte.js';
 interface Props {
     editor?: ReactiveImageEditor;
@@ -10,6 +10,7 @@ interface Props {
     onInpaint?: InpaintHook;
     onRemoveBackground?: RemoveBackgroundHook;
     aiHooks?: ImageEditorAIHooks;
+    fit?: ImageEditorFit;
 }
 declare const ImageEditor: import("svelte").Component<Props, {}, "">;
 type ImageEditor = ReturnType<typeof ImageEditor>;

package/dist/image-editor/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAqBzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AA8iCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AA0BzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAupCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/LayersPanel.svelte

@@ -0,0 +1,394 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer, LayerMenuAction, LayerPanelRow, PixelBuffer } from '@pixerate/editor/image-editor';
+  import {
+    BLEND_MODES,
+    PSD_FILE_ACCEPT,
+    downloadPsd,
+    dropPlacement,
+    dropZone,
+    layerBadge,
+    layerMenu,
+    layerPanelRows,
+    openPsdFile,
+    runLayerMenuAction,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in px (default 32). */
+    thumbnailSize?: number;
+    /** Show Open PSD / Export PSD (default true). */
+    psd?: boolean;
+    /** Base name of exported PSD files (default `image`). */
+    psdFileName?: string;
+    class?: string;
+  }
+
+  let { controller, thumbnailSize = 32, psd = true, psdFileName = 'image', class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    // `subscribe` calls the listener at once: untracked, or the effect would depend on `tick`.
+    return untrack(() => c.subscribe(() => tick++));
+  });
+
+  const snapshot = $derived.by(() => {
+    void tick;
+    const s = controller.getState();
+    return {
+      layers: s.layers,
+      activeLayerId: s.activeLayerId,
+      activeTarget: s.activeTarget,
+      rows: layerPanelRows(s.layers, s.activeLayerId),
+      active: controller.getActiveLayer() ?? null,
+      menu: layerMenu(controller),
+    };
+  });
+
+  let error = $state<string | null>(null);
+  let renaming = $state<string | null>(null);
+  let menu = $state<{ x: number; y: number } | null>(null);
+  let dragId = $state<string | null>(null);
+  /** Warnings of the last PSD open or export. */
+  let psdNotes = $state<string[]>([]);
+  let fileInput = $state<HTMLInputElement | null>(null);
+
+  async function psdTask(fn: () => Promise<string[]>) {
+    try {
+      error = null;
+      psdNotes = await fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  function onPsdFile(e: Event) {
+    const input = e.currentTarget as HTMLInputElement;
+    const file = input.files?.[0];
+    input.value = '';
+    if (file) psdTask(() => openPsdFile(controller, file));
+  }
+  /** Whether the next slider change records an undo step (the first of a drag does, the rest replace it). */
+  let commitNext = true;
+
+  const LOCKS = ['pixels', 'transparency', 'position', 'all'] as const;
+  const iconButton = 'px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40';
+  const rowClass = (active: boolean) =>
+    `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? 'bg-indigo-600/30 ring-1 ring-indigo-500' : 'hover:bg-slate-800'}`;
+
+  function attempt(fn: () => unknown) {
+    try {
+      error = null;
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  async function run(action: LayerMenuAction) {
+    menu = null;
+    error = await runLayerMenuAction(controller, action);
+  }
+
+  function prop(key: 'opacity' | 'fillOpacity', value: number) {
+    const id = snapshot.active?.id;
+    if (!id) return;
+    attempt(() => {
+      controller.setLayerProperties(id, { [key]: value }, commitNext);
+      commitNext = false;
+    });
+  }
+
+  function onDrop(e: DragEvent, row: LayerPanelRow) {
+    e.preventDefault();
+    const id = e.dataTransfer?.getData('text/x-pixerate-layer') || dragId;
+    dragId = null;
+    if (!id) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const fraction = rect.height ? (e.clientY - rect.top) / rect.height : 0.5;
+    const placement = dropPlacement(snapshot.layers, id, row.layer.id, dropZone(fraction, row.layer.type === 'group'));
+    if (placement) attempt(() => controller.moveLayer(id, placement));
+  }
+
+  const locked = (layer: ImageLayer) => Boolean(layer.locks?.all || layer.locks?.pixels || layer.locks?.position || layer.locks?.transparency);
+  const fillOf = (layer: ImageLayer) => (layer.type === 'pixel' ? layer.fillOpacity ?? 1 : 1);
+
+  /** Draws RGBA pixels into a canvas (nothing without a 2D context). */
+  function paint(canvas: HTMLCanvasElement, pixels: PixelBuffer | null) {
+    const draw = (px: PixelBuffer | null) => {
+      const ctx = canvas.getContext('2d');
+      if (!ctx || !px || typeof ctx.createImageData !== 'function') return;
+      canvas.width = px.width;
+      canvas.height = px.height;
+      const img = ctx.createImageData(px.width, px.height);
+      img.data.set(px.data as ArrayLike<number>);
+      ctx.putImageData(img, 0, 0);
+    };
+    draw(pixels);
+    return { update: draw };
+  }
+
+  function thumb(layer: ImageLayer): PixelBuffer | null {
+    void tick;
+    return layer.type === 'pixel' ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
+  }
+  function maskThumb(layer: ImageLayer): PixelBuffer | null {
+    void tick;
+    return layer.mask && !layer.mask.source ? controller.getLayerThumbnail(layer.id, { maxSide: 64, mask: true }) : null;
+  }
+  const thumbClass = (selected: boolean) =>
+    `shrink-0 rounded bg-slate-800 ${selected ? 'ring-2 ring-white' : 'ring-1 ring-slate-700'}`;
+</script>
+
+<svelte:window onclick={() => menu && (menu = null)} />
+
+<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="layers-panel">
+  <div class="flex flex-wrap items-center gap-1" role="toolbar" aria-label="Layer actions">
+    <button type="button" class={iconButton} onclick={() => run('new-layer')}>New Layer</button>
+    <button type="button" class={iconButton} onclick={() => run('new-group')}>New Group</button>
+    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('duplicate')}>Duplicate</button>
+    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('add-mask')}>Add Mask</button>
+    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('delete')}>Delete</button>
+    <button
+      type="button"
+      class={iconButton}
+      aria-label="Layer menu"
+      aria-haspopup="menu"
+      onclick={(e) => {
+        e.stopPropagation();
+        const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        menu = menu ? null : { x: r.left, y: r.bottom };
+      }}>⋯</button>
+    {#if psd}
+      <button type="button" class={iconButton} onclick={() => fileInput?.click()}>Open PSD…</button>
+      <button type="button" class={iconButton} onclick={() => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings)}>Export PSD</button>
+      <input
+        bind:this={fileInput}
+        type="file"
+        accept={PSD_FILE_ACCEPT}
+        class="hidden"
+        data-testid="psd-file-input"
+        aria-label="Open a PSD file"
+        onchange={onPsdFile} />
+    {/if}
+  </div>
+  {#if psdNotes.length > 0}
+    <ul class="rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5" data-testid="psd-warnings" aria-label="PSD warnings">
+      {#each psdNotes as n (n)}
+        <li>{n}</li>
+      {/each}
+      <li><button type="button" class="underline" onclick={() => (psdNotes = [])}>Dismiss</button></li>
+    </ul>
+  {/if}
+
+  {#if snapshot.active}
+    {@const active = snapshot.active}
+    <div class="grid grid-cols-2 gap-x-2 gap-y-1 items-center" data-testid="layer-properties">
+      <label class="flex flex-col gap-0.5">
+        <span class="text-slate-400">Opacity {Math.round(active.opacity * 100)}%</span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          aria-label="Layer opacity"
+          value={Math.round(active.opacity * 100)}
+          onpointerdown={() => (commitNext = true)}
+          onpointerup={() => (commitNext = true)}
+          onkeydown={() => (commitNext = true)}
+          oninput={(e) => prop('opacity', Number((e.target as HTMLInputElement).value) / 100)}
+          class="accent-indigo-500"
+        />
+      </label>
+      <label class="flex flex-col gap-0.5">
+        <span class="text-slate-400">Fill {Math.round(fillOf(active) * 100)}%</span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          aria-label="Layer fill"
+          disabled={active.type !== 'pixel'}
+          value={Math.round(fillOf(active) * 100)}
+          onpointerdown={() => (commitNext = true)}
+          onpointerup={() => (commitNext = true)}
+          onkeydown={() => (commitNext = true)}
+          oninput={(e) => prop('fillOpacity', Number((e.target as HTMLInputElement).value) / 100)}
+          class="accent-indigo-500 disabled:opacity-40"
+        />
+      </label>
+      <select
+        aria-label="Layer blend mode"
+        class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1"
+        value={active.blend}
+        onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { blend: (e.target as HTMLSelectElement).value as never }))}
+      >
+        {#if active.type === 'group'}<option value="pass-through">Pass Through</option>{/if}
+        {#each BLEND_MODES as m (m.id)}
+          <option value={m.id}>{m.label}</option>
+        {/each}
+      </select>
+      <label class="flex items-center gap-1.5 text-slate-300">
+        <input
+          type="checkbox"
+          aria-label="Clip to layer below"
+          checked={Boolean(active.clipped)}
+          onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { clipped: (e.target as HTMLInputElement).checked }))}
+          class="accent-indigo-500"
+        />
+        Clip to below
+      </label>
+      <div class="col-span-2 flex flex-wrap gap-2 text-slate-400" role="group" aria-label="Layer locks">
+        {#each LOCKS as k (k)}
+          <label class="flex items-center gap-1">
+            <input
+              type="checkbox"
+              aria-label={`Lock ${k}`}
+              checked={Boolean(active.locks?.[k])}
+              onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { locks: { ...active.locks, [k]: (e.target as HTMLInputElement).checked } }))}
+              class="accent-indigo-500"
+            />
+            {k}
+          </label>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <ul class="flex flex-col gap-0.5" role="tree" aria-label="Layers">
+    {#each snapshot.rows as row (row.layer.id)}
+      {@const layer = row.layer}
+      <li
+        role="treeitem"
+        aria-selected={row.active}
+        aria-level={row.depth + 1}
+        data-layer-id={layer.id}
+        draggable={!layer.locks?.all}
+        ondragstart={(e) => {
+          e.dataTransfer?.setData('text/x-pixerate-layer', layer.id);
+          dragId = layer.id;
+        }}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={(e) => onDrop(e, row)}
+        tabindex="0"
+        onclick={() => attempt(() => controller.setActiveLayer(layer.id, 'pixels'))}
+        onkeydown={(e) => {
+          if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            attempt(() => controller.setActiveLayer(layer.id, 'pixels'));
+          }
+        }}
+        oncontextmenu={(e) => {
+          e.preventDefault();
+          controller.setActiveLayer(layer.id, snapshot.activeLayerId === layer.id ? snapshot.activeTarget : 'pixels');
+          menu = { x: e.clientX, y: e.clientY };
+        }}
+        class={rowClass(row.active)}
+        style="padding-left: {6 + row.depth * 14}px"
+      >
+        <button
+          type="button"
+          aria-label={layer.visible ? `Hide ${row.label}` : `Show ${row.label}`}
+          aria-pressed={layer.visible}
+          class="w-4 text-center text-slate-300"
+          onclick={(e) => {
+            e.stopPropagation();
+            attempt(() => controller.setLayerProperties(layer.id, { visible: !layer.visible }));
+          }}>{layer.visible ? '●' : '○'}</button>
+        {#if layer.type === 'group'}
+          <button
+            type="button"
+            aria-label={layer.collapsed ? `Expand ${row.label}` : `Collapse ${row.label}`}
+            class="w-3 text-slate-400"
+            onclick={(e) => {
+              e.stopPropagation();
+              attempt(() => controller.setLayerProperties(layer.id, { collapsed: !(layer.type === 'group' && layer.collapsed) }));
+            }}>{layer.collapsed ? '▸' : '▾'}</button>
+        {/if}
+        {#if row.clipped}<span class="text-slate-500" aria-label="Clipped">↳</span>{/if}
+        {#if layer.type === 'pixel'}
+          <canvas
+            use:paint={thumb(layer)}
+            aria-label={`${row.label} pixels`}
+            style="width: {thumbnailSize}px; height: {thumbnailSize}px"
+            class={thumbClass(row.active && snapshot.activeTarget === 'pixels' && Boolean(layer.mask))}
+          ></canvas>
+        {:else}
+          <span
+            class="shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700"
+            style="width: {thumbnailSize}px; height: {thumbnailSize}px">{layerBadge(layer)}</span>
+        {/if}
+        {#if layer.mask}
+          <canvas
+            use:paint={maskThumb(layer)}
+            role="button"
+            tabindex="0"
+            aria-label={`${row.label} mask${layer.mask.enabled === false ? ' (disabled)' : ''}`}
+            data-testid="layer-mask-thumbnail"
+            style="width: {thumbnailSize}px; height: {thumbnailSize}px"
+            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'));
+            }}
+          ></canvas>
+        {/if}
+        {#if renaming === layer.id}
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            autofocus
+            aria-label="Layer name"
+            value={layer.name || row.label}
+            class="flex-1 min-w-0 bg-slate-900 border border-slate-600 rounded px-1"
+            onclick={(e) => e.stopPropagation()}
+            onblur={(e) => {
+              const v = (e.target as HTMLInputElement).value;
+              renaming = null;
+              if (v.trim() && v !== layer.name) attempt(() => controller.setLayerProperties(layer.id, { name: v }));
+            }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+              if (e.key === 'Escape') renaming = null;
+            }}
+          />
+        {:else}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <span
+            class="flex-1 min-w-0 truncate {layer.visible ? '' : 'text-slate-500'}"
+            ondblclick={(e) => {
+              e.stopPropagation();
+              renaming = layer.id;
+            }}>{row.label}</span>
+        {/if}
+        {#if locked(layer)}<span aria-label="Locked" class="text-slate-400">🔒</span>{/if}
+        {#if layer.blend !== 'normal' && layer.blend !== 'pass-through'}<span class="text-[9px] text-slate-500">{layer.blend}</span>{/if}
+      </li>
+    {/each}
+  </ul>
+
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+
+  {#if menu}
+    <div
+      role="menu"
+      tabindex="-1"
+      aria-label="Layer menu"
+      class="fixed z-50 min-w-44 rounded border border-slate-700 bg-slate-900 py-1 shadow-xl"
+      style="left: {menu.x}px; top: {menu.y}px"
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => e.key === 'Escape' && (menu = null)}
+    >
+      {#each snapshot.menu as item (item.action)}
+        <button
+          type="button"
+          role="menuitem"
+          disabled={!item.enabled}
+          class="block w-full px-3 py-1 text-left hover:bg-slate-800 disabled:opacity-40"
+          onclick={() => run(item.action)}>{item.label}</button>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in px (default 32). */
+    thumbnailSize?: number;
+    /** Show Open PSD / Export PSD (default true). */
+    psd?: boolean;
+    /** Base name of exported PSD files (default `image`). */
+    psdFileName?: string;
+    class?: string;
+}
+declare const LayersPanel: import("svelte").Component<Props, {}, "">;
+type LayersPanel = ReturnType<typeof LayersPanel>;
+export default LayersPanel;
+//# sourceMappingURL=LayersPanel.svelte.d.ts.map

package/dist/image-editor/LayersPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAA2D,MAAM,+BAA+B,CAAC;AAgBlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsQH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -101,6 +101,18 @@
         <input type="checkbox" checked={options.sampleMerged} onchange={(e) => set({ sampleMerged: (e.currentTarget as HTMLInputElement).checked })} />
         Sample adjusted image
       </label>
+      <label class="flex items-center gap-2 text-slate-300">
+        Sample
+        <select
+          aria-label="Sample from"
+          value={options.sample ?? 'composite'}
+          onchange={(e) => set({ sample: (e.currentTarget as HTMLSelectElement).value as 'composite' | 'active-layer' })}
+          class="bg-slate-800 border border-slate-700 rounded px-1 py-0.5"
+        >
+          <option value="composite">All layers</option>
+          <option value="active-layer">Active layer</option>
+        </select>
+      </label>
     </div>
   {/if}
   <label class="flex items-center gap-2 text-slate-300">

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/SelectionOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EAEb,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,eAAe,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SelectionOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/SelectionOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EAEb,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,eAAe,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4GH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { ImageEditorController, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
+import { ImageEditorController, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
 export declare function createReactiveImageEditor(options?: ImageEditorOptions): {
     readonly controller: ImageEditorController;
     readonly state: ImageEditorState;
@@ -40,6 +40,7 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
     setZoom(zoom: number): void;
     setPan(pan: ImagePoint): void;
     setComparing(comparing: boolean): void;
+    setFit(fit: ImageEditorFit): void;
     loadImage(src: string | HTMLImageElement): Promise<void>;
     toDataURL(opts?: ExportOptions): Promise<string>;
     toBlob(opts?: ExportOptions): Promise<Blob>;
@@ -54,8 +55,10 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
         useCrop?: boolean;
     }): Promise<string>;
     toSourceDataURL(opts?: Pick<ExportOptions, "format" | "quality">): Promise<string>;
-    applyInpaintedImage(newDataUrl: string): Promise<void>;
-    applyBackgroundRemovedImage(newDataUrl: string): Promise<void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result goes to a new layer. */
+    applyInpaintedImage(newDataUrl: string, options?: AIResultOptions): Promise<string | void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result's alpha masks the active layer. */
+    applyBackgroundRemovedImage(newDataUrl: string, options?: AIResultOptions): Promise<string | void>;
     /** Stops syncing controller state; call when the editor is no longer used. */
     destroy(): void;
 };

package/dist/image-editor/imageEditorState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;mBAGhB,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;oCAGhC,MAAM;4CAGE,MAAM;IAG9C,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE"}
+{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;gBAGnB,cAAc;mBAGX,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAGhE,kGAAkG;oCAClE,MAAM,YAAY,eAAe;IAGjE,6GAA6G;4CACrE,MAAM,YAAY,eAAe;IAGzE,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE"}

package/dist/image-editor/imageEditorState.svelte.js

@@ -129,6 +129,9 @@ export function createReactiveImageEditor(options = {}) {
         setComparing(comparing) {
             controller.setComparing(comparing);
         },
+        setFit(fit) {
+            controller.setFit(fit);
+        },
         loadImage(src) {
             return controller.loadImage(src);
         },
@@ -153,11 +156,13 @@ export function createReactiveImageEditor(options = {}) {
         toSourceDataURL(opts) {
             return controller.toSourceDataURL(opts);
         },
-        applyInpaintedImage(newDataUrl) {
-            return controller.applyInpaintedImage(newDataUrl);
+        /** In documents with several layers (or `target: 'new-layer'`) the result goes to a new layer. */
+        applyInpaintedImage(newDataUrl, options) {
+            return controller.applyInpaintedImage(newDataUrl, options);
         },
-        applyBackgroundRemovedImage(newDataUrl) {
-            return controller.applyBackgroundRemovedImage(newDataUrl);
+        /** In documents with several layers (or `target: 'new-layer'`) the result's alpha masks the active layer. */
+        applyBackgroundRemovedImage(newDataUrl, options) {
+            return controller.applyBackgroundRemovedImage(newDataUrl, options);
         },
         /** Stops syncing controller state; call when the editor is no longer used. */
         destroy() {

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

@@ -6,6 +6,8 @@ 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 LayersPanelComponent from "./LayersPanel.svelte";
+import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
@@ -13,6 +15,8 @@ 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 LayersPanel } from './LayersPanel.svelte';
+export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
@@ -21,5 +25,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 LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
+export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds, type MosaicRegion, type MosaicImageDataLike } from '@pixerate/editor/image-editor';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEnF,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEnF,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,MAAM,+BAA+B,CAAC"}

package/dist/image-editor/index.js

@@ -5,5 +5,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 LayersPanel } from './LayersPanel.svelte';
+export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.67.0",
+  "version": "0.69.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -131,7 +131,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.88.0"
+    "@pixerate/editor": "0.90.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",