@pixerate/editor-svelte 0.190.0 → 0.191.0

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.190.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.257.0"
+    "@pixerate/editor": "0.258.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",