@pixerate/editor-svelte 0.128.5 → 0.130.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import { imageSectionTitleClass } from './styles.js';
@@ -242,13 +243,7 @@
       {:else if layer.kind === 'photoFilter'}
         <label class="flex items-center gap-2 text-foreground">
           Filter colour
-          <input
-            type="color"
-            aria-label="Filter colour"
-            value={layer.params.color}
-            oninput={(e) => setParam(layer, 'color', (e.target as HTMLInputElement).value)}
-            class="h-5 w-8 bg-transparent"
-          />
+          <ImageColor label="Filter colour" value={layer.params.color} oninput={(v) => setParam(layer, 'color', v)} />
         </label>
       {:else if layer.kind === 'invert'}
         <p class="text-muted-foreground text-[11px]">Invert has no settings.</p>
@@ -275,13 +270,7 @@
           <ImageCheckbox label="Tint" checked={layer.params.tint !== null} onchange={(on) => setParam(layer, 'tint', on ? '#e1d3b3' : null)} />
           Tint
           {#if layer.params.tint}
-            <input
-              type="color"
-              aria-label="Tint colour"
-              value={layer.params.tint}
-              oninput={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).value)}
-              class="h-5 w-8 bg-transparent"
-            />
+            <ImageColor label="Tint colour" value={layer.params.tint} oninput={(v) => setParam(layer, 'tint', v)} />
           {/if}
         </label>
       {/if}

package/dist/image-editor/BrushOptionsBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
-  import { imageChipClass, imageColorInputClass } from './styles.js';
+  import { imageChipClass } from './styles.js';
   import type { ImageEditorController } from '@pixerate/editor/image-editor';
   import {
     userErrorMessage,
@@ -70,23 +71,11 @@
 
   <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={imageColorInputClass}
-      />
+      <ImageColor label="Foreground colour" value={view.foreground} oninput={(foreground) => controller.setPaintOptions({ foreground })} />
       <span class="text-muted-foreground">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={imageColorInputClass}
-      />
+      <ImageColor label="Background colour" value={view.background} oninput={(background) => controller.setPaintOptions({ background })} />
       <span class="text-muted-foreground">BG</span>
     </label>
     <button type="button" title="Swap colours (X)" class={imageChipClass(false)} onclick={() => controller.swapPaintColors()}>Swap</button>

package/dist/image-editor/ImageEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import { imageDividerClass, imageEditorFrameClass, imageEditorHeaderClass, imageErrorBannerClass, imageHeaderButtonClass, imagePrimaryButtonClass, imageRangeClass, imageSectionClass, imageSectionTitleClass, imageSelectClass, imageSidebarClass, imageSmallButtonClass, imageSpinnerClass, imageTabClass, imageTabListClass } from './styles.js';
   import type {
     ExportOptions,
@@ -747,11 +748,7 @@
           <!-- Color & Size -->
           <div class="flex items-center gap-2 mt-2">
             <span class="text-muted-foreground">Color:</span>
-            <input
-              type="color"
-              bind:value={activeColor}
-              class="w-8 h-8 rounded border border-border cursor-pointer bg-transparent"
-            />
+            <ImageColor label="Annotation colour" value={activeColor} oninput={(c) => (activeColor = c)} />
             <div class="flex-1 ml-2">
               <div class="flex justify-between text-muted-foreground mb-0.5">
                 <span>Width:</span>

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { imageOutlineButtonClass } from './styles.js';
-  import { EFFECT_LAYER_USES, findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
+  import { EFFECT_LAYER_USES, LAYER_EFFECT_MENU, effectLayerTiming, findLayer, layerEffectsPanel, type ImageEditorController, type ImageLayer, type LayerEffectKind, type SmartObjectLayer } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
   import ImageEffectControls from './ImageEffectControls.svelte';
+  import LayerEffectsPanel from './LayerEffectsPanel.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
+  import ImageSelect from './controls/ImageSelect.svelte';
   import type { ParameterComponents } from '../parameters/index.js';
 
   interface Props {
@@ -21,7 +24,8 @@
     const c = controller;
     return untrack(() => c.subscribe(() => tick++));
   });
-  let browse = $state<null | 'filter' | 'layer'>(null);
+  /** The open effect browser: filters to apply, or effects to change an effect layer to. */
+  let browse = $state<null | 'filter' | 'change'>(null);
   let message = $state<string | null>(null);
   let open = $state<string | null>(null);
   const snapshot = $derived.by(() => {
@@ -35,6 +39,13 @@
   const all = $derived(layer?.type === 'smart' ? ((layer as SmartObjectLayer).smartFilters?.filters ?? []) : []);
   const generator = $derived(layer?.type === 'pixel' ? layer.generator : undefined);
   const canFilter = $derived(!!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
+  const styles = $derived(layerEffectsPanel(layer));
+  const described = effectDescriptionOf(() => provider, () => generator?.effect);
+  const timing = $derived(generator ? effectLayerTiming(generator, described.description) : null);
+  const addOptions = $derived([
+    ...(provider && canFilter ? [{ value: 'filter', label: 'Filter…' }] : []),
+    ...(styles.available && !styles.readOnly ? LAYER_EFFECT_MENU.map((m) => ({ value: `style:${m.kind}`, label: m.label })) : []),
+  ]);
   const drags = new Set<string>();
   /** Changes during a drag skip the undo stack after the first, so the drag is one step. */
   function commit(gesture: string | null) {
@@ -49,35 +60,102 @@
       .then(work)
       .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)));
   }
+  function add(value: string) {
+    const id = layer?.id;
+    if (!value || !id) return;
+    if (value === 'filter') browse = browse === 'filter' ? null : 'filter';
+    else run(() => controller.addLayerEffect(id, value.slice('style:'.length) as LayerEffectKind));
+  }
+
+  // Scrubbing the frame draws the effect again: one render at a time, the latest frame wins.
+  let scrub: { layerId: string; time: number; commit: boolean } | null = null;
+  let scrubbing = false;
+  let gesture: string | null = null;
+  let scrubbed = $state<number | null>(null);
+  function scrubTo(layerId: string, time: number) {
+    scrubbed = time;
+    scrub = { layerId, time, commit: commit(gesture) };
+    if (scrubbing) return;
+    scrubbing = true;
+    const next = (): Promise<void> => {
+      const s = scrub;
+      scrub = null;
+      if (!s) return Promise.resolve();
+      return controller.updateEffectLayer(s.layerId, { time: s.time }, s.commit).then(next);
+    };
+    next()
+      .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)))
+      .finally(() => {
+        scrubbing = false;
+        scrubbed = null;
+      });
+  }
+  const fmt = (ms: number) => `${(ms / 1000).toFixed(ms < 10000 ? 2 : 1)} s`;
 </script>
 
 <!--
-  Provider effects for the active layer: its effect smart filters (apply, turn on and off, opacity,
-  reorder, change controls, remove) and, for an effect layer, its own controls; plus adding effect
-  layers. Applying a filter effect to a pixel layer converts it to a smart object in the same undo
-  step. Without a provider it says why nothing can be added.
+  Effects for the active layer, in one place. An effect layer first: its effect (change it or
+  rasterize it), a still frame or an animation for an effect that moves, and its controls. Then
+  what is applied to any layer: provider filters (smart filters; applying one converts a pixel
+  layer to a smart object in the same undo step) and layer styles, added from one menu. New
+  effect layers come from the layers panel. Without a provider it says why nothing can be added.
 -->
-<section class="flex flex-col gap-2 text-xs {className}" aria-label="Provider effects" data-image-provider-effects="">
-  <div class="flex items-center gap-1">
-    <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">Effects</span>
-    <button type="button" class={imageOutlineButtonClass} disabled={!provider || !canFilter} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Apply effect…</button>
-    <button type="button" class={imageOutlineButtonClass} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Effect layer…</button>
-  </div>
+<section class="flex flex-col gap-2 text-xs {className}" aria-label="Effects" data-image-provider-effects="">
   {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Effects in the document are kept.</p>{/if}
-  {#if browse === 'filter' && layer}
-    {@const id = layer.id}
-    <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
-  {/if}
-  {#if browse === 'layer'}
-    <EffectsBrowser {provider} uses={EFFECT_LAYER_USES} title="Generators and overlays" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id)))} />
-  {/if}
   {#if generator && layer}
     {@const id = layer.id}
-    <div class="space-y-1" data-effect-part="generator">
+    <div class="space-y-2" data-effect-part="generator">
       <div class="flex items-center gap-1">
-        <span class="flex-1 font-medium text-foreground">{generator.name ?? generator.effect}</span>
+        <span class="min-w-0 flex-1 truncate font-medium text-foreground" title={generator.name ?? generator.effect}>{generator.name ?? generator.effect}</span>
+        <button type="button" class={imageOutlineButtonClass} disabled={!provider} aria-pressed={browse === 'change'} onclick={() => (browse = browse === 'change' ? null : 'change')}>Change…</button>
         <button type="button" class={imageOutlineButtonClass} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(id))}>Rasterize</button>
       </div>
+      {#if browse === 'change'}
+        <EffectsBrowser {provider} uses={EFFECT_LAYER_USES} title="Change the effect to" onpick={(e) => ((browse = null), run(() => controller.updateEffectLayer(id, { effect: e.id })))} />
+      {/if}
+      {#if timing}
+        {@const shown = scrubbed ?? timing.time}
+        <div class="space-y-1.5 rounded border border-border p-1.5" data-effect-part="timing" role="group" aria-label="Frames">
+          <div class="flex gap-1" role="radiogroup" aria-label="Output">
+            <button type="button" role="radio" aria-checked={timing.mode === 'still'} class="{imageOutlineButtonClass} flex-1 {timing.mode === 'still' ? 'bg-accent text-accent-foreground' : ''}" onclick={() => run(() => controller.updateEffectLayer(id, { animate: null }))}>Still frame</button>
+            <button type="button" role="radio" aria-checked={timing.mode === 'animate'} class="{imageOutlineButtonClass} flex-1 {timing.mode === 'animate' ? 'bg-accent text-accent-foreground' : ''}" onclick={() => run(() => controller.updateEffectLayer(id, { animate: { duration: timing.duration } }))}>Animate</button>
+          </div>
+          <label class="flex items-center gap-1.5">
+            <span class="w-16 shrink-0 text-[11px] text-foreground">{timing.mode === 'still' ? 'Frame' : 'Starts at'}</span>
+            <ImageRange
+              min={0}
+              max={timing.range}
+              step={Math.max(1, Math.round(timing.range / 200))}
+              class="flex-1"
+              value={shown}
+              label={timing.mode === 'still' ? 'Frame' : 'Starts at'}
+              onstart={() => (gesture = `time:${Date.now()}`)}
+              onend={() => (gesture = null)}
+              oninput={(t) => scrubTo(id, t)}
+            />
+            <span class="w-12 shrink-0 text-right tabular-nums text-muted-foreground">{fmt(shown)}</span>
+          </label>
+          {#if timing.mode === 'animate'}
+            <label class="flex items-center gap-1.5">
+              <span class="w-16 shrink-0 text-[11px] text-foreground">Length</span>
+              <input
+                type="number"
+                aria-label="Animation length in seconds"
+                min="0.1"
+                max="60"
+                step="0.1"
+                value={Math.round(timing.duration / 100) / 10}
+                class="w-16 rounded border border-border bg-muted px-1 text-foreground"
+                onchange={(e) => {
+                  const s = Number((e.currentTarget as HTMLInputElement).value);
+                  if (s > 0) run(() => controller.updateEffectLayer(id, { animate: { duration: Math.min(60, s) * 1000 } }));
+                }}
+              />
+              <span class="text-muted-foreground">s{timing.loops ? ` · loops every ${fmt(timing.range)}` : ''}</span>
+            </label>
+          {/if}
+        </div>
+      {/if}
       <ImageEffectControls
         {provider}
         effect={generator.effect}
@@ -89,9 +167,21 @@
       />
     </div>
   {/if}
+  {#if layer && canFilter}
+    <div class="flex items-center gap-1" data-effect-part="applied">
+      <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">{generator ? 'On this layer' : 'Effects'}</span>
+      {#if addOptions.length}
+        <ImageSelect label="Add effect" value="" placeholder="Add…" options={addOptions} onchange={add} />
+      {/if}
+    </div>
+    {#if browse === 'filter'}
+      {@const id = layer.id}
+      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
+    {/if}
+  {/if}
   {#if layer && all.some((f) => f.kind === 'effect')}
     {@const id = layer.id}
-    <ol class="space-y-1" data-effect-part="filters">
+    <ol class="space-y-1" data-effect-part="filters" aria-label="Filters">
       {#each all as f, index (f.id)}
         {#if f.kind === 'effect'}
           {@const label = f.name ?? f.effect}
@@ -129,6 +219,12 @@
       {/each}
     </ol>
   {/if}
+  {#if layer && styles.available && styles.rows.length}
+    <LayerEffectsPanel {controller} layerId={layer.id} heading={false} />
+  {/if}
+  {#if layer && canFilter && !generator && !all.some((f) => f.kind === 'effect') && !styles.rows.length}
+    <p class="text-[11px] text-muted-foreground">No effects yet. Add a filter, or a style such as a drop shadow. New effect layers are added from the layers panel.</p>
+  {/if}
   {#if !layer}<p class="text-[11px] text-muted-foreground">Select a layer to apply effects to it.</p>{/if}
   {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
 </section>

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
@@ -16,10 +17,15 @@
     controller: ImageEditorController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
+    /**
+     * Show the "fx Effects" title and the "Add effect" menu (default true). Without them (inside a
+     * panel that adds styles from its own menu) the master switch and Scale stay.
+     */
+    heading?: boolean;
     class?: string;
   }
 
-  let { controller, layerId = null, class: className = '' }: Props = $props();
+  let { controller, layerId = null, heading = true, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -83,7 +89,7 @@
   {@const id = view.id}
   <div class="flex flex-col gap-1.5 text-xs text-foreground {className}" data-testid="layer-effects" aria-label="Layer effects" role="group">
     <div class="flex flex-wrap items-center gap-2">
-      <span class="font-semibold text-foreground">fx Effects</span>
+      {#if heading}<span class="font-semibold text-foreground">fx Effects</span>{:else}<span class="font-semibold text-foreground">Styles</span>{/if}
       <label class="flex items-center gap-1 text-foreground">
         <ImageCheckbox
           label="Effects on"
@@ -108,14 +114,16 @@
         />
         %
       </label>
-      <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}
-      />
+      {#if heading}
+        <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}
+        />
+      {/if}
     </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">
@@ -155,7 +163,7 @@
                   </label>
                 {:else if c.type === 'color'}
                   <label class="flex items-center gap-1.5 text-foreground">
-                    <input type="color" aria-label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).value)} />
+                    <ImageColor label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(v) => change(row.id, c, v)} />
                     {c.label}
                   </label>
                 {:else if c.type === 'checkbox'}

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

@@ -8,6 +8,11 @@ interface Props {
     controller: ImageEditorController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
+    /**
+     * Show the "fx Effects" title and the "Add effect" menu (default true). Without them (inside a
+     * panel that adds styles from its own menu) the master switch and Scale stay.
+     */
+    heading?: boolean;
     class?: string;
 }
 declare const LayerEffectsPanel: import("svelte").Component<Props, {}, "">;

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
-  import { imageChipClass, imageColorInputClass, imageFieldClass } from './styles.js';
+  import { imageChipClass, 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';
   import { untrack } from 'svelte';
@@ -58,26 +59,12 @@
     <label class="flex items-center gap-1">
       <ImageCheckbox label="Fill" checked={options.fill !== null} onchange={(on) => set({ fill: on ? '#4f46e5' : null })} />
       Fill
-      <input
-        type="color"
-        aria-label="Fill colour"
-        disabled={options.fill === null}
-        value={options.fill ?? '#4f46e5'}
-        oninput={(e) => set({ fill: value(e) })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Fill colour" disabled={options.fill === null} value={options.fill ?? '#4f46e5'} oninput={(fill) => set({ fill })} />
     </label>
     <label class="flex items-center gap-1">
       <ImageCheckbox label="Stroke" checked={options.stroke !== null} onchange={(on) => set({ stroke: on ? '#000000' : null })} />
       Stroke
-      <input
-        type="color"
-        aria-label="Stroke colour"
-        disabled={options.stroke === null}
-        value={options.stroke ?? '#000000'}
-        oninput={(e) => set({ stroke: value(e) })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Stroke colour" disabled={options.stroke === null} value={options.stroke ?? '#000000'} oninput={(stroke) => set({ stroke })} />
     </label>
     <label class="flex items-center gap-1">
       Width

package/dist/image-editor/TypeOptionsBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { imageChipClass, imageColorInputClass } from './styles.js';
+  import ImageColor from './controls/ImageColor.svelte';
+  import { imageChipClass } from './styles.js';
   import type { ImageEditorController, TextAlign, TextEditSession, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
   import { TEXT_ALIGNS } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -100,7 +101,7 @@
     </label>
     <button type="button" aria-pressed={view.shown.fontWeight >= 600} class="{imageChipClass(view.shown.fontWeight >= 600)} font-bold" onclick={() => style({ fontWeight: view.shown.fontWeight >= 600 ? 400 : 700 })}>B</button>
     <button type="button" aria-pressed={view.shown.italic} class="{imageChipClass(view.shown.italic)} italic" onclick={() => style({ italic: !view.shown.italic })}>I</button>
-    <input type="color" aria-label="Text colour" value={view.shown.color} oninput={(e) => style({ color: value(e) })} class={imageColorInputClass} />
+    <ImageColor label="Text colour" value={view.shown.color} oninput={(color) => style({ color })} />
   </div>
   <div class="flex gap-1" role="toolbar" aria-label="Alignment">
     {#each TEXT_ALIGNS as a (a)}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getImageEditorControls, type ImageColorProps } from './controls.js';
+  import { imageColorInputClass } from '../styles.js';
+
+  let { value, label, alpha = false, disabled = false, oninput, onstart, onend, class: className = '' }: ImageColorProps = $props();
+  const Host = getImageEditorControls().Color;
+</script>
+
+{#if Host}
+  <Host {value} {label} {alpha} {disabled} {oninput} {onstart} {onend} class={className} />
+{:else}
+  <!-- The native well has no alpha: keep the stored alpha on what it picks. -->
+  <input
+    type="color"
+    aria-label={label}
+    value={value.slice(0, 7)}
+    {disabled}
+    oninput={(e) => oninput((e.currentTarget as HTMLInputElement).value + (alpha ? value.slice(7, 9) : ''))}
+    class="{imageColorInputClass} {className}"
+  />
+{/if}

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

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

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { ParameterColorProps } from '../../parameters/controls.js';
+  import ImageColor from './ImageColor.svelte';
+
+  let { value, label, alpha = false, disabled = false, class: className = '', onchange, ongesturestart, ongestureend }: ParameterColorProps = $props();
+</script>
+
+<!-- A parameter colour drawn with the host's image-editor `Color`. -->
+<ImageColor {value} {label} {alpha} {disabled} class={className} oninput={onchange} onstart={ongesturestart} onend={ongestureend} />

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

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

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

@@ -42,6 +42,22 @@ export interface ImageSelectProps {
     onchange: (value: string) => void;
     class?: string;
 }
+/** A colour well in the image editor's panels. */
+export interface ImageColorProps {
+    /** `#rrggbb`, or `#rrggbbaa` with `alpha`. */
+    value: string;
+    /** The accessible name. */
+    label: string;
+    /** Whether the colour has an alpha channel. */
+    alpha?: boolean;
+    disabled?: boolean;
+    /** Every change while the colour is picked. */
+    oninput: (value: string) => void;
+    /** A pick (e.g. a drag in the picker) starts: changes until `onend` merge into one undo step. */
+    onstart?: () => void;
+    onend?: () => 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.
@@ -50,6 +66,7 @@ export interface ImageEditorControls {
     Checkbox?: Component<ImageCheckboxProps>;
     Range?: Component<ImageRangeProps>;
     Select?: Component<ImageSelectProps>;
+    Color?: Component<ImageColorProps>;
 }
 /**
  * Makes the image editor's panels below this component use the host's controls (call it while

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

@@ -1,4 +1,4 @@
 import type { ParameterComponents } from '../../parameters/controls.js';
 import type { ImageEditorControls } from './controls.js';
-/** The host's image-editor `Range` and `Select` as parameter controls (only the ones it set). */
+/** The host's image-editor `Range`, `Select` and `Color` as parameter controls (only the ones it set). */
 export declare function imageEditorParameterComponents(controls: ImageEditorControls): ParameterComponents;

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

@@ -1,9 +1,11 @@
+import ImageParameterColor from './ImageParameterColor.svelte';
 import ImageParameterSelect from './ImageParameterSelect.svelte';
 import ImageParameterSlider from './ImageParameterSlider.svelte';
-/** The host's image-editor `Range` and `Select` as parameter controls (only the ones it set). */
+/** The host's image-editor `Range`, `Select` and `Color` as parameter controls (only the ones it set). */
 export function imageEditorParameterComponents(controls) {
     return {
         slider: controls.Range ? ImageParameterSlider : undefined,
         select: controls.Select ? ImageParameterSelect : undefined,
+        color: controls.Color ? ImageParameterColor : undefined,
     };
 }

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

@@ -43,7 +43,8 @@ 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 { default as ImageColor } from './controls/ImageColor.svelte';
+export { setImageEditorControls, getImageEditorControls, type ImageEditorControls, type ImageCheckboxProps, type ImageRangeProps, type ImageSelectProps, type ImageSelectOption, type ImageColorProps, } 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

@@ -22,5 +22,6 @@ 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 { default as ImageColor } from './controls/ImageColor.svelte';
 export { setImageEditorControls, getImageEditorControls, } from './controls/controls.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/dist/parameters/ParameterColor.svelte

@@ -3,6 +3,7 @@
   import ColorPicker from '../color/ColorPicker.svelte';
   import ParameterCommitInput from './ParameterCommitInput.svelte';
   import { parameterInputClass } from './styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from './controls.js';
 
   interface Props {
     field: ColorParameterField;
@@ -13,9 +14,10 @@
     ongestureend?: () => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
   }
 
-  let { field, value, onchange, ongesturestart, ongestureend, disabled = false, id }: Props = $props();
+  let { field, value, onchange, ongesturestart, ongestureend, disabled = false, id, components }: Props = $props();
 
   const alpha = $derived(!!field.alpha);
   const hex = $derived(normalizeHexColor(value, true) ?? '#000000ff');
@@ -23,6 +25,8 @@
   const shown = $derived(alpha ? hex : rgb);
   const off = $derived(disabled || !!field.readOnly);
   const name = $derived(parameterLabel(field));
+  const context = getParameterComponents();
+  const CustomColor = $derived(resolveParameterComponents(components, context).color);
 
   let open = $state(false);
   let containerEl = $state<HTMLDivElement | null>(null);
@@ -52,57 +56,61 @@
   });
 </script>
 
-<!-- A colour picker with a hex box and a popup ColorPicker. -->
-<div bind:this={containerEl} class="relative space-y-1.5">
-  <div class="flex items-center gap-2">
-    <button
-      bind:this={buttonEl}
-      type="button"
-      aria-label={name}
-      aria-expanded={open}
-      aria-haspopup="dialog"
-      disabled={off}
-      onclick={() => (open = !open)}
-      class="relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
-    >
-      <span class="absolute inset-0" style:background={shown}></span>
-    </button>
-    <ParameterCommitInput
-      {id}
-      aria-label="{name} hex"
-      value={shown}
-      disabled={off}
-      spellcheck={false}
-      class="{parameterInputClass} font-mono"
-      oncommit={(text) => {
-        const next = normalizeHexColor(text, alpha);
-        if (next) onchange(next);
-      }}
-    />
-  </div>
-  {#if open}
-    <div
-      bind:this={popoverEl}
-      role="dialog"
-      aria-label={name}
-      tabindex="-1"
-      onfocusout={(e) => {
-        if (popoverEl && !popoverEl.contains(e.relatedTarget as Node)) {
-          open = false;
-        }
-      }}
-      class="absolute left-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-xl"
-      style="background: var(--popover, var(--background, #fff));"
-    >
-      <ColorPicker
+<!-- A colour picker with a hex box and a popup ColorPicker, or the host's own colour control. -->
+{#if CustomColor}
+  <CustomColor {id} value={shown} {alpha} swatches={field.swatches} disabled={off} label={name} {onchange} {ongesturestart} {ongestureend} />
+{:else}
+  <div bind:this={containerEl} class="relative space-y-1.5">
+    <div class="flex items-center gap-2">
+      <button
+        bind:this={buttonEl}
+        type="button"
+        aria-label={name}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        disabled={off}
+        onclick={() => (open = !open)}
+        class="relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span class="absolute inset-0" style:background={shown}></span>
+      </button>
+      <ParameterCommitInput
+        {id}
+        aria-label="{name} hex"
         value={shown}
-        {alpha}
-        swatches={field.swatches}
         disabled={off}
-        {onchange}
-        {ongesturestart}
-        {ongestureend}
+        spellcheck={false}
+        class="{parameterInputClass} font-mono"
+        oncommit={(text) => {
+          const next = normalizeHexColor(text, alpha);
+          if (next) onchange(next);
+        }}
       />
     </div>
-  {/if}
-</div>
+    {#if open}
+      <div
+        bind:this={popoverEl}
+        role="dialog"
+        aria-label={name}
+        tabindex="-1"
+        onfocusout={(e) => {
+          if (popoverEl && !popoverEl.contains(e.relatedTarget as Node)) {
+            open = false;
+          }
+        }}
+        class="absolute left-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-xl"
+        style="background: var(--popover, var(--background, #fff));"
+      >
+        <ColorPicker
+          value={shown}
+          {alpha}
+          swatches={field.swatches}
+          disabled={off}
+          {onchange}
+          {ongesturestart}
+          {ongestureend}
+        />
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/parameters/ParameterColor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type ColorParameterField } from '@pixerate/editor/parameters';
+import { type ParameterComponents } from './controls.js';
 interface Props {
     field: ColorParameterField;
     value: string;
@@ -8,6 +9,7 @@ interface Props {
     ongestureend?: () => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
 }
 declare const ParameterColor: import("svelte").Component<Props, {}, "">;
 type ParameterColor = ReturnType<typeof ParameterColor>;

package/dist/parameters/ParameterFieldControl.svelte

@@ -33,7 +33,7 @@
 {:else if field.type === 'choice'}
   <ParameterSelect {field} value={value as string | number} onchange={set} {disabled} {id} {components} />
 {:else if field.type === 'color'}
-  <ParameterColor {field} value={value as string} onchange={set} {ongesturestart} {ongestureend} {disabled} {id} />
+  <ParameterColor {field} value={value as string} onchange={set} {ongesturestart} {ongestureend} {disabled} {id} {components} />
 {:else if field.type === 'vector'}
   <ParameterVector {field} value={value as number[]} onchange={set} {disabled} {id} {components} />
 {:else if field.type === 'image'}

package/dist/parameters/controls.d.ts

@@ -55,11 +55,31 @@ export interface ParameterSelectProps {
     style?: string;
     onchange: (value: string | number) => void;
 }
+/** Props for a custom colour control in parameter panels. */
+export interface ParameterColorProps {
+    id?: string;
+    /** `#rrggbb`, or `#rrggbbaa` with `alpha`. */
+    value: string;
+    /** Whether the field has an alpha channel. */
+    alpha?: boolean;
+    /** Suggested colours for the field, if it has any. */
+    swatches?: readonly string[];
+    disabled?: boolean;
+    /** The field's label. */
+    label: string;
+    class?: string;
+    style?: string;
+    onchange: (value: string) => void;
+    /** A pick starts: changes until `ongestureend` merge into one undo step. */
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+}
 /** Host form controls for parameter panels. Any left out fall back to the default controls. */
 export interface ParameterComponents {
     input?: Component<ParameterInputProps>;
     slider?: Component<ParameterSliderProps>;
     select?: Component<ParameterSelectProps>;
+    color?: Component<ParameterColorProps>;
 }
 /** Makes the parameter panels below this component use the host's controls (call it while a component initialises). */
 export declare function setParameterComponents(components: ParameterComponents): ParameterComponents;

package/dist/parameters/controls.js

@@ -14,5 +14,6 @@ export function resolveParameterComponents(explicit, fallback = getParameterComp
         input: explicit?.input ?? fallback.input,
         slider: explicit?.slider ?? fallback.slider,
         select: explicit?.select ?? fallback.select,
+        color: explicit?.color ?? fallback.color,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.128.5",
+  "version": "0.130.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.175.0"
+    "@pixerate/editor": "0.176.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",