@pixerate/editor-svelte 0.67.0 → 0.68.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);
@@ -193,15 +205,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 +722,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 +885,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 +1070,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]">

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;AA4oCH,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,340 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer, LayerMenuAction, LayerPanelRow, PixelBuffer } from '@pixerate/editor/image-editor';
+  import { BLEND_MODES, dropPlacement, dropZone, layerBadge, layerMenu, layerPanelRows, runLayerMenuAction } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in px (default 32). */
+    thumbnailSize?: number;
+    class?: string;
+  }
+
+  let { controller, thumbnailSize = 32, 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);
+  /** 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>
+  </div>
+
+  {#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,11 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** Thumbnail size in px (default 32). */
+    thumbnailSize?: number;
+    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;AAKlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsOH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,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 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>;

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,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;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"}

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);
         },

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.68.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.89.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",