@pixerate/editor-svelte 0.128.3 → 0.128.5

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/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/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/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` and `Select` 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,9 @@
+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). */
+export function imageEditorParameterComponents(controls) {
+    return {
+        slider: controls.Range ? ImageParameterSlider : undefined,
+        select: controls.Select ? ImageParameterSelect : undefined,
+    };
+}

package/dist/parameters/ParameterCommitInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from 'svelte/elements';
-  import { parameterInputClass } from './styles.js';
+  import { parameterInputClass, parameterInputStyle } from './styles.js';
 
   interface Props extends Omit<HTMLInputAttributes, 'value' | 'class'> {
     value: string;
@@ -11,15 +11,27 @@
     class?: string;
   }
 
-  let { value, oncommit, multiline = false, class: className = parameterInputClass, onkeydown, ...rest }: Props = $props();
+  let { value, oncommit, multiline = false, class: className = parameterInputClass, onkeydown, onchange, style, ...rest }: Props = $props();
+
+  /** The text last handed to `oncommit` (null once `value` changes), so the blur after Tab or `change` is a no-op. */
+  let lastCommitted: string | null = null;
+  $effect.pre(() => {
+    void value;
+    lastCommitted = null;
+  });
 
   function commit(el: HTMLInputElement | HTMLTextAreaElement) {
-    if (el.value !== value) oncommit(el.value, el);
+    const text = el.value;
+    if (text === value || text === lastCommitted) return;
+    oncommit(text, el);
+    // A refused edit puts the stored text back: then the same text is tried (and refused) again.
+    lastCommitted = el.value === text ? text : null;
   }
 
   function keydown(e: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) {
     (onkeydown as ((e: KeyboardEvent) => void) | undefined)?.(e);
     if (e.defaultPrevented) return;
+    if (e.key === 'Tab') commit(e.currentTarget);
     if (e.key === 'Enter' && (!multiline || e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       commit(e.currentTarget);
@@ -32,10 +44,27 @@
   <textarea
     {...rest as any}
     class="{className} h-auto min-h-[3.5rem] py-1"
+    style="{parameterInputStyle} {style ?? ''}"
     {value}
     onblur={(e) => commit(e.currentTarget)}
+    onchange={(e) => {
+      (onchange as ((e: Event) => void) | undefined)?.(e);
+      commit(e.currentTarget);
+    }}
     onkeydown={keydown}
   ></textarea>
 {:else}
-  <input type="text" {...rest} class={className} {value} onblur={(e) => commit(e.currentTarget)} onkeydown={keydown} />
+  <input
+    type="text"
+    {...rest}
+    class={className}
+    style="{parameterInputStyle} {style ?? ''}"
+    {value}
+    onblur={(e) => commit(e.currentTarget)}
+    onchange={(e) => {
+      (onchange as ((e: Event) => void) | undefined)?.(e);
+      commit(e.currentTarget);
+    }}
+    onkeydown={keydown}
+  />
 {/if}

package/dist/parameters/ParameterFieldControl.svelte

@@ -7,6 +7,7 @@
   import ParameterText from './ParameterText.svelte';
   import ParameterToggle from './ParameterToggle.svelte';
   import ParameterVector from './ParameterVector.svelte';
+  import type { ParameterComponents } from './controls.js';
 
   interface Props {
     field: ParameterField;
@@ -17,23 +18,24 @@
     resolveFile?: (file: File) => string | Promise<string>;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
   }
 
-  let { field, value, onchange, ongesturestart, ongestureend, resolveFile, disabled = false, id }: Props = $props();
+  let { field, value, onchange, ongesturestart, ongestureend, resolveFile, disabled = false, id, components }: Props = $props();
   const set = $derived(onchange as (value: any) => void);
 </script>
 
 <!-- The control for any field type. -->
 {#if field.type === 'number' || field.type === 'int'}
-  <ParameterSlider {field} value={value as number} onchange={set} {ongesturestart} {ongestureend} {disabled} {id} />
+  <ParameterSlider {field} value={value as number} onchange={set} {ongesturestart} {ongestureend} {disabled} {id} {components} />
 {:else if field.type === 'boolean'}
   <ParameterToggle {field} value={value as boolean} onchange={set} {disabled} {id} />
 {:else if field.type === 'choice'}
-  <ParameterSelect {field} value={value as string | number} onchange={set} {disabled} {id} />
+  <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} />
 {:else if field.type === 'vector'}
-  <ParameterVector {field} value={value as number[]} onchange={set} {disabled} {id} />
+  <ParameterVector {field} value={value as number[]} onchange={set} {disabled} {id} {components} />
 {:else if field.type === 'image'}
   <ParameterImage {field} value={value as string} onchange={set} {resolveFile} {disabled} {id} />
 {:else if field.type === 'text'}

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

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

package/dist/parameters/ParameterNumberInput.svelte

@@ -8,7 +8,8 @@
     type NumberParameterField
   } from '@pixerate/editor/parameters';
   import ParameterCommitInput from './ParameterCommitInput.svelte';
-  import { parameterInputClass } from './styles.js';
+  import { parameterInputClass, parameterInputStyle } from './styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from './controls.js';
 
   interface Props {
     field: NumberParameterField;
@@ -17,11 +18,14 @@
     disabled?: boolean;
     id?: string;
     'aria-label'?: string;
+    components?: ParameterComponents;
   }
 
-  let { field, value, onchange, disabled = false, id, 'aria-label': ariaLabel }: Props = $props();
+  let { field, value, onchange, disabled = false, id, 'aria-label': ariaLabel, components }: Props = $props();
 
   const text = $derived(formatParameterNumber({ ...field, unit: undefined }, value));
+  const context = getParameterComponents();
+  const CustomInput = $derived(resolveParameterComponents(components, context).input);
 
   function keydown(e: KeyboardEvent) {
     if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
@@ -29,25 +33,45 @@
     const step = parameterStep(field) * (e.shiftKey ? 10 : 1);
     onchange(clampParameterNumber(field, value + (e.key === 'ArrowUp' ? step : -step)));
   }
+
+  function commitValue(t: string, input?: HTMLInputElement | HTMLTextAreaElement) {
+    const n = parseParameterNumberInput(field, t);
+    // Show the stored value again when the text was not a number or clamps to it.
+    if (n === null || n === value) {
+      if (input) input.value = text;
+    } else {
+      onchange(n);
+    }
+  }
 </script>
 
 <!-- A number box: type a value (units allowed), or step with the arrow keys (Shift ×10). -->
 <div class="relative min-w-0 flex-1">
-  <ParameterCommitInput
-    {id}
-    inputmode="decimal"
-    aria-label={ariaLabel ?? parameterLabel(field)}
-    value={text}
-    disabled={disabled || field.readOnly}
-    class="{parameterInputClass} {field.unit ? 'pr-6' : ''}"
-    onkeydown={keydown}
-    oncommit={(t, input) => {
-      const n = parseParameterNumberInput(field, t);
-      // Show the stored value again when the text was not a number or clamps to it.
-      if (n === null || n === value) input.value = text;
-      else onchange(n);
-    }}
-  />
+  {#if CustomInput}
+    <CustomInput
+      {id}
+      inputmode="decimal"
+      aria-label={ariaLabel ?? parameterLabel(field)}
+      label={parameterLabel(field)}
+      value={text}
+      disabled={disabled || field.readOnly}
+      class="{parameterInputClass} {field.unit ? 'pr-6' : ''}"
+      style={parameterInputStyle}
+      onkeydown={keydown}
+      oncommit={commitValue}
+    />
+  {:else}
+    <ParameterCommitInput
+      {id}
+      inputmode="decimal"
+      aria-label={ariaLabel ?? parameterLabel(field)}
+      value={text}
+      disabled={disabled || field.readOnly}
+      class="{parameterInputClass} {field.unit ? 'pr-6' : ''}"
+      onkeydown={keydown}
+      oncommit={commitValue}
+    />
+  {/if}
   {#if field.unit}
     <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground">{field.unit}</span>
   {/if}

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

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

package/dist/parameters/ParameterSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { choiceOptionLabel, getChoiceOptions, parameterLabel, type ChoiceParameterField } from '@pixerate/editor/parameters';
-  import { parameterInputClass } from './styles.js';
+  import { choiceOptionLabel, getChoiceOptions, matchParameterOptionValue, parameterLabel, type ChoiceParameterField } from '@pixerate/editor/parameters';
+  import { parameterInputClass, parameterSelectStyle } from './styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from './controls.js';
 
   interface Props {
     field: ChoiceParameterField;
@@ -8,17 +9,22 @@
     onchange: (value: string | number) => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
   }
 
-  let { field, value, onchange, disabled = false, id }: Props = $props();
+  let { field, value, onchange, disabled = false, id, components }: Props = $props();
 
   const options = $derived(getChoiceOptions(field));
   const off = $derived(disabled || !!field.readOnly);
+  const context = getParameterComponents();
+  const CustomSelect = $derived(resolveParameterComponents(components, context).select);
+  const label = $derived(parameterLabel(field));
+  const customOptions = $derived(options.map((o) => ({ value: o.value, label: choiceOptionLabel(o), description: o.description })));
 </script>
 
 <!-- A dropdown (or segmented buttons with `control: 'segmented'`) for `choice` fields. -->
 {#if field.control === 'segmented'}
-  <div role="radiogroup" aria-label={parameterLabel(field)} class="inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5">
+  <div role="radiogroup" aria-label={label} class="inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5">
     {#each options as o (o.value)}
       <button
         type="button"
@@ -35,20 +41,33 @@
       </button>
     {/each}
   </div>
+{:else if CustomSelect}
+  <CustomSelect
+    {id}
+    aria-label={label}
+    {label}
+    {value}
+    options={customOptions}
+    disabled={off}
+    class={parameterInputClass}
+    style={parameterSelectStyle}
+    onchange={(v) => onchange(matchParameterOptionValue(options, v))}
+  />
 {:else}
   <select
     {id}
-    aria-label={parameterLabel(field)}
+    aria-label={label}
     value={String(options.findIndex((o) => o.value === value))}
     disabled={off}
     class={parameterInputClass}
+    style={parameterSelectStyle}
     onchange={(e) => {
       const option = options[Number(e.currentTarget.value)];
       if (option) onchange(option.value);
     }}
   >
     {#each options as o, i (o.value)}
-      <option value={String(i)} title={o.description}>{choiceOptionLabel(o)}</option>
+      <option value={String(i)} title={o.description} style={parameterSelectStyle}>{choiceOptionLabel(o)}</option>
     {/each}
   </select>
 {/if}

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

@@ -1,10 +1,12 @@
 import { type ChoiceParameterField } from '@pixerate/editor/parameters';
+import { type ParameterComponents } from './controls.js';
 interface Props {
     field: ChoiceParameterField;
     value: string | number;
     onchange: (value: string | number) => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
 }
 declare const ParameterSelect: import("svelte").Component<Props, {}, "">;
 type ParameterSelect = ReturnType<typeof ParameterSelect>;

package/dist/parameters/ParameterSlider.svelte

@@ -8,7 +8,8 @@
     type NumberParameterField
   } from '@pixerate/editor/parameters';
   import ParameterNumberInput from './ParameterNumberInput.svelte';
-  import { parameterRangeClass } from './styles.js';
+  import { parameterRangeClass, parameterRangeStyle } from './styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from './controls.js';
 
   interface Props {
     field: NumberParameterField;
@@ -19,9 +20,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();
 
   let dragging = false;
   function start() {
@@ -34,31 +36,57 @@
     dragging = false;
     ongestureend?.();
   }
+
+  const context = getParameterComponents();
+  const CustomSlider = $derived(resolveParameterComponents(components, context).slider);
+  const step = $derived(parameterStep(field));
+  const label = $derived(parameterLabel(field));
+  const valuetext = $derived(formatParameterNumber(field, value));
 </script>
 
 <!-- A slider plus number box for `number` / `int` fields (number box only for `control: 'input'` or unbounded fields). -->
 {#if isSliderField(field)}
   <div class="flex items-center gap-2">
-    <input
-      type="range"
-      aria-label={parameterLabel(field)}
-      aria-valuetext={formatParameterNumber(field, value)}
-      min={field.min}
-      max={field.max}
-      step={parameterStep(field)}
-      {value}
-      disabled={disabled || field.readOnly}
-      class={parameterRangeClass}
-      onpointerdown={start}
-      onpointerup={end}
-      onpointercancel={end}
-      onblur={end}
-      oninput={(e) => onchange(clampParameterNumber(field, Number(e.currentTarget.value)))}
-    />
+    {#if CustomSlider}
+      <CustomSlider
+        id={id ? `${id}-slider` : undefined}
+        aria-label={label}
+        {label}
+        aria-valuetext={valuetext}
+        min={field.min ?? 0}
+        max={field.max ?? 100}
+        {step}
+        {value}
+        disabled={disabled || field.readOnly}
+        class={parameterRangeClass}
+        style={parameterRangeStyle}
+        ongesturestart={start}
+        ongestureend={end}
+        oninput={(v) => onchange(clampParameterNumber(field, v))}
+      />
+    {:else}
+      <input
+        type="range"
+        aria-label={label}
+        aria-valuetext={valuetext}
+        min={field.min ?? 0}
+        max={field.max ?? 100}
+        {step}
+        {value}
+        disabled={disabled || field.readOnly}
+        class={parameterRangeClass}
+        style={parameterRangeStyle}
+        onpointerdown={start}
+        onpointerup={end}
+        onpointercancel={end}
+        onblur={end}
+        oninput={(e) => onchange(clampParameterNumber(field, Number(e.currentTarget.value)))}
+      />
+    {/if}
     <div class="w-20 shrink-0">
-      <ParameterNumberInput {field} {value} {onchange} {disabled} {id} aria-label="{parameterLabel(field)} value" />
+      <ParameterNumberInput {field} {value} {onchange} {disabled} {id} aria-label="{label} value" {components} />
     </div>
   </div>
 {:else}
-  <ParameterNumberInput {field} {value} {onchange} {disabled} {id} />
+  <ParameterNumberInput {field} {value} {onchange} {disabled} {id} {components} />
 {/if}

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

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

package/dist/parameters/ParameterVector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { parameterLabel, vectorComponentField, vectorSize, type VectorParameterField } from '@pixerate/editor/parameters';
   import ParameterNumberInput from './ParameterNumberInput.svelte';
+  import type { ParameterComponents } from './controls.js';
 
   interface Props {
     field: VectorParameterField;
@@ -8,17 +9,18 @@
     onchange: (value: number[]) => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
   }
 
-  let { field, value, onchange, disabled = false, id }: Props = $props();
+  let { field, value, onchange, disabled = false, id, components }: Props = $props();
 
   const size = $derived(vectorSize(field));
-  const components = $derived(Array.from({ length: size }, (_, i) => vectorComponentField(field, i)));
+  const vectorFields = $derived(Array.from({ length: size }, (_, i) => vectorComponentField(field, i)));
 </script>
 
 <!-- One number box per component for `vector` fields. -->
 <div class="grid gap-1.5" style:grid-template-columns="repeat({size}, minmax(0, 1fr))">
-  {#each components as component, i (i)}
+  {#each vectorFields as component, i (i)}
     <label class="flex min-w-0 items-center gap-1">
       <span class="w-3 shrink-0 text-[10px] uppercase text-muted-foreground">{component.label}</span>
       <ParameterNumberInput
@@ -27,6 +29,7 @@
         id={i === 0 ? id : undefined}
         aria-label="{parameterLabel(field)} {component.label}"
         disabled={disabled || field.readOnly}
+        {components}
         onchange={(n) => onchange(Array.from({ length: size }, (_, j) => (j === i ? n : (value[j] ?? 0))))}
       />
     </label>

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

@@ -1,10 +1,12 @@
 import { type VectorParameterField } from '@pixerate/editor/parameters';
+import type { ParameterComponents } from './controls.js';
 interface Props {
     field: VectorParameterField;
     value: number[];
     onchange: (value: number[]) => void;
     disabled?: boolean;
     id?: string;
+    components?: ParameterComponents;
 }
 declare const ParameterVector: import("svelte").Component<Props, {}, "">;
 type ParameterVector = ReturnType<typeof ParameterVector>;

package/dist/parameters/ParametersPanel.svelte

@@ -20,7 +20,14 @@
   } from '@pixerate/editor/parameters';
   import KeyframeDiamond from './KeyframeDiamond.svelte';
   import ParameterFieldControl from './ParameterFieldControl.svelte';
-  import { parameterButtonClass, parameterInputClass } from './styles.js';
+  import {
+    parameterButtonClass,
+    parameterButtonStyle,
+    parameterInputClass,
+    parameterInputStyle,
+    parameterSelectStyle
+  } from './styles.js';
+  import { getParameterComponents, resolveParameterComponents, type ParameterComponents } from './controls.js';
 
   interface Props {
     controller: ParametersController;
@@ -36,6 +43,8 @@
     showFieldReset?: boolean;
     /** Turns a picked file into a URL for image fields. */
     resolveFile?: (file: File) => string | Promise<string>;
+    /** Custom host components for inputs, sliders, and selects. */
+    components?: ParameterComponents;
     /** Shown when the schema has no fields. */
     emptyMessage?: string;
     /** Prefix for the panel's element ids. */
@@ -68,9 +77,13 @@
     children,
     playback,
     playbackId = 'parameters',
-    onplaybackreveal
+    onplaybackreveal,
+    components
   }: Props = $props();
 
+  const parameterContext = getParameterComponents();
+  const CustomPresetSelect = $derived(resolveParameterComponents(components, parameterContext).select);
+
   // Agent playback: the cursor visits the controls a call changes.
   let root: HTMLDivElement | undefined = $state();
   const ambientPlayback = getAgentPlayback();
@@ -140,6 +153,7 @@
       value={view.values[field.id]}
       id={inputId}
       {resolveFile}
+      {components}
       onchange={(v) => controller.setValue(field.id, v)}
       ongesturestart={() => controller.beginGesture(field.id)}
       ongestureend={() => controller.endGesture()}
@@ -200,6 +214,7 @@
           <button
             type="button"
             class={parameterButtonClass}
+            style={parameterButtonStyle}
             disabled={!view.canUndo}
             title={view.canUndo ? `Undo ${view.undoLabel}` : 'Nothing to undo'}
             onclick={() => controller.undo()}>Undo</button
@@ -207,12 +222,13 @@
           <button
             type="button"
             class={parameterButtonClass}
+            style={parameterButtonStyle}
             disabled={!view.canRedo}
             title={view.canRedo ? `Redo ${view.redoLabel}` : 'Nothing to redo'}
             onclick={() => controller.redo()}>Redo</button
           >
-          <button type="button" class={parameterButtonClass} disabled={!view.modified} onclick={() => controller.reset()}>Reset</button>
-          <button type="button" class={parameterButtonClass} onclick={() => controller.randomize()}>Randomize</button>
+          <button type="button" class={parameterButtonClass} style={parameterButtonStyle} disabled={!view.modified} onclick={() => controller.reset()}>Reset</button>
+          <button type="button" class={parameterButtonClass} style={parameterButtonStyle} onclick={() => controller.randomize()}>Randomize</button>
         </div>
       {/if}
     </div>
@@ -221,22 +237,42 @@
   {#if showPresets}
     <div class="space-y-1.5" data-parameter-presets="">
       <div class="flex items-center gap-1.5">
-        <select
-          aria-label="Preset"
-          class={parameterInputClass}
-          value={view.activePreset ?? ''}
-          onchange={(e) => e.currentTarget.value && controller.applyPreset(e.currentTarget.value)}
-        >
-          <option value="">{view.presets.length ? 'Presets…' : 'No presets'}</option>
-          {#each view.presets as p (p.name)}
-            <option value={p.name} title={p.description}>{p.name}</option>
-          {/each}
-        </select>
-        <button type="button" class={parameterButtonClass} aria-expanded={saving} onclick={() => (saving = !saving)}>Save…</button>
+        {#if CustomPresetSelect}
+          <CustomPresetSelect
+            aria-label="Preset"
+            label="Preset"
+            value={view.activePreset ?? ''}
+            options={[
+              { value: '', label: view.presets.length ? 'Presets…' : 'No presets' },
+              ...view.presets.map((p) => ({ value: p.name, label: p.name, description: p.description }))
+            ]}
+            class={parameterInputClass}
+            style={parameterSelectStyle}
+            onchange={(val) => {
+              const str = String(val);
+              if (str) controller.applyPreset(str);
+            }}
+          />
+        {:else}
+          <select
+            aria-label="Preset"
+            class={parameterInputClass}
+            style={parameterSelectStyle}
+            value={view.activePreset ?? ''}
+            onchange={(e) => e.currentTarget.value && controller.applyPreset(e.currentTarget.value)}
+          >
+            <option value="" style={parameterSelectStyle}>{view.presets.length ? 'Presets…' : 'No presets'}</option>
+            {#each view.presets as p (p.name)}
+              <option value={p.name} title={p.description} style={parameterSelectStyle}>{p.name}</option>
+            {/each}
+          </select>
+        {/if}
+        <button type="button" class={parameterButtonClass} style={parameterButtonStyle} aria-expanded={saving} onclick={() => (saving = !saving)}>Save…</button>
         {#if activePreset && !activePreset.builtIn}
           <button
             type="button"
             class={parameterButtonClass}
+            style={parameterButtonStyle}
             aria-label="Delete preset {activePreset.name}"
             onclick={() => controller.deletePreset(activePreset.name)}>Delete</button
           >
@@ -245,8 +281,8 @@
       {#if saving}
         <form class="flex items-center gap-1.5" onsubmit={savePreset}>
           <!-- svelte-ignore a11y_autofocus -->
-          <input autofocus aria-label="Preset name" placeholder="Preset name" class={parameterInputClass} bind:value={presetName} />
-          <button type="submit" class={parameterButtonClass}>Save</button>
+          <input autofocus aria-label="Preset name" placeholder="Preset name" class={parameterInputClass} style={parameterInputStyle} bind:value={presetName} />
+          <button type="submit" class={parameterButtonClass} style={parameterButtonStyle}>Save</button>
         </form>
       {/if}
       {#if presetMessage}

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

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { AgentPlayback } from '@pixerate/editor/tools';
 import { type ParametersController } from '@pixerate/editor/parameters';
+import { type ParameterComponents } from './controls.js';
 interface Props {
     controller: ParametersController;
     /** Heading (default: the schema's title). Pass `null` for none. */
@@ -15,6 +16,8 @@ interface Props {
     showFieldReset?: boolean;
     /** Turns a picked file into a URL for image fields. */
     resolveFile?: (file: File) => string | Promise<string>;
+    /** Custom host components for inputs, sliders, and selects. */
+    components?: ParameterComponents;
     /** Shown when the schema has no fields. */
     emptyMessage?: string;
     /** Prefix for the panel's element ids. */

package/dist/parameters/controls.d.ts

@@ -0,0 +1,69 @@
+import { type Component } from 'svelte';
+/** Props for a custom number input in parameter panels. Call `oncommit` when an edit is done (blur, Enter, Tab). */
+export interface ParameterInputProps {
+    id?: string;
+    /** The stored value as text, without the unit. */
+    value: string;
+    disabled?: boolean;
+    'aria-label'?: string;
+    /** The field's label. */
+    label: string;
+    inputmode?: 'decimal' | 'text' | 'numeric';
+    class?: string;
+    style?: string;
+    /** Commits typed text. Pass the element to have a refused edit show the stored value again. */
+    oncommit: (value: string, input?: HTMLInputElement | HTMLTextAreaElement) => void;
+    /** Arrow keys step the value (Shift ×10). */
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+/** Props for a custom slider in parameter panels. */
+export interface ParameterSliderProps {
+    id?: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+    /** The field's label. */
+    label: string;
+    'aria-valuetext'?: string;
+    class?: string;
+    style?: string;
+    /** Every change while the value moves. */
+    oninput: (value: number) => void;
+    /** A drag (or key press) starts: changes until `ongestureend` merge into one undo step. */
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+}
+/** One option in a dropdown parameter control. */
+export interface ParameterSelectOption {
+    value: string | number;
+    label: string;
+    description?: string;
+}
+/** Props for a custom select in parameter panels. `onchange` takes an option's `value` (or its string form). */
+export interface ParameterSelectProps {
+    id?: string;
+    value: string | number;
+    options: readonly ParameterSelectOption[];
+    disabled?: boolean;
+    'aria-label'?: string;
+    /** The control's label. */
+    label: string;
+    class?: string;
+    style?: string;
+    onchange: (value: string | number) => 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>;
+}
+/** 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;
+/** The controls set by an ancestor with {@link setParameterComponents}, or none. */
+export declare function getParameterComponents(): ParameterComponents;
+/** The controls to use: each one from `explicit`, else from `fallback` (default: the context's). */
+export declare function resolveParameterComponents(explicit?: ParameterComponents, fallback?: ParameterComponents): ParameterComponents;

package/dist/parameters/controls.js

@@ -0,0 +1,18 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('pixerate.parameters.components');
+/** Makes the parameter panels below this component use the host's controls (call it while a component initialises). */
+export function setParameterComponents(components) {
+    return setContext(KEY, components);
+}
+/** The controls set by an ancestor with {@link setParameterComponents}, or none. */
+export function getParameterComponents() {
+    return getContext(KEY) ?? {};
+}
+/** The controls to use: each one from `explicit`, else from `fallback` (default: the context's). */
+export function resolveParameterComponents(explicit, fallback = getParameterComponents()) {
+    return {
+        input: explicit?.input ?? fallback.input,
+        slider: explicit?.slider ?? fallback.slider,
+        select: explicit?.select ?? fallback.select,
+    };
+}

package/dist/parameters/index.d.ts

@@ -13,5 +13,6 @@ export { default as ParameterText } from "./ParameterText.svelte";
 export { default as ParameterCommitInput } from "./ParameterCommitInput.svelte";
 export { default as KeyframeDiamond } from "./KeyframeDiamond.svelte";
 export * from "./createParameters.svelte.js";
+export * from "./controls.js";
 export * from "./styles.js";
 export type ParametersPanelProps = ComponentProps<typeof ParametersPanelComponent>;

package/dist/parameters/index.js

@@ -11,4 +11,5 @@ export { default as ParameterText } from "./ParameterText.svelte";
 export { default as ParameterCommitInput } from "./ParameterCommitInput.svelte";
 export { default as KeyframeDiamond } from "./KeyframeDiamond.svelte";
 export * from "./createParameters.svelte.js";
+export * from "./controls.js";
 export * from "./styles.js";

package/dist/parameters/styles.d.ts

@@ -1,3 +1,9 @@
 export declare const parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
 export declare const parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
 export declare const parameterRangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
+/** Inline theme styles (`--pixerate-parameter-*` tokens with host fallbacks), shared with React through core. */
+export declare const parameterInputStyle: string;
+export declare const parameterSelectStyle: string;
+/** Text and border only, so the button classes' `hover:` background still applies. */
+export declare const parameterButtonStyle: string;
+export declare const parameterRangeStyle: string;

package/dist/parameters/styles.js

@@ -1,4 +1,11 @@
+import { parameterThemeStyleText } from "@pixerate/editor/parameters";
 // Class names shared by the parameter controls (the same as the React package's).
 export const parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
 export const parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
 export const parameterRangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
+/** Inline theme styles (`--pixerate-parameter-*` tokens with host fallbacks), shared with React through core. */
+export const parameterInputStyle = parameterThemeStyleText("input");
+export const parameterSelectStyle = parameterThemeStyleText("select");
+/** Text and border only, so the button classes' `hover:` background still applies. */
+export const parameterButtonStyle = parameterThemeStyleText("button");
+export const parameterRangeStyle = parameterThemeStyleText("range");

package/package.json

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