@pixerate/editor-svelte 0.124.1 → 0.126.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { imageSectionTitleClass, imageSelectClass } from './styles.js';
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
+  import ImageSelect from './controls/ImageSelect.svelte';
+  import { imageSectionTitleClass } from './styles.js';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -109,11 +111,13 @@
     <span class={imageSectionTitleClass}>Adjustment Layers</span>
   </div>
   <div class="flex gap-1.5">
-    <select aria-label="New adjustment layer kind" class="{imageSelectClass} flex-1" bind:value={newKind}>
-      {#each ADJUSTMENT_KINDS as k (k.kind)}
-        <option value={k.kind}>{k.label}</option>
-      {/each}
-    </select>
+    <ImageSelect
+      label="New adjustment layer kind"
+      class="flex-1"
+      value={newKind}
+      options={ADJUSTMENT_KINDS.map((k) => ({ value: k.kind, label: k.label }))}
+      onchange={(v) => (newKind = v as typeof newKind)}
+    />
     <button type="button" class="px-2 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90" onclick={addLayer}>
       Add Layer
     </button>
@@ -129,13 +133,7 @@
             ? 'bg-primary/20 ring-1 ring-primary/50'
             : 'bg-muted/60'}"
         >
-          <input
-            type="checkbox"
-            aria-label="Show {label}"
-            checked={layer.enabled}
-            onchange={() => controller.toggleAdjustmentLayer(layer.id)}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Show {label}" checked={layer.enabled} onchange={() => controller.toggleAdjustmentLayer(layer.id)} />
           <button
             type="button"
             class="flex-1 text-left truncate {layer.enabled ? 'text-foreground' : 'text-muted-foreground line-through'}"
@@ -183,16 +181,13 @@
     <div class="flex flex-col gap-2 rounded border border-border p-2" data-testid="adjustment-layer-editor">
       <div class="flex items-center gap-2">
         <span class="text-muted-foreground">Blend</span>
-        <select
-          aria-label="Blend mode"
-          class="{imageSelectClass} flex-1"
+        <ImageSelect
+          label="Blend mode"
+          class="flex-1"
           value={layer.blend}
-          onchange={(e) => controller.updateAdjustmentLayer(layer.id, { blend: (e.target as HTMLSelectElement).value as BlendMode })}
-        >
-          {#each BLEND_MODES as m (m.id)}
-            <option value={m.id}>{m.label}</option>
-          {/each}
-        </select>
+          options={BLEND_MODES.map((m) => ({ value: m.id, label: m.label }))}
+          onchange={(v) => controller.updateAdjustmentLayer(layer.id, { blend: v as BlendMode })}
+        />
       </div>
       <ControlSlider
         spec={ADJUSTMENT_LAYER_OPACITY_CONTROL}
@@ -265,34 +260,19 @@
 
       {#if layer.kind === 'hueSaturation' && range === -1}
         <label class="flex items-center gap-2 text-foreground">
-          <input
-            type="checkbox"
-            checked={layer.params.colorize}
-            onchange={(e) => setParam(layer, 'colorize', (e.target as HTMLInputElement).checked)}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Colorize" checked={layer.params.colorize} onchange={(on) => setParam(layer, 'colorize', on)} />
           Colorize
         </label>
       {/if}
       {#if layer.kind === 'colorBalance' || layer.kind === 'photoFilter'}
         <label class="flex items-center gap-2 text-foreground">
-          <input
-            type="checkbox"
-            checked={layer.params.preserveLuminosity}
-            onchange={(e) => setParam(layer, 'preserveLuminosity', (e.target as HTMLInputElement).checked)}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Preserve luminosity" checked={layer.params.preserveLuminosity} onchange={(on) => setParam(layer, 'preserveLuminosity', on)} />
           Preserve luminosity
         </label>
       {/if}
       {#if layer.kind === 'blackWhite'}
         <label class="flex items-center gap-2 text-foreground">
-          <input
-            type="checkbox"
-            checked={layer.params.tint !== null}
-            onchange={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).checked ? '#e1d3b3' : null)}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Tint" checked={layer.params.tint !== null} onchange={(on) => setParam(layer, 'tint', on ? '#e1d3b3' : null)} />
           Tint
           {#if layer.params.tint}
             <input

package/dist/image-editor/BrushOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import { imageChipClass, imageColorInputClass } from './styles.js';
   import type { ImageEditorController } from '@pixerate/editor/image-editor';
   import {
@@ -136,23 +137,11 @@
       {/each}
       <div class="flex flex-wrap gap-3 text-foreground">
         <label class="flex items-center gap-1.5">
-          <input
-            type="checkbox"
-            aria-label="Load the brush after each stroke"
-            checked={view.mixer.loadEachStroke}
-            onchange={(e) => controller.setPaintOptions({ mixer: { loadEachStroke: (e.target as HTMLInputElement).checked } })}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Load the brush after each stroke" checked={view.mixer.loadEachStroke} onchange={(on) => controller.setPaintOptions({ mixer: { loadEachStroke: on } })} />
           Load each stroke
         </label>
         <label class="flex items-center gap-1.5">
-          <input
-            type="checkbox"
-            aria-label="Clean the brush after each stroke"
-            checked={view.mixer.cleanEachStroke}
-            onchange={(e) => controller.setPaintOptions({ mixer: { cleanEachStroke: (e.target as HTMLInputElement).checked } })}
-            class="accent-primary"
-          />
+          <ImageCheckbox label="Clean the brush after each stroke" checked={view.mixer.cleanEachStroke} onchange={(on) => controller.setPaintOptions({ mixer: { cleanEachStroke: on } })} />
           Clean each stroke
         </label>
       </div>
@@ -200,13 +189,7 @@
       <div class="flex flex-wrap gap-3 text-foreground">
         {#each RETOUCH_TOGGLES.filter((t) => t.tools.includes(view.tool as never)) as t (t.id)}
           <label class="flex items-center gap-1.5">
-            <input
-              type="checkbox"
-              aria-label={t.label}
-              checked={view.retouch[t.id]}
-              onchange={(e) => controller.setPaintOptions({ retouch: { [t.id]: (e.target as HTMLInputElement).checked } })}
-              class="accent-primary"
-            />
+            <ImageCheckbox label={t.label} checked={view.retouch[t.id]} onchange={(on) => controller.setPaintOptions({ retouch: { [t.id]: on } })} />
             {t.label}
           </label>
         {/each}
@@ -216,23 +199,11 @@
 
   <div class="flex flex-wrap gap-3 text-foreground" 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-primary"
-      />
+      <ImageCheckbox label="Pressure controls size" checked={view.brush.pressureSize} onchange={(on) => controller.setPaintOptions({ brush: { pressureSize: on } })} />
       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-primary"
-      />
+      <ImageCheckbox label="Pressure controls opacity" checked={view.brush.pressureOpacity} onchange={(on) => controller.setPaintOptions({ brush: { pressureOpacity: on } })} />
       Pressure opacity
     </label>
   </div>

package/dist/image-editor/CanvasSizePanel.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import ImageSelect from './controls/ImageSelect.svelte';
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import type { ImageEditorController, TransformAnchor } from '@pixerate/editor/image-editor';
   import { CANVAS_SIZE_PRESETS, isTransformAnchor } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
-  import { imagePrimaryButtonClass, imageSelectClass } from './styles.js';
+  import { imagePrimaryButtonClass } from './styles.js';
 
   interface Props {
     controller: ImageEditorController;
@@ -56,10 +58,7 @@
     height = val;
   }
 
-  function onPresetSelect(e: Event) {
-    const target = e.currentTarget as HTMLSelectElement;
-    const presetId = target.value;
-    target.value = '';
+  function onPresetSelect(presetId: string) {
     const preset = CANVAS_SIZE_PRESETS.find((p) => p.id === presetId);
     if (!preset) return;
     width = preset.width;
@@ -85,18 +84,15 @@
   {/if}
 
   <div class="flex flex-col gap-1.5">
-    <label for="canvas-size-preset" class="text-muted-foreground text-[11px]">Preset</label>
-    <select
-      id="canvas-size-preset"
-      class="{imageSelectClass} w-full"
+    <span class="text-muted-foreground text-[11px]">Preset</span>
+    <ImageSelect
+      class="w-full"
+      label="Preset canvas sizes"
+      value=""
+      placeholder="Choose preset…"
+      options={CANVAS_SIZE_PRESETS.map((preset) => ({ value: preset.id, label: `${preset.label} (${preset.width} × ${preset.height})` }))}
       onchange={onPresetSelect}
-      aria-label="Preset canvas sizes"
-    >
-      <option value="">Choose preset…</option>
-      {#each CANVAS_SIZE_PRESETS as preset (preset.id)}
-        <option value={preset.id}>{preset.label} ({preset.width} × {preset.height})</option>
-      {/each}
-    </select>
+    />
   </div>
 
   <div class="grid grid-cols-2 gap-2 items-center">
@@ -129,12 +125,7 @@
 
   <div class="flex items-center gap-2">
     <label class="flex items-center gap-1.5 cursor-pointer text-muted-foreground select-none">
-      <input
-        type="checkbox"
-        class="rounded border-border text-primary focus:ring-primary"
-        checked={lockAspect}
-        onchange={(e) => (lockAspect = (e.currentTarget as HTMLInputElement).checked)}
-      />
+      <ImageCheckbox label="Lock aspect ratio" checked={lockAspect} onchange={(on) => (lockAspect = on)} />
       <span>Lock aspect ratio</span>
     </label>
   </div>

package/dist/image-editor/ControlSlider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageRange from './controls/ImageRange.svelte';
   import type { ControlSpec } from '@pixerate/editor/image-editor';
   import { controlTrackBackground, formatControlValue } from '@pixerate/editor/image-editor';
 
@@ -24,17 +25,7 @@
     <span>{name}</span>
     <span class="font-mono">{formatControlValue(spec, value)}</span>
   </div>
-  <input
-    type="range"
-    min={spec.min}
-    max={spec.max}
-    step={spec.step}
-    aria-label={name}
-    {disabled}
-    {value}
-    oninput={(e) => onchange(Number((e.target as HTMLInputElement).value))}
-    class="w-full accent-primary disabled:opacity-40"
-  />
+  <ImageRange min={spec.min} max={spec.max} step={spec.step} label={name} {disabled} {value} oninput={onchange} />
   {#if track}
     <div class="h-0.5 rounded-full opacity-70" style="background: {track}"></div>
   {/if}

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -93,6 +93,11 @@
     open?: (ref: PlaybackRef) => void | Promise<void>;
     /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
     viewportGestures?: boolean;
+    /**
+     * Pan mode (a host's hand tool): a primary drag pans the view in every mode, as holding Space
+     * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
+     */
+    panMode?: boolean;
     class?: string;
     style?: string;
   }
@@ -118,6 +123,7 @@
     locateElement,
     open,
     viewportGestures = true,
+    panMode = false,
     class: className = '',
     style = '',
   }: Props = $props();
@@ -200,6 +206,8 @@
 
   let isSpacePressed = $state(false);
   let isPanning = $state(false);
+  // A primary drag pans: Space held, or the host's pan mode.
+  const panning = $derived(viewportGestures && (isSpacePressed || panMode));
   let panStartPoint: { clientX: number; clientY: number } | null = null;
   let panStartOffset: { x: number; y: number } = { x: 0, y: 0 };
 
@@ -373,7 +381,7 @@
   function handleFramePointerDown(e: PointerEvent): boolean {
     if (mode !== 'transform' || transformTool.active || !canvasEl) return false;
     // Middle-button and Space drags pan (see handleMouseDown).
-    if (e.button !== 0 || (viewportGestures && isSpacePressed)) return false;
+    if (e.button !== 0 || panning) return false;
     const c = editor.controller;
     const { pt, tolerance } = transformPoint(e);
     const frame = layerFrame();
@@ -498,6 +506,7 @@
       viewportWidth: viewport.width,
       viewportHeight: viewport.height,
       pixelRatio: viewport.pixelRatio,
+      hostScale: viewport.hostScale,
       fit,
       showCropOverlay: mode === 'crop',
       showSelectionOverlay: true,
@@ -528,6 +537,8 @@
     }));
   }
   function handlePaintPointerDown(e: PointerEvent) {
+    // Panning: the drag moves the view (handleMouseDown), not the document.
+    if (panning && e.button === 0) return;
     if (handleTransformPointerDown(e)) return;
     if (handleFramePointerDown(e)) return;
     if (mode !== 'paint' || e.button !== 0 || !canvasEl) return;
@@ -540,6 +551,7 @@
     report('paint', paintGesture.down({ ...paintSamples(e)[0], altKey: e.altKey }));
   }
   function handlePaintPointerMove(e: PointerEvent) {
+    if (panning && !transformTool.active) return;
     if (handleTransformPointerMove(e)) return;
     if (mode === 'transform' && canvasEl) {
       const { pt, tolerance } = transformPoint(e);
@@ -614,7 +626,7 @@
   function handleMouseDown(e: MouseEvent) {
     if (!canvasEl) return;
 
-    if (viewportGestures && (e.button === 1 || (e.button === 0 && isSpacePressed))) {
+    if (viewportGestures && (e.button === 1 || (e.button === 0 && panning))) {
       e.preventDefault();
       isPanning = true;
       panStartPoint = { clientX: e.clientX, clientY: e.clientY };
@@ -729,8 +741,9 @@
       return;
     }
 
-    if (viewportGestures && isSpacePressed) {
+    if (panning) {
       canvasEl.style.cursor = 'grab';
+      return;
     }
 
     if (transformTool.active) return;
@@ -1013,7 +1026,7 @@
         endFrameDrag(true);
       }}
       data-testid="image-editor-canvas"
-      style="width: 100%; height: 100%;{transformActive || mode === 'transform' ? ` cursor: ${transformCursor};` : ''}"
+      style="width: 100%; height: 100%;{panning ? ` cursor: ${isPanning ? 'grabbing' : 'grab'};` : transformActive || mode === 'transform' ? ` cursor: ${transformCursor};` : ''}"
       class="absolute inset-0 w-full h-full block {transformActive || mode === 'transform' ? 'touch-none' : mode === 'paint' ? 'touch-none cursor-crosshair' : mode === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : mode === 'annotate' && editor.state.activeTool === 'shape' ? 'cursor-crosshair' : ''}"
     ></canvas>
     {#if typeSession}

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

@@ -58,6 +58,11 @@ interface Props {
     open?: (ref: PlaybackRef) => void | Promise<void>;
     /** Whether wheel zoom and middle/space drag panning are enabled (default true). */
     viewportGestures?: boolean;
+    /**
+     * Pan mode (a host's hand tool): a primary drag pans the view in every mode, as holding Space
+     * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
+     */
+    panMode?: boolean;
     class?: string;
     style?: string;
 }

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { imageIconButtonClass, imageSelectClass } from './styles.js';
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
+  import ImageRange from './controls/ImageRange.svelte';
+  import ImageSelect from './controls/ImageSelect.svelte';
+  import { imageIconButtonClass } from './styles.js';
   import type { EffectControl, ImageEditorController, LayerEffectKind } from '@pixerate/editor/image-editor';
   import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -57,10 +60,8 @@
     });
   }
 
-  function add(e: Event) {
-    const select = e.currentTarget as HTMLSelectElement;
-    const kind = select.value as LayerEffectKind;
-    select.value = '';
+  function add(value: string) {
+    const kind = value as LayerEffectKind;
     const id = view.id;
     if (!kind || !id) return;
     attempt(() => (open = controller.addLayerEffect(id, kind).effect.id));
@@ -84,13 +85,11 @@
     <div class="flex flex-wrap items-center gap-2">
       <span class="font-semibold text-foreground">fx Effects</span>
       <label class="flex items-center gap-1 text-foreground">
-        <input
-          type="checkbox"
-          aria-label="Effects on"
+        <ImageCheckbox
+          label="Effects on"
           checked={view.model.enabled}
           disabled={view.model.readOnly}
-          onchange={(e) => attempt(() => controller.setLayerEffectsEnabled(id, (e.currentTarget as HTMLInputElement).checked))}
-          class="accent-primary"
+          onchange={(on) => attempt(() => controller.setLayerEffectsEnabled(id, on))}
         />
         On
       </label>
@@ -109,12 +108,14 @@
         />
         %
       </label>
-      <select aria-label="Add effect" value="" disabled={view.model.readOnly} onchange={add} class={imageSelectClass}>
-        <option value="">Add effect…</option>
-        {#each LAYER_EFFECT_MENU as m (m.kind)}
-          <option value={m.kind}>{m.label}</option>
-        {/each}
-      </select>
+      <ImageSelect
+        label="Add effect"
+        value=""
+        placeholder="Add effect…"
+        disabled={view.model.readOnly}
+        options={LAYER_EFFECT_MENU.map((m) => ({ value: m.kind, label: m.label }))}
+        onchange={add}
+      />
     </div>
     {#if view.model.readOnly && view.model.reason}<p class="text-muted-foreground">{view.model.reason}</p>{/if}
     <ul class="flex flex-col gap-1" aria-label="Effects">
@@ -123,13 +124,11 @@
         {@const expanded = open === row.id}
         <li data-effect-id={row.id} class="rounded bg-background/60 ring-1 ring-border">
           <div class="flex items-center gap-1.5 px-1.5 py-1">
-            <input
-              type="checkbox"
-              aria-label="{row.label} on"
+            <ImageCheckbox
+              label="{row.label} on"
               checked={row.enabled}
               disabled={view.model.readOnly}
-              onchange={(e) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: (e.currentTarget as HTMLInputElement).checked }))}
-              class="accent-primary"
+              onchange={(on) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: on }))}
             />
             <button type="button" aria-expanded={expanded} class="flex-1 text-left {row.enabled && view.model.enabled ? '' : 'text-muted-foreground'}" onclick={() => (open = expanded ? null : row.id)}>
               {row.label}
@@ -142,19 +141,16 @@
                 {#if c.type === 'range'}
                   <label class="flex flex-col gap-0.5">
                     <span class="text-muted-foreground">{c.label} {shown(c)}{c.unit ?? ''}</span>
-                    <input
-                      type="range"
-                      aria-label={c.label}
+                    <ImageRange
+                      label={c.label}
                       min={c.min * k(c)}
                       max={c.max * k(c)}
                       step={c.step * k(c)}
                       value={shown(c)}
                       disabled={view.model.readOnly}
-                      onpointerdown={() => (commitNext = true)}
-                      onpointerup={() => (commitNext = true)}
-                      onkeydown={() => (commitNext = true)}
-                      oninput={(e) => change(row.id, c, Number((e.currentTarget as HTMLInputElement).value) / k(c), true)}
-                      class="accent-primary"
+                      onstart={() => (commitNext = true)}
+                      onend={() => (commitNext = true)}
+                      oninput={(v) => change(row.id, c, v / k(c), true)}
                     />
                   </label>
                 {:else if c.type === 'color'}
@@ -164,17 +160,13 @@
                   </label>
                 {:else if c.type === 'checkbox'}
                   <label class="flex items-center gap-1.5 text-foreground">
-                    <input type="checkbox" aria-label={c.label} checked={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).checked)} class="accent-primary" />
+                    <ImageCheckbox label={c.label} checked={c.value} disabled={view.model.readOnly} onchange={(on) => change(row.id, c, on)} />
                     {c.label}
                   </label>
                 {:else}
                   <label class="flex flex-col gap-0.5">
                     <span class="text-muted-foreground">{c.label}</span>
-                    <select aria-label={c.label} value={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLSelectElement).value)} class={imageSelectClass}>
-                      {#each c.options as o (o.value)}
-                        <option value={o.value}>{o.label}</option>
-                      {/each}
-                    </select>
+                    <ImageSelect label={c.label} value={String(c.value)} disabled={view.model.readOnly} options={c.options.map((o) => ({ value: String(o.value), label: o.label }))} onchange={(v) => change(row.id, c, v)} />
                   </label>
                 {/if}
               {/each}

package/dist/image-editor/LayerPanel.svelte

@@ -6,6 +6,7 @@
     DEFAULT_TYPE_TOOL_OPTIONS,
     DEFAULT_SELECTION_TOOL_OPTIONS,
   } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
   import CanvasSizePanel from './CanvasSizePanel.svelte';
   import ControlSlider from './ControlSlider.svelte';
   import LayerEffectsPanel from './LayerEffectsPanel.svelte';
@@ -23,7 +24,17 @@
 
   let { controller, panelId, class: className = '' }: Props = $props();
 
-  const activeLayer = $derived(controller.getActiveLayer());
+  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++));
+  });
+  // The controller isn't reactive: re-read the active layer after every change.
+  const activeLayer = $derived.by(() => {
+    void tick;
+    return controller.getActiveLayer();
+  });
   let shapeOptions = $state({ ...DEFAULT_SHAPE_TOOL_OPTIONS });
   let typeOptions = $state({ ...DEFAULT_TYPE_TOOL_OPTIONS });
   let selectionOptions = $state({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
@@ -52,8 +63,8 @@
           <ControlSlider
             spec={ADJUSTMENT_LAYER_OPACITY_CONTROL}
             label="Opacity"
-            value={Math.round(activeLayer.opacity * 100)}
-            onchange={(val) => controller.setLayerProperties(activeLayer.id, { opacity: val / 100 })}
+            value={activeLayer.opacity}
+            onchange={(val) => controller.setLayerProperties(activeLayer.id, { opacity: val })}
           />
         </div>
       {:else}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { imageRangeClass } from './styles.js';
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
+  import ImageRange from './controls/ImageRange.svelte';
+  import ImageSelect from './controls/ImageSelect.svelte';
   import type {
     ImageEditorController,
     SelectionMask,
@@ -83,41 +85,32 @@
           <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={imageRangeClass}
-        />
+        <ImageRange label="Tolerance" min={0} max={255} step={1} value={options.tolerance} oninput={(v) => set({ tolerance: v })} />
       </label>
       <label class="flex items-center gap-2 text-foreground">
-        <input type="checkbox" checked={options.contiguous} onchange={(e) => set({ contiguous: (e.currentTarget as HTMLInputElement).checked })} />
+        <ImageCheckbox label="Contiguous" checked={options.contiguous} onchange={(on) => set({ contiguous: on })} />
         Contiguous
       </label>
       <label class="flex items-center gap-2 text-foreground">
-        <input type="checkbox" checked={options.sampleMerged} onchange={(e) => set({ sampleMerged: (e.currentTarget as HTMLInputElement).checked })} />
+        <ImageCheckbox label="Sample adjusted image" checked={options.sampleMerged} onchange={(on) => set({ sampleMerged: on })} />
         Sample adjusted image
       </label>
       <label class="flex items-center gap-2 text-foreground">
         Sample
-        <select
-          aria-label="Sample from"
+        <ImageSelect
+          label="Sample from"
           value={options.sample ?? 'composite'}
-          onchange={(e) => set({ sample: (e.currentTarget as HTMLSelectElement).value as 'composite' | 'active-layer' })}
-          class="bg-muted border border-border rounded px-1 py-0.5"
-        >
-          <option value="composite">All layers</option>
-          <option value="active-layer">Active layer</option>
-        </select>
+          options={[
+            { value: 'composite', label: 'All layers' },
+            { value: 'active-layer', label: 'Active layer' },
+          ]}
+          onchange={(v) => set({ sample: v as 'composite' | 'active-layer' })}
+        />
       </label>
     </div>
   {/if}
   <label class="flex items-center gap-2 text-foreground">
-    <input type="checkbox" checked={options.antiAlias} onchange={(e) => set({ antiAlias: (e.currentTarget as HTMLInputElement).checked })} />
+    <ImageCheckbox label="Anti-alias" checked={options.antiAlias} onchange={(on) => set({ antiAlias: on })} />
     Anti-alias
   </label>
   <div class="flex flex-wrap gap-1">

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
+  import ImageRange from './controls/ImageRange.svelte';
   import { imageChipClass, imageColorInputClass, imageFieldClass } from './styles.js';
   import type { ImageEditorController, ShapeToolOptions } from '@pixerate/editor/image-editor';
   import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from '@pixerate/editor/image-editor';
@@ -44,7 +46,6 @@
     }
   }
   const value = (e: Event) => (e.target as HTMLInputElement).value;
-  const checked = (e: Event) => (e.target as HTMLInputElement).checked;
 </script>
 
 <div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="shape-options">
@@ -55,7 +56,7 @@
   </div>
   <div class="flex flex-wrap items-center gap-3">
     <label class="flex items-center gap-1">
-      <input type="checkbox" aria-label="Fill" checked={options.fill !== null} onchange={(e) => set({ fill: checked(e) ? '#4f46e5' : null })} />
+      <ImageCheckbox label="Fill" checked={options.fill !== null} onchange={(on) => set({ fill: on ? '#4f46e5' : null })} />
       Fill
       <input
         type="color"
@@ -67,7 +68,7 @@
       />
     </label>
     <label class="flex items-center gap-1">
-      <input type="checkbox" aria-label="Stroke" checked={options.stroke !== null} onchange={(e) => set({ stroke: checked(e) ? '#000000' : null })} />
+      <ImageCheckbox label="Stroke" checked={options.stroke !== null} onchange={(on) => set({ stroke: on ? '#000000' : null })} />
       Stroke
       <input
         type="color"
@@ -101,7 +102,7 @@
       </label>
       <label class="flex items-center gap-1">
         Inner
-        <input type="range" aria-label="Inner radius" min="0.05" max="1" step="0.05" value={options.innerRatio} oninput={(e) => set({ innerRatio: Number(value(e)) })} class="accent-primary" />
+        <ImageRange label="Inner radius" min={0.05} max={1} step={0.05} value={options.innerRatio} oninput={(v) => set({ innerRatio: v })} />
       </label>
     {:else if options.kind === 'line'}
       <label class="flex items-center gap-1">
@@ -109,7 +110,7 @@
         <input type="number" aria-label="Line weight" min="1" max="200" value={options.weight} oninput={(e) => set({ weight: num(value(e), 1, 200) })} class="w-14 {imageFieldClass}" />
       </label>
       <label class="flex items-center gap-1">
-        <input type="checkbox" aria-label="Arrowhead" checked={options.arrow} onchange={(e) => set({ arrow: checked(e) })} />
+        <ImageCheckbox label="Arrowhead" checked={options.arrow} onchange={(on) => set({ arrow: on })} />
         Arrowhead
       </label>
     {/if}

package/dist/image-editor/controls/ImageCheckbox.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getImageEditorControls, type ImageCheckboxProps } from './controls.js';
+
+  let { checked, label, disabled = false, onchange, class: className = '' }: ImageCheckboxProps = $props();
+  const Host = getImageEditorControls().Checkbox;
+</script>
+
+{#if Host}
+  <Host {checked} {label} {disabled} {onchange} class={className} />
+{:else}
+  <input
+    type="checkbox"
+    aria-label={label}
+    {checked}
+    {disabled}
+    onchange={(e) => onchange((e.currentTarget as HTMLInputElement).checked)}
+    class="accent-primary {className}"
+  />
+{/if}

package/dist/image-editor/controls/ImageCheckbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ImageCheckboxProps } from './controls.js';
+declare const ImageCheckbox: import("svelte").Component<ImageCheckboxProps, {}, "">;
+type ImageCheckbox = ReturnType<typeof ImageCheckbox>;
+export default ImageCheckbox;

package/dist/image-editor/controls/ImageRange.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getImageEditorControls, type ImageRangeProps } from './controls.js';
+
+  let { value, min, max, step, label, disabled = false, oninput, onstart, onend, class: className = '' }: ImageRangeProps = $props();
+  const Host = getImageEditorControls().Range;
+</script>
+
+{#if Host}
+  <Host {value} {min} {max} {step} {label} {disabled} {oninput} {onstart} {onend} class={className} />
+{:else}
+  <input
+    type="range"
+    aria-label={label}
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    onpointerdown={() => onstart?.()}
+    onpointerup={() => onend?.()}
+    onkeydown={() => onstart?.()}
+    onkeyup={() => onend?.()}
+    oninput={(e) => oninput(Number((e.currentTarget as HTMLInputElement).value))}
+    class="w-full accent-primary disabled:opacity-40 {className}"
+  />
+{/if}

package/dist/image-editor/controls/ImageRange.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ImageRangeProps } from './controls.js';
+declare const ImageRange: import("svelte").Component<ImageRangeProps, {}, "">;
+type ImageRange = ReturnType<typeof ImageRange>;
+export default ImageRange;

package/dist/image-editor/controls/ImageSelect.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { imageSelectClass } from '../styles.js';
+  import { getImageEditorControls, type ImageSelectProps } from './controls.js';
+
+  let { value, options, label, placeholder, disabled = false, onchange, class: className = '' }: ImageSelectProps = $props();
+  const Host = getImageEditorControls().Select;
+</script>
+
+{#if Host}
+  <Host {value} {options} {label} {placeholder} {disabled} {onchange} class={className} />
+{:else}
+  <select
+    aria-label={label}
+    {value}
+    {disabled}
+    onchange={(e) => {
+      const select = e.currentTarget as HTMLSelectElement;
+      onchange(select.value);
+      // A placeholder select (an action menu) shows its placeholder again.
+      if (placeholder !== undefined) select.value = value;
+    }}
+    class="{imageSelectClass} {className}"
+  >
+    {#if placeholder !== undefined}<option value="">{placeholder}</option>{/if}
+    {#each options as o (o.value)}
+      <option value={o.value}>{o.label}</option>
+    {/each}
+  </select>
+{/if}

package/dist/image-editor/controls/ImageSelect.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ImageSelectProps } from './controls.js';
+declare const ImageSelect: import("svelte").Component<ImageSelectProps, {}, "">;
+type ImageSelect = ReturnType<typeof ImageSelect>;
+export default ImageSelect;

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

@@ -0,0 +1,60 @@
+import { type Component } from 'svelte';
+/** A checkbox in the image editor's panels. */
+export interface ImageCheckboxProps {
+    checked: boolean;
+    /** The accessible name. */
+    label: string;
+    disabled?: boolean;
+    onchange: (checked: boolean) => void;
+    class?: string;
+}
+/** A range slider in the image editor's panels. */
+export interface ImageRangeProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    /** The accessible name. */
+    label: string;
+    disabled?: boolean;
+    /** Every change while the value moves. */
+    oninput: (value: number) => void;
+    /** A drag (or key press) starts. */
+    onstart?: () => void;
+    /** A drag (or key press) ends. */
+    onend?: () => void;
+    class?: string;
+}
+/** One choice of an {@link ImageSelectProps}. */
+export interface ImageSelectOption {
+    value: string;
+    label: string;
+}
+/** A dropdown in the image editor's panels. */
+export interface ImageSelectProps {
+    value: string;
+    options: readonly ImageSelectOption[];
+    /** The accessible name. */
+    label: string;
+    /** Shown when `value` matches no option (e.g. "Add effect…"). */
+    placeholder?: string;
+    disabled?: boolean;
+    onchange: (value: string) => void;
+    class?: string;
+}
+/**
+ * The host's own form controls for the image editor's panels. Any left out fall back to the
+ * editor's plain inputs.
+ */
+export interface ImageEditorControls {
+    Checkbox?: Component<ImageCheckboxProps>;
+    Range?: Component<ImageRangeProps>;
+    Select?: Component<ImageSelectProps>;
+}
+/**
+ * Makes the image editor's panels below this component use the host's controls (call it while
+ * a component initialises, like `setContext`).
+ */
+export declare function setImageEditorControls(controls: ImageEditorControls): ImageEditorControls;
+/** The controls set by an ancestor with {@link setImageEditorControls}, or none. */
+export declare function getImageEditorControls(): ImageEditorControls;

package/dist/image-editor/controls/controls.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('pixerate.image-editor.controls');
+/**
+ * Makes the image editor's panels below this component use the host's controls (call it while
+ * a component initialises, like `setContext`).
+ */
+export function setImageEditorControls(controls) {
+    return setContext(KEY, controls);
+}
+/** The controls set by an ancestor with {@link setImageEditorControls}, or none. */
+export function getImageEditorControls() {
+    return getContext(KEY) ?? {};
+}

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

@@ -40,6 +40,10 @@ export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
 export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
+export { default as ImageCheckbox } from './controls/ImageCheckbox.svelte';
+export { default as ImageRange } from './controls/ImageRange.svelte';
+export { default as ImageSelect } from './controls/ImageSelect.svelte';
+export { setImageEditorControls, getImageEditorControls, type ImageEditorControls, type ImageCheckboxProps, type ImageRangeProps, type ImageSelectProps, type ImageSelectOption, } from './controls/controls.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type ImageEditorCanvasProps = ComponentProps<typeof ImageEditorCanvasComponent>;
 export type CanvasSizePanelProps = ComponentProps<typeof CanvasSizePanelComponent>;

package/dist/image-editor/index.js

@@ -19,4 +19,8 @@ export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
 export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
+export { default as ImageCheckbox } from './controls/ImageCheckbox.svelte';
+export { default as ImageRange } from './controls/ImageRange.svelte';
+export { default as ImageSelect } from './controls/ImageSelect.svelte';
+export { setImageEditorControls, getImageEditorControls, } from './controls/controls.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.124.1",
+  "version": "0.126.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -168,7 +168,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.168.0"
+    "@pixerate/editor": "0.170.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",