@pixerate/editor-svelte 0.86.3 → 0.88.0

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

@@ -13,7 +13,9 @@ import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
 import type TypeOptionsBarComponent from "./TypeOptionsBar.svelte";
+import type ImageProviderEffectsPanelComponent from "./ImageProviderEffectsPanel.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
 export { default as CurvesEditor } from './CurvesEditor.svelte';
@@ -27,6 +29,7 @@ export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
+export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
@@ -42,5 +45,6 @@ export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponen
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;
 export type TypeOptionsBarProps = ComponentProps<typeof TypeOptionsBarComponent>;
+export type ImageProviderEffectsPanelProps = ComponentProps<typeof ImageProviderEffectsPanelComponent>;
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds, type MosaicRegion, type MosaicImageDataLike } from '@pixerate/editor/image-editor';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}

package/dist/image-editor/index.js

@@ -1,4 +1,5 @@
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
 export { default as CurvesEditor } from './CurvesEditor.svelte';
@@ -12,5 +13,6 @@ export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
+export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/dist/paint-editor/BrushPanel.svelte

@@ -6,7 +6,7 @@
     brushEngineControls,
     brushLoadColor,
     downloadBytes,
-    multiColorSliders,
+    brushTakesPaint,
     patchBrushValue,
     patchPath,
     readPath,
@@ -30,13 +30,14 @@
     type BlendMode,
     type BrushRotation,
     type WetTool,
-    type MultiColorMode,
     type PaintEditorController,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import PaintSlider from './PaintSlider.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
-  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import { DEFAULT_PAINT_GRADIENT } from '@pixerate/editor/paint-editor';
+  import PaintGradientEditor from './PaintGradientEditor.svelte';
+  import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
     controller: PaintEditorController;
@@ -62,14 +63,12 @@
     return untrack(() => new Map(list.map((b) => [b.id, controller.brushThumbnail(b.id, { width: thumbnailWidth, height: thumbnailHeight, color: '#26324a' })])));
   });
   const engine = $derived(brushEngineControls(brush));
-  const mc = $derived(brush.behavior.multicolor);
   const carried = $derived(brushLoadColor(snap.mixerLoad));
   const mixingValue = $derived(engine?.mixingPath === 'blender.mixing' ? brush.blender.mixing : engine?.mixingPath === 'smudge.mixing' ? brush.smudge.mixing : brush.behavior.mixing);
-  const setColors = (colors: string[]) => controller.setBrush({ behavior: { multicolor: { colors } } });
   const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'brush';
 </script>
 
-<!-- The brush library with thumbnails, the active brush's settings and blend, its engine's controls (blender, smudge, pick-up / mix, mixing, dirty, multi-colour, load), save, import and export. -->
+<!-- The brush library with thumbnails, the active brush's settings and blend, its engine's controls (blender, smudge, pick-up / mix, mixing, dirty, brush gradient, load), save, import and export. -->
 <div class={`${panel} ${className}`} data-testid="brush-panel">
   <div class="grid grid-cols-2 gap-1" role="listbox" aria-label="Brushes">
     {#each snap.brushes as b (b.id)}
@@ -188,41 +187,14 @@
           <input type="checkbox" aria-label="Dirty brush" checked={brush.behavior.dirty} onchange={(e) => controller.setBrush({ behavior: { dirty: e.currentTarget.checked } })} /> Dirty brush
         </label>
       {/if}
-      {#if engine.multicolor}
-        <div class="flex flex-col gap-1.5" data-testid="multicolor">
-          <label class="flex items-center justify-between gap-2">
-            <span class="text-slate-400">Multi-colour</span>
-            <select aria-label="Multi-colour" value={mc.mode} onchange={(e) => controller.setBrush({ behavior: { multicolor: { mode: e.currentTarget.value as MultiColorMode } } })} class="rounded bg-slate-800 px-1 py-0.5">
-              <option value="off">Off</option>
-              <option value="tip">Across the tip</option>
-              <option value="dab">Per dab</option>
-            </select>
-          </label>
-          {#if mc.mode !== 'off'}
-            <div class="flex flex-wrap items-center gap-1" aria-label="Multi-colour colours">
-              {#each mc.colors as col, i (i)}
-                <span class="flex items-center">
-                  <input type="color" aria-label={`Multi-colour ${i + 1}`} value={col} onchange={(e) => setColors(mc.colors.map((x, j) => (j === i ? e.currentTarget.value : x)))} class="h-5 w-6 rounded bg-transparent" />
-                  <button type="button" aria-label={`Remove multi-colour ${i + 1}`} class="px-0.5 text-slate-500 hover:text-white" onclick={() => setColors(mc.colors.filter((_, j) => j !== i))}>×</button>
-                </span>
-              {/each}
-              {#if mc.colors.length < 8}
-                <button type="button" class={button} aria-label="Add multi-colour" onclick={() => setColors([...(mc.colors.length ? mc.colors : [snap.color, snap.secondaryColor]), snap.color].slice(0, 8))}>+</button>
-              {/if}
-              {#if mc.colors.length < 2}<span class="text-[10px] text-slate-500">Uses the paint and second colours</span>{/if}
-            </div>
-            {#if mc.mode === 'dab'}
-              <label class="flex items-center justify-between gap-2">
-                <span class="text-slate-400">Order</span>
-                <select aria-label="Colour order" value={mc.order} onchange={(e) => controller.setBrush({ behavior: { multicolor: { order: e.currentTarget.value as 'sequence' | 'random' } } })} class="rounded bg-slate-800 px-1 py-0.5">
-                  <option value="sequence">In order</option>
-                  <option value="random">Random</option>
-                </select>
-              </label>
-            {/if}
-            {#each multiColorSliders(mc.mode) as c (c.path)}
-              <PaintSlider control={c} value={readPath(brush, c.path)} onchange={(v) => controller.setBrush(patchPath(brush as never, c.path, v) as never)} />
-            {/each}
+      {#if brushTakesPaint(brush)}
+        <div class="flex flex-col gap-1.5" data-testid="brush-gradient">
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-slate-400" title="A gradient of the brush's own, used instead of the paint (the multi-colour brush)">Brush gradient</span>
+            <button type="button" aria-pressed={brush.paint !== null} class={chip(brush.paint !== null)} onclick={() => run(() => controller.setBrush({ paint: brush.paint ? null : DEFAULT_PAINT_GRADIENT }))}>{brush.paint ? 'On' : 'Off'}</button>
+          </div>
+          {#if brush.paint}
+            <PaintGradientEditor value={brush.paint} colors={{ paint: snap.color, secondary: snap.secondaryColor }} onchange={(g) => run(() => controller.setBrush({ paint: g }))} />
           {/if}
         </div>
       {/if}

package/dist/paint-editor/BrushPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrushPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/BrushPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAgCH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAOvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoNH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BrushPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/BrushPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EA+BH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AASvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyLH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/paint-editor/ColorPanel.svelte

@@ -18,6 +18,8 @@
     type PaintEditorController,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
+  import { DEFAULT_PAINT_GRADIENT, paintSourceCss } from '@pixerate/editor/paint-editor';
+  import PaintGradientEditor from './PaintGradientEditor.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
@@ -59,7 +61,7 @@
   };
 </script>
 
-<!-- Hue wheel with harmonies, saturation and value, colours, harmony chips, swatches, mixing pad (paint, knife, pick with a sample size, measured mixes, kept pads). -->
+<!-- Hue wheel with harmonies, saturation and value, colours, gradient paint, harmony chips, swatches (colours and gradients), mixing pad (paint, knife, pick with a sample size, measured mixes, kept pads). -->
 <div class={`${panel} ${className}`} data-testid="color-panel">
   <div class="relative self-center" style={`width: ${wheelSize}px; height: ${wheelSize}px`}>
     <div
@@ -101,6 +103,24 @@
       />
     {/key}
   </div>
+  <div class="flex items-center gap-2" data-testid="paint-source">
+    <span
+      class="h-5 flex-1 rounded ring-1 ring-slate-700"
+      aria-label={snap.paint.type === 'gradient' ? 'Gradient paint' : 'Paint colour'}
+      data-testid="paint-well"
+      style:background={paintSourceCss(snap.paint, { paint: color, secondary: snap.secondaryColor })}
+    ></span>
+    <button
+      type="button"
+      class={chip(snap.paint.type === 'gradient')}
+      aria-pressed={snap.paint.type === 'gradient'}
+      title="Paint that changes colour as the stroke goes"
+      onclick={() => run(() => (snap.paint.type === 'gradient' ? controller.setColor(color) : controller.setPaint(DEFAULT_PAINT_GRADIENT)))}>Gradient</button
+    >
+  </div>
+  {#if snap.paint.type === 'gradient'}
+    <PaintGradientEditor value={snap.paint} colors={{ paint: color, secondary: snap.secondaryColor }} onchange={(g) => run(() => controller.setPaint(g))} />
+  {/if}
   <label class="flex items-center gap-2">
     <span class="w-16 text-slate-400">Saturation</span>
     <input type="range" aria-label="Saturation" min="0" max="1" step="0.01" value={hsv.s} oninput={(e) => setHsv(Number(e.currentTarget.value), hsv.v)} class="flex-1 accent-indigo-500" />
@@ -129,19 +149,19 @@
       <button
         type="button"
         role="option"
-        aria-selected={s.color === color}
-        aria-label={s.name ?? s.color}
-        title={`${s.name ?? s.color} (right-click to remove)`}
+        aria-selected={s.paint ? snap.paint === s.paint : snap.paint.type === 'color' && s.color === color}
+        aria-label={s.name ?? (s.paint ? 'Gradient' : s.color)}
+        title={`${s.name ?? (s.paint ? 'Gradient' : s.color)} (right-click to remove)`}
         class="h-5 w-5 rounded ring-1 ring-slate-700"
-        style={`background: ${s.color}`}
-        onclick={() => controller.setColor(s.color)}
+        style:background={s.paint ? paintSourceCss(s.paint, { paint: color, secondary: snap.secondaryColor }) : s.color}
+        onclick={() => run(() => (s.paint ? controller.setPaint(s.paint) : controller.setColor(s.color)))}
         oncontextmenu={(e) => {
           e.preventDefault();
           controller.removeSwatch(i);
         }}
       ></button>
     {/each}
-    <button type="button" class={button} aria-label="Add swatch" onclick={() => controller.addSwatch(color)}>+</button>
+    <button type="button" class={button} aria-label="Add swatch" onclick={() => run(() => controller.addSwatch(snap.paint))}>+</button>
   </div>
   {#if mixingPad}
     <div class="flex flex-col gap-1" data-testid="mixing-pad">

package/dist/paint-editor/ColorPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/ColorPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAgBH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAMvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6KH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ColorPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/ColorPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAgBH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAQvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsLH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/paint-editor/PaintGradientEditor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { PAINT_GRADIENT_KIT, type PaintGradientSource } from '@pixerate/editor/paint-editor';
+  import PaintGradientEditorView from './PaintGradientEditorView.svelte';
+
+  interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: { paint: string; secondary: string };
+    class?: string;
+  }
+  let { value, onchange, colors, class: className = '' }: Props = $props();
+</script>
+
+<!-- The gradient paint editor (see PaintGradientEditorView). -->
+<PaintGradientEditorView {value} {onchange} {colors} class={className} kit={PAINT_GRADIENT_KIT} />

package/dist/paint-editor/PaintGradientEditor.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type PaintGradientSource } from '@pixerate/editor/paint-editor';
+interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: {
+        paint: string;
+        secondary: string;
+    };
+    class?: string;
+}
+declare const PaintGradientEditor: import("svelte").Component<Props, {}, "">;
+type PaintGradientEditor = ReturnType<typeof PaintGradientEditor>;
+export default PaintGradientEditor;
+//# sourceMappingURL=PaintGradientEditor.svelte.d.ts.map

package/dist/paint-editor/PaintGradientEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintGradientEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintGradientEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAI3F,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,2EAA2E;IAC3E,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/paint-editor/PaintGradientEditorView.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import type { Gradient as PaintGradientSource, GradientKit as PaintGradientKit, GradientMappingKind as PaintGradientMappingKind, GradientRepeat as PaintGradientRepeat, GradientSpace as PaintGradientSpace, GradientStop as PaintGradientStop } from './paintGradientTypes.js';
+
+  interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: { paint: string; secondary: string };
+    class?: string;
+    /** The gradient helpers (`PAINT_GRADIENT_KIT`, from the editor's own entry). */
+    kit: PaintGradientKit;
+  }
+  let { value, onchange, colors, class: className = '', kit }: Props = $props();
+  // The kit is a constant module object: reading it once is right.
+  // svelte-ignore state_referenced_locally
+  const {
+    PAINT_GRADIENT_MAPPINGS,
+    PAINT_GRADIENT_MAPPING_LABELS,
+    PAINT_GRADIENT_PRESETS,
+    PAINT_GRADIENT_REPEATS,
+    PAINT_GRADIENT_REPEAT_LABELS,
+    PAINT_GRADIENT_SPACES,
+    PAINT_GRADIENT_SPACE_LABELS,
+    addPaintGradientStop,
+    paintGradientMappingFor,
+    paintSourceCss,
+    removePaintGradientStop,
+    reversePaintGradient,
+    updatePaintGradientStop,
+  } = kit;
+  let selected = $state(0);
+  const sel = $derived(Math.min(selected, value.stops.length - 1));
+  const stop = $derived(value.stops[sel]);
+  const map = $derived(value.map);
+  const button = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-200 hover:bg-slate-700 disabled:opacity-40';
+  const select = 'rounded bg-slate-800 px-1 py-0.5 text-[11px]';
+  const number = 'w-16 rounded bg-slate-800 px-1 py-0.5 text-[11px]';
+  const pct = (v: number) => Math.round(v * 1000) / 10;
+  const stopHex = (c: string) => (c === 'paint' ? colors.paint : c === 'secondary' ? colors.secondary : c);
+  const own = (c: string) => c !== 'paint' && c !== 'secondary';
+  const patchStop = (patch: Partial<PaintGradientStop>) => {
+    const r = updatePaintGradientStop(value, sel, patch);
+    selected = r.index;
+    onchange(r.paint);
+  };
+  const setMap = (m: Record<string, unknown>) => onchange({ ...value, map: { ...map, ...m } as PaintGradientSource['map'] });
+  const addAt = (e: MouseEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const r = addPaintGradientStop(value, rect.width ? (e.clientX - rect.left) / rect.width : 0.5, colors);
+    if (r.index >= 0) {
+      selected = r.index;
+      onchange(r.paint);
+    }
+  };
+</script>
+
+<!-- Gradient paint editor (the vector editor's stop ramp, for paint): stops (colour or the paint / second colour, opacity, position, midpoint), mixing space, what moves the stroke along it, softness, reverse and presets. -->
+<div class={`flex flex-col gap-1.5 text-xs text-slate-200 ${className}`} data-testid="paint-gradient-editor" aria-label="Gradient paint">
+  <div class="flex items-center gap-1">
+    <select
+      aria-label="Gradient preset"
+      class={select}
+      value=""
+      onchange={(e) => {
+        const v = e.currentTarget.value;
+        if (v) {
+          selected = 0;
+          onchange(PAINT_GRADIENT_PRESETS[Number(v)].paint);
+        }
+      }}
+    >
+      <option value="">Presets…</option>
+      {#each PAINT_GRADIENT_PRESETS as p, i (p.name)}<option value={i}>{p.name}</option>{/each}
+    </select>
+    <button type="button" class={button} onclick={() => onchange(reversePaintGradient(value))}>Reverse</button>
+  </div>
+  <div
+    role="slider"
+    tabindex="0"
+    aria-label="Gradient ramp: click to add a stop"
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={pct(stop.offset)}
+    data-testid="paint-gradient-ramp"
+    class="relative h-6 cursor-copy rounded ring-1 ring-slate-700"
+    style:background={paintSourceCss(value, colors)}
+    onclick={addAt}
+    onkeydown={() => {}}
+  ></div>
+  <div class="relative h-4" aria-label="Stops">
+    {#each value.stops as s, i (i)}
+      <button
+        type="button"
+        aria-label={`Stop ${i + 1} at ${pct(s.offset)}%`}
+        aria-pressed={i === sel}
+        class={`absolute top-0 h-4 w-3 -translate-x-1/2 rounded-sm ring-1 ${i === sel ? 'ring-white' : 'ring-slate-600'}`}
+        style:left={`${s.offset * 100}%`}
+        style:background={stopHex(s.color)}
+        onclick={() => (selected = i)}
+      ></button>
+    {/each}
+  </div>
+  <div class="flex flex-wrap items-center gap-1" data-testid="paint-gradient-stop">
+    <select aria-label="Stop colour source" class={select} value={own(stop.color) ? 'color' : stop.color} onchange={(e) => patchStop({ color: e.currentTarget.value === 'color' ? stopHex(stop.color) : e.currentTarget.value })}>
+      <option value="color">Colour</option>
+      <option value="paint">Paint colour</option>
+      <option value="secondary">Second colour</option>
+    </select>
+    {#if own(stop.color)}
+      <input type="color" aria-label="Stop colour" value={stop.color} oninput={(e) => patchStop({ color: e.currentTarget.value })} class="h-6 w-8 rounded bg-transparent" />
+    {/if}
+    <label class="flex items-center gap-1">At <input type="number" aria-label="Stop position" min="0" max="100" step="1" value={pct(stop.offset)} oninput={(e) => patchStop({ offset: Number(e.currentTarget.value) / 100 })} class={number} />%</label>
+    <label class="flex items-center gap-1">Opacity <input type="number" aria-label="Stop opacity" min="0" max="100" step="5" value={pct(stop.opacity ?? 1)} oninput={(e) => patchStop({ opacity: Number(e.currentTarget.value) / 100 })} class={number} />%</label>
+    {#if sel < value.stops.length - 1}
+      <label class="flex items-center gap-1">Midpoint <input type="number" aria-label="Stop midpoint" min="5" max="95" step="1" value={pct(stop.midpoint ?? 0.5)} oninput={(e) => patchStop({ midpoint: Number(e.currentTarget.value) / 100 })} class={number} />%</label>
+    {/if}
+    <button
+      type="button"
+      class={button}
+      disabled={value.stops.length <= 2}
+      onclick={() => {
+        const at = sel;
+        selected = Math.max(0, at - 1);
+        onchange(removePaintGradientStop(value, at));
+      }}>Remove stop</button
+    >
+  </div>
+  <div class="flex flex-wrap items-center gap-1" data-testid="paint-gradient-mapping">
+    <select aria-label="Gradient follows" class={select} value={map.by} onchange={(e) => onchange({ ...value, map: paintGradientMappingFor(e.currentTarget.value as PaintGradientMappingKind, map) })}>
+      {#each PAINT_GRADIENT_MAPPINGS as m (m)}<option value={m}>{PAINT_GRADIENT_MAPPING_LABELS[m]}</option>{/each}
+    </select>
+    {#if map.by === 'distance'}
+      <input type="number" aria-label="Gradient length" min="1" max="100000" value={map.length} oninput={(e) => setMap({ length: Math.max(1, Number(e.currentTarget.value) || 1) })} class={number} />
+      <select aria-label="Gradient length unit" class={select} value={map.unit ?? 'px'} onchange={(e) => setMap({ unit: e.currentTarget.value })}>
+        <option value="px">px</option>
+        <option value="dabs">dabs</option>
+      </select>
+    {/if}
+    {#if map.by === 'time'}
+      <input type="number" aria-label="Gradient duration" min="1" max="600000" value={map.duration} oninput={(e) => setMap({ duration: Math.max(1, Number(e.currentTarget.value) || 1) })} class={number} />
+    {/if}
+    {#if map.by === 'random'}
+      <input type="number" aria-label="Dabs per pick" min="1" max="500" value={map.every ?? 1} oninput={(e) => setMap({ every: Math.max(1, Math.round(Number(e.currentTarget.value) || 1)) })} class={number} />
+    {/if}
+    {#if map.by === 'distance' || map.by === 'time'}
+      <select aria-label="Gradient repeat" class={select} value={map.repeat ?? 'clamp'} onchange={(e) => setMap({ repeat: e.currentTarget.value as PaintGradientRepeat })}>
+        {#each PAINT_GRADIENT_REPEATS as r (r)}<option value={r}>{PAINT_GRADIENT_REPEAT_LABELS[r]}</option>{/each}
+      </select>
+    {/if}
+  </div>
+  <div class="flex items-center gap-1">
+    <select aria-label="Gradient mixing" class={select} value={value.space} onchange={(e) => onchange({ ...value, space: e.currentTarget.value as PaintGradientSpace })}>
+      {#each PAINT_GRADIENT_SPACES as s (s)}<option value={s}>{PAINT_GRADIENT_SPACE_LABELS[s]}</option>{/each}
+    </select>
+    <label class="flex flex-1 items-center gap-1">Softness <input type="range" aria-label="Gradient softness" min="0" max="1" step="0.05" value={value.softness ?? 1} oninput={(e) => onchange({ ...value, softness: Number(e.currentTarget.value) })} class="flex-1 accent-indigo-500" /></label>
+  </div>
+</div>

package/dist/paint-editor/PaintGradientEditorView.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Gradient as PaintGradientSource, GradientKit as PaintGradientKit } from './paintGradientTypes.js';
+interface Props {
+    value: PaintGradientSource;
+    onchange: (paint: PaintGradientSource) => void;
+    /** What `paint` / `secondary` stops show as (the editor's two colours). */
+    colors: {
+        paint: string;
+        secondary: string;
+    };
+    class?: string;
+    /** The gradient helpers (`PAINT_GRADIENT_KIT`, from the editor's own entry). */
+    kit: PaintGradientKit;
+}
+declare const PaintGradientEditorView: import("svelte").Component<Props, {}, "">;
+type PaintGradientEditorView = ReturnType<typeof PaintGradientEditorView>;
+export default PaintGradientEditorView;
+//# sourceMappingURL=PaintGradientEditorView.svelte.d.ts.map

package/dist/paint-editor/PaintGradientEditorView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintGradientEditorView.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/PaintGradientEditorView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,IAAI,mBAAmB,EAAE,WAAW,IAAI,gBAAgB,EAAkK,MAAM,yBAAyB,CAAC;AAG9Q,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,2EAA2E;IAC3E,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,GAAG,EAAE,gBAAgB,CAAC;CACvB;AA0HH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/paint-editor/WetPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { WET_FLOW_KINDS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath, type PaintEditorController, type WetFlowKind } from '@pixerate/editor/paint-editor';
+  import { WET_FLOW_KINDS, WET_GPU_OPTIONS, WET_PARAM_SLIDERS, WET_SPEED_SLIDER, WET_TILT_SLIDERS, readPath, wetEngineSummary, type PaintEditorController, type WetFlowKind, type WetGpuMode } from '@pixerate/editor/paint-editor';
   import PaintSlider from './PaintSlider.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
@@ -24,7 +24,7 @@
   const FLOW_LABELS: Record<WetFlowKind, string> = { none: 'None', linear: 'One way', swirl: 'Swirl', radial: 'Outwards', turbulent: 'Eddies' };
 </script>
 
-<!-- Wet media: status, Dry now, Pause, the water overlay, speed, Wet paper, tilt, the active layer's wet settings and flow map, and the kernel in use. -->
+<!-- Wet media: status, Dry now, Pause, the water overlay, speed, Wet paper, tilt, the active layer's wet settings and flow map, the kernel in use, and Engine B (the WebGPU accelerator) with a switch to force the CPU. -->
 <div class={`${panel} ${className}`} data-testid="wet-panel">
   <div class="flex items-center justify-between">
     <span class={wet.wet ? 'text-sky-300' : 'text-slate-400'} data-testid="wet-status">{wet.wet ? (wet.paused ? 'Wet (paused)' : 'Wet') : 'Dry'}</span>
@@ -62,5 +62,12 @@
   {#if backend.backend}
     <p class="text-[10px] text-slate-500">{backend.backend.kind === 'wasm-threads' ? `WebAssembly, ${backend.backend.threads} threads` : backend.backend.kind === 'wasm' ? 'WebAssembly, one thread' : 'JavaScript'}</p>
   {/if}
+  <label class="flex items-center justify-between gap-2">
+    <span class="text-slate-400">Engine</span>
+    <select aria-label="Wet engine" value={wet.gpu} onchange={(e) => run(() => controller.setWetEngine({ gpu: (e.currentTarget as HTMLSelectElement).value as WetGpuMode }))} class="rounded bg-slate-800 px-1 py-0.5">
+      {#each WET_GPU_OPTIONS as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+    </select>
+  </label>
+  <p class={`text-[10px] ${backend.engine.state === 'active' ? 'text-emerald-300' : 'text-slate-500'}`} data-testid="wet-engine">{wetEngineSummary(backend.engine)}</p>
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

package/dist/paint-editor/WetPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WetPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/WetPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmF,KAAK,qBAAqB,EAAoB,MAAM,+BAA+B,CAAC;AAK5K,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkEH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"WetPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/paint-editor/WetPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAsH,KAAK,qBAAqB,EAAqC,MAAM,+BAA+B,CAAC;AAKhO,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyEH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -8,6 +8,7 @@ import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
 import type StickerPanelComponent from './StickerPanel.svelte';
+import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
 export { default as PaintCanvas } from './PaintCanvas.svelte';
 export { default as PaintToolbar } from './PaintToolbar.svelte';
@@ -17,6 +18,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';
@@ -29,4 +31,5 @@ export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
 export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
+export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/paint-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/paint-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE/G,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACrF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC"}

package/dist/paint-editor/index.js

@@ -7,6 +7,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState } from './paintEditorRune.svelte.js';

package/dist/paint-editor/paintGradientTypes.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Gradient paint types for `PaintGradientEditorView`, written out here so the view imports nothing
+ * from a core entry: it is shared by the paint editor and image editor entries, each of which may
+ * import only its own (`tests/entry-isolation.test.ts`; Svelte ships its components as source).
+ * They copy `@pixerate/editor/paint`'s shapes; the wrappers pass core-typed values in, so
+ * svelte-check fails if the two drift apart.
+ */
+export interface GradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+    midpoint?: number;
+}
+export type GradientRepeat = 'clamp' | 'repeat' | 'mirror';
+export type GradientSpace = 'pigment' | 'oklab' | 'srgb';
+export type GradientMapping = {
+    by: 'distance';
+    length: number;
+    repeat: GradientRepeat;
+    unit?: 'px' | 'dabs';
+} | {
+    by: 'pressure';
+} | {
+    by: 'tilt';
+} | {
+    by: 'velocity';
+} | {
+    by: 'direction';
+} | {
+    by: 'time';
+    duration: number;
+    repeat?: GradientRepeat;
+} | {
+    by: 'across-tip';
+} | {
+    by: 'random';
+    every?: number;
+};
+export type GradientMappingKind = GradientMapping['by'];
+export interface Gradient {
+    type: 'gradient';
+    stops: GradientStop[];
+    space: GradientSpace;
+    map: GradientMapping;
+    softness?: number;
+}
+export type GradientColors = {
+    paint: string;
+    secondary: string;
+};
+/** The `PAINT_GRADIENT_KIT` the view uses. */
+export interface GradientKit {
+    readonly PAINT_GRADIENT_MAPPINGS: readonly GradientMappingKind[];
+    readonly PAINT_GRADIENT_MAPPING_LABELS: Readonly<Record<GradientMappingKind, string>>;
+    readonly PAINT_GRADIENT_PRESETS: readonly {
+        name: string;
+        paint: Gradient;
+    }[];
+    readonly PAINT_GRADIENT_REPEATS: readonly GradientRepeat[];
+    readonly PAINT_GRADIENT_REPEAT_LABELS: Readonly<Record<GradientRepeat, string>>;
+    readonly PAINT_GRADIENT_SPACES: readonly GradientSpace[];
+    readonly PAINT_GRADIENT_SPACE_LABELS: Readonly<Record<GradientSpace, string>>;
+    addPaintGradientStop(g: Gradient, offset: number, colors?: GradientColors): {
+        paint: Gradient;
+        index: number;
+    };
+    paintGradientMappingFor(by: GradientMappingKind, current: GradientMapping): GradientMapping;
+    paintSourceCss(s: Gradient, colors?: GradientColors): string;
+    removePaintGradientStop(g: Gradient, index: number): Gradient;
+    reversePaintGradient(g: Gradient): Gradient;
+    updatePaintGradientStop(g: Gradient, index: number, patch: Partial<GradientStop>): {
+        paint: Gradient;
+        index: number;
+    };
+}
+//# sourceMappingURL=paintGradientTypes.d.ts.map

package/dist/paint-editor/paintGradientTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paintGradientTypes.d.ts","sourceRoot":"","sources":["../../src/paint-editor/paintGradientTypes.ts"],"names":[],"mappings":"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"}

package/dist/paint-editor/paintGradientTypes.js

@@ -0,0 +1,8 @@
+/**
+ * Gradient paint types for `PaintGradientEditorView`, written out here so the view imports nothing
+ * from a core entry: it is shared by the paint editor and image editor entries, each of which may
+ * import only its own (`tests/entry-isolation.test.ts`; Svelte ships its components as source).
+ * They copy `@pixerate/editor/paint`'s shapes; the wrappers pass core-typed values in, so
+ * svelte-check fails if the two drift apart.
+ */
+export {};