@pixerate/editor-svelte 0.128.4 → 0.129.0

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/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} />
+  <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} />
+  <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>;