@pixerate/editor-svelte 0.26.1 → 0.28.0

package/dist/parameters/ParameterCommitInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterCommitInput.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterCommitInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,UAAU,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAC;IACjF,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+BH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/parameters/ParameterFieldControl.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { ParameterField, ParameterValue } from '@pixerate/editor/parameters';
+  import ParameterColor from './ParameterColor.svelte';
+  import ParameterImage from './ParameterImage.svelte';
+  import ParameterSelect from './ParameterSelect.svelte';
+  import ParameterSlider from './ParameterSlider.svelte';
+  import ParameterText from './ParameterText.svelte';
+  import ParameterToggle from './ParameterToggle.svelte';
+  import ParameterVector from './ParameterVector.svelte';
+
+  interface Props {
+    field: ParameterField;
+    value: ParameterValue;
+    onchange: (value: ParameterValue) => void;
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+    resolveFile?: (file: File) => string | Promise<string>;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, ongesturestart, ongestureend, resolveFile, disabled = false, id }: 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} />
+{: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} />
+{: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} />
+{:else if field.type === 'image'}
+  <ParameterImage {field} value={value as string} onchange={set} {resolveFile} {disabled} {id} />
+{:else if field.type === 'text'}
+  <ParameterText {field} value={value as string} onchange={set} {disabled} {id} />
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ParameterField, ParameterValue } from '@pixerate/editor/parameters';
+interface Props {
+    field: ParameterField;
+    value: ParameterValue;
+    onchange: (value: ParameterValue) => void;
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+    resolveFile?: (file: File) => string | Promise<string>;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterFieldControl: import("svelte").Component<Props, {}, "">;
+type ParameterFieldControl = ReturnType<typeof ParameterFieldControl>;
+export default ParameterFieldControl;
+//# sourceMappingURL=ParameterFieldControl.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterFieldControl.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterFieldControl.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAUhF,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAmCH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/parameters/ParameterImage.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { parameterLabel, type ImageParameterField } from '@pixerate/editor/parameters';
+  import ParameterCommitInput from './ParameterCommitInput.svelte';
+  import { parameterButtonClass } from './styles.js';
+
+  interface Props {
+    field: ImageParameterField;
+    value: string;
+    onchange: (value: string) => void;
+    /** Turns a picked file into a URL (upload it, or `URL.createObjectURL`). Without it there is no file button. */
+    resolveFile?: (file: File) => string | Promise<string>;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, resolveFile, disabled = false, id }: Props = $props();
+
+  const off = $derived(disabled || !!field.readOnly);
+  const name = $derived(parameterLabel(field));
+
+  async function pick(e: Event & { currentTarget: HTMLInputElement }) {
+    const file = e.currentTarget.files?.[0];
+    e.currentTarget.value = '';
+    if (file && resolveFile) onchange(await resolveFile(file));
+  }
+</script>
+
+<!-- An image picker: suggested thumbnails, a URL box, an optional file button and a clear button. -->
+<div class="space-y-1.5">
+  <div class="flex items-center gap-2">
+    <div class="flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted">
+      {#if value}
+        <img src={value} alt={name} class="h-full w-full object-cover" />
+      {:else}
+        <span class="text-[10px] text-muted-foreground">None</span>
+      {/if}
+    </div>
+    <div class="flex min-w-0 flex-1 flex-col gap-1">
+      <ParameterCommitInput
+        {id}
+        aria-label="{name} URL"
+        placeholder="Image URL"
+        value={value.startsWith('data:') ? '' : value}
+        disabled={off}
+        oncommit={(text) => onchange(text.trim())}
+      />
+      <div class="flex gap-1">
+        {#if resolveFile}
+          <label class="{parameterButtonClass} cursor-pointer {off ? 'pointer-events-none opacity-50' : ''}">
+            Choose file…
+            <input type="file" class="sr-only" accept={field.accept ?? 'image/*'} disabled={off} aria-label="{name} file" onchange={pick} />
+          </label>
+        {/if}
+        {#if value}
+          <button type="button" class={parameterButtonClass} disabled={off} onclick={() => onchange('')} aria-label="Clear {name}">Clear</button>
+        {/if}
+      </div>
+    </div>
+  </div>
+  {#if field.options && field.options.length > 0}
+    <div class="flex flex-wrap gap-1">
+      {#each field.options as o (o.url)}
+        <button
+          type="button"
+          title={o.label ?? o.url}
+          aria-label={o.label ?? o.url}
+          aria-pressed={o.url === value}
+          disabled={off}
+          onclick={() => onchange(o.url)}
+          class="h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary"
+        >
+          <img src={o.url} alt="" class="h-full w-full object-cover" />
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import { type ImageParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: ImageParameterField;
+    value: string;
+    onchange: (value: string) => void;
+    /** Turns a picked file into a URL (upload it, or `URL.createObjectURL`). Without it there is no file button. */
+    resolveFile?: (file: File) => string | Promise<string>;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterImage: import("svelte").Component<Props, {}, "">;
+type ParameterImage = ReturnType<typeof ParameterImage>;
+export default ParameterImage;
+//# sourceMappingURL=ParameterImage.svelte.d.ts.map

package/dist/parameters/ParameterImage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterImage.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterImage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAKrF,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gHAAgH;IAChH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAyDH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/parameters/ParameterNumberInput.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import {
+    clampParameterNumber,
+    formatParameterNumber,
+    parameterLabel,
+    parameterStep,
+    parseParameterNumberInput,
+    type NumberParameterField
+  } from '@pixerate/editor/parameters';
+  import ParameterCommitInput from './ParameterCommitInput.svelte';
+  import { parameterInputClass } from './styles.js';
+
+  interface Props {
+    field: NumberParameterField;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+  }
+
+  let { field, value, onchange, disabled = false, id, 'aria-label': ariaLabel }: Props = $props();
+
+  const text = $derived(formatParameterNumber({ ...field, unit: undefined }, value));
+
+  function keydown(e: KeyboardEvent) {
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+    e.preventDefault();
+    const step = parameterStep(field) * (e.shiftKey ? 10 : 1);
+    onchange(clampParameterNumber(field, value + (e.key === 'ArrowUp' ? step : -step)));
+  }
+</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 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}
+</div>

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

@@ -0,0 +1,13 @@
+import { type NumberParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: NumberParameterField;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+}
+declare const ParameterNumberInput: import("svelte").Component<Props, {}, "">;
+type ParameterNumberInput = ReturnType<typeof ParameterNumberInput>;
+export default ParameterNumberInput;
+//# sourceMappingURL=ParameterNumberInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterNumberInput.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterNumberInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAC;AAKrC,UAAU,KAAK;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkCH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/parameters/ParameterSelect.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { choiceOptionLabel, getChoiceOptions, parameterLabel, type ChoiceParameterField } from '@pixerate/editor/parameters';
+  import { parameterInputClass } from './styles.js';
+
+  interface Props {
+    field: ChoiceParameterField;
+    value: string | number;
+    onchange: (value: string | number) => void;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, disabled = false, id }: Props = $props();
+
+  const options = $derived(getChoiceOptions(field));
+  const off = $derived(disabled || !!field.readOnly);
+</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">
+    {#each options as o (o.value)}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={o.value === value}
+        title={o.description}
+        disabled={off}
+        onclick={() => onchange(o.value)}
+        class="rounded px-2 py-0.5 text-xs disabled:opacity-50 {o.value === value
+          ? 'bg-background text-foreground shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'}"
+      >
+        {choiceOptionLabel(o)}
+      </button>
+    {/each}
+  </div>
+{:else}
+  <select
+    {id}
+    aria-label={parameterLabel(field)}
+    value={String(options.findIndex((o) => o.value === value))}
+    disabled={off}
+    class={parameterInputClass}
+    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>
+    {/each}
+  </select>
+{/if}

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

@@ -0,0 +1,12 @@
+import { type ChoiceParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: ChoiceParameterField;
+    value: string | number;
+    onchange: (value: string | number) => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterSelect: import("svelte").Component<Props, {}, "">;
+type ParameterSelect = ReturnType<typeof ParameterSelect>;
+export default ParameterSelect;
+//# sourceMappingURL=ParameterSelect.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterSelect.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuD,KAAK,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAI3H,UAAU,KAAK;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoCH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/parameters/ParameterSlider.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import {
+    clampParameterNumber,
+    formatParameterNumber,
+    isSliderField,
+    parameterLabel,
+    parameterStep,
+    type NumberParameterField
+  } from '@pixerate/editor/parameters';
+  import ParameterNumberInput from './ParameterNumberInput.svelte';
+  import { parameterRangeClass } from './styles.js';
+
+  interface Props {
+    field: NumberParameterField;
+    value: number;
+    onchange: (value: number) => void;
+    /** A drag started: merge changes into one undo step until `ongestureend`. */
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, ongesturestart, ongestureend, disabled = false, id }: Props = $props();
+
+  let dragging = false;
+  function start() {
+    if (dragging) return;
+    dragging = true;
+    ongesturestart?.();
+  }
+  function end() {
+    if (!dragging) return;
+    dragging = false;
+    ongestureend?.();
+  }
+</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)))}
+    />
+    <div class="w-20 shrink-0">
+      <ParameterNumberInput {field} {value} {onchange} {disabled} {id} aria-label="{parameterLabel(field)} value" />
+    </div>
+  </div>
+{:else}
+  <ParameterNumberInput {field} {value} {onchange} {disabled} {id} />
+{/if}

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

@@ -0,0 +1,15 @@
+import { type NumberParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: NumberParameterField;
+    value: number;
+    onchange: (value: number) => void;
+    /** A drag started: merge changes into one undo step until `ongestureend`. */
+    ongesturestart?: () => void;
+    ongestureend?: () => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterSlider: import("svelte").Component<Props, {}, "">;
+type ParameterSlider = ReturnType<typeof ParameterSlider>;
+export default ParameterSlider;
+//# sourceMappingURL=ParameterSlider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAC;AAKrC,UAAU,KAAK;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoCH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/parameters/ParameterText.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { parameterLabel, type TextParameterField } from '@pixerate/editor/parameters';
+  import ParameterCommitInput from './ParameterCommitInput.svelte';
+
+  interface Props {
+    field: TextParameterField;
+    value: string;
+    onchange: (value: string) => void;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, disabled = false, id }: Props = $props();
+</script>
+
+<!-- A text box (or textarea with `multiline`) that commits on blur or Enter. -->
+<ParameterCommitInput
+  {id}
+  aria-label={parameterLabel(field)}
+  multiline={field.multiline}
+  placeholder={field.placeholder}
+  maxlength={field.maxLength}
+  {value}
+  disabled={disabled || field.readOnly}
+  oncommit={onchange}
+/>

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

@@ -0,0 +1,12 @@
+import { type TextParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: TextParameterField;
+    value: string;
+    onchange: (value: string) => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterText: import("svelte").Component<Props, {}, "">;
+type ParameterText = ReturnType<typeof ParameterText>;
+export default ParameterText;
+//# sourceMappingURL=ParameterText.svelte.d.ts.map

package/dist/parameters/ParameterText.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterText.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterText.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAIpF,UAAU,KAAK;IACb,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAcH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/parameters/ParameterToggle.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { parameterLabel, type BooleanParameterField } from '@pixerate/editor/parameters';
+
+  interface Props {
+    field: BooleanParameterField;
+    value: boolean;
+    onchange: (value: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, disabled = false, id }: Props = $props();
+</script>
+
+<!-- An on/off switch for `boolean` fields. -->
+<button
+  type="button"
+  role="switch"
+  {id}
+  aria-checked={value}
+  aria-label={parameterLabel(field)}
+  disabled={disabled || field.readOnly}
+  onclick={() => onchange(!value)}
+  class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 {value
+    ? 'bg-primary'
+    : 'bg-muted'}"
+>
+  <span
+    class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform {value ? 'translate-x-4' : 'translate-x-0.5'}"
+  ></span>
+</button>

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

@@ -0,0 +1,12 @@
+import { type BooleanParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: BooleanParameterField;
+    value: boolean;
+    onchange: (value: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterToggle: import("svelte").Component<Props, {}, "">;
+type ParameterToggle = ReturnType<typeof ParameterToggle>;
+export default ParameterToggle;
+//# sourceMappingURL=ParameterToggle.svelte.d.ts.map

package/dist/parameters/ParameterToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterToggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAGvF,UAAU,KAAK;IACb,KAAK,EAAE,qBAAqB,CAAC;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAiBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/parameters/ParameterVector.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { parameterLabel, vectorComponentField, vectorSize, type VectorParameterField } from '@pixerate/editor/parameters';
+  import ParameterNumberInput from './ParameterNumberInput.svelte';
+
+  interface Props {
+    field: VectorParameterField;
+    value: number[];
+    onchange: (value: number[]) => void;
+    disabled?: boolean;
+    id?: string;
+  }
+
+  let { field, value, onchange, disabled = false, id }: Props = $props();
+
+  const size = $derived(vectorSize(field));
+  const components = $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)}
+    <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
+        field={component}
+        value={value[i] ?? 0}
+        id={i === 0 ? id : undefined}
+        aria-label="{parameterLabel(field)} {component.label}"
+        disabled={disabled || field.readOnly}
+        onchange={(n) => onchange(Array.from({ length: size }, (_, j) => (j === i ? n : (value[j] ?? 0))))}
+      />
+    </label>
+  {/each}
+</div>

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

@@ -0,0 +1,12 @@
+import { type VectorParameterField } from '@pixerate/editor/parameters';
+interface Props {
+    field: VectorParameterField;
+    value: number[];
+    onchange: (value: number[]) => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const ParameterVector: import("svelte").Component<Props, {}, "">;
+type ParameterVector = ReturnType<typeof ParameterVector>;
+export default ParameterVector;
+//# sourceMappingURL=ParameterVector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParameterVector.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParameterVector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoD,KAAK,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIxH,UAAU,KAAK;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAwBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}