@pixerate/editor-svelte 0.128.4 → 0.129.0

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,89 @@
+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;
+}
+/** Props for a custom colour control in parameter panels. */
+export interface ParameterColorProps {
+    id?: string;
+    /** `#rrggbb`, or `#rrggbbaa` with `alpha`. */
+    value: string;
+    /** Whether the field has an alpha channel. */
+    alpha?: boolean;
+    /** Suggested colours for the field, if it has any. */
+    swatches?: readonly string[];
+    disabled?: boolean;
+    /** The field's label. */
+    label: string;
+    class?: string;
+    style?: string;
+    onchange: (value: string) => void;
+    /** A pick starts: changes until `ongestureend` merge into one undo step. */
+    ongesturestart?: () => void;
+    ongestureend?: () => 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>;
+    color?: Component<ParameterColorProps>;
+}
+/** 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,19 @@
+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,
+        color: explicit?.color ?? fallback.color,
+    };
+}

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.4",
+  "version": "0.129.0",
   "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.1"
+    "@pixerate/editor": "0.175.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",