@pixerate/editor-svelte 0.189.0 → 0.191.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

@@ -11,7 +11,10 @@
     type PaintEditorController,
     type PaintPresence,
     type PaintProposals,
+    type PaintAgentStrokes,
+    type PaintAgentStrokesState,
     type PaintTool,
+    paintAgentStrokePoints,
   } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { paintEditorState } from './paintEditorRune.svelte.js';
@@ -33,9 +36,23 @@
     presence?: PaintPresence;
     /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
     proposals?: PaintProposals;
+    /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
+    agentStrokes?: PaintAgentStrokes;
     class?: string;
   }
-  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, proposals, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, class: className = '' }: Props = $props();
+  let agentLines = $state.raw<PaintAgentStrokesState>({ strokes: [] });
+  $effect(() => {
+    const store = agentStrokes;
+    if (!store) {
+      agentLines = { strokes: [] };
+      return;
+    }
+    agentLines = store.getState();
+    return store.subscribe((next) => {
+      agentLines = next;
+    });
+  });
 
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
@@ -198,6 +215,9 @@
         stroke-dasharray={l.kind === 'symmetry' ? `${6 / snap.view.zoom} ${4 / snap.view.zoom}` : undefined}
       />
     {/each}
+    {#each agentLines.strokes as s (s.id)}
+      <polyline data-agent-stroke={s.id} points={paintAgentStrokePoints(s)} fill="none" stroke={s.color} stroke-opacity={s.opacity ?? 0.6} stroke-width={s.size} stroke-linecap="round" stroke-linejoin="round" />
+    {/each}
     {#if predicted.length > 0}
       <polyline points={predicted.map((p) => `${p.x},${p.y}`).join(' ')} fill="none" stroke={snap.color} stroke-opacity="0.5" stroke-width={Math.max(1, snap.brush.tip.size / 2)} stroke-linecap="round" />
     {/if}

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

@@ -1,4 +1,4 @@
-import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
@@ -13,6 +13,8 @@ interface Props {
     presence?: PaintPresence;
     /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
     proposals?: PaintProposals;
+    /** Strokes an agent is painting live alongside the user's, drawn as soft lines (see `createPaintAgentStrokes`). */
+    agentStrokes?: PaintAgentStrokes;
     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 PaintProposals, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, 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';
@@ -25,6 +25,8 @@
     presence?: PaintPresence;
     /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
     proposals?: PaintProposals;
+    /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
+    agentStrokes?: PaintAgentStrokes;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
@@ -37,7 +39,7 @@
     /** Bring the editor on screen (switch to its tab) before the agent acts. */
     onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, proposals, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+  let { controller, fileName, height = 720, presence, proposals, agentStrokes, 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> = {
@@ -118,7 +120,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} {proposals} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} {proposals} {agentStrokes} 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, type PaintProposals } from '@pixerate/editor/paint-editor';
+import { PaintPresence, type PaintEditorController, type PaintProposals, type PaintAgentStrokes } from '@pixerate/editor/paint-editor';
 import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: PaintEditorController;
@@ -10,6 +10,8 @@ interface Props {
     presence?: PaintPresence;
     /** Paint an agent suggests, drawn over the canvas as ghosts (see `createPaintProposalState`). */
     proposals?: PaintProposals;
+    /** Strokes an agent is painting live alongside the user's (see `createPaintAgentStrokes`). */
+    agentStrokes?: PaintAgentStrokes;
     class?: string;
     /**
      * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.189.0",
+  "version": "0.191.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.256.0"
+    "@pixerate/editor": "0.258.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",