@pixerate/editor-svelte 0.128.5 → 0.129.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import { imageSectionTitleClass } from './styles.js';
@@ -242,13 +243,7 @@
       {:else if layer.kind === 'photoFilter'}
         <label class="flex items-center gap-2 text-foreground">
           Filter colour
-          <input
-            type="color"
-            aria-label="Filter colour"
-            value={layer.params.color}
-            oninput={(e) => setParam(layer, 'color', (e.target as HTMLInputElement).value)}
-            class="h-5 w-8 bg-transparent"
-          />
+          <ImageColor label="Filter colour" value={layer.params.color} oninput={(v) => setParam(layer, 'color', v)} />
         </label>
       {:else if layer.kind === 'invert'}
         <p class="text-muted-foreground text-[11px]">Invert has no settings.</p>
@@ -275,13 +270,7 @@
           <ImageCheckbox label="Tint" checked={layer.params.tint !== null} onchange={(on) => setParam(layer, 'tint', on ? '#e1d3b3' : null)} />
           Tint
           {#if layer.params.tint}
-            <input
-              type="color"
-              aria-label="Tint colour"
-              value={layer.params.tint}
-              oninput={(e) => setParam(layer, 'tint', (e.target as HTMLInputElement).value)}
-              class="h-5 w-8 bg-transparent"
-            />
+            <ImageColor label="Tint colour" value={layer.params.tint} oninput={(v) => setParam(layer, 'tint', v)} />
           {/if}
         </label>
       {/if}

package/dist/image-editor/BrushOptionsBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
-  import { imageChipClass, imageColorInputClass } from './styles.js';
+  import { imageChipClass } from './styles.js';
   import type { ImageEditorController } from '@pixerate/editor/image-editor';
   import {
     userErrorMessage,
@@ -70,23 +71,11 @@
 
   <div class="flex items-center gap-2" role="group" aria-label="Colours">
     <label class="flex items-center gap-1">
-      <input
-        type="color"
-        aria-label="Foreground colour"
-        value={view.foreground}
-        oninput={(e) => controller.setPaintOptions({ foreground: (e.target as HTMLInputElement).value })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Foreground colour" value={view.foreground} oninput={(foreground) => controller.setPaintOptions({ foreground })} />
       <span class="text-muted-foreground">FG</span>
     </label>
     <label class="flex items-center gap-1">
-      <input
-        type="color"
-        aria-label="Background colour"
-        value={view.background}
-        oninput={(e) => controller.setPaintOptions({ background: (e.target as HTMLInputElement).value })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Background colour" value={view.background} oninput={(background) => controller.setPaintOptions({ background })} />
       <span class="text-muted-foreground">BG</span>
     </label>
     <button type="button" title="Swap colours (X)" class={imageChipClass(false)} onclick={() => controller.swapPaintColors()}>Swap</button>

package/dist/image-editor/ImageEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import { imageDividerClass, imageEditorFrameClass, imageEditorHeaderClass, imageErrorBannerClass, imageHeaderButtonClass, imagePrimaryButtonClass, imageRangeClass, imageSectionClass, imageSectionTitleClass, imageSelectClass, imageSidebarClass, imageSmallButtonClass, imageSpinnerClass, imageTabClass, imageTabListClass } from './styles.js';
   import type {
     ExportOptions,
@@ -747,11 +748,7 @@
           <!-- Color & Size -->
           <div class="flex items-center gap-2 mt-2">
             <span class="text-muted-foreground">Color:</span>
-            <input
-              type="color"
-              bind:value={activeColor}
-              class="w-8 h-8 rounded border border-border cursor-pointer bg-transparent"
-            />
+            <ImageColor label="Annotation colour" value={activeColor} oninput={(c) => (activeColor = c)} />
             <div class="flex-1 ml-2">
               <div class="flex justify-between text-muted-foreground mb-0.5">
                 <span>Width:</span>

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
@@ -155,7 +156,7 @@
                   </label>
                 {:else if c.type === 'color'}
                   <label class="flex items-center gap-1.5 text-foreground">
-                    <input type="color" aria-label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).value)} />
+                    <ImageColor label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(v) => change(row.id, c, v)} />
                     {c.label}
                   </label>
                 {:else if c.type === 'checkbox'}

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+  import ImageColor from './controls/ImageColor.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
-  import { imageChipClass, imageColorInputClass, imageFieldClass } from './styles.js';
+  import { imageChipClass, imageFieldClass } from './styles.js';
   import type { ImageEditorController, ShapeToolOptions } from '@pixerate/editor/image-editor';
   import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -58,26 +59,12 @@
     <label class="flex items-center gap-1">
       <ImageCheckbox label="Fill" checked={options.fill !== null} onchange={(on) => set({ fill: on ? '#4f46e5' : null })} />
       Fill
-      <input
-        type="color"
-        aria-label="Fill colour"
-        disabled={options.fill === null}
-        value={options.fill ?? '#4f46e5'}
-        oninput={(e) => set({ fill: value(e) })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Fill colour" disabled={options.fill === null} value={options.fill ?? '#4f46e5'} oninput={(fill) => set({ fill })} />
     </label>
     <label class="flex items-center gap-1">
       <ImageCheckbox label="Stroke" checked={options.stroke !== null} onchange={(on) => set({ stroke: on ? '#000000' : null })} />
       Stroke
-      <input
-        type="color"
-        aria-label="Stroke colour"
-        disabled={options.stroke === null}
-        value={options.stroke ?? '#000000'}
-        oninput={(e) => set({ stroke: value(e) })}
-        class={imageColorInputClass}
-      />
+      <ImageColor label="Stroke colour" disabled={options.stroke === null} value={options.stroke ?? '#000000'} oninput={(stroke) => set({ stroke })} />
     </label>
     <label class="flex items-center gap-1">
       Width

package/dist/image-editor/TypeOptionsBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { imageChipClass, imageColorInputClass } from './styles.js';
+  import ImageColor from './controls/ImageColor.svelte';
+  import { imageChipClass } from './styles.js';
   import type { ImageEditorController, TextAlign, TextEditSession, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
   import { TEXT_ALIGNS } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -100,7 +101,7 @@
     </label>
     <button type="button" aria-pressed={view.shown.fontWeight >= 600} class="{imageChipClass(view.shown.fontWeight >= 600)} font-bold" onclick={() => style({ fontWeight: view.shown.fontWeight >= 600 ? 400 : 700 })}>B</button>
     <button type="button" aria-pressed={view.shown.italic} class="{imageChipClass(view.shown.italic)} italic" onclick={() => style({ italic: !view.shown.italic })}>I</button>
-    <input type="color" aria-label="Text colour" value={view.shown.color} oninput={(e) => style({ color: value(e) })} class={imageColorInputClass} />
+    <ImageColor label="Text colour" value={view.shown.color} oninput={(color) => style({ color })} />
   </div>
   <div class="flex gap-1" role="toolbar" aria-label="Alignment">
     {#each TEXT_ALIGNS as a (a)}

package/dist/image-editor/controls/ImageColor.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getImageEditorControls, type ImageColorProps } from './controls.js';
+  import { imageColorInputClass } from '../styles.js';
+
+  let { value, label, alpha = false, disabled = false, oninput, onstart, onend, class: className = '' }: ImageColorProps = $props();
+  const Host = getImageEditorControls().Color;
+</script>
+
+{#if Host}
+  <Host {value} {label} {alpha} {disabled} {oninput} {onstart} {onend} class={className} />
+{:else}
+  <!-- The native well has no alpha: keep the stored alpha on what it picks. -->
+  <input
+    type="color"
+    aria-label={label}
+    value={value.slice(0, 7)}
+    {disabled}
+    oninput={(e) => oninput((e.currentTarget as HTMLInputElement).value + (alpha ? value.slice(7, 9) : ''))}
+    class="{imageColorInputClass} {className}"
+  />
+{/if}

package/dist/image-editor/controls/ImageColor.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ImageColorProps } from './controls.js';
+declare const ImageColor: import("svelte").Component<ImageColorProps, {}, "">;
+type ImageColor = ReturnType<typeof ImageColor>;
+export default ImageColor;

package/dist/image-editor/controls/ImageParameterColor.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { ParameterColorProps } from '../../parameters/controls.js';
+  import ImageColor from './ImageColor.svelte';
+
+  let { value, label, alpha = false, disabled = false, class: className = '', onchange, ongesturestart, ongestureend }: ParameterColorProps = $props();
+</script>
+
+<!-- A parameter colour drawn with the host's image-editor `Color`. -->
+<ImageColor {value} {label} {alpha} {disabled} class={className} oninput={onchange} onstart={ongesturestart} onend={ongestureend} />

package/dist/image-editor/controls/ImageParameterColor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ParameterColorProps } from '../../parameters/controls.js';
+declare const ImageParameterColor: import("svelte").Component<ParameterColorProps, {}, "">;
+type ImageParameterColor = ReturnType<typeof ImageParameterColor>;
+export default ImageParameterColor;

package/dist/image-editor/controls/controls.d.ts

@@ -42,6 +42,22 @@ export interface ImageSelectProps {
     onchange: (value: string) => void;
     class?: string;
 }
+/** A colour well in the image editor's panels. */
+export interface ImageColorProps {
+    /** `#rrggbb`, or `#rrggbbaa` with `alpha`. */
+    value: string;
+    /** The accessible name. */
+    label: string;
+    /** Whether the colour has an alpha channel. */
+    alpha?: boolean;
+    disabled?: boolean;
+    /** Every change while the colour is picked. */
+    oninput: (value: string) => void;
+    /** A pick (e.g. a drag in the picker) starts: changes until `onend` merge into one undo step. */
+    onstart?: () => void;
+    onend?: () => void;
+    class?: string;
+}
 /**
  * The host's own form controls for the image editor's panels. Any left out fall back to the
  * editor's plain inputs.
@@ -50,6 +66,7 @@ export interface ImageEditorControls {
     Checkbox?: Component<ImageCheckboxProps>;
     Range?: Component<ImageRangeProps>;
     Select?: Component<ImageSelectProps>;
+    Color?: Component<ImageColorProps>;
 }
 /**
  * Makes the image editor's panels below this component use the host's controls (call it while

package/dist/image-editor/controls/parameterControls.d.ts

@@ -1,4 +1,4 @@
 import type { ParameterComponents } from '../../parameters/controls.js';
 import type { ImageEditorControls } from './controls.js';
-/** The host's image-editor `Range` and `Select` as parameter controls (only the ones it set). */
+/** The host's image-editor `Range`, `Select` and `Color` as parameter controls (only the ones it set). */
 export declare function imageEditorParameterComponents(controls: ImageEditorControls): ParameterComponents;

package/dist/image-editor/controls/parameterControls.js

@@ -1,9 +1,11 @@
+import ImageParameterColor from './ImageParameterColor.svelte';
 import ImageParameterSelect from './ImageParameterSelect.svelte';
 import ImageParameterSlider from './ImageParameterSlider.svelte';
-/** The host's image-editor `Range` and `Select` as parameter controls (only the ones it set). */
+/** The host's image-editor `Range`, `Select` and `Color` as parameter controls (only the ones it set). */
 export function imageEditorParameterComponents(controls) {
     return {
         slider: controls.Range ? ImageParameterSlider : undefined,
         select: controls.Select ? ImageParameterSelect : undefined,
+        color: controls.Color ? ImageParameterColor : undefined,
     };
 }

package/dist/image-editor/index.d.ts

@@ -43,7 +43,8 @@ export * from './imageEditorState.svelte.js';
 export { default as ImageCheckbox } from './controls/ImageCheckbox.svelte';
 export { default as ImageRange } from './controls/ImageRange.svelte';
 export { default as ImageSelect } from './controls/ImageSelect.svelte';
-export { setImageEditorControls, getImageEditorControls, type ImageEditorControls, type ImageCheckboxProps, type ImageRangeProps, type ImageSelectProps, type ImageSelectOption, } from './controls/controls.js';
+export { default as ImageColor } from './controls/ImageColor.svelte';
+export { setImageEditorControls, getImageEditorControls, type ImageEditorControls, type ImageCheckboxProps, type ImageRangeProps, type ImageSelectProps, type ImageSelectOption, type ImageColorProps, } from './controls/controls.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type ImageEditorCanvasProps = ComponentProps<typeof ImageEditorCanvasComponent>;
 export type CanvasSizePanelProps = ComponentProps<typeof CanvasSizePanelComponent>;

package/dist/image-editor/index.js

@@ -22,5 +22,6 @@ export * from './imageEditorState.svelte.js';
 export { default as ImageCheckbox } from './controls/ImageCheckbox.svelte';
 export { default as ImageRange } from './controls/ImageRange.svelte';
 export { default as ImageSelect } from './controls/ImageSelect.svelte';
+export { default as ImageColor } from './controls/ImageColor.svelte';
 export { setImageEditorControls, getImageEditorControls, } from './controls/controls.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

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/ParameterFieldControl.svelte

@@ -33,7 +33,7 @@
 {:else if field.type === 'choice'}
   <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} {components} />
 {:else if field.type === 'image'}

package/dist/parameters/controls.d.ts

@@ -55,11 +55,31 @@ export interface ParameterSelectProps {
     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;

package/dist/parameters/controls.js

@@ -14,5 +14,6 @@ export function resolveParameterComponents(explicit, fallback = getParameterComp
         input: explicit?.input ?? fallback.input,
         slider: explicit?.slider ?? fallback.slider,
         select: explicit?.select ?? fallback.select,
+        color: explicit?.color ?? fallback.color,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.128.5",
+  "version": "0.129.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",