@pixerate/editor-svelte 0.188.0 → 0.189.0

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.189.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.256.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",