@pixerate/editor-svelte 0.107.0 → 0.108.0

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

@@ -0,0 +1,64 @@
+import type { ImageEditorFit } from '@pixerate/editor/image-editor';
+import type { AgentPlayback, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+import { FreeTransformTool, type SelectionToolOptions, type ShapeToolOptions, type TextEditSession, type TypeToolOptions } from '@pixerate/editor/image-editor';
+import type { ReactiveImageEditor } from './imageEditorState.svelte.js';
+import type { ImageEditorCanvasErrorSource, ImageEditorCanvasMode } from './canvasTypes.js';
+interface Props {
+    /** The editor to draw and edit (`createReactiveImageEditor`). */
+    editor: ReactiveImageEditor;
+    /**
+     * 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
+     * Transform works in every mode. Default `none`.
+     */
+    mode?: ImageEditorCanvasMode;
+    /** How the image fits the canvas (default: the renderer's). */
+    fit?: ImageEditorFit;
+    /** Options of the selection tools (magic wand tolerance, feather, …). */
+    selectionOptions?: SelectionToolOptions;
+    /** Options of the shape tool. */
+    shapeOptions?: ShapeToolOptions;
+    /** Options of the type tool. */
+    typeOptions?: TypeToolOptions;
+    /** Colour of new annotations (default `#ef4444`). */
+    annotationColor?: string;
+    /** Stroke width of new annotations, in image pixels (default 3). */
+    annotationWidth?: number;
+    /** Aspect ratio a crop handle drag keeps (width / height), or null for free (default). */
+    cropRatio?: number | null;
+    /** A gesture failed (`message`) or recovered (`null`). */
+    onerror?: (source: ImageEditorCanvasErrorSource, message: string | null) => void;
+    /** The text being edited on the canvas (bindable). Set it to `null` to finish editing. */
+    typeSession?: TextEditSession | null;
+    /**
+     * The Free Transform tool (Ctrl/Cmd+T) the canvas drives and draws. Pass your own to show its
+     * options bar or begin transforms from your UI; by default the canvas makes one.
+     */
+    transformTool?: FreeTransformTool;
+    /**
+     * Agent playback: act out the image tools' calls on this canvas with the agent's cursor
+     * (default: `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `image`, where the image tool providers play). */
+    playbackId?: string;
+    /** Bring the canvas on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
+    /**
+     * Where the default playback lookups find the editor's chrome: tabs (`[data-image-tab]`),
+     * sliders (`[data-control-id]`) and layer rows (`[data-layer-id]`). Default: the canvas itself.
+     */
+    chromeRoot?: () => HTMLElement | null | undefined;
+    /** Your own lookup for a playback ref, in document pixels (tried first). */
+    locate?: (ref: PlaybackRef) => PlaybackRect | null;
+    /** Your own element for a playback ref, anywhere on the page; its box is mapped to document pixels. */
+    locateElement?: (ref: PlaybackRef) => Element | null;
+    /** Show a panel for an `open` step (default: click its `[data-image-tab]` under `chromeRoot`). */
+    open?: (ref: PlaybackRef) => void | Promise<void>;
+    class?: string;
+    style?: string;
+}
+declare const ImageEditorCanvas: import("svelte").Component<Props, {}, "typeSession">;
+type ImageEditorCanvas = ReturnType<typeof ImageEditorCanvas>;
+export default ImageEditorCanvas;

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

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

package/dist/image-editor/canvasTypes.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,7 @@
 import type { ComponentProps } from "svelte";
 import type ImageEditorComponent from "./ImageEditor.svelte";
+import type ImageEditorCanvasComponent from "./ImageEditorCanvas.svelte";
+import type ImageEffectControlsComponent from "./ImageEffectControls.svelte";
 import type HistogramComponent from "./Histogram.svelte";
 import type AdjustmentLayersPanelComponent from "./AdjustmentLayersPanel.svelte";
 import type CurvesEditorComponent from "./CurvesEditor.svelte";
@@ -15,6 +17,9 @@ import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
 import type TypeOptionsBarComponent from "./TypeOptionsBar.svelte";
 import type ImageProviderEffectsPanelComponent from "./ImageProviderEffectsPanel.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as ImageEditorCanvas } from './ImageEditorCanvas.svelte';
+export { default as ImageEffectControls } from './ImageEffectControls.svelte';
+export type { ImageEditorCanvasMode, ImageEditorCanvasErrorSource } from './canvasTypes.js';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
@@ -32,6 +37,8 @@ export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
 export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
+export type ImageEditorCanvasProps = ComponentProps<typeof ImageEditorCanvasComponent>;
+export type ImageEffectControlsProps = ComponentProps<typeof ImageEffectControlsComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
 export type AdjustmentLayersPanelProps = ComponentProps<typeof AdjustmentLayersPanelComponent>;
 export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;

package/dist/image-editor/index.js

@@ -1,4 +1,6 @@
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as ImageEditorCanvas } from './ImageEditorCanvas.svelte';
+export { default as ImageEffectControls } from './ImageEffectControls.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';

package/dist/playback/PresenceLayer.svelte

@@ -12,10 +12,12 @@
 		 * (`x * zoom + viewport.x`), or a function. Default: one to one.
 		 */
 		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;
 		class?: string;
 	}
 
-	let { presence, viewport, class: className = '' }: Props = $props();
+	let { presence, viewport, clip = true, class: className = '' }: Props = $props();
 	let view: PresenceState = $state.raw(untrack(() => presence.getState()));
 	$effect(() => {
 		view = presence.getState();
@@ -44,7 +46,7 @@
 	snapshots and exports. Parity with React's `<PresenceLayer>`.
 -->
 {#if view.actors.length}
-	<div class="pixerate-presence {className}" aria-hidden="true" data-testid="presence-layer" style="position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 50;">
+	<div class="pixerate-presence {className}" aria-hidden="true" data-testid="presence-layer" style="position: absolute; inset: 0; pointer-events: none; overflow: {clip ? 'hidden' : 'visible'}; z-index: 50;">
 		{#each view.actors as a (a.id)}
 			{#if a.focus}
 				<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>

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

@@ -15,6 +15,8 @@ interface Props {
         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;
     class?: string;
 }
 declare const PresenceLayer: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.107.0",
+  "version": "0.108.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",