@pixerate/editor-svelte 0.168.1 → 0.169.0

package/dist/image-editor/BrushOptionsBar.svelte

@@ -27,10 +27,12 @@
 
   interface Props {
     controller: ImageEditorController;
+    /** The row of paint tool buttons (default true); hide it when the host has its own toolbar. */
+    showTools?: boolean;
     class?: string;
   }
 
-  let { controller, class: className = '' }: Props = $props();
+  let { controller, showTools = true, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -58,16 +60,18 @@
 </script>
 
 <div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="brush-options">
-  <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Paint tools">
-    {#each PAINT_TOOLS as t (t.id)}
-      <button
-        type="button"
-        aria-pressed={view.tool === t.id}
-        title={t.shortcut ? `${t.label} (${t.shortcut})` : t.label}
-        class={imageChipClass(view.tool === t.id)}
-        onclick={() => controller.setTool(t.id)}>{t.label}</button>
-    {/each}
-  </div>
+  {#if showTools}
+    <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Paint tools">
+      {#each PAINT_TOOLS as t (t.id)}
+        <button
+          type="button"
+          aria-pressed={view.tool === t.id}
+          title={t.shortcut ? `${t.label} (${t.shortcut})` : t.label}
+          class={imageChipClass(view.tool === t.id)}
+          onclick={() => controller.setTool(t.id)}>{t.label}</button>
+      {/each}
+    </div>
+  {/if}
 
   <div class="flex items-center gap-2" role="group" aria-label="Colours">
     <label class="flex items-center gap-1">

package/dist/image-editor/BrushOptionsBar.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { ImageEditorController } from '@pixerate/editor/image-editor';
 interface Props {
     controller: ImageEditorController;
+    /** The row of paint tool buttons (default true); hide it when the host has its own toolbar. */
+    showTools?: boolean;
     class?: string;
 }
 declare const BrushOptionsBar: import("svelte").Component<Props, {}, "">;

package/dist/image-editor/EdgeColorPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
 
@@ -71,15 +72,13 @@
       </label>
     {/each}
     <label class="flex items-center gap-1.5 text-foreground">
-      <input
-        type="checkbox"
-        aria-label="Fixed cast colour"
+      <ImageCheckbox
+        label="Fixed cast colour"
         checked={fixed}
-        onchange={(e) => {
+        onchange={(on) => {
           commitNext = true;
-          set({ ambientColor: (e.currentTarget as HTMLInputElement).checked ? '#808080' : 'auto' });
+          set({ ambientColor: on ? '#808080' : 'auto' });
         }}
-        class="accent-primary"
       />
       Fixed cast colour
       {#if fixed}

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Annotation, CropBox, CropHandle, ImageEditorFit, ImagePoint } from '@pixerate/editor/image-editor';
-  import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+  import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef, PresenceActor } from '@pixerate/editor/tools';
   import {
     canvasToImagePoint,
     imageToCanvasPoint,
@@ -38,7 +38,7 @@
     type TransformOverlay,
     type TypeToolOptions,
   } from '@pixerate/editor/image-editor';
-  import { untrack } from 'svelte';
+  import { untrack, type Snippet } from 'svelte';
   import { trackPresenceDrag } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.svelte';
@@ -51,7 +51,8 @@
     /**
      * What pointer gestures do: `crop` (crop box and its overlay, in the crop margin), `select`
      * (the selection tools), `paint` (brush, eraser, move and their shortcuts), `annotate`
-     * (annotations, shape and type layers, by the active tool) or `none` (view only). Free
+     * (annotations, shape and type layers, by the active tool), `sample` (the Eyedropper: a click
+     * picks the composite's colour as the paint foreground) or `none` (view only). Free
      * Transform works in every mode. Default `none`.
      */
     mode?: ImageEditorCanvasMode;
@@ -105,6 +106,10 @@
      * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
      */
     panMode?: boolean;
+    /** The Eyedropper picked a colour (`sample` mode); it is already the paint foreground. */
+    onsample?: (color: string) => void;
+    /** Draws each agent cursor during playback in place of the default arrow and name tag. */
+    presenceCursor?: Snippet<[PresenceActor]>;
     class?: string;
     style?: string;
   }
@@ -131,6 +136,8 @@
     open,
     viewportGestures = true,
     panMode = false,
+    onsample,
+    presenceCursor,
     class: className = '',
     style = '',
   }: Props = $props();
@@ -715,6 +722,13 @@
     if (transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
+    if (mode === 'sample') {
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
+      const color = editor.controller.sampleColor(imgPt, { setForeground: true });
+      if (color) onsample?.(color);
+      return;
+    }
+
     if (mode === 'select') {
       const gesture = selectionGesture;
       const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
@@ -1145,6 +1159,6 @@
     {/if}
   </div>
   {#if playing}
-    <PresenceLayer presence={agentPresence} viewport={docToRoot} clip={false} />
+    <PresenceLayer presence={agentPresence} viewport={docToRoot} clip={false} cursor={presenceCursor} />
   {/if}
 </div>

package/dist/image-editor/ImageEditorCanvas.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ImageEditorFit } from '@pixerate/editor/image-editor';
-import type { AgentPlayback, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+import type { AgentPlayback, PlaybackRect, PlaybackRef, PresenceActor } from '@pixerate/editor/tools';
 import { FreeTransformTool, type SelectionToolOptions, type ShapeToolOptions, type TextEditSession, type TypeToolOptions } from '@pixerate/editor/image-editor';
+import { type Snippet } from 'svelte';
 import type { ReactiveImageEditor } from './imageEditorState.svelte.js';
 import type { ImageEditorCanvasErrorSource, ImageEditorCanvasMode } from './canvasTypes.js';
 interface Props {
@@ -9,7 +10,8 @@ interface Props {
     /**
      * What pointer gestures do: `crop` (crop box and its overlay, in the crop margin), `select`
      * (the selection tools), `paint` (brush, eraser, move and their shortcuts), `annotate`
-     * (annotations, shape and type layers, by the active tool) or `none` (view only). Free
+     * (annotations, shape and type layers, by the active tool), `sample` (the Eyedropper: a click
+     * picks the composite's colour as the paint foreground) or `none` (view only). Free
      * Transform works in every mode. Default `none`.
      */
     mode?: ImageEditorCanvasMode;
@@ -63,6 +65,10 @@ interface Props {
      * does, and the canvas's own gestures pause. Needs `viewportGestures`. Default false.
      */
     panMode?: boolean;
+    /** The Eyedropper picked a colour (`sample` mode); it is already the paint foreground. */
+    onsample?: (color: string) => void;
+    /** Draws each agent cursor during playback in place of the default arrow and name tag. */
+    presenceCursor?: Snippet<[PresenceActor]>;
     class?: string;
     style?: string;
 }

package/dist/image-editor/LayerPanel.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-  import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+  import type { ImageEditorController, ImageHistogram, ImageLayer } from '@pixerate/editor/image-editor';
   import {
     ADJUSTMENT_LAYER_OPACITY_CONTROL,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
     DEFAULT_SELECTION_TOOL_OPTIONS,
+    IMAGE_ADJUSTMENT_CONTROLS,
+    readAdjustmentControls,
+    type SelectionToolOptions,
+    type ShapeToolOptions,
+    type TypeToolOptions,
   } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import CanvasSizePanel from './CanvasSizePanel.svelte';
@@ -21,14 +26,38 @@
   import PathsPanel from './PathsPanel.svelte';
   import EdgeColorPanel from './EdgeColorPanel.svelte';
   import VectorMaskEdgesPanel from './VectorMaskEdgesPanel.svelte';
+  import Histogram from './Histogram.svelte';
 
   interface Props {
     controller: ImageEditorController;
     panelId: string;
+    /**
+     * The Selection panel's tool options. Bind them (with the canvas's `selectionOptions`) so the
+     * tool and settings picked here are the ones the canvas selects with; unbound, the panel keeps
+     * its own.
+     */
+    selectionOptions?: SelectionToolOptions;
+    /** The Shape Options panel's options; bind them with the canvas's `shapeOptions`. */
+    shapeOptions?: ShapeToolOptions;
+    /** The Typography panel's options; bind them with the canvas's `typeOptions`. */
+    typeOptions?: TypeToolOptions;
+    /**
+     * The tool pickers in Brush Options (paint tools), Selection (selection tools) and Shape Options
+     * (shape kinds); default true. Hide them when the host's toolbar offers the same choices.
+     */
+    showTools?: boolean;
     class?: string;
   }
 
-  let { controller, panelId, class: className = '' }: Props = $props();
+  let {
+    controller,
+    panelId,
+    selectionOptions = $bindable({ ...DEFAULT_SELECTION_TOOL_OPTIONS }),
+    shapeOptions = $bindable({ ...DEFAULT_SHAPE_TOOL_OPTIONS }),
+    typeOptions = $bindable({ ...DEFAULT_TYPE_TOOL_OPTIONS }),
+    showTools = true,
+    class: className = '',
+  }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -41,9 +70,19 @@
     void tick;
     return controller.getActiveLayer();
   });
-  let shapeOptions = $state({ ...DEFAULT_SHAPE_TOOL_OPTIONS });
-  let typeOptions = $state({ ...DEFAULT_TYPE_TOOL_OPTIONS });
-  let selectionOptions = $state({ ...DEFAULT_SELECTION_TOOL_OPTIONS });
+  const adjustments = $derived.by(() => {
+    void tick;
+    return readAdjustmentControls(controller.getState().adjustments);
+  });
+  let histogram = $state.raw<ImageHistogram | null>(null);
+  $effect(() => {
+    if (panelId !== 'color') return;
+    const c = controller;
+    return untrack(() => {
+      histogram = c.getHistogram();
+      return c.subscribeHistogram((h) => (histogram = h));
+    });
+  });
   /** Layers whose soft edge takes Edge Colour (decontaminate, despill, cast). */
   const EDGE_COLOR_TYPES = new Set(['pixel', 'shape', 'type', 'smart']);
 </script>
@@ -86,11 +125,23 @@
   {:else if panelId === 'paint'}
     <div class="flex flex-col gap-3">
       <div class="font-medium text-sm text-foreground">Brush & Paint</div>
-      <BrushOptionsBar {controller} />
+      <BrushOptionsBar {controller} {showTools} />
     </div>
   {:else if panelId === 'effects'}
     <!-- Kept for hosts that still ask for it by id: layerPanels() folds it into 'properties'. -->
     <LayerEffectsPanel {controller} />
+  {:else if panelId === 'color'}
+    <!-- The colour adjustments (white balance, light, colour) without Add Adjustment Layer, which a host's layers panel offers. -->
+    <div class="flex flex-col gap-3 text-xs text-foreground">
+      <div class="flex items-center justify-between">
+        <span class="font-medium text-sm">Color Adjustments</span>
+        <button type="button" class="text-[10px] text-destructive hover:underline" onclick={() => controller.resetAdjustments()}>Reset</button>
+      </div>
+      {#if histogram}<Histogram {histogram} />{/if}
+      {#each IMAGE_ADJUSTMENT_CONTROLS as spec (spec.id)}
+        <ControlSlider {spec} value={adjustments[spec.id]} onchange={(v) => controller.setAdjustments({ [spec.id]: v })} />
+      {/each}
+    </div>
   {:else if panelId === 'adjustment'}
     <AdjustmentLayersPanel {controller} />
   {:else if panelId === 'type'}
@@ -101,7 +152,7 @@
   {:else if panelId === 'shape'}
     <div class="flex flex-col gap-3">
       <div class="font-medium text-sm text-foreground">Shape Options</div>
-      <ShapeOptionsBar {controller} options={shapeOptions} onchange={(o) => (shapeOptions = o)} />
+      <ShapeOptionsBar {controller} options={shapeOptions} onchange={(o) => (shapeOptions = o)} {showTools} />
     </div>
   {:else if panelId === 'smart-filters'}
     <!-- Kept for hosts that still ask for it by id: smart filters are under 'provider-effects'. -->
@@ -111,7 +162,7 @@
   {:else if panelId === 'selection'}
     <div class="flex flex-col gap-3">
       <div class="font-medium text-sm text-foreground">Selection</div>
-      <SelectionOptionsBar {controller} options={selectionOptions} onOptionsChange={(o) => (selectionOptions = o)} />
+      <SelectionOptionsBar {controller} options={selectionOptions} onOptionsChange={(o) => (selectionOptions = o)} {showTools} />
       <RefineEdgePanel {controller} />
     </div>
   {:else if panelId === 'channels'}

package/dist/image-editor/LayerPanel.svelte.d.ts

@@ -1,9 +1,25 @@
 import type { ImageEditorController } from '@pixerate/editor/image-editor';
+import { type SelectionToolOptions, type ShapeToolOptions, type TypeToolOptions } from '@pixerate/editor/image-editor';
 interface Props {
     controller: ImageEditorController;
     panelId: string;
+    /**
+     * The Selection panel's tool options. Bind them (with the canvas's `selectionOptions`) so the
+     * tool and settings picked here are the ones the canvas selects with; unbound, the panel keeps
+     * its own.
+     */
+    selectionOptions?: SelectionToolOptions;
+    /** The Shape Options panel's options; bind them with the canvas's `shapeOptions`. */
+    shapeOptions?: ShapeToolOptions;
+    /** The Typography panel's options; bind them with the canvas's `typeOptions`. */
+    typeOptions?: TypeToolOptions;
+    /**
+     * The tool pickers in Brush Options (paint tools), Selection (selection tools) and Shape Options
+     * (shape kinds); default true. Hide them when the host's toolbar offers the same choices.
+     */
+    showTools?: boolean;
     class?: string;
 }
-declare const LayerPanel: import("svelte").Component<Props, {}, "">;
+declare const LayerPanel: import("svelte").Component<Props, {}, "selectionOptions" | "shapeOptions" | "typeOptions">;
 type LayerPanel = ReturnType<typeof LayerPanel>;
 export default LayerPanel;

package/dist/image-editor/RefineEdgePanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import { imageRangeClass, imageSectionTitleClass } from './styles.js';
   import MaskEdgeCheck from './MaskEdgeCheck.svelte';
   import SelectionChangeCheck from './SelectionChangeCheck.svelte';
@@ -115,20 +116,16 @@
     </label>
   {/each}
   <label class="flex items-center gap-2 text-foreground">
-    <input
-      type="checkbox"
-      checked={params.smartRadius}
-      onchange={(e) => (params = { ...params, smartRadius: (e.currentTarget as HTMLInputElement).checked })}
-    />
+    <ImageCheckbox label="Smart Radius" checked={params.smartRadius} onchange={(on) => (params = { ...params, smartRadius: on })} />
     Smart Radius
   </label>
   <label class="flex items-center gap-2 text-foreground" title="Refine only where the edge has no image edge under it">
-    <input type="checkbox" aria-label="Only uncertain areas" checked={onlyUncertain} onchange={(e) => (onlyUncertain = (e.currentTarget as HTMLInputElement).checked)} />
+    <ImageCheckbox label="Only uncertain areas" checked={onlyUncertain} onchange={(on) => (onlyUncertain = on)} />
     Only uncertain areas
   </label>
   {#if canObject}
     <label class="flex items-center gap-2 text-foreground">
-      <input type="checkbox" aria-label="Object aware" checked={objectAware} onchange={(e) => (objectAware = (e.currentTarget as HTMLInputElement).checked)} />
+      <ImageCheckbox label="Object aware" checked={objectAware} onchange={(on) => (objectAware = on)} />
       Object aware (segmentation model)
     </label>
   {/if}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -33,10 +33,12 @@
     quickMask?: boolean;
     /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
     selectionDisplay?: SelectionDisplay;
+    /** The tool picker row (default true); hide it when the host's toolbar offers the same choice. */
+    showTools?: boolean;
     class?: string;
   }
 
-  let { controller, options, onOptionsChange, selection, quickMask, selectionDisplay, class: className = '' }: Props = $props();
+  let { controller, options, onOptionsChange, selection, quickMask, selectionDisplay, showTools = true, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -202,13 +204,15 @@
 </script>
 
 <div data-testid="selection-options-bar" class="flex flex-col gap-3 text-xs {className}">
-  <div role="group" aria-label="Selection tool" class="flex flex-wrap gap-1">
-    {#each SELECTION_TOOLS as t (t.id)}
-      <button type="button" aria-pressed={options.tool === t.id} class={btn(options.tool === t.id)} onclick={() => set({ tool: t.id })}>
-        {t.label}
-      </button>
-    {/each}
-  </div>
+  {#if showTools}
+    <div role="group" aria-label="Selection tool" class="flex flex-wrap gap-1">
+      {#each SELECTION_TOOLS as t (t.id)}
+        <button type="button" aria-pressed={options.tool === t.id} class={btn(options.tool === t.id)} onclick={() => set({ tool: t.id })}>
+          {t.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
   <div role="group" aria-label="Selection mode" class="flex flex-wrap gap-1">
     {#each SELECTION_MODES as m (m)}
       <button type="button" aria-pressed={options.mode === m} class={btn(options.mode === m)} onclick={() => set({ mode: m })}>

package/dist/image-editor/SelectionOptionsBar.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props {
     quickMask?: boolean;
     /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
     selectionDisplay?: SelectionDisplay;
+    /** The tool picker row (default true); hide it when the host's toolbar offers the same choice. */
+    showTools?: boolean;
     class?: string;
 }
 declare const SelectionOptionsBar: import("svelte").Component<Props, {}, "">;

package/dist/image-editor/SeparateSubjectPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import type { ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
 
   /**
@@ -63,7 +64,7 @@
       px
     </label>
     <label class="flex items-center gap-1 text-foreground">
-      <input type="checkbox" aria-label="Fill the background" checked={fill} onchange={(e) => (fill = (e.currentTarget as HTMLInputElement).checked)} />
+      <ImageCheckbox label="Fill the background" checked={fill} onchange={(on) => (fill = on)} />
       Fill the background
     </label>
   </div>

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -16,10 +16,12 @@
     controller: ImageEditorController;
     options: ShapeToolOptions;
     onchange: (options: ShapeToolOptions) => void;
+    /** The tool picker row (default true); hide it when the host's toolbar offers the same choice. */
+    showTools?: boolean;
     class?: string;
   }
 
-  let { controller, options, onchange, class: className = '' }: Props = $props();
+  let { controller, options, onchange, showTools = true, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -50,11 +52,13 @@
 </script>
 
 <div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="shape-options">
-  <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Shape kind">
-    {#each LIVE_SHAPE_KINDS as k (k)}
-      <button type="button" aria-pressed={options.kind === k} class={imageChipClass(options.kind === k)} onclick={() => onchange({ ...options, kind: k })}>{SHAPE_KIND_LABELS[k]}</button>
-    {/each}
-  </div>
+  {#if showTools}
+    <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Shape kind">
+      {#each LIVE_SHAPE_KINDS as k (k)}
+        <button type="button" aria-pressed={options.kind === k} class={imageChipClass(options.kind === k)} onclick={() => onchange({ ...options, kind: k })}>{SHAPE_KIND_LABELS[k]}</button>
+      {/each}
+    </div>
+  {/if}
   <div class="flex flex-wrap items-center gap-3">
     <label class="flex items-center gap-1">
       <ImageCheckbox label="Fill" checked={options.fill !== null} onchange={(on) => set({ fill: on ? '#4f46e5' : null })} />

package/dist/image-editor/ShapeOptionsBar.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     controller: ImageEditorController;
     options: ShapeToolOptions;
     onchange: (options: ShapeToolOptions) => void;
+    /** The tool picker row (default true); hide it when the host's toolbar offers the same choice. */
+    showTools?: boolean;
     class?: string;
 }
 declare const ShapeOptionsBar: import("svelte").Component<Props, {}, "">;

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

@@ -1,4 +1,4 @@
 /** What pointer gestures on `ImageEditorCanvas` do (and whether the crop overlay shows). */
-export type ImageEditorCanvasMode = 'crop' | 'select' | 'paint' | 'annotate' | 'transform' | 'none';
+export type ImageEditorCanvasMode = 'crop' | 'select' | 'paint' | 'annotate' | 'transform' | 'sample' | 'none';
 /** Which gesture an `ImageEditorCanvas` `onerror` report comes from. */
 export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform' | 'path';

package/dist/playback/PresenceLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
-	import type { PresenceStore, PresenceState } from '@pixerate/editor/tools';
+	import { untrack, type Snippet } from 'svelte';
+	import type { PresenceActor, PresenceStore, PresenceState } from '@pixerate/editor/tools';
 
 	type Point = { x: number; y: number };
 
@@ -14,10 +14,15 @@
 		viewport?: { x: number; y: number; zoom: number } | ((point: Point) => Point);
 		/** Clip the cursors to the layer's box (default true). `false` lets a cursor visit chrome outside it. */
 		clip?: boolean;
+		/**
+		 * Draws an actor's cursor in place of the default arrow, name tag and note (a host's own
+		 * presence cursor). It is placed at the actor's point; the focus ring is still drawn.
+		 */
+		cursor?: Snippet<[PresenceActor]>;
 		class?: string;
 	}
 
-	let { presence, viewport, clip = true, class: className = '' }: Props = $props();
+	let { presence, viewport, clip = true, cursor, class: className = '' }: Props = $props();
 	let view: PresenceState = $state.raw(untrack(() => presence.getState()));
 	$effect(() => {
 		view = presence.getState();
@@ -52,15 +57,19 @@
 				<div data-actor-focus={a.id} style="position: absolute; {ring(a.focus)} border-radius: 8px; border: 2px solid {a.color}; background: {a.color}14; transition: all 160ms ease-out;"></div>
 			{/if}
 			<div data-actor={a.id} style="position: absolute; left: 0; top: 0; transform: translate({map(a).x}px, {map(a).y}px);">
-				<svg width="18" height="20" viewBox="0 0 12 18" style="display: block; transform-origin: 0 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); {a.pressed ? 'transform: scale(0.85);' : ''}">
-					<path d="M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z" style="fill: {a.color}; stroke: #ffffff; stroke-width: 1;" />
-				</svg>
-				<span style="position: absolute; left: 14px; top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
-					<span style="white-space: nowrap; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #ffffff; background: {a.color};">{a.name}</span>
-					{#if a.message}
-						<span data-actor-message={a.id} style="width: max-content; max-width: 240px; border-radius: 8px; border-top-left-radius: 0; padding: 4px 8px; font-size: 12px; color: #1e293b; background: #ffffff; box-shadow: 0 4px 12px rgba(15,23,42,.18);">{a.message}</span>
-					{/if}
-				</span>
+				{#if cursor}
+					{@render cursor(a)}
+				{:else}
+					<svg width="18" height="20" viewBox="0 0 12 18" style="display: block; transform-origin: 0 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); {a.pressed ? 'transform: scale(0.85);' : ''}">
+						<path d="M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z" style="fill: {a.color}; stroke: #ffffff; stroke-width: 1;" />
+					</svg>
+					<span style="position: absolute; left: 14px; top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
+						<span style="white-space: nowrap; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #ffffff; background: {a.color};">{a.name}</span>
+						{#if a.message}
+							<span data-actor-message={a.id} style="width: max-content; max-width: 240px; border-radius: 8px; border-top-left-radius: 0; padding: 4px 8px; font-size: 12px; color: #1e293b; background: #ffffff; box-shadow: 0 4px 12px rgba(15,23,42,.18);">{a.message}</span>
+						{/if}
+					</span>
+				{/if}
 			</div>
 		{/each}
 	</div>

package/dist/playback/PresenceLayer.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { PresenceStore } from '@pixerate/editor/tools';
+import { type Snippet } from 'svelte';
+import type { PresenceActor, PresenceStore } from '@pixerate/editor/tools';
 type Point = {
     x: number;
     y: number;
@@ -17,6 +18,11 @@ interface Props {
     } | ((point: Point) => Point);
     /** Clip the cursors to the layer's box (default true). `false` lets a cursor visit chrome outside it. */
     clip?: boolean;
+    /**
+     * Draws an actor's cursor in place of the default arrow, name tag and note (a host's own
+     * presence cursor). It is placed at the actor's point; the focus ring is still drawn.
+     */
+    cursor?: Snippet<[PresenceActor]>;
     class?: string;
 }
 declare const PresenceLayer: import("svelte").Component<Props, {}, "">;

package/package.json

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