@pixerate/editor-svelte 0.108.0 → 0.109.0

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageRangeClass } from './styles.js';
   import type {
     ImageEditorController,
     SelectionMask,
@@ -56,7 +57,7 @@
 
   const btn = (on: boolean) =>
     `px-2 py-1 rounded-md border text-[11px] transition-colors ${
-      on ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-950 border-slate-800 text-slate-300 hover:text-white'
+      on ? 'bg-primary border-primary text-primary-foreground' : 'bg-background border-border text-foreground hover:bg-accent hover:text-accent-foreground'
     }`;
 </script>
 
@@ -78,7 +79,7 @@
   {#if options.tool === 'wand'}
     <div class="flex flex-col gap-2">
       <label class="flex flex-col gap-1">
-        <span class="flex justify-between text-slate-400">
+        <span class="flex justify-between text-muted-foreground">
           <span>Tolerance</span>
           <span class="font-mono">{options.tolerance}</span>
         </span>
@@ -90,24 +91,24 @@
           aria-label="Tolerance"
           value={options.tolerance}
           oninput={(e) => set({ tolerance: Number((e.currentTarget as HTMLInputElement).value) })}
-          class="w-full accent-indigo-500"
+          class={imageRangeClass}
         />
       </label>
-      <label class="flex items-center gap-2 text-slate-300">
+      <label class="flex items-center gap-2 text-foreground">
         <input type="checkbox" checked={options.contiguous} onchange={(e) => set({ contiguous: (e.currentTarget as HTMLInputElement).checked })} />
         Contiguous
       </label>
-      <label class="flex items-center gap-2 text-slate-300">
+      <label class="flex items-center gap-2 text-foreground">
         <input type="checkbox" checked={options.sampleMerged} onchange={(e) => set({ sampleMerged: (e.currentTarget as HTMLInputElement).checked })} />
         Sample adjusted image
       </label>
-      <label class="flex items-center gap-2 text-slate-300">
+      <label class="flex items-center gap-2 text-foreground">
         Sample
         <select
           aria-label="Sample from"
           value={options.sample ?? 'composite'}
           onchange={(e) => set({ sample: (e.currentTarget as HTMLSelectElement).value as 'composite' | 'active-layer' })}
-          class="bg-slate-800 border border-slate-700 rounded px-1 py-0.5"
+          class="bg-muted border border-border rounded px-1 py-0.5"
         >
           <option value="composite">All layers</option>
           <option value="active-layer">Active layer</option>
@@ -115,7 +116,7 @@
       </label>
     </div>
   {/if}
-  <label class="flex items-center gap-2 text-slate-300">
+  <label class="flex items-center gap-2 text-foreground">
     <input type="checkbox" checked={options.antiAlias} onchange={(e) => set({ antiAlias: (e.currentTarget as HTMLInputElement).checked })} />
     Anti-alias
   </label>
@@ -126,7 +127,7 @@
     <button type="button" aria-pressed={qm} class={btn(qm)} onclick={() => controller.setQuickMask(!qm)}>Quick Mask</button>
   </div>
   <div class="flex flex-wrap items-center gap-1">
-    <label class="flex items-center gap-1 text-slate-400">
+    <label class="flex items-center gap-1 text-muted-foreground">
       Radius
       <input
         type="number"
@@ -136,12 +137,12 @@
         aria-label="Modify radius"
         value={radius}
         oninput={(e) => (radius = Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0))}
-        class="w-14 bg-slate-950 border border-slate-800 rounded px-1 py-0.5 text-slate-200"
+        class="w-14 bg-background border border-border rounded px-1 py-0.5 text-foreground"
       />
     </label>
     {#each MODIFY_OPS as m (m.op)}
       <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.modifySelection(m.op, radius)}>{m.label}</button>
     {/each}
   </div>
-  <p data-testid="selection-status" class="text-slate-400">{describeSelection(sel)}</p>
+  <p data-testid="selection-status" class="text-muted-foreground">{describeSelection(sel)}</p>
 </div>

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageChipClass, imageColorInputClass, imageFieldClass } from './styles.js';
   import type { ImageEditorController, ShapeToolOptions } from '@pixerate/editor/image-editor';
   import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -29,7 +30,7 @@
   });
   let error = $state<string | null>(null);
 
-  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  
   const num = (v: string, min: number, max: number) => Math.max(min, Math.min(max, Number(v) || min));
 
   function set(change: Partial<ShapeToolOptions>) {
@@ -46,10 +47,10 @@
   const checked = (e: Event) => (e.target as HTMLInputElement).checked;
 </script>
 
-<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="shape-options">
+<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={chip(options.kind === k)} onclick={() => onchange({ ...options, kind: k })}>{SHAPE_KIND_LABELS[k]}</button>
+      <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>
   <div class="flex flex-wrap items-center gap-3">
@@ -62,7 +63,7 @@
         disabled={options.fill === null}
         value={options.fill ?? '#4f46e5'}
         oninput={(e) => set({ fill: value(e) })}
-        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+        class={imageColorInputClass}
       />
     </label>
     <label class="flex items-center gap-1">
@@ -74,38 +75,38 @@
         disabled={options.stroke === null}
         value={options.stroke ?? '#000000'}
         oninput={(e) => set({ stroke: value(e) })}
-        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+        class={imageColorInputClass}
       />
     </label>
     <label class="flex items-center gap-1">
       Width
-      <input type="number" aria-label="Stroke width" min="0" max="200" value={options.strokeWidth} oninput={(e) => set({ strokeWidth: num(value(e), 0, 200) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      <input type="number" aria-label="Stroke width" min="0" max="200" value={options.strokeWidth} oninput={(e) => set({ strokeWidth: num(value(e), 0, 200) })} class="w-14 {imageFieldClass}" />
     </label>
   </div>
   <div class="flex flex-wrap items-center gap-3">
     {#if options.kind === 'rect'}
       <label class="flex items-center gap-1">
         Radius
-        <input type="number" aria-label="Corner radius" min="0" max="1000" value={options.radius} oninput={(e) => set({ radius: num(value(e), 0, 1000) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+        <input type="number" aria-label="Corner radius" min="0" max="1000" value={options.radius} oninput={(e) => set({ radius: num(value(e), 0, 1000) })} class="w-14 {imageFieldClass}" />
       </label>
     {:else if options.kind === 'polygon'}
       <label class="flex items-center gap-1">
         Sides
-        <input type="number" aria-label="Sides" min="3" max="100" value={options.sides} oninput={(e) => set({ sides: num(value(e), 3, 100) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+        <input type="number" aria-label="Sides" min="3" max="100" value={options.sides} oninput={(e) => set({ sides: num(value(e), 3, 100) })} class="w-14 {imageFieldClass}" />
       </label>
     {:else if options.kind === 'star'}
       <label class="flex items-center gap-1">
         Points
-        <input type="number" aria-label="Points" min="3" max="100" value={options.points} oninput={(e) => set({ points: num(value(e), 3, 100) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+        <input type="number" aria-label="Points" min="3" max="100" value={options.points} oninput={(e) => set({ points: num(value(e), 3, 100) })} class="w-14 {imageFieldClass}" />
       </label>
       <label class="flex items-center gap-1">
         Inner
-        <input type="range" aria-label="Inner radius" min="0.05" max="1" step="0.05" value={options.innerRatio} oninput={(e) => set({ innerRatio: Number(value(e)) })} class="accent-indigo-500" />
+        <input type="range" aria-label="Inner radius" min="0.05" max="1" step="0.05" value={options.innerRatio} oninput={(e) => set({ innerRatio: Number(value(e)) })} class="accent-primary" />
       </label>
     {:else if options.kind === 'line'}
       <label class="flex items-center gap-1">
         Weight
-        <input type="number" aria-label="Line weight" min="1" max="200" value={options.weight} oninput={(e) => set({ weight: num(value(e), 1, 200) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+        <input type="number" aria-label="Line weight" min="1" max="200" value={options.weight} oninput={(e) => set({ weight: num(value(e), 1, 200) })} class="w-14 {imageFieldClass}" />
       </label>
       <label class="flex items-center gap-1">
         <input type="checkbox" aria-label="Arrowhead" checked={options.arrow} onchange={(e) => set({ arrow: checked(e) })} />
@@ -113,8 +114,8 @@
       </label>
     {/if}
   </div>
-  <p class="text-[10px] text-slate-500">Drag on the image to draw. Shift: square, circle or 45° line. Alt: from the centre.</p>
+  <p class="text-[10px] text-muted-foreground">Drag on the image to draw. Shift: square, circle or 45° line. Alt: from the centre.</p>
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 </div>

package/dist/image-editor/TypeOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageChipClass, imageColorInputClass } from './styles.js';
   import type { ImageEditorController, TextAlign, TextEditSession, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
   import { TEXT_ALIGNS } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -30,7 +31,7 @@
     return untrack(() => s.subscribe(() => tick++));
   });
   const ALIGN_LABELS: Record<TextAlign, string> = { left: 'Left', center: 'Centre', right: 'Right', justify: 'Justify' };
-  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  
 
   const view = $derived.by(() => {
     void tick;
@@ -74,11 +75,11 @@
   const value = (e: Event) => (e.target as HTMLInputElement).value;
 </script>
 
-<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="type-options">
+<div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="type-options">
   <div class="flex flex-wrap items-center gap-2">
     <label class="flex items-center gap-1">
       Font
-      <input list="pixerate-type-fonts" aria-label="Font family" value={view.shown.fontFamily} oninput={(e) => value(e).trim() && style({ fontFamily: value(e) })} class="w-32 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      <input list="pixerate-type-fonts" aria-label="Font family" value={view.shown.fontFamily} oninput={(e) => value(e).trim() && style({ fontFamily: value(e) })} class="w-32 rounded border border-border bg-background px-1 py-0.5" />
       <datalist id="pixerate-type-fonts">
         {#each view.fonts as f (f)}
           <option value={f}></option>
@@ -94,23 +95,23 @@
         max="2000"
         value={Math.round(view.shown.fontSize * 10) / 10}
         oninput={(e) => Number(value(e)) > 0 && style({ fontSize: Number(value(e)) })}
-        class="w-16 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
+        class="w-16 rounded border border-border bg-background px-1 py-0.5"
       />
     </label>
-    <button type="button" aria-pressed={view.shown.fontWeight >= 600} class="{chip(view.shown.fontWeight >= 600)} font-bold" onclick={() => style({ fontWeight: view.shown.fontWeight >= 600 ? 400 : 700 })}>B</button>
-    <button type="button" aria-pressed={view.shown.italic} class="{chip(view.shown.italic)} italic" onclick={() => style({ italic: !view.shown.italic })}>I</button>
-    <input type="color" aria-label="Text colour" value={view.shown.color} oninput={(e) => style({ color: value(e) })} class="h-6 w-8 rounded border border-slate-700 bg-transparent" />
+    <button type="button" aria-pressed={view.shown.fontWeight >= 600} class="{imageChipClass(view.shown.fontWeight >= 600)} font-bold" onclick={() => style({ fontWeight: view.shown.fontWeight >= 600 ? 400 : 700 })}>B</button>
+    <button type="button" aria-pressed={view.shown.italic} class="{imageChipClass(view.shown.italic)} italic" onclick={() => style({ italic: !view.shown.italic })}>I</button>
+    <input type="color" aria-label="Text colour" value={view.shown.color} oninput={(e) => style({ color: value(e) })} class={imageColorInputClass} />
   </div>
   <div class="flex gap-1" role="toolbar" aria-label="Alignment">
     {#each TEXT_ALIGNS as a (a)}
-      <button type="button" aria-pressed={options.align === a} class={chip(options.align === a)} onclick={() => style({ align: a })}>{ALIGN_LABELS[a]}</button>
+      <button type="button" aria-pressed={options.align === a} class={imageChipClass(options.align === a)} onclick={() => style({ align: a })}>{ALIGN_LABELS[a]}</button>
     {/each}
   </div>
-  <p class="text-[10px] text-slate-500">Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes.</p>
+  <p class="text-[10px] text-muted-foreground">Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes.</p>
   {#if view.missing.length > 0}
-    <p role="status" class="text-amber-400" data-testid="type-missing-fonts">Missing {view.missing.length === 1 ? 'font' : 'fonts'}: {view.missing.join(', ')}</p>
+    <p role="status" class="text-amber-600" data-testid="type-missing-fonts">Missing {view.missing.length === 1 ? 'font' : 'fonts'}: {view.missing.join(', ')}</p>
   {/if}
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 </div>

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

@@ -0,0 +1,51 @@
+/**
+ * Tailwind classes shared by the image editor and its panels (same in the React and Svelte
+ * packages). They use shadcn theme tokens (`background`, `foreground`, `muted`, `accent`,
+ * `border`, `input`, `primary`, `destructive`), so the editor follows the host's light or dark theme.
+ */
+/** The editor's frame. */
+export declare const imageEditorFrameClass = "relative flex flex-col bg-background border border-border rounded-xl overflow-hidden shadow-sm text-foreground";
+/** The bar above the canvas (tabs and global actions). */
+export declare const imageEditorHeaderClass = "flex flex-wrap items-center justify-between px-4 py-3 bg-muted/40 border-b border-border gap-3";
+/** The tab strip. */
+export declare const imageTabListClass = "flex items-center gap-1 bg-background p-1 rounded-lg border border-border text-xs";
+/** A tab of the editor, highlighted when `active`. */
+export declare const imageTabClass: (active: boolean) => string;
+/** A bordered button in the header (undo, redo, zoom…). */
+export declare const imageHeaderButtonClass = "p-1.5 rounded-lg border border-border bg-background text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed";
+/** The primary action (export, apply). */
+export declare const imagePrimaryButtonClass = "rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow transition-colors disabled:opacity-50";
+/** The side panel next to the canvas. */
+export declare const imageSidebarClass = "w-full md:w-80 bg-background border-t md:border-t-0 md:border-l border-border p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]";
+/** The canvas area's background. */
+export declare const imageCanvasAreaClass = "bg-muted";
+/** A small uppercase section title. */
+export declare const imageSectionTitleClass = "font-semibold text-foreground uppercase tracking-wider text-[11px]";
+/** A section under a rule. */
+export declare const imageSectionClass = "border-t border-border pt-3";
+/** A thin rule between groups of controls. */
+export declare const imageDividerClass = "h-px bg-border my-1";
+/** A small secondary button. */
+export declare const imageSmallButtonClass = "px-2 py-1 rounded text-[11px] bg-muted text-foreground hover:bg-accent hover:text-accent-foreground self-start disabled:opacity-40";
+/** A tiny button in a row (layer actions, effect actions). */
+export declare const imageIconButtonClass = "px-1.5 py-0.5 rounded text-[10px] bg-muted text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40";
+/** An outlined tiny button. */
+export declare const imageOutlineButtonClass = "rounded border border-border px-1.5 py-0.5 text-[11px] text-foreground hover:bg-muted disabled:opacity-40";
+/** A toggle chip, filled when `on`. */
+export declare const imageChipClass: (on: boolean) => string;
+/** A bordered choice button, highlighted when `on`. */
+export declare const imageChoiceClass: (on: boolean) => string;
+/** A text or number field. */
+export declare const imageFieldClass = "rounded border border-input bg-background px-1 py-0.5 text-foreground";
+/** A select. */
+export declare const imageSelectClass = "rounded border border-input bg-background px-1.5 py-1 text-foreground";
+/** A colour input swatch. */
+export declare const imageColorInputClass = "h-6 w-8 rounded border border-border bg-transparent";
+/** A full-width range slider. */
+export declare const imageRangeClass = "w-full accent-primary";
+/** An error message. */
+export declare const imageErrorClass = "text-destructive";
+/** An error banner. */
+export declare const imageErrorBannerClass = "border-b border-destructive/40 bg-destructive/10 px-4 py-1.5 text-xs text-destructive";
+/** A spinner on a primary button. */
+export declare const imageSpinnerClass = "w-3.5 h-3.5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin";

package/dist/image-editor/styles.js

@@ -0,0 +1,51 @@
+/**
+ * Tailwind classes shared by the image editor and its panels (same in the React and Svelte
+ * packages). They use shadcn theme tokens (`background`, `foreground`, `muted`, `accent`,
+ * `border`, `input`, `primary`, `destructive`), so the editor follows the host's light or dark theme.
+ */
+/** The editor's frame. */
+export const imageEditorFrameClass = 'relative flex flex-col bg-background border border-border rounded-xl overflow-hidden shadow-sm text-foreground';
+/** The bar above the canvas (tabs and global actions). */
+export const imageEditorHeaderClass = 'flex flex-wrap items-center justify-between px-4 py-3 bg-muted/40 border-b border-border gap-3';
+/** The tab strip. */
+export const imageTabListClass = 'flex items-center gap-1 bg-background p-1 rounded-lg border border-border text-xs';
+/** A tab of the editor, highlighted when `active`. */
+export const imageTabClass = (active) => `px-3 py-1.5 rounded-md font-medium transition-colors ${active ? 'bg-primary text-primary-foreground shadow' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`;
+/** A bordered button in the header (undo, redo, zoom…). */
+export const imageHeaderButtonClass = 'p-1.5 rounded-lg border border-border bg-background text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed';
+/** The primary action (export, apply). */
+export const imagePrimaryButtonClass = 'rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow transition-colors disabled:opacity-50';
+/** The side panel next to the canvas. */
+export const imageSidebarClass = 'w-full md:w-80 bg-background border-t md:border-t-0 md:border-l border-border p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]';
+/** The canvas area's background. */
+export const imageCanvasAreaClass = 'bg-muted';
+/** A small uppercase section title. */
+export const imageSectionTitleClass = 'font-semibold text-foreground uppercase tracking-wider text-[11px]';
+/** A section under a rule. */
+export const imageSectionClass = 'border-t border-border pt-3';
+/** A thin rule between groups of controls. */
+export const imageDividerClass = 'h-px bg-border my-1';
+/** A small secondary button. */
+export const imageSmallButtonClass = 'px-2 py-1 rounded text-[11px] bg-muted text-foreground hover:bg-accent hover:text-accent-foreground self-start disabled:opacity-40';
+/** A tiny button in a row (layer actions, effect actions). */
+export const imageIconButtonClass = 'px-1.5 py-0.5 rounded text-[10px] bg-muted text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40';
+/** An outlined tiny button. */
+export const imageOutlineButtonClass = 'rounded border border-border px-1.5 py-0.5 text-[11px] text-foreground hover:bg-muted disabled:opacity-40';
+/** A toggle chip, filled when `on`. */
+export const imageChipClass = (on) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground hover:bg-accent hover:text-accent-foreground'}`;
+/** A bordered choice button, highlighted when `on`. */
+export const imageChoiceClass = (on) => `border transition-colors ${on ? 'bg-primary/15 border-primary text-foreground' : 'bg-background border-border text-muted-foreground hover:text-foreground hover:bg-muted'}`;
+/** A text or number field. */
+export const imageFieldClass = 'rounded border border-input bg-background px-1 py-0.5 text-foreground';
+/** A select. */
+export const imageSelectClass = 'rounded border border-input bg-background px-1.5 py-1 text-foreground';
+/** A colour input swatch. */
+export const imageColorInputClass = 'h-6 w-8 rounded border border-border bg-transparent';
+/** A full-width range slider. */
+export const imageRangeClass = 'w-full accent-primary';
+/** An error message. */
+export const imageErrorClass = 'text-destructive';
+/** An error banner. */
+export const imageErrorBannerClass = 'border-b border-destructive/40 bg-destructive/10 px-4 py-1.5 text-xs text-destructive';
+/** A spinner on a primary button. */
+export const imageSpinnerClass = 'w-3.5 h-3.5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin';

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

@@ -1,4 +1,4 @@
-import { PresenceStore, type AgentPlayback, type PlaybackSurface } from '@pixerate/editor/tools';
+import { PresenceStore, type AgentPlayback, type PlaybackChromeOptions, type PlaybackSurface } from '@pixerate/editor/tools';
 type MaybeGetter<T> = T | (() => T);
 /** Makes `playback` the default for every editor surface in this component's subtree (call during init). */
 export declare function setAgentPlayback(playback: AgentPlayback | null | undefined): void;
@@ -15,11 +15,14 @@ export type PlaybackSurfaceOptions = Omit<PlaybackSurface, 'presence'>;
 export declare function createPlaybackSurface(playback: MaybeGetter<AgentPlayback | null | undefined>, id: MaybeGetter<string | null | undefined>, options?: MaybeGetter<PlaybackSurfaceOptions>, 
 /** Use this presence store (e.g. a director's, so its cursor and playback's are one) instead of a new one. */
 sharedPresence?: PresenceStore | null): PresenceStore;
-export interface ElementPlaybackSurfaceOptions {
+export interface ElementPlaybackSurfaceOptions extends PlaybackChromeOptions {
     /** The kind of a bare `id` / `ids` argument (e.g. `parameter`). */
     defaultKind?: string;
-    /** A CSS selector for each ref kind the surface can find inside the element. */
-    selectors: Record<string, (id: string) => string>;
+    /**
+     * A CSS selector for each ref kind the surface can find inside the element. Refs they miss go to
+     * `locate`, then `locateElement` (which may return an element outside this one).
+     */
+    selectors?: Record<string, (id: string) => string>;
     /** Bring the element on screen (switch to its tab) before the agent acts. */
     reveal?: () => void | Promise<void>;
 }

package/dist/playback/playback.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { PresenceStore } from '@pixerate/editor/tools';
+import { PresenceStore, locatePlaybackChrome } from '@pixerate/editor/tools';
 const KEY = Symbol.for('pixerate.agentPlayback');
 const read = (value) => (typeof value === 'function' ? value() : value);
 /** Makes `playback` the default for every editor surface in this component's subtree (call during init). */
@@ -38,7 +38,11 @@ sharedPresence) {
             beginGesture: (key) => o().beginGesture?.(key),
             endGesture: () => o().endGesture?.(),
             reveal: () => o().reveal?.(),
-            open: (ref) => o().open?.(ref),
+            // Only a surface whose options can open things has `open`, so playback skips `open` steps
+            // (and their wait) everywhere else. Read per step, like the other options.
+            get open() {
+                return o().open ? (ref) => o().open?.(ref) : undefined;
+            },
             get defaultKind() {
                 return o().defaultKind;
             }
@@ -59,15 +63,21 @@ sharedPresence) {
  */
 export function createElementPlaybackSurface(playback, id, element, options) {
     const box = () => element()?.getBoundingClientRect() ?? null;
+    const fromViewport = (p) => {
+        const r = box();
+        return { x: p.x - (r?.left ?? 0), y: p.y - (r?.top ?? 0) };
+    };
     return createPlaybackSurface(playback, id, () => {
         const o = read(options);
         return {
             defaultKind: o.defaultKind,
             locate: (ref) => {
-                const selector = o.selectors[ref.kind]?.(ref.id);
+                const selector = o.selectors?.[ref.kind]?.(ref.id);
                 const b = box();
                 const r = selector ? element()?.querySelector(selector)?.getBoundingClientRect() : null;
-                return b && r && r.width > 0 ? { x: r.left - b.left, y: r.top - b.top, width: r.width, height: r.height } : null;
+                if (b && r && r.width > 0)
+                    return { x: r.left - b.left, y: r.top - b.top, width: r.width, height: r.height };
+                return locatePlaybackChrome(ref, o, fromViewport);
             },
             bounds: () => {
                 const r = box();
@@ -81,11 +91,9 @@ export function createElementPlaybackSurface(playback, id, element, options) {
                 const r = box();
                 return { x: (r?.left ?? 0) + p.x, y: (r?.top ?? 0) + p.y };
             },
-            fromViewport: (p) => {
-                const r = box();
-                return { x: p.x - (r?.left ?? 0), y: p.y - (r?.top ?? 0) };
-            },
-            reveal: () => o.reveal?.()
+            fromViewport,
+            reveal: () => o.reveal?.(),
+            open: o.open ? (ref) => o.open?.(ref) : undefined
         };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.108.0",
+  "version": "0.109.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -160,7 +160,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.148.0"
+    "@pixerate/editor": "0.149.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",