@pixerate/editor-svelte 0.188.0 → 0.190.0

package/dist/paint-editor/BrushEditor.svelte

@@ -29,6 +29,8 @@
     problems = r.problems.length ? r.problems.join(' ') : null;
     if (r.brush !== brush) onchange(r.brush);
   };
+  const setColour = (path: string, light: string, dark: string | null) => set(path, dark === null ? light : { light, dark });
+  const setAt = (path: string, list: Array<string | { light: string; dark: string }>, i: number, entry: string | { light: string; dark: string }) => set(path, list.map((x, j) => (j === i ? entry : x)));
   const save = async () => {
     try {
       await onsaveas?.(name.trim());
@@ -71,22 +73,44 @@
             <input aria-label={c.ariaLabel} value={c.value} placeholder={c.placeholder} onblur={(e) => e.currentTarget.value !== c.value && set(c.path, e.currentTarget.value.trim().toLowerCase())} class="w-28 rounded bg-slate-800 px-1.5 py-0.5" />
           </label>
         {:else if c.kind === 'colour'}
-          <div class="flex items-center justify-between gap-2">
-            <span class="text-slate-400">{c.label}</span>
-            <span class="flex items-center gap-1">
-              <input type="color" aria-label={c.ariaLabel} value={c.value ?? '#000000'} onchange={(e) => set(c.path, e.currentTarget.value)} class="h-5 w-8" />
-              {#if c.value}<button type="button" class={button} onclick={() => set(c.path, undefined)}>None</button>{/if}
-            </span>
+          <!-- One colour, or a light / dark pair resolved for the host's colour scheme. -->
+          <div class="flex flex-col gap-1">
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-slate-400">{c.label}</span>
+              <span class="flex items-center gap-1">
+                <input type="color" aria-label={c.ariaLabel} title={c.dark !== null ? 'On light backgrounds' : undefined} value={c.value ?? '#000000'} onchange={(e) => setColour(c.path, e.currentTarget.value, c.dark)} class="h-5 w-8" />
+                {#if c.dark !== null}
+                  <input type="color" aria-label={`${c.ariaLabel} (dark)`} title="On dark backgrounds" value={c.dark} onchange={(e) => setColour(c.path, c.value ?? '#000000', e.currentTarget.value)} class="h-5 w-8" />
+                {/if}
+                {#if c.value || c.gradient}<button type="button" class={button} onclick={() => set(c.path, undefined)}>None</button>{/if}
+              </span>
+            </div>
+            {#if c.gradient}
+              <span class="text-[10px] text-slate-500">A gradient (its own paint).</span>
+            {:else}
+              <label class="flex items-center gap-2">
+                <input type="checkbox" aria-label={`${c.ariaLabel}: light and dark`} checked={c.dark !== null} onchange={(e) => setColour(c.path, c.value ?? '#000000', e.currentTarget.checked ? (c.value ?? '#ffffff') : null)} /> Light / dark
+              </label>
+            {/if}
           </div>
         {:else if c.kind === 'palette'}
-          <div class="flex flex-wrap items-center gap-1" role="group" aria-label={c.ariaLabel}>
+          <div class="flex flex-col gap-1" role="group" aria-label={c.ariaLabel}>
             <span class="text-slate-400">{c.label}</span>
-            {#each c.value as col, i (`${col}-${i}`)}
-              <button type="button" title={`Remove ${col}`} aria-label={`Remove ${col}`} class="h-4 w-4 rounded ring-1 ring-slate-700" style={`background: ${col}`} onclick={() => set(c.path, c.value.filter((_, j) => j !== i))}></button>
-            {/each}
-            {#if c.value.length < c.max}
-              <input type="color" aria-label="Add a palette colour" onchange={(e) => set(c.path, [...c.value, e.currentTarget.value])} class="h-4 w-6" />
-            {/if}
+            <div class="flex flex-wrap items-center gap-1">
+              {#each c.value as col, i (i)}
+                <span class="flex items-center gap-0.5 rounded bg-slate-900 p-0.5">
+                  <input type="color" aria-label={`Palette colour ${i + 1}`} value={typeof col === 'string' ? col : col.light} onchange={(e) => setAt(c.path, c.value, i, typeof col === 'string' ? e.currentTarget.value : { ...col, light: e.currentTarget.value })} class="h-4 w-5" />
+                  {#if typeof col !== 'string'}
+                    <input type="color" aria-label={`Palette colour ${i + 1} (dark)`} value={col.dark} onchange={(e) => setAt(c.path, c.value, i, { ...col, dark: e.currentTarget.value })} class="h-4 w-5" />
+                  {/if}
+                  <button type="button" aria-label={`Remove palette colour ${i + 1}`} class="px-0.5 text-slate-400 hover:text-white" onclick={() => set(c.path, c.value.filter((_, j) => j !== i))}>×</button>
+                </span>
+              {/each}
+              {#if c.value.length < c.max}
+                <input type="color" aria-label="Add a palette colour" onchange={(e) => set(c.path, [...c.value, e.currentTarget.value])} class="h-4 w-6" />
+                <button type="button" class={button} onclick={() => set(c.path, [...c.value, { light: '#334155', dark: '#e2e8f0' }])}>Add light / dark pair</button>
+              {/if}
+            </div>
           </div>
         {:else if c.kind === 'stamps'}
           <div class="flex flex-wrap gap-1" role="group" aria-label={c.ariaLabel} title={`Up to ${c.max}`}>

package/dist/paint-editor/BrushPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import StickerPicker from './StickerPicker.svelte';
   import { brushLoadColor, brushTakesPaint, downloadBytes, toggleStickerRef, DEFAULT_PAINT_GRADIENT, type PaintEditorController } from '@pixerate/editor/paint-editor';
-  import { PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
+  import { brushColourHex, PAINT_PROFILE, type Brush, type BrushLibraryEntry } from '@pixerate/editor/brushes';
   import { untrack } from 'svelte';
   import BrushEditor from './BrushEditor.svelte';
   import BrushLibraryBrowser from '../brushes/BrushLibraryBrowser.svelte';
@@ -49,6 +49,8 @@
     return untrack(() => controller.brushThumbnail(brush.id, { width: 240, height: 64, color }));
   });
   const carried = $derived(brushLoadColor(snap.mixerLoad));
+  // The brush's suggested colours, resolved for the colour scheme: one click makes one the paint colour.
+  const palette = $derived((spec.colour?.palette ?? []).flatMap((c) => brushColourHex(c, snap.colorScheme) ?? []));
   const loads = $derived(['dab', 'mixer', 'impasto'].includes(brush.engine) || (brush.engine === 'wet' && brush.wet.tool === 'paint'));
   const slug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'brush';
 </script>
@@ -65,7 +67,18 @@
       {/if}
       <button type="button" class={button} onclick={() => controller.cleanMixerBrush(brush.engine === 'mixer')}>Clean</button>
     </div>
-  {:else if section === 'colour' && brushTakesPaint(brush)}
+  {:else if section === 'colour'}
+    {#if palette.length}
+      <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Paint with a palette colour">
+        {#each palette as hex, i (`${hex}-${i}`)}
+          <button type="button" aria-label={`Paint with ${hex}`} title={hex} aria-pressed={snap.color === hex} class={`h-5 w-5 rounded ring-1 ${snap.color === hex ? 'ring-white' : 'ring-slate-700'}`} style={`background: ${hex}`} onclick={() => controller.setColor(hex)}></button>
+        {/each}
+      </div>
+    {/if}
+    <label class="flex items-center gap-2" title="Choosing a brush with a default colour (the highlighter's yellow) makes it your colour unless this is on">
+      <input type="checkbox" aria-label="Keep my colour" checked={snap.colorLocked} onchange={(e) => controller.setColorLocked(e.currentTarget.checked)} /> Keep my colour when choosing a brush
+    </label>
+    {#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>
@@ -75,6 +88,7 @@
         <PaintGradientEditor value={brush.paint} colors={{ paint: snap.color, secondary: snap.secondaryColor }} onchange={(g) => run(() => controller.setBrush({ paint: g }))} />
       {/if}
     </div>
+    {/if}
   {/if}
 {/snippet}
 

package/dist/paint-editor/PaintCanvas.svelte

@@ -10,11 +10,13 @@
     viewCssTransform,
     type PaintEditorController,
     type PaintPresence,
+    type PaintProposals,
     type PaintTool,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { paintEditorState } from './paintEditorRune.svelte.js';
   import PaintPresenceLayer from './PaintPresenceLayer.svelte';
+  import PaintProposalGhosts from './PaintProposalGhosts.svelte';
   import ReferencePanel from './ReferencePanel.svelte';
 
   interface Props {
@@ -29,9 +31,11 @@
     onerror?: (message: string | null) => void;
     /** Agent cursors to draw over the canvas (see `PaintDirector` and `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
   }
-  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, proposals, class: className = '' }: Props = $props();
 
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
@@ -201,6 +205,7 @@
   {#each snap.guides.references.filter((r) => r.visible) as r (r.id)}
     <ReferencePanel {controller} reference={r} />
   {/each}
+  {#if proposals}<PaintProposalGhosts {proposals} {transform} zoom={snap.view.zoom} />{/if}
   {#if presence}<PaintPresenceLayer {presence} view={snap.view} canvas={doc} viewport={size} />{/if}
   <div class="absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none" data-testid="paint-view-status">
     {Math.round(snap.view.zoom * 100)}% · {Math.round(snap.view.rotation)}°{snap.view.mirror ? ' · mirrored' : ''}

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

@@ -1,4 +1,4 @@
-import { type PaintEditorController, type PaintPresence, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
@@ -11,6 +11,8 @@ interface Props {
     onerror?: (message: string | null) => void;
     /** Agent cursors to draw over the canvas (see `PaintDirector` and `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
 }
 declare const PaintCanvas: import("svelte").Component<Props, {}, "">;

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
   import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.svelte';
@@ -23,6 +23,8 @@
     height?: number | string;
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
@@ -35,7 +37,7 @@
     /** Bring the editor on screen (switch to its tab) before the agent acts. */
     onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+  let { controller, fileName, height = 720, presence, proposals, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
 
   /** Controls a paint plan can point at, by `{ kind: 'control', id }`. */
   const PAINT_CONTROLS: Record<string, string> = {
@@ -116,7 +118,7 @@
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
       <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
-      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} {proposals} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">

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

@@ -1,4 +1,4 @@
-import { PaintPresence, type PaintEditorController } from '@pixerate/editor/paint-editor';
+import { PaintPresence, type PaintEditorController, type PaintProposals } from '@pixerate/editor/paint-editor';
 import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: PaintEditorController;
@@ -8,6 +8,8 @@ interface Props {
     height?: number | string;
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
+    /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
+    proposals?: PaintProposals;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the

package/dist/paint-editor/PaintProposalGhosts.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { paintProposalGhost, type PaintProposals, type PaintProposalsState } from '@pixerate/editor/paint-editor';
+
+  interface Props {
+    proposals: PaintProposals;
+    /** The view's CSS transform (`viewCssTransform`). */
+    transform: string;
+    zoom: number;
+  }
+  let { proposals, transform, zoom }: Props = $props();
+
+  let pending = $state.raw<PaintProposalsState>({ proposals: [] });
+  $effect(() => {
+    pending = proposals.getState();
+    return proposals.subscribe((next) => {
+      pending = next;
+    });
+  });
+
+  /** Draws a ghost's pixels into its canvas. */
+  function ghost(node: HTMLCanvasElement, data: Uint8ClampedArray) {
+    const draw = (d: Uint8ClampedArray) => {
+      const ctx = node.getContext('2d');
+      if (ctx && typeof ImageData !== 'undefined') ctx.putImageData(new ImageData(new Uint8ClampedArray(d), node.width, node.height), 0, 0);
+    };
+    draw(data);
+    return { update: draw };
+  }
+</script>
+
+<!-- Pending paint proposals drawn over the canvas: each ghost where its paint would go, translucent with a dashed edge. -->
+{#each pending.proposals as p (p.id)}
+  {@const g = paintProposalGhost(p)}
+  {#if g}
+    <canvas
+      use:ghost={g.data}
+      width={g.width}
+      height={g.height}
+      data-paint-proposal={p.id}
+      title={p.rationale ? `${p.title}: ${p.rationale}` : p.title}
+      aria-label={`Suggested: ${p.title}`}
+      class="absolute left-0 top-0 pointer-events-none"
+      style={`transform: ${transform} translate(${g.x}px, ${g.y}px); transform-origin: 0 0; opacity: 0.7; outline: ${1.5 / zoom}px dashed #a78bfa; outline-offset: ${2 / zoom}px`}
+    ></canvas>
+  {/if}
+{/each}

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

@@ -0,0 +1,10 @@
+import { type PaintProposals } from '@pixerate/editor/paint-editor';
+interface Props {
+    proposals: PaintProposals;
+    /** The view's CSS transform (`viewCssTransform`). */
+    transform: string;
+    zoom: number;
+}
+declare const PaintProposalGhosts: import("svelte").Component<Props, {}, "">;
+type PaintProposalGhosts = ReturnType<typeof PaintProposalGhosts>;
+export default PaintProposalGhosts;

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

@@ -31,6 +31,8 @@ export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
+export { createPaintChangeWatcher, createPaintProposalState, type PaintChangeWatcherRune, type PaintProposalStateRune } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';
 export type PaintEditorProps = ComponentProps<typeof PaintEditorComponent>;
 export type PaintCanvasProps = ComponentProps<typeof PaintCanvasComponent>;

package/dist/paint-editor/index.js

@@ -16,4 +16,6 @@ export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
 export { default as PaintPresenceLayer } from './PaintPresenceLayer.svelte';
+export { default as PaintProposalGhosts } from './PaintProposalGhosts.svelte';
+export { createPaintChangeWatcher, createPaintProposalState } from './paintProposalRune.svelte.js';
 export { createPaintDirector, createReactivePaintEditor, paintEditorState, paintEffectsProvider, usePaintEffectsTools } from './paintEditorRune.svelte.js';

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

@@ -0,0 +1,32 @@
+import { type PaintChange, type PaintChangeFeed, type PaintEditorController, type PaintProposal, type PaintProposals, type PaintProposalsOptions } from '@pixerate/editor/paint-editor';
+export interface PaintProposalStateRune {
+    /** The framework-free store (for `createPaintProposalToolProvider` and agents). */
+    readonly store: PaintProposals;
+    /** Pending proposals (reactive); pass `store` to `PaintCanvas` (`proposals`) to draw them as ghosts. */
+    readonly proposals: readonly PaintProposal[];
+    propose: PaintProposals['propose'];
+    accept: PaintProposals['accept'];
+    reject: PaintProposals['reject'];
+    clear: PaintProposals['clear'];
+}
+/**
+ * Paint an agent suggests without painting it, as a Svelte 5 rune: ghosts the user accepts
+ * (painted on a layer of their own as one undo step, made by the proposer) or dismisses. Pass
+ * `store` to `PaintCanvas` as `proposals` to draw the ghosts, and to
+ * `createPaintProposalToolProvider` for agents. The same API as React's `usePaintProposals`.
+ */
+export declare function createPaintProposalState(controller: PaintEditorController, options?: Omit<PaintProposalsOptions, 'controller'>): PaintProposalStateRune;
+export interface PaintChangeWatcherRune {
+    readonly feed: PaintChangeFeed;
+    /** The latest change (reactive). */
+    readonly last: PaintChange | null;
+}
+/**
+ * What changed in the painting, as a Svelte 5 rune: strokes, fills and layers added, removed or
+ * changed, and the start and end of each stroke, with who made it. For agents that paint
+ * alongside the user. Call during component initialisation; the feed stops on unmount. The same
+ * API as React's `usePaintChangeFeed`.
+ */
+export declare function createPaintChangeWatcher(controller: PaintEditorController, options?: {
+    onChange?: (change: PaintChange) => void;
+}): PaintChangeWatcherRune;

package/dist/paint-editor/paintProposalRune.svelte.js

@@ -0,0 +1,45 @@
+import { createPaintChangeFeed, createPaintProposals, } from '@pixerate/editor/paint-editor';
+/**
+ * Paint an agent suggests without painting it, as a Svelte 5 rune: ghosts the user accepts
+ * (painted on a layer of their own as one undo step, made by the proposer) or dismisses. Pass
+ * `store` to `PaintCanvas` as `proposals` to draw the ghosts, and to
+ * `createPaintProposalToolProvider` for agents. The same API as React's `usePaintProposals`.
+ */
+export function createPaintProposalState(controller, options = {}) {
+    const store = createPaintProposals({ ...options, controller });
+    let state = $state.raw(store.getState());
+    store.subscribe((next) => {
+        state = next;
+    });
+    return {
+        store,
+        get proposals() {
+            return state.proposals;
+        },
+        propose: store.propose,
+        accept: store.accept,
+        reject: store.reject,
+        clear: store.clear,
+    };
+}
+/**
+ * What changed in the painting, as a Svelte 5 rune: strokes, fills and layers added, removed or
+ * changed, and the start and end of each stroke, with who made it. For agents that paint
+ * alongside the user. Call during component initialisation; the feed stops on unmount. The same
+ * API as React's `usePaintChangeFeed`.
+ */
+export function createPaintChangeWatcher(controller, options = {}) {
+    const feed = createPaintChangeFeed(controller);
+    let last = $state.raw(null);
+    feed.subscribe((change) => {
+        last = change;
+        options.onChange?.(change);
+    });
+    $effect(() => () => feed.dispose());
+    return {
+        feed,
+        get last() {
+            return last;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.188.0",
+  "version": "0.190.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -175,7 +175,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.255.0"
+    "@pixerate/editor": "0.257.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",