@pixerate/editor-svelte 0.128.4 → 0.129.0

package/dist/effects/EffectParameters.svelte

@@ -2,6 +2,8 @@
   import { effectFieldValue, effectParameterFields, type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
   import { parameterLabel, parameterValuesEqual, type ParameterValue } from '@pixerate/editor/parameters';
   import ParameterFieldControl from '../parameters/ParameterFieldControl.svelte';
+  import { parameterSelectStyle } from '../parameters/styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from '../parameters/controls.js';
 
   interface Props {
     /** The effect's description (`describe`). */
@@ -25,12 +27,29 @@
     addon?: import('svelte').Snippet<[string]>;
     /** Families offered by font controls (`format: "font"`); default the system font catalog. */
     fonts?: EffectFieldOptions['fonts'];
+    /** Custom host components for inputs, sliders, and selects. */
+    components?: ParameterComponents;
     disabled?: boolean;
     class?: string;
   }
 
-  let { description, values, onchange, onreset, keyframed, onpreset, onpresetname, addon, fonts, disabled = false, class: className = '' }: Props = $props();
+  let {
+    description,
+    values,
+    onchange,
+    onreset,
+    keyframed,
+    onpreset,
+    onpresetname,
+    addon,
+    fonts,
+    components,
+    disabled = false,
+    class: className = ''
+  }: Props = $props();
   const fields = $derived(effectParameterFields(description, { fonts }));
+  const parameterContext = getParameterComponents();
+  const CustomPresetSelect = $derived(resolveParameterComponents(components, parameterContext).select);
   const idBase = `fx-${Math.random().toString(36).slice(2, 8)}`;
   let gesture: string | null = null;
   let count = 0;
@@ -52,10 +71,33 @@
 -->
 <div class="space-y-2 {className}" data-effect-parameters={description.id}>
   {#if (onpreset || onpresetname) && description.presets.length > 0}
-    <select class="w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs" aria-label="{description.name} presets" value="" {disabled} onchange={(e) => preset(e.currentTarget.value)}>
-      <option value="">Presets…</option>
-      {#each description.presets as p (p.name)}<option value={p.name}>{p.name}</option>{/each}
-    </select>
+    {#if CustomPresetSelect}
+      <CustomPresetSelect
+        aria-label="{description.name} presets"
+        label="{description.name} presets"
+        value=""
+        options={[
+          { value: '', label: 'Presets…' },
+          ...description.presets.map((p) => ({ value: p.name, label: p.name }))
+        ]}
+        class="w-full rounded border border-border px-1 py-0.5 text-xs"
+        style={parameterSelectStyle}
+        {disabled}
+        onchange={(val) => preset(String(val))}
+      />
+    {:else}
+      <select
+        class="w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs"
+        style={parameterSelectStyle}
+        aria-label="{description.name} presets"
+        value=""
+        {disabled}
+        onchange={(e) => preset(e.currentTarget.value)}
+      >
+        <option value="" style={parameterSelectStyle}>Presets…</option>
+        {#each description.presets as p (p.name)}<option value={p.name} style={parameterSelectStyle}>{p.name}</option>{/each}
+      </select>
+    {/if}
   {/if}
   {#each fields as field (field.id)}
     {@const label = parameterLabel(field)}
@@ -75,6 +117,7 @@
         {value}
         id="{idBase}-{field.id}"
         disabled={disabled || keyed}
+        {components}
         onchange={(v) => onchange(field.id, v, gesture)}
         ongesturestart={() => (gesture = `${idBase}:${field.id}:${++count}`)}
         ongestureend={() => (gesture = null)}

package/dist/effects/EffectParameters.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
 import { type ParameterValue } from '@pixerate/editor/parameters';
+import { type ParameterComponents } from '../parameters/controls.js';
 interface Props {
     /** The effect's description (`describe`). */
     description: EffectDescription;
@@ -22,6 +23,8 @@ interface Props {
     addon?: import('svelte').Snippet<[string]>;
     /** Families offered by font controls (`format: "font"`); default the system font catalog. */
     fonts?: EffectFieldOptions['fonts'];
+    /** Custom host components for inputs, sliders, and selects. */
+    components?: ParameterComponents;
     disabled?: boolean;
     class?: string;
 }

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/ImageEffectControls.svelte

@@ -2,6 +2,9 @@
   import type { EffectProvider } from '@pixerate/editor/effects';
   import EffectParameters from '../effects/EffectParameters.svelte';
   import { effectDescriptionOf } from '../effects/effects.svelte.js';
+  import { getImageEditorControls } from './controls/controls.js';
+  import { imageEditorParameterComponents } from './controls/parameterControls.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from '../parameters/controls.js';
 
   interface Props {
     provider: EffectProvider | null;
@@ -10,12 +13,16 @@
     values: Readonly<Record<string, unknown>>;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** Host parameter controls; else those of `setParameterComponents`, else the image editor's host `Range` / `Select`. */
+    components?: ParameterComponents;
     /** Extra classes on the root element. */
     class?: string;
   }
 
-  let { provider, effect, name, values, onchange, onpreset, class: className = '' }: Props = $props();
+  let { provider, effect, name, values, onchange, onpreset, components, class: className = '' }: Props = $props();
   const loaded = effectDescriptionOf(() => provider, () => effect);
+  const fallback = resolveParameterComponents(getParameterComponents(), imageEditorParameterComponents(getImageEditorControls()));
+  const effectiveComponents = $derived(resolveParameterComponents(components, fallback));
 </script>
 
 <!-- One effect's controls, loaded from the provider; a note when it does not have the effect. -->
@@ -28,6 +35,6 @@
     <p class="text-[11px] text-muted-foreground">Loading…</p>
   {:else}
     {@const description = loaded.description}
-    <EffectParameters {description} {values} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
+    <EffectParameters {description} {values} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} components={effectiveComponents} />
   {/if}
 </div>

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

@@ -1,4 +1,5 @@
 import type { EffectProvider } from '@pixerate/editor/effects';
+import { type ParameterComponents } from '../parameters/controls.js';
 interface Props {
     provider: EffectProvider | null;
     effect: string;
@@ -6,6 +7,8 @@ interface Props {
     values: Readonly<Record<string, unknown>>;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** Host parameter controls; else those of `setParameterComponents`, else the image editor's host `Range` / `Select`. */
+    components?: ParameterComponents;
     /** Extra classes on the root element. */
     class?: string;
 }

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -4,13 +4,18 @@
   import { untrack } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
   import ImageEffectControls from './ImageEffectControls.svelte';
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
+  import ImageRange from './controls/ImageRange.svelte';
+  import type { ParameterComponents } from '../parameters/index.js';
 
   interface Props {
     controller: ImageEditorController;
+    /** Host controls for the effects' parameters. */
+    components?: ParameterComponents;
     class?: string;
   }
 
-  let { controller, class: className = '' }: Props = $props();
+  let { controller, components, class: className = '' }: Props = $props();
   let tick = $state(0);
   $effect(() => {
     const c = controller;
@@ -78,6 +83,7 @@
         effect={generator.effect}
         name={generator.name}
         values={generator.values}
+        {components}
         onchange={(k, v, g) => run(() => controller.updateEffectLayer(id, { values: { [k]: v as never } }, commit(g)))}
         onpreset={(values) => run(() => controller.updateEffectLayer(id, { values: values as never }))}
       />
@@ -91,8 +97,7 @@
           {@const label = f.name ?? f.effect}
           <li class="rounded border border-border p-1" data-smart-effect={f.id}>
             <div class="flex items-center gap-1">
-              <input type="checkbox" checked={f.enabled} aria-label="{label} on" onchange={(e) => {
-                const enabled = e.currentTarget.checked;
+              <ImageCheckbox checked={f.enabled} label="{label} on" onchange={(enabled) => {
                 run(() => controller.updateEffectFilter(id, f.id, { enabled }));
               }} />
               <button type="button" class="min-w-0 flex-1 truncate text-left text-foreground" aria-expanded={open === f.id} onclick={() => (open = open === f.id ? null : f.id)}>{label}</button>
@@ -104,8 +109,7 @@
               <div class="mt-1 space-y-2">
                 <label class="flex items-center gap-1">
                   <span class="w-14 text-[11px] text-foreground">Opacity</span>
-                  <input type="range" min="0" max="1" step="0.01" class="flex-1" value={f.opacity} aria-label="{label} opacity" oninput={(e) => {
-                    const opacity = Number(e.currentTarget.value);
+                  <ImageRange min={0} max={1} step={0.01} class="flex-1" value={f.opacity} label="{label} opacity" oninput={(opacity) => {
                     run(() => controller.updateEffectFilter(id, f.id, { opacity }));
                   }} />
                 </label>
@@ -114,6 +118,7 @@
                   effect={f.effect}
                   name={f.name}
                   values={f.values}
+                  {components}
                   onchange={(k, v, g) => run(() => controller.updateEffectFilter(id, f.id, { values: { [k]: v as never } }, commit(g)))}
                   onpreset={(values) => run(() => controller.updateEffectFilter(id, f.id, { values: values as never }))}
                 />

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

@@ -1,6 +1,9 @@
 import { type ImageEditorController } from '@pixerate/editor/image-editor';
+import type { ParameterComponents } from '../parameters/index.js';
 interface Props {
     controller: ImageEditorController;
+    /** Host controls for the effects' parameters. */
+    components?: ParameterComponents;
     class?: string;
 }
 declare const ImageProviderEffectsPanel: import("svelte").Component<Props, {}, "">;

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';
@@ -155,7 +156,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/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/ImageParameterSelect.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { matchParameterOptionValue } from '@pixerate/editor/parameters';
+  import type { ParameterSelectProps } from '../../parameters/controls.js';
+  import ImageSelect from './ImageSelect.svelte';
+
+  let { value, options, label, disabled = false, class: className = '', onchange }: ParameterSelectProps = $props();
+  const imageOptions = $derived(options.map((o) => ({ value: String(o.value), label: o.label })));
+</script>
+
+<!-- A parameter select drawn with the host's image-editor `Select` (string values mapped back to the options' own). -->
+<ImageSelect value={String(value)} options={imageOptions} {label} {disabled} class={className} onchange={(v) => onchange(matchParameterOptionValue(options, v))} />

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+import type { ParameterComponents } from '../../parameters/controls.js';
+import type { ImageEditorControls } from './controls.js';
+/** 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

@@ -0,0 +1,11 @@
+import ImageParameterColor from './ImageParameterColor.svelte';
+import ImageParameterSelect from './ImageParameterSelect.svelte';
+import ImageParameterSlider from './ImageParameterSlider.svelte';
+/** 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';