@pixerate/editor-svelte 0.168.2 → 0.170.0

package/dist/animation-editor/AnimationStage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+  import { highlightMotionSvg, motionCameraTransform, motionCameraViewAt, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
@@ -59,6 +59,9 @@
       highlight ?? []
     )
   );
+  // A camera move's tilt and turn are 3D, so the stage element turns (its roll and blur are in the SVG).
+  let stage = $state<HTMLDivElement | null>(null);
+  const transform = $derived(motionCameraTransform(motionCameraViewAt(controller.viewScene(), view.current.time, view.current.effectsProvider), stage?.clientWidth || view.current.scene.artwork.width));
   function onclick(event: MouseEvent) {
     onpick?.(motionNodeAtElement(view.current.scene, event.target as Element, event.currentTarget as Element), event);
   }
@@ -68,7 +71,8 @@
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 <div
   class="relative overflow-hidden {recording ? 'cursor-grab touch-none' : onpick ? 'cursor-crosshair' : ''} {className}"
-  style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}"
+  bind:this={stage}
+  style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}{transform ? `; transform:${transform}` : ''}"
   data-animation-stage=""
   data-recording={recording ? '' : undefined}
   role="img"

package/dist/animation-editor/ShotCameraMoves.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { motionShotCameraMove, type AnimationEditorController, type MotionCameraMoveResult } from '@pixerate/editor/animation-editor';
+  import type { CameraMoveRole, EffectSummary } from '@pixerate/editor/effects';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The shot whose moves to edit. */
+    shot: string;
+    class?: string;
+  }
+
+  let { controller, shot, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const current = $derived(editor.scene.shots.find((s) => s.id === shot));
+  const roles: { role: CameraMoveRole; label: string; none: string }[] = [
+    { role: 'transition', label: 'Move in', none: 'ease in' },
+    { role: 'hold', label: 'While holding', none: 'stay still' }
+  ];
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs';
+
+  // The provider's camera moves of each role, loaded when the provider changes.
+  let moves = $state<Record<CameraMoveRole, EffectSummary[]>>({ transition: [], hold: [] });
+  $effect(() => {
+    void editor.effectsProvider;
+    let live = true;
+    void Promise.all([controller.cameraMoves('transition'), controller.cameraMoves('hold')]).then(
+      ([transition, hold]) => live && (moves = { transition, hold }),
+      () => live && (moves = { transition: [], hold: [] })
+    );
+    return () => (live = false);
+  });
+  const has = $derived(moves.transition.length + moves.hold.length > 0);
+  const named = $derived(current?.camera?.in !== undefined || current?.camera?.during !== undefined);
+  const inMove = $derived(motionShotCameraMove(current, 'transition'));
+  const holdMove = $derived(motionShotCameraMove(current, 'hold'));
+  const inDescription = effectDescriptionOf(() => controller.effectsProvider, () => inMove?.move);
+  const holdDescription = effectDescriptionOf(() => controller.effectsProvider, () => holdMove?.move);
+  let message = $state<string | null>(null);
+
+  function report(r: Promise<MotionCameraMoveResult> | MotionCameraMoveResult) {
+    void Promise.resolve(r).then((x) => (message = x.ok ? null : x.error));
+  }
+  function pick(role: CameraMoveRole, id: string) {
+    report(id ? controller.setShotCameraMove(shot, role, id) : controller.clearShotCameraMove(shot, role));
+  }
+  // Changes over the move as saved; null removes a field (a changed value drops the preset's name).
+  function set(role: CameraMoveRole, changes: { values?: Record<string, unknown>; preset?: string | null; ms?: number | null }, merge?: string | null) {
+    const move = motionShotCameraMove(current, role);
+    if (!move) return;
+    const next: Record<string, unknown> = { ...move, ...changes };
+    for (const k of Object.keys(next)) if (next[k] === null || (k === 'values' && !Object.keys(next[k] as object).length)) delete next[k];
+    report(controller.setShotCameraMove(shot, role, next as never, { merge: merge ?? undefined }));
+  }
+  function length(raw: string) {
+    if (raw.trim() === '') return set('transition', { ms: null });
+    const n = Number(raw);
+    if (Number.isFinite(n) && n >= 0) set('transition', { ms: n });
+    else message = 'Length is a number of ms, 0 or more.';
+  }
+  function reset(role: CameraMoveRole, k: string) {
+    const { [k]: _gone, ...rest } = motionShotCameraMove(current, role)?.values ?? {};
+    set(role, { values: rest, preset: null });
+  }
+</script>
+
+<!--
+  A shot's camera moves from the effects provider: the move it gets in with and the move it makes
+  while it holds, each with its length (a move in), presets and controls. Hidden with the reason
+  when the provider has no camera moves. Every change is one undo step (a slider drag is one).
+-->
+{#if current}
+  {#if !has}
+    {#if named}
+      <p class="text-[10px] text-muted-foreground {className}" data-camera-moves="unavailable">
+        This shot names camera moves, but {editor.effectsProvider ? `${editor.effectsProvider.name} has none` : 'no effects provider is set'}, so the camera eases instead.
+      </p>
+    {/if}
+  {:else}
+    <div class="grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1 {className}" data-camera-moves="">
+      {#each roles as { role, label, none } (role)}
+        {@const move = role === 'transition' ? inMove : holdMove}
+        {@const loaded = role === 'transition' ? inDescription : holdDescription}
+        {@const known = moves[role].some((m) => m.id === move?.move)}
+        <span class="text-muted-foreground">{label}</span>
+        <select class={input} aria-label={label} disabled={editor.readOnly} value={move?.move ?? ''} onchange={(e) => pick(role, e.currentTarget.value)}>
+          <option value="">{none}</option>
+          {#if move && !known}<option value={move.move}>{move.move} (not in the provider)</option>{/if}
+          {#each moves[role] as m (m.id)}
+            <option value={m.id}>{m.name}</option>
+          {/each}
+        </select>
+        {#if move && known && !editor.readOnly}
+          {#if loaded.error}
+            <p class="col-span-2 text-[11px] text-amber-500">{loaded.error}</p>
+          {:else if loaded.description}
+            <div class="col-span-2 flex flex-col gap-1 border-l border-border pl-2" data-camera-move-controls={role}>
+              {#if role === 'transition'}
+                <div class="flex items-center gap-1">
+                  <span class="w-16 text-muted-foreground">Length</span>
+                  <input class={input} type="number" min="0" step="50" aria-label="Move length" placeholder={String(loaded.description.camera?.durationMs ?? '')} value={move.ms ?? ''} onchange={(e) => length(e.currentTarget.value)} />
+                  <span class="text-[10px] text-muted-foreground">ms</span>
+                </div>
+              {/if}
+              <EffectParameters
+                description={loaded.description}
+                values={move.values ?? {}}
+                onchange={(k, v, g) => set(role, { values: { ...(move.values ?? {}), [k]: v }, preset: null }, g)}
+                onreset={(k) => reset(role, k)}
+                onpresetname={(name) => set(role, { preset: name, values: {} })}
+              />
+            </div>
+          {/if}
+        {/if}
+      {/each}
+      {#if message}<p class="col-span-2 text-[11px] text-destructive" role="alert">{message}</p>{/if}
+    </div>
+  {/if}
+{/if}

package/dist/animation-editor/ShotCameraMoves.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The shot whose moves to edit. */
+    shot: string;
+    class?: string;
+}
+declare const ShotCameraMoves: import("svelte").Component<Props, {}, "">;
+type ShotCameraMoves = ReturnType<typeof ShotCameraMoves>;
+export default ShotCameraMoves;

package/dist/animation-editor/ShotInspector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { describeMotionElements, freshShotId, motionCueChoices, motionCueFromKey, motionCueKey, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
+  import { describeMotionElements, freshShotId, motionCameraFramed, motionCueChoices, motionCueFromKey, motionCueKey, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+  import ShotCameraMoves from './ShotCameraMoves.svelte';
 
   interface Props {
     controller: AnimationEditorController;
@@ -53,8 +54,10 @@
     apply(raw.trim() ? { op: 'update_shot', shot: current.id, set: { label: raw.trim() } } : { op: 'update_shot', shot: current.id, remove: ['label'] }, 'Rename shot');
   }
   function setCamera(v: string) {
-    if (!v) apply({ op: 'update_shot', shot: current.id, remove: ['camera'] }, 'Clear camera');
-    else if (v.startsWith('frame:')) apply({ op: 'update_shot', shot: current.id, set: { camera: { frame: v.slice(6), padding: 24 } } }, 'Frame camera');
+    // Its camera moves stay when the framing changes.
+    const moves = { ...(current.camera?.in !== undefined ? { in: current.camera.in } : {}), ...(current.camera?.during !== undefined ? { during: current.camera.during } : {}) };
+    if (!v) apply(Object.keys(moves).length ? { op: 'update_shot', shot: current.id, set: { camera: moves } } : { op: 'update_shot', shot: current.id, remove: ['camera'] }, 'Clear camera');
+    else if (v.startsWith('frame:')) apply({ op: 'update_shot', shot: current.id, set: { camera: { ...moves, frame: v.slice(6), padding: 24 } } }, 'Frame camera');
   }
   function setCue(v: string) {
     const cue = motionCueFromKey(v);
@@ -63,8 +66,8 @@
 </script>
 
 <!--
-  The selected shot: label, hold, speed, the node the camera frames and the cue it starts on (a
-  beat or a narration word). Also adds, moves and deletes shots. Every change is one undo step.
+  The selected shot: label, hold, speed, the node the camera frames, the cue it starts on (a
+  beat or a narration word) and its camera moves (ShotCameraMoves). Also adds, moves and deletes shots. Every change is one undo step.
 -->
 <div class="flex flex-col gap-1.5 text-xs {className}" data-shot-inspector="">
   <div class="flex items-center gap-1">
@@ -94,9 +97,9 @@
         <span class="text-[10px] text-muted-foreground">×</span>
       </div>
       <span class="text-muted-foreground">Camera</span>
-      <select class={input} aria-label="Camera frames" disabled={editor.readOnly} value={current.camera ? (frame ? `frame:${frame}` : 'rect') : ''} onchange={(e) => setCamera(e.currentTarget.value)}>
+      <select class={input} aria-label="Camera frames" disabled={editor.readOnly} value={current.camera && motionCameraFramed(current.camera) ? (frame ? `frame:${frame}` : 'rect') : ''} onchange={(e) => setCamera(e.currentTarget.value)}>
         <option value="">keep framing</option>
-        {#if current.camera && !frame}<option value="rect">a rectangle</option>{/if}
+        {#if current.camera && motionCameraFramed(current.camera) && !frame}<option value="rect">a rectangle</option>{/if}
         {#each elements as e (e.id)}
           <option value="frame:{e.id}">frame {e.name ?? e.id}</option>
         {/each}
@@ -114,6 +117,7 @@
       {/if}
     </div>
   {/if}
+  {#if current}<ShotCameraMoves {controller} shot={current.id} />{/if}
   {#if message}
     <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
   {/if}

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

@@ -7,6 +7,7 @@ import type CommandListComponent from "./CommandList.svelte";
 import type CommandInspectorComponent from "./CommandInspector.svelte";
 import type EasePickerComponent from "./EasePicker.svelte";
 import type ShotInspectorComponent from "./ShotInspector.svelte";
+import type ShotCameraMovesComponent from "./ShotCameraMoves.svelte";
 import type SceneSettingsComponent from "./SceneSettings.svelte";
 import type AnimationRecordPanelComponent from "./AnimationRecordPanel.svelte";
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
@@ -17,6 +18,7 @@ export { default as CommandList } from "./CommandList.svelte";
 export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as ShotCameraMoves } from "./ShotCameraMoves.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
@@ -29,5 +31,6 @@ export type CommandListProps = ComponentProps<typeof CommandListComponent>;
 export type CommandInspectorProps = ComponentProps<typeof CommandInspectorComponent>;
 export type EasePickerProps = ComponentProps<typeof EasePickerComponent>;
 export type ShotInspectorProps = ComponentProps<typeof ShotInspectorComponent>;
+export type ShotCameraMovesProps = ComponentProps<typeof ShotCameraMovesComponent>;
 export type SceneSettingsProps = ComponentProps<typeof SceneSettingsComponent>;
 export type AnimationRecordPanelProps = ComponentProps<typeof AnimationRecordPanelComponent>;

package/dist/animation-editor/index.js

@@ -6,6 +6,7 @@ export { default as CommandList } from "./CommandList.svelte";
 export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as ShotCameraMoves } from "./ShotCameraMoves.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";

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.2",
+  "version": "0.170.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.2"
+    "@pixerate/editor": "0.230.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",