@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/image-editor/ImageEditor.svelte

@@ -18,7 +18,17 @@
     hitTestAnnotation,
     normalizeProcessVersion,
     LATEST_PROCESS_VERSION,
+    IMAGE_ADJUSTMENT_CONTROLS,
+    readAdjustmentControls,
+    DEFAULT_SELECTION_TOOL_OPTIONS,
+    SelectionGesture,
+    type SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
+  import ControlSlider from './ControlSlider.svelte';
+  import Histogram from './Histogram.svelte';
+  import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
+  import SelectionOptionsBar from './SelectionOptionsBar.svelte';
+  import RefineEdgePanel from './RefineEdgePanel.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
 
@@ -55,7 +65,13 @@
 
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
-  let activeTab = $state<'crop' | 'adjust' | 'annotate' | 'depth' | 'ai'>('crop');
+  let activeTab = $state<'crop' | 'adjust' | '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));
+  let selectionDraft = $state.raw<ImagePoint[] | null>(null);
+  let selectionError = $state<string | null>(null);
   let activeCropRatio = $state<number | null>(null);
 
   // AI state
@@ -182,6 +198,7 @@
       interactive: true,
       draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,
+      draftSelectionPath: selectionDraft,
     });
   }
 
@@ -239,6 +256,13 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
+      void gesture.begin(imgPt, e).then(() => (selectionError = gesture.error));
+      return;
+    }
+
     if (activeTab === 'crop') {
       const activeCrop = draftCrop || editor.state.crop || {
         x: 0,
@@ -311,6 +335,15 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false))) {
+        selectionDraft = gesture.draftPath;
+        renderCanvas();
+      }
+      return;
+    }
+
     if (activeTab === 'crop') {
       if (cropDragInfo) {
         const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, true);
@@ -463,6 +496,16 @@
     if (!canvasEl) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (activeTab === 'select') {
+      const gesture = selectionGesture;
+      if (gesture.active) {
+        gesture.end(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false), e);
+        selectionDraft = null;
+        renderCanvas();
+      }
+      return;
+    }
+
     if (activeTab === 'crop') {
       if (cropDragInfo) {
         if (draftCrop && draftCrop.width >= 20 && draftCrop.height >= 20) {
@@ -616,6 +659,18 @@
       >
         Adjustments
       </button>
+      <button
+        type="button"
+        onclick={() => {
+          activeTab = 'select';
+          editor.setTool('select');
+        }}
+        class="px-3 py-1.5 rounded-md font-medium transition-colors {activeTab === 'select'
+          ? 'bg-indigo-600 text-white shadow'
+          : 'text-slate-400 hover:text-slate-200'}"
+      >
+        Select & Mask
+      </button>
       <button
         type="button"
         onclick={() => {
@@ -886,150 +941,37 @@
             </button>
           </div>
 
-          <!-- Brightness -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Brightness</span>
-              <span class="font-mono">{editor.state.adjustments.brightness}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.brightness}
-              oninput={(e) => editor.setAdjustments({ brightness: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Contrast -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Contrast</span>
-              <span class="font-mono">{editor.state.adjustments.contrast}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.contrast}
-              oninput={(e) => editor.setAdjustments({ contrast: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Saturation -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Saturation</span>
-              <span class="font-mono">{editor.state.adjustments.saturation}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.saturation}
-              oninput={(e) => editor.setAdjustments({ saturation: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Exposure -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Exposure</span>
-              <span class="font-mono">{editor.state.adjustments.exposure}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.exposure}
-              oninput={(e) => editor.setAdjustments({ exposure: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Temperature / Warmth -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Warmth / Temperature</span>
-              <span class="font-mono">{editor.state.adjustments.temperature}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.temperature}
-              oninput={(e) => editor.setAdjustments({ temperature: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
+          <Histogram histogram={editor.histogram} />
 
-          <!-- Tint (process 2 white balance) -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Tint</span>
-              <span class="font-mono">{editor.state.adjustments.tint ?? 0}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              aria-label="Tint"
-              disabled={legacyProcess}
-              value={editor.state.adjustments.tint ?? 0}
-              oninput={(e) => editor.setAdjustments({ tint: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500 disabled:opacity-40"
+          {#each IMAGE_ADJUSTMENT_CONTROLS as spec (spec.id)}
+            <ControlSlider
+              {spec}
+              value={readAdjustmentControls(editor.state.adjustments)[spec.id]}
+              disabled={spec.requiresProcess !== undefined && legacyProcess}
+              onchange={(v) => editor.setAdjustments({ [spec.id]: v })}
             />
-          </div>
-
-          {#if legacyProcess}
-            <div
-              class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
-              data-testid="image-editor-process-notice"
-            >
-              <span>Legacy rendering (process 1). Tint needs the current process.</span>
-              <button
-                type="button"
-                onclick={() => editor.upgradeProcess()}
-                class="shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30"
+            {#if spec.id === 'tint' && legacyProcess}
+              <div
+                class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
+                data-testid="image-editor-process-notice"
               >
-                Update
-              </button>
-            </div>
-          {/if}
-
-          <!-- Blur -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Blur</span>
-              <span class="font-mono">{editor.state.adjustments.blur}px</span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="30"
-              value={editor.state.adjustments.blur}
-              oninput={(e) => editor.setAdjustments({ blur: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
+                <span>Legacy rendering (process 1). Tint needs the current process.</span>
+                <button
+                  type="button"
+                  onclick={() => editor.upgradeProcess()}
+                  class="shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30"
+                >
+                  Update
+                </button>
+              </div>
+            {/if}
+          {/each}
 
-          <!-- Opacity -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Opacity</span>
-              <span class="font-mono">{Math.round(editor.state.adjustments.opacity * 100)}%</span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              value={editor.state.adjustments.opacity}
-              oninput={(e) => editor.setAdjustments({ opacity: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
+          <div class="border-t border-slate-700/60 pt-3">
+            <AdjustmentLayersPanel
+              controller={editor.controller}
+              layers={editor.state.adjustments.layers}
+              histogram={editor.histogram}
             />
           </div>
         </div>
@@ -1261,6 +1203,27 @@
         </div>
       {/if}
 
+      <!-- SELECT & MASK: selection tools, refine edge, layer masks -->
+      {#if activeTab === 'select'}
+        <div class="flex flex-col gap-4 text-xs">
+          <SelectionOptionsBar
+            controller={editor.controller}
+            options={selectionOptions}
+            onOptionsChange={(next) => (selectionOptions = next)}
+            selection={editor.state.selection ?? null}
+            quickMask={Boolean(editor.state.quickMask)}
+          />
+          {#if selectionError}
+            <p role="alert" class="text-rose-400">{selectionError}</p>
+          {/if}
+          <RefineEdgePanel
+            controller={editor.controller}
+            selection={editor.state.selection ?? null}
+            layers={editor.state.adjustments.layers}
+          />
+        </div>
+      {/if}
+
       <!-- TAB 5: AI TOOLS / INPAINTING & BACKGROUND REMOVAL -->
       {#if activeTab === 'ai'}
         <div class="flex flex-col gap-4 text-xs">

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

package/dist/image-editor/RefineEdgePanel.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type {
+    AdjustmentKind,
+    AdjustmentLayer,
+    ImageEditorController,
+    RefineEdgeParams,
+    SelectionMask,
+  } from '@pixerate/editor/image-editor';
+  import {
+    ADJUSTMENT_KINDS,
+    REFINE_EDGE_CONTROLS,
+    adjustmentKindLabel,
+    layerMaskFromSelection,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`). Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    class?: string;
+  }
+
+  let { controller, selection, layers: layersProp, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const sel = $derived.by(() => {
+    void tick;
+    return selection === undefined ? controller.getSelection() : selection;
+  });
+  const list = $derived.by(() => {
+    void tick;
+    return layersProp ?? controller.getAdjustmentLayers();
+  });
+
+  const DEFAULT_PARAMS: Required<RefineEdgeParams> = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
+  let params = $state<Required<RefineEdgeParams>>({ ...DEFAULT_PARAMS });
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+  let layerId = $state('');
+  let newKind = $state<AdjustmentKind>('hueSaturation');
+  const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
+
+  async function refine() {
+    busy = true;
+    error = null;
+    try {
+      await controller.refineSelection({ ...params });
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    } finally {
+      busy = false;
+    }
+  }
+
+  function newMaskedLayer() {
+    const s = controller.getSelection();
+    if (s) layerId = controller.addAdjustmentLayer({ kind: newKind, mask: layerMaskFromSelection(s) });
+  }
+
+  const button =
+    'px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40';
+</script>
+
+<div data-testid="refine-edge-panel" class="flex flex-col gap-3 text-xs {className}">
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Refine Edge</span>
+  {#each REFINE_EDGE_CONTROLS as c (c.id)}
+    <label class="flex flex-col gap-1">
+      <span class="flex justify-between text-slate-400">
+        <span>{c.label}</span>
+        <span class="font-mono">{params[c.id]}{c.unit}</span>
+      </span>
+      <input
+        type="range"
+        min={c.min}
+        max={c.max}
+        step={c.step}
+        aria-label={c.label}
+        value={params[c.id]}
+        oninput={(e) => (params = { ...params, [c.id]: Number((e.currentTarget as HTMLInputElement).value) })}
+        class="w-full accent-indigo-500"
+      />
+    </label>
+  {/each}
+  <label class="flex items-center gap-2 text-slate-300">
+    <input
+      type="checkbox"
+      checked={params.smartRadius}
+      onchange={(e) => (params = { ...params, smartRadius: (e.currentTarget as HTMLInputElement).checked })}
+    />
+    Smart Radius
+  </label>
+  <div class="flex gap-1">
+    <button type="button" class={button} disabled={!sel || busy} onclick={refine}>Refine Edge</button>
+    <button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
+  </div>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
+  <div class="flex gap-1 items-center">
+    <select
+      aria-label="New masked layer kind"
+      value={newKind}
+      onchange={(e) => (newKind = (e.currentTarget as HTMLSelectElement).value as AdjustmentKind)}
+      class="flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+    >
+      {#each ADJUSTMENT_KINDS as k (k.kind)}
+        <option value={k.kind}>{k.label}</option>
+      {/each}
+    </select>
+    <button type="button" class={button} disabled={!sel} onclick={newMaskedLayer}>New Masked Layer</button>
+  </div>
+  {#if list.length > 0 && target}
+    <div class="flex flex-col gap-2">
+      <select
+        aria-label="Mask layer"
+        value={target.id}
+        onchange={(e) => (layerId = (e.currentTarget as HTMLSelectElement).value)}
+        class="bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+      >
+        {#each list as l (l.id)}
+          <option value={l.id}>{l.name || adjustmentKindLabel(l.kind)}{l.mask ? ' (masked)' : ''}</option>
+        {/each}
+      </select>
+      <div class="flex flex-wrap gap-1">
+        <button type="button" class={button} disabled={!sel} onclick={() => controller.applySelectionAsLayerMask(target.id)}>
+          Mask with Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.selectionFromLayerMask(target.id)}>
+          Load as Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.setAdjustmentLayerMask(target.id, null)}>
+          Remove Mask
+        </button>
+      </div>
+      {#if target.mask}
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Density</span>
+            <span class="font-mono">{Math.round((target.mask.density ?? 1) * 100)}%</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            aria-label="Mask density"
+            value={Math.round((target.mask.density ?? 1) * 100)}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { density: Number((e.currentTarget as HTMLInputElement).value) / 100 })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Mask Feather</span>
+            <span class="font-mono">{target.mask.feather ?? 0}px</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="50"
+            step="0.5"
+            aria-label="Mask feather"
+            value={target.mask.feather ?? 0}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { feather: Number((e.currentTarget as HTMLInputElement).value) })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+      {/if}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { AdjustmentLayer, ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`). Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    class?: string;
+}
+declare const RefineEdgePanel: import("svelte").Component<Props, {}, "">;
+type RefineEdgePanel = ReturnType<typeof RefineEdgePanel>;
+export default RefineEdgePanel;
+//# sourceMappingURL=RefineEdgePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RefineEdgePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/RefineEdgePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAER,eAAe,EACf,qBAAqB,EAErB,aAAa,EACd,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,yFAAyF;IACzF,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4HH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type {
+    ImageEditorController,
+    SelectionMask,
+    SelectionModifyOp,
+    SelectionToolOptions,
+  } from '@pixerate/editor/image-editor';
+  import {
+    SELECTION_MODES,
+    SELECTION_MODE_LABELS,
+    SELECTION_TOOLS,
+    describeSelection,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
+    quickMask?: boolean;
+    class?: string;
+  }
+
+  let { controller, options, onOptionsChange, selection, quickMask, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const sel = $derived.by(() => {
+    void tick;
+    return selection === undefined ? controller.getSelection() : selection;
+  });
+  const qm = $derived.by(() => {
+    void tick;
+    return quickMask ?? Boolean(controller.getState().quickMask);
+  });
+
+  let radius = $state(2);
+
+  const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
+    { op: 'grow', label: 'Grow' },
+    { op: 'shrink', label: 'Shrink' },
+    { op: 'feather', label: 'Feather' },
+    { op: 'border', label: 'Border' },
+    { op: 'smooth', label: 'Smooth' },
+  ];
+
+  function set(patch: Partial<SelectionToolOptions>) {
+    onOptionsChange({ ...options, ...patch });
+  }
+
+  const btn = (on: boolean) =>
+    `px-2 py-1 rounded-md border text-[11px] transition-colors ${
+      on ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-950 border-slate-800 text-slate-300 hover:text-white'
+    }`;
+</script>
+
+<div data-testid="selection-options-bar" class="flex flex-col gap-3 text-xs {className}">
+  <div role="group" aria-label="Selection tool" class="flex flex-wrap gap-1">
+    {#each SELECTION_TOOLS as t (t.id)}
+      <button type="button" aria-pressed={options.tool === t.id} class={btn(options.tool === t.id)} onclick={() => set({ tool: t.id })}>
+        {t.label}
+      </button>
+    {/each}
+  </div>
+  <div role="group" aria-label="Selection mode" class="flex flex-wrap gap-1">
+    {#each SELECTION_MODES as m (m)}
+      <button type="button" aria-pressed={options.mode === m} class={btn(options.mode === m)} onclick={() => set({ mode: m })}>
+        {SELECTION_MODE_LABELS[m]}
+      </button>
+    {/each}
+  </div>
+  {#if options.tool === 'wand'}
+    <div class="flex flex-col gap-2">
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-slate-400">
+          <span>Tolerance</span>
+          <span class="font-mono">{options.tolerance}</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="255"
+          step="1"
+          aria-label="Tolerance"
+          value={options.tolerance}
+          oninput={(e) => set({ tolerance: Number((e.currentTarget as HTMLInputElement).value) })}
+          class="w-full accent-indigo-500"
+        />
+      </label>
+      <label class="flex items-center gap-2 text-slate-300">
+        <input type="checkbox" checked={options.contiguous} onchange={(e) => set({ contiguous: (e.currentTarget as HTMLInputElement).checked })} />
+        Contiguous
+      </label>
+      <label class="flex items-center gap-2 text-slate-300">
+        <input type="checkbox" checked={options.sampleMerged} onchange={(e) => set({ sampleMerged: (e.currentTarget as HTMLInputElement).checked })} />
+        Sample adjusted image
+      </label>
+    </div>
+  {/if}
+  <label class="flex items-center gap-2 text-slate-300">
+    <input type="checkbox" checked={options.antiAlias} onchange={(e) => set({ antiAlias: (e.currentTarget as HTMLInputElement).checked })} />
+    Anti-alias
+  </label>
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={btn(false)} onclick={() => controller.selectAll()}>Select All</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.deselect()}>Deselect</button>
+    <button type="button" class={btn(false)} onclick={() => controller.invertSelection()}>Inverse</button>
+    <button type="button" aria-pressed={qm} class={btn(qm)} onclick={() => controller.setQuickMask(!qm)}>Quick Mask</button>
+  </div>
+  <div class="flex flex-wrap items-center gap-1">
+    <label class="flex items-center gap-1 text-slate-400">
+      Radius
+      <input
+        type="number"
+        min="0"
+        max="500"
+        step="1"
+        aria-label="Modify radius"
+        value={radius}
+        oninput={(e) => (radius = Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0))}
+        class="w-14 bg-slate-950 border border-slate-800 rounded px-1 py-0.5 text-slate-200"
+      />
+    </label>
+    {#each MODIFY_OPS as m (m.op)}
+      <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.modifySelection(m.op, radius)}>{m.label}</button>
+    {/each}
+  </div>
+  <p data-testid="selection-status" class="text-slate-400">{describeSelection(sel)}</p>
+</div>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
+    quickMask?: boolean;
+    class?: string;
+}
+declare const SelectionOptionsBar: import("svelte").Component<Props, {}, "">;
+type SelectionOptionsBar = ReturnType<typeof SelectionOptionsBar>;
+export default SelectionOptionsBar;
+//# sourceMappingURL=SelectionOptionsBar.svelte.d.ts.map

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

@@ -0,0 +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"}