@pixerate/editor-svelte 0.26.0 → 0.27.0

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"}

package/dist/parameters/ParametersPanel.svelte

@@ -0,0 +1,239 @@
+<script lang="ts" module>
+  // A counter keeps label ids unique per panel (`$props.id()` needs Svelte 5.20, newer than
+  // our peer range). Pass `idPrefix` for ids that match between server and client renders.
+  let nextId = 0;
+</script>
+
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import {
+    isParameterGroup,
+    parameterLabel,
+    parameterValuesEqual,
+    type ParameterField,
+    type ParameterSchemaItem,
+    type ParametersController,
+    type ParametersState
+  } from '@pixerate/editor/parameters';
+  import KeyframeDiamond from './KeyframeDiamond.svelte';
+  import ParameterFieldControl from './ParameterFieldControl.svelte';
+  import { parameterButtonClass, parameterInputClass } from './styles.js';
+
+  interface Props {
+    controller: ParametersController;
+    /** Heading (default: the schema's title). Pass `null` for none. */
+    title?: string | null;
+    /** Undo, redo, reset and randomize buttons (default `true`). */
+    showToolbar?: boolean;
+    /** The preset picker with save and delete (default `true`). */
+    showPresets?: boolean;
+    /** Keyframe diamonds (default: when the controller has a keyframes adapter). */
+    showKeyframes?: boolean;
+    /** Per-field reset buttons on changed values (default `true`). */
+    showFieldReset?: boolean;
+    /** Turns a picked file into a URL for image fields. */
+    resolveFile?: (file: File) => string | Promise<string>;
+    /** Shown when the schema has no fields. */
+    emptyMessage?: string;
+    /** Prefix for the panel's element ids. */
+    idPrefix?: string;
+    class?: string;
+    /** Extra content after the fields. */
+    children?: Snippet;
+  }
+
+  let {
+    controller,
+    title,
+    showToolbar = true,
+    showPresets = true,
+    showKeyframes,
+    showFieldReset = true,
+    resolveFile,
+    emptyMessage = 'No parameters.',
+    idPrefix = `pixerate-parameters-${++nextId}`,
+    class: className = '',
+    children
+  }: Props = $props();
+
+  // Follows a replaced `controller` prop too.
+  let view: ParametersState = $state.raw(untrack(() => controller.getState()));
+  $effect(() => {
+    const current = controller;
+    view = current.getState();
+    return untrack(() =>
+      current.subscribe((next) => {
+        view = next;
+      })
+    );
+  });
+
+  const keys = $derived(showKeyframes ?? view.keyframesEnabled);
+  const heading = $derived(title === undefined ? view.schema.title : title);
+
+  let saving = $state(false);
+  let presetName = $state('');
+  let presetMessage = $state<string | null>(null);
+  const activePreset = $derived(view.presets.find((p) => p.name === view.activePreset));
+
+  function savePreset(e: SubmitEvent) {
+    e.preventDefault();
+    const result = controller.savePreset(presetName);
+    if (result.ok) {
+      saving = false;
+      presetName = '';
+      presetMessage = null;
+    } else presetMessage = result.message;
+  }
+</script>
+
+{#snippet fieldRow(field: ParameterField)}
+  {@const label = parameterLabel(field)}
+  {@const inputId = `${idPrefix}-${field.id}`}
+  {@const error = view.errors[field.id]}
+  <div data-parameter-id={field.id} data-parameter-type={field.type} class="space-y-1">
+    <div class="flex min-h-[1.25rem] items-center gap-1.5">
+      {#if keys}
+        <KeyframeDiamond state={view.keys[field.id] ?? 'none'} {label} ontoggle={() => controller.toggleKeyframe(field.id)} />
+      {/if}
+      <label for={inputId} class="min-w-0 flex-1 truncate text-xs font-medium text-foreground" title={field.description}>{label}</label>
+      {#if showFieldReset && !field.readOnly && !parameterValuesEqual(view.values[field.id], view.defaults[field.id])}
+        <button
+          type="button"
+          class="rounded px-1 text-[11px] text-muted-foreground hover:text-foreground"
+          title="Reset to {String(view.defaults[field.id])}"
+          aria-label="Reset {label}"
+          onclick={() => controller.reset([field.id])}>↺</button
+        >
+      {/if}
+    </div>
+    {#if field.description}
+      <p class="text-[11px] leading-snug text-muted-foreground">{field.description}</p>
+    {/if}
+    <ParameterFieldControl
+      {field}
+      value={view.values[field.id]}
+      id={inputId}
+      {resolveFile}
+      onchange={(v) => controller.setValue(field.id, v)}
+      ongesturestart={() => controller.beginGesture(field.id)}
+      ongestureend={() => controller.endGesture()}
+    />
+    {#if error}
+      <p role="alert" class="text-[11px] text-destructive">{error}</p>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet items(list: readonly ParameterSchemaItem[])}
+  {#each list as item (item.id)}
+    {#if view.visible[item.id] !== false}
+      {#if isParameterGroup(item)}
+        {@const collapsed = !!view.collapsed[item.id]}
+        <section data-parameter-group={item.id} class="rounded-md border border-border">
+          <button
+            type="button"
+            aria-expanded={!collapsed}
+            aria-controls="{idPrefix}-group-{item.id}"
+            onclick={() => controller.toggleCollapsed(item.id)}
+            class="flex w-full items-center gap-1.5 px-2 py-1.5 text-left text-xs font-semibold text-foreground hover:bg-muted"
+          >
+            <span aria-hidden="true" class="inline-block text-[10px] text-muted-foreground transition-transform {collapsed ? '' : 'rotate-90'}"
+              >▶</span
+            >
+            {parameterLabel(item)}
+          </button>
+          {#if !collapsed}
+            <div id="{idPrefix}-group-{item.id}" class="space-y-3 border-t border-border px-2 py-2">
+              {#if item.description}
+                <p class="text-[11px] text-muted-foreground">{item.description}</p>
+              {/if}
+              {@render items(item.fields)}
+            </div>
+          {/if}
+        </section>
+      {:else}
+        {@render fieldRow(item)}
+      {/if}
+    {/if}
+  {/each}
+{/snippet}
+
+<!--
+  Renders a whole parameter schema: collapsible groups, one control per visible field,
+  keyframe diamonds, per-field reset, presets, and undo / redo / reset / randomize. Slider
+  drags and colour picks are one undo step each.
+-->
+<div class="space-y-3 text-foreground {className}" data-parameters-panel="">
+  {#if heading || showToolbar}
+    <div class="flex flex-wrap items-center gap-1.5">
+      {#if heading}
+        <h3 class="mr-auto text-sm font-semibold">{heading}</h3>
+      {/if}
+      {#if showToolbar}
+        <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Parameter actions">
+          <button
+            type="button"
+            class={parameterButtonClass}
+            disabled={!view.canUndo}
+            title={view.canUndo ? `Undo ${view.undoLabel}` : 'Nothing to undo'}
+            onclick={() => controller.undo()}>Undo</button
+          >
+          <button
+            type="button"
+            class={parameterButtonClass}
+            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>
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#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 activePreset && !activePreset.builtIn}
+          <button
+            type="button"
+            class={parameterButtonClass}
+            aria-label="Delete preset {activePreset.name}"
+            onclick={() => controller.deletePreset(activePreset.name)}>Delete</button
+          >
+        {/if}
+      </div>
+      {#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>
+        </form>
+      {/if}
+      {#if presetMessage}
+        <p role="alert" class="text-[11px] text-destructive">{presetMessage}</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if view.fields.length === 0}
+    <p class="text-xs text-muted-foreground">{emptyMessage}</p>
+  {:else}
+    {@render items(view.schema.fields)}
+  {/if}
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,28 @@
+import { type Snippet } from 'svelte';
+import { type ParametersController } from '@pixerate/editor/parameters';
+interface Props {
+    controller: ParametersController;
+    /** Heading (default: the schema's title). Pass `null` for none. */
+    title?: string | null;
+    /** Undo, redo, reset and randomize buttons (default `true`). */
+    showToolbar?: boolean;
+    /** The preset picker with save and delete (default `true`). */
+    showPresets?: boolean;
+    /** Keyframe diamonds (default: when the controller has a keyframes adapter). */
+    showKeyframes?: boolean;
+    /** Per-field reset buttons on changed values (default `true`). */
+    showFieldReset?: boolean;
+    /** Turns a picked file into a URL for image fields. */
+    resolveFile?: (file: File) => string | Promise<string>;
+    /** Shown when the schema has no fields. */
+    emptyMessage?: string;
+    /** Prefix for the panel's element ids. */
+    idPrefix?: string;
+    class?: string;
+    /** Extra content after the fields. */
+    children?: Snippet;
+}
+declare const ParametersPanel: import("svelte").Component<Props, {}, "">;
+type ParametersPanel = ReturnType<typeof ParametersPanel>;
+export default ParametersPanel;
+//# sourceMappingURL=ParametersPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParametersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/ParametersPanel.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAMH,KAAK,oBAAoB,EAE1B,MAAM,6BAA6B,CAAC;AAMrC,UAAU,KAAK;IACb,UAAU,EAAE,oBAAoB,CAAC;IACjC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uDAAuD;IACvD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACvD,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiKH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,32 @@
+import { ParametersController, type ParameterCommandOptions, type ParametersControllerOptions, type ParameterSetResult, type ParametersState, type ParameterValue } from "@pixerate/editor/parameters";
+export interface SvelteParameters {
+    readonly controller: ParametersController;
+    /** The controller's state (reactive). */
+    readonly state: ParametersState;
+    /** Shorthand for `state.values` (reactive). */
+    readonly values: ParametersState["values"];
+    setValue(id: string, value: ParameterValue): ParameterSetResult;
+    undo(): void;
+    redo(): void;
+    reset(ids?: readonly string[]): void;
+    randomize(ids?: readonly string[]): void;
+    /** Stops listening to the controller. */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: subscribes to a `ParametersController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export declare function createParameters(controllerOrOptions: ParametersController | ParametersControllerOptions): SvelteParameters;
+/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */
+export interface ParameterCommandTarget {
+    register(specs: any): () => void;
+}
+/**
+ * Registers the controller's palette / agent commands (`parameters.set`, `…randomize`, …)
+ * for the lifetime of the calling component (call it during initialisation), so
+ * `createCommandToolProvider` exposes them to agents. Pass a getter to follow a changing
+ * registry.
+ */
+export declare function useParameterCommands(registry: ParameterCommandTarget | null | undefined | (() => ParameterCommandTarget | null | undefined), controller: ParametersController, options?: ParameterCommandOptions): void;
+//# sourceMappingURL=createParameters.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createParameters.svelte.d.ts","sourceRoot":"","sources":["../../src/parameters/createParameters.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EAEpB,KAAK,uBAAuB,EAC5B,KAAK,2BAA2B,EAChC,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,UAAU,EAAE,oBAAoB,CAAC;IAC1C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,GAAG,kBAAkB,CAAC;IAChE,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,CAAC,GAAG,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,GAAG,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IACzC,yCAAyC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,mBAAmB,EAAE,oBAAoB,GAAG,2BAA2B,GAAG,gBAAgB,CAsB1H;AAED,0EAA0E;AAC1E,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,sBAAsB,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,sBAAsB,GAAG,IAAI,GAAG,SAAS,CAAC,EACvG,UAAU,EAAE,oBAAoB,EAChC,OAAO,GAAE,uBAA4B,GACpC,IAAI,CAMN"}

package/dist/parameters/createParameters.svelte.js

@@ -0,0 +1,41 @@
+import { ParametersController, createParameterCommands, } from "@pixerate/editor/parameters";
+/**
+ * Svelte 5 rune: subscribes to a `ParametersController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export function createParameters(controllerOrOptions) {
+    const controller = controllerOrOptions instanceof ParametersController ? controllerOrOptions : new ParametersController(controllerOrOptions);
+    let state = $state.raw(controller.getState());
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    return {
+        controller,
+        get state() {
+            return state;
+        },
+        get values() {
+            return state.values;
+        },
+        setValue: (id, value) => controller.setValue(id, value),
+        undo: () => void controller.undo(),
+        redo: () => void controller.redo(),
+        reset: (ids) => void controller.reset(ids),
+        randomize: (ids) => void controller.randomize({ ids }),
+        destroy: unsubscribe,
+    };
+}
+/**
+ * Registers the controller's palette / agent commands (`parameters.set`, `…randomize`, …)
+ * for the lifetime of the calling component (call it during initialisation), so
+ * `createCommandToolProvider` exposes them to agents. Pass a getter to follow a changing
+ * registry.
+ */
+export function useParameterCommands(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createParameterCommands(controller, options));
+    });
+}

package/dist/parameters/index.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "svelte";
+import type ParametersPanelComponent from "./ParametersPanel.svelte";
+export { default as ParametersPanel } from "./ParametersPanel.svelte";
+export { default as ParameterFieldControl } from "./ParameterFieldControl.svelte";
+export { default as ParameterSlider } from "./ParameterSlider.svelte";
+export { default as ParameterNumberInput } from "./ParameterNumberInput.svelte";
+export { default as ParameterToggle } from "./ParameterToggle.svelte";
+export { default as ParameterSelect } from "./ParameterSelect.svelte";
+export { default as ParameterColor } from "./ParameterColor.svelte";
+export { default as ParameterVector } from "./ParameterVector.svelte";
+export { default as ParameterImage } from "./ParameterImage.svelte";
+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 "./styles.js";
+export type ParametersPanelProps = ComponentProps<typeof ParametersPanelComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/parameters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parameters/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/parameters/index.js

@@ -0,0 +1,14 @@
+export { default as ParametersPanel } from "./ParametersPanel.svelte";
+export { default as ParameterFieldControl } from "./ParameterFieldControl.svelte";
+export { default as ParameterSlider } from "./ParameterSlider.svelte";
+export { default as ParameterNumberInput } from "./ParameterNumberInput.svelte";
+export { default as ParameterToggle } from "./ParameterToggle.svelte";
+export { default as ParameterSelect } from "./ParameterSelect.svelte";
+export { default as ParameterColor } from "./ParameterColor.svelte";
+export { default as ParameterVector } from "./ParameterVector.svelte";
+export { default as ParameterImage } from "./ParameterImage.svelte";
+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 "./styles.js";

package/dist/parameters/styles.d.ts

@@ -0,0 +1,4 @@
+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";
+//# sourceMappingURL=styles.d.ts.map

package/dist/parameters/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/parameters/styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB,yOACwM,CAAC;AACzO,eAAO,MAAM,oBAAoB,2QACyO,CAAC;AAC3Q,eAAO,MAAM,mBAAmB,4GAC2E,CAAC"}

package/dist/parameters/styles.js

@@ -0,0 +1,4 @@
+// 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";