@pixerate/editor-svelte 0.21.0 → 0.22.0

package/README.md

@@ -73,9 +73,10 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
+| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryDirty`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
 | `@pixerate/editor-svelte/spreadsheet` | `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow`, `createReactiveSpreadsheet` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-svelte/commands` | `CommandPalette`, `createCommandPalette` (`hotkey: "Mod+K"`; call `destroy()` when done), `createCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 
 Prop types are exported alongside each component, for example `EditableTextNodeEditorProps`, `BubbleMenuProps`, `ImageEditorProps` and `SpreadsheetEditorProps`.

package/dist/canvas/CanvasGuidesLayer.svelte

@@ -10,6 +10,8 @@
 		color?: string;
 		/** Colour of equal-spacing guides. */
 		spacingColor?: string;
+		/** Colour of measuring lines, their labels and extension lines. */
+		measureColor?: string;
 		class?: string;
 	}
 
@@ -18,6 +20,7 @@
 		viewport = { x: 0, y: 0, zoom: 1 },
 		color = '#f59e0b',
 		spacingColor = '#ec4899',
+		measureColor = '#ef4444',
 		class: className = ''
 	}: Props = $props();
 
@@ -42,11 +45,38 @@
 				y1={a.y}
 				x2={b.x}
 				y2={b.y}
-				stroke={guide.kind === 'spacing' ? spacingColor : color}
+				stroke={guide.kind === 'measure' || guide.kind === 'extension'
+					? measureColor
+					: guide.kind === 'spacing'
+						? spacingColor
+						: color}
 				stroke-width="1"
-				stroke-dasharray={guide.kind === 'centre' ? '4 3' : undefined}
+				stroke-dasharray={guide.kind === 'centre' ? '4 3' : guide.kind === 'extension' ? '3 3' : undefined}
 				shape-rendering="crispEdges"
 			/>
 		{/each}
+		{#each guides as guide, i (i)}
+			{#if guide.label}
+				{@const mid = toScreen((guide.x1 + guide.x2) / 2, (guide.y1 + guide.y2) / 2)}
+				{@const vertical = guide.orientation === 'vertical'}
+				{@const width = guide.label.length * 6.5 + 8}
+				<!-- Labels sit beside vertical lines and below horizontal ones. -->
+				<g
+					class="pixerate-canvas-guides__label"
+					data-label={guide.label}
+					transform="translate({vertical ? mid.x + 4 : mid.x - width / 2} {vertical ? mid.y - 8 : mid.y + 4})"
+				>
+					<rect {width} height="16" rx="3" fill={measureColor} />
+					<text
+						x={width / 2}
+						y="11.5"
+						text-anchor="middle"
+						font-size="11"
+						font-family="system-ui, sans-serif"
+						fill="#fff">{guide.label}</text
+					>
+				</g>
+			{/if}
+		{/each}
 	</svg>
 {/if}

package/dist/canvas/CanvasGuidesLayer.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     color?: string;
     /** Colour of equal-spacing guides. */
     spacingColor?: string;
+    /** Colour of measuring lines, their labels and extension lines. */
+    measureColor?: string;
     class?: string;
 }
 declare const CanvasGuidesLayer: import("svelte").Component<Props, {}, "">;

package/dist/canvas/CanvasGuidesLayer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasGuidesLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasGuidesLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGxE,UAAU,KAAK;IACd,kEAAkE;IAClE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA+BF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CanvasGuidesLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasGuidesLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGxE,UAAU,KAAK;IACd,kEAAkE;IAClE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAgDF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/canvas/createCanvasArrange.svelte.d.ts

@@ -16,10 +16,21 @@ export interface CreateCanvasArrangeOptions<TNode extends CanvasNode = CanvasNod
  * Wire snapping to SvelteFlow with `onnodedragstart={() => arrange.beginDrag()}`,
  * `onnodedrag={({ nodes }) => arrange.drag(nodes.map((n) => n.id))}` and
  * `onnodedragstop={() => arrange.endDrag()}`, and render `arrange.guides` with
- * `<CanvasGuidesLayer>`.
+ * `<CanvasGuidesLayer>`. Snap resizes with `<NodeResizer {...arrange.resizerHandlers(id)} />`.
  */
 export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasArrangeOptions<TNode>): {
     guides: GuideLine[];
+    /**
+     * Resize snapping for SvelteFlow's `<NodeResizer>` / `<NodeResizeControl>`:
+     * `<NodeResizer {...arrange.resizerHandlers(id)} />`. The resizer writes the raw size
+     * to the nodes after `onResize`, so snapping runs a microtask later and writes the
+     * snapped box back. Locked nodes snap back to their starting box.
+     */
+    resizerHandlers(id: string): {
+        onResizeStart: () => void;
+        onResize: () => void;
+        onResizeEnd: () => void;
+    };
     apply: (name: string, updates: import("@pixerate/editor/canvas").CanvasNodeUpdate[]) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
     align(edge: import("@pixerate/editor/canvas").AlignEdge, ids?: Iterable<string>, alignOptions?: import("@pixerate/editor/canvas").AlignNodesOptions): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
     distribute(axis: import("@pixerate/editor/canvas").DistributeAxis, mode?: import("@pixerate/editor/canvas").DistributeMode, ids?: Iterable<string>, distributeOptions?: import("@pixerate/editor/canvas").DistributeNodesOptions): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
@@ -44,6 +55,10 @@ export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNod
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): import("@pixerate/editor/canvas").SnapNodeDragResult | null;
     snapPositionChanges<TChange extends import("@pixerate/editor/canvas").PositionChangeLike>(changes: TChange[]): TChange[];
+    beginResize(id: string): void;
+    resize(id: string, handle?: import("@pixerate/editor/canvas").ResizeHandle): import("@pixerate/editor/canvas").SnapNodeResizeResult | null;
+    endResize(): void;
+    snapResizeChanges<TChange extends import("@pixerate/editor/canvas").PositionChangeLike>(changes: TChange[]): TChange[];
     endDrag(): void;
 };
 export type CanvasArrange<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasArrange<TNode>>;

package/dist/canvas/createCanvasArrange.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;;;;;;sBA2D2rlD,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;;;;;EAxCrvoD;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}
+{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoD+j/C,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;;;;;;;;;EAxC1miD;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}

package/dist/canvas/createCanvasArrange.svelte.js

@@ -9,7 +9,7 @@ import { createCanvasArrangeController, matchArrangeShortcut } from '@pixerate/e
  * Wire snapping to SvelteFlow with `onnodedragstart={() => arrange.beginDrag()}`,
  * `onnodedrag={({ nodes }) => arrange.drag(nodes.map((n) => n.id))}` and
  * `onnodedragstop={() => arrange.endDrag()}`, and render `arrange.guides` with
- * `<CanvasGuidesLayer>`.
+ * `<CanvasGuidesLayer>`. Snap resizes with `<NodeResizer {...arrange.resizerHandlers(id)} />`.
  */
 export function createCanvasArrange(options) {
     let guides = $state.raw([]);
@@ -22,9 +22,26 @@ export function createCanvasArrange(options) {
     });
     return {
         ...controller,
-        /** Guide segments (flow coordinates) for the active drag; empty otherwise. */
+        /** Guide segments (flow coordinates) for the active drag or resize; empty otherwise. */
         get guides() {
             return guides;
+        },
+        /**
+         * Resize snapping for SvelteFlow's `<NodeResizer>` / `<NodeResizeControl>`:
+         * `<NodeResizer {...arrange.resizerHandlers(id)} />`. The resizer writes the raw size
+         * to the nodes after `onResize`, so snapping runs a microtask later and writes the
+         * snapped box back. Locked nodes snap back to their starting box.
+         */
+        resizerHandlers(id) {
+            return {
+                onResizeStart: () => controller.beginResize(id),
+                onResize: () => {
+                    queueMicrotask(() => controller.resize(id));
+                },
+                onResizeEnd: () => {
+                    queueMicrotask(() => controller.endResize());
+                }
+            };
         }
     };
 }

package/dist/canvas/createCanvasMeasure.svelte.d.ts

@@ -0,0 +1,53 @@
+import { type NodeRectOptions } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+export interface CreateCanvasMeasureOptions<TNode extends CanvasNode = CanvasNode> {
+    getNodes: () => TNode[];
+    /** Ids measured from (default: nodes with `selected: true`). */
+    getSelectedIds?: () => string[];
+    /** Turns measuring off (default `true`). Read reactively. */
+    enabled?: boolean | (() => boolean);
+    /** Measure only while Alt / Option is held (default `true`); `false` always measures. */
+    requireModifier?: boolean;
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * Headless Svelte 5 rune for Alt-hover distance measuring: hold Alt / Option and hover a
+ * node to see red distance lines with labels from the selection to it (or to the selection's
+ * parent when hovering the selection or empty space).
+ *
+ * Wire it with `$effect(() => measure.listen())`, `onnodepointerenter={measure.onnodepointerenter}`
+ * and `onnodepointerleave={measure.onnodepointerleave}` on `<SvelteFlow>`, and render
+ * `measure.guides` with `<CanvasGuidesLayer>` (concatenate with `arrange.guides` to share one).
+ */
+export declare function createCanvasMeasure<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasMeasureOptions<TNode>): {
+    /** Measuring lines (flow coordinates) for `<CanvasGuidesLayer>`. */
+    readonly guides: import("@pixerate/editor/canvas").MeasureGuide[];
+    /** The box measured to (outline it), or `null`. */
+    readonly target: import("@pixerate/editor/canvas").Rect | null;
+    /** Whether measuring is showing. */
+    readonly active: boolean;
+    readonly hoveredId: string | null;
+    setHovered(id: string | null): void;
+    /** Sets the modifier state by hand (e.g. from a toolbar toggle). */
+    setModifier(held: boolean): void;
+    onnodepointerenter: ({ node, event }: {
+        node: {
+            id: string;
+        };
+        event?: {
+            altKey?: boolean;
+        };
+    }) => void;
+    onnodepointerleave: ({ node }: {
+        node: {
+            id: string;
+        };
+    }) => void;
+    /**
+     * Tracks the Alt key on `target` (default `window`) and resets it when the window
+     * loses focus. Returns a cleanup function.
+     */
+    listen(target?: HTMLElement | Window | null): () => void;
+};
+export type CanvasMeasure = ReturnType<typeof createCanvasMeasure>;
+//# sourceMappingURL=createCanvasMeasure.svelte.d.ts.map

package/dist/canvas/createCanvasMeasure.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasMeasure.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasMeasure.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAChF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACpC,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC9B;AAID;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;IAcnH,oEAAoE;;IAIpE,mDAAmD;;IAInD,oCAAoC;;;mBAOrB,MAAM,GAAG,IAAI;IAG5B,oEAAoE;sBAClD,OAAO;0CAGa;QAAE,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,KAAK,CAAC,EAAE;YAAE,MAAM,CAAC,EAAE,OAAO,CAAA;SAAE,CAAA;KAAE;mCAI7D;QAAE,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE;IAGvD;;;OAGG;oBACY,WAAW,GAAG,MAAM,GAAG,IAAI,GAAmD,MAAM,IAAI;EAmBxG;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/canvas/createCanvasMeasure.svelte.js

@@ -0,0 +1,80 @@
+import { isMeasureModifierHeld, measureSelection } from '@pixerate/editor/canvas';
+const EMPTY = { guides: [], target: null, selection: null };
+/**
+ * Headless Svelte 5 rune for Alt-hover distance measuring: hold Alt / Option and hover a
+ * node to see red distance lines with labels from the selection to it (or to the selection's
+ * parent when hovering the selection or empty space).
+ *
+ * Wire it with `$effect(() => measure.listen())`, `onnodepointerenter={measure.onnodepointerenter}`
+ * and `onnodepointerleave={measure.onnodepointerleave}` on `<SvelteFlow>`, and render
+ * `measure.guides` with `<CanvasGuidesLayer>` (concatenate with `arrange.guides` to share one).
+ */
+export function createCanvasMeasure(options) {
+    let hoveredId = $state(null);
+    let modifier = $state(false);
+    const enabled = () => (typeof options.enabled === 'function' ? options.enabled() : options.enabled !== false);
+    const active = $derived(enabled() && (options.requireModifier === false || modifier));
+    const result = $derived.by(() => {
+        if (!active)
+            return EMPTY;
+        const nodes = options.getNodes();
+        const ids = options.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
+        return measureSelection(nodes, ids, hoveredId, options.rectOptions);
+    });
+    return {
+        /** Measuring lines (flow coordinates) for `<CanvasGuidesLayer>`. */
+        get guides() {
+            return result.guides;
+        },
+        /** The box measured to (outline it), or `null`. */
+        get target() {
+            return result.target;
+        },
+        /** Whether measuring is showing. */
+        get active() {
+            return active;
+        },
+        get hoveredId() {
+            return hoveredId;
+        },
+        setHovered(id) {
+            hoveredId = id;
+        },
+        /** Sets the modifier state by hand (e.g. from a toolbar toggle). */
+        setModifier(held) {
+            modifier = held;
+        },
+        onnodepointerenter: ({ node, event }) => {
+            hoveredId = node.id;
+            if (event && typeof event.altKey === 'boolean')
+                modifier = event.altKey;
+        },
+        onnodepointerleave: ({ node }) => {
+            if (hoveredId === node.id)
+                hoveredId = null;
+        },
+        /**
+         * Tracks the Alt key on `target` (default `window`) and resets it when the window
+         * loses focus. Returns a cleanup function.
+         */
+        listen(target = typeof window !== 'undefined' ? window : null) {
+            if (!target)
+                return () => { };
+            const onKey = (event) => {
+                modifier = isMeasureModifierHeld(event);
+            };
+            const onBlur = () => {
+                modifier = false;
+            };
+            target.addEventListener('keydown', onKey);
+            target.addEventListener('keyup', onKey);
+            const win = typeof window !== 'undefined' ? window : null;
+            win?.addEventListener('blur', onBlur);
+            return () => {
+                target.removeEventListener('keydown', onKey);
+                target.removeEventListener('keyup', onKey);
+                win?.removeEventListener('blur', onBlur);
+            };
+        }
+    };
+}

package/dist/canvas/index.d.ts

@@ -17,6 +17,8 @@ export { createStreamingCanvas, type CreateStreamingCanvasOptions } from './crea
 export { createCanvasArrange, createCanvasArrangeShortcuts, type CanvasArrange, type CreateCanvasArrangeOptions, type CanvasArrangeShortcutsOptions } from './createCanvasArrange.svelte.js';
 export { createCanvasScenes, type CanvasScenes, type CreateCanvasScenesOptions } from './createCanvasScenes.svelte.js';
 export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';
+export { createCanvasMeasure, type CanvasMeasure, type CreateCanvasMeasureOptions } from './createCanvasMeasure.svelte.js';
+export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic, type MeasureGuide, type MeasureSelectionResult, type MeasureSelectionOptions, type ResizeHandle, type SnapResizeOptions, type SnapResizeResult, type SnapNodeResizeOptions, type SnapNodeResizeResult, type CubicSegment, type FitCubicsOptions, type FitPathDataOptions } from '@pixerate/editor/canvas';
 export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS, type AlignEdge, type DistributeAxis, type DistributeMode, type SizeDimension, type ZOrderOperation, type CanvasNodeUpdate, type GuideLine, type GuideIndex, type SnapGuidesOptions, type SnapResult, type ConnectorSnap, type ConnectorSnapTarget, type CanvasConnectionLineType, type CanvasScene, type CanvasScenesState, type CanvasViewport, type CanvasArrangeAction, type ArrangeShortcutBinding } from '@pixerate/editor/canvas';
 export { default as ShapeNode } from './ShapeNode.svelte';
 export { combineShapeNodes, canCombineShapeNodes, applyShapeCombination, revertShapeCombination, shapeNodeToPolygon, isShapeNode, getNodeShape, SHAPE_DATA_KEY, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SHAPE_KINDS, isShapeDescription, shapeToPolygon, getShapeSvg, getShapeRenderData, parseSvgPath, flattenSvgPath, polygonToSvgPath, simplifyRing, polygonBoolean, unionPolygons, intersectPolygons, subtractPolygons, xorPolygons, dividePolygons, polygonArea, multiPolygonArea, multiPolygonBounds, ringSignedArea, pointInRings, pointInMultiPolygon, type ShapeOperation, type ShapeDescription, type ShapeKind, type ShapePaint, type ShapeSize, type ShapeRenderData, type RectShape, type EllipseShape, type RegularPolygonShape, type StarShape, type PathShape, type PathCommand, type FlattenOptions, type PolygonToPathOptions, type CombineShapeNodesOptions, type CombineShapeNodesResult, type CombineShapeNodesRefusal, type ShapeNodePolygonOptions, type MultiPolygon, type PolygonWithHoles, type PolygonRing, type PolygonFillRule, type PolygonOperand, type PolygonInput, type PolygonPiece, type PolygonBooleanOperation, type PolygonBooleanOptions } from '@pixerate/editor/canvas';

package/dist/canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,OAAO,EACN,iBAAiB,EACjB,yBAAyB,EACzB,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EACN,gBAAgB,EAChB,uBAAuB,EACvB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACN,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EACjB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACN,qBAAqB,EACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACN,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,yBAAyB,EACzB,KAAK,+BAA+B,EACpC,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACN,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EACN,uBAAuB,EACvB,gCAAgC,EAChC,2BAA2B,EAC3B,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EACN,qBAAqB,EACrB,KAAK,iBAAiB,EACtB,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,2BAA2B,EAChC,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACN,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,iBAAiB,EACtB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,yBAAyB,EACzB,sBAAsB,EACtB,KAAK,sBAAsB,EAC3B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAG9F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAG5E,OAAO,EACN,qBAAqB,EACrB,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,mBAAmB,EACnB,4BAA4B,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,6BAA6B,EAClC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,yBAAyB,EAC9B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG1E,OAAO,EACN,mBAAmB,EACnB,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EACrB,UAAU,EACV,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,UAAU,EACV,eAAe,EACf,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,sBAAsB,EACtB,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EACzB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EACN,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACN,SAAS,EACT,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,WAAW,EACX,aAAa,EACb,KAAK,KAAK,EACV,KAAK,mBAAmB,EACxB,MAAM,yBAAyB,CAAC"}

package/dist/canvas/index.js

@@ -34,6 +34,9 @@ export { createStreamingCanvas } from './createStreamingCanvas.svelte.js';
 export { createCanvasArrange, createCanvasArrangeShortcuts } from './createCanvasArrange.svelte.js';
 export { createCanvasScenes } from './createCanvasScenes.svelte.js';
 export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';
+// Distance measuring (Alt-hover), resize / grid snapping and curve fitting
+export { createCanvasMeasure } from './createCanvasMeasure.svelte.js';
+export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic } from '@pixerate/editor/canvas';
 export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS } from '@pixerate/editor/canvas';
 export { default as ShapeNode } from './ShapeNode.svelte';
 // Shape nodes and boolean operations (Unite / Intersect / Subtract / Exclude / Divide)

package/dist/commands/CommandPalette.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" module>
+  // Ids only render while the palette is open (client side), so a counter is enough
+  // (`$props.id()` needs Svelte 5.20, newer than our peer range).
+  let nextId = 0;
+</script>
+
+<script lang="ts">
+  import type { CommandPaletteItem } from '@pixerate/editor/commands';
+  import type { SvelteCommandPalette } from './palette.svelte.js';
+
+  interface Props {
+    /** State from `createCommandPalette`. */
+    palette: SvelteCommandPalette;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Extra classes for the dialog panel. */
+    class?: string;
+  }
+
+  let {
+    palette,
+    placeholder = 'Type a command…',
+    emptyMessage = 'No matching commands',
+    class: className = ''
+  }: Props = $props();
+
+  const baseId = `command-palette-${++nextId}`;
+  const listId = `${baseId}-list`;
+  const optionId = (index: number) => `${baseId}-option-${index}`;
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+  let listEl = $state<HTMLUListElement | null>(null);
+
+  $effect(() => {
+    if (palette.open) inputEl?.focus();
+  });
+
+  $effect(() => {
+    void palette.activeIndex;
+    if (!palette.open) return;
+    const active = listEl?.querySelector<HTMLElement>('[aria-selected="true"]');
+    active?.scrollIntoView?.({ block: 'nearest' });
+  });
+
+  const segments = (item: CommandPaletteItem) => {
+    const marked = new Set(item.labelIndices);
+    return Array.from(item.label).map((ch, i) => ({ ch, match: marked.has(i) }));
+  };
+</script>
+
+{#if palette.open}
+  <!-- Headless-styled command palette: Arrow keys move, Enter runs, Escape or a backdrop press closes. -->
+  <div
+    class="fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]"
+    data-command-palette-backdrop=""
+    role="presentation"
+    onmousedown={(e) => {
+      if (e.target === e.currentTarget) palette.setOpen(false);
+    }}
+  >
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette"
+      class="w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl {className}"
+      style="background: var(--popover, var(--background, #fff));"
+    >
+      <input
+        bind:this={inputEl}
+        type="text"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={palette.items.length ? optionId(palette.activeIndex) : undefined}
+        aria-label="Search commands"
+        {placeholder}
+        value={palette.query}
+        oninput={(e) => palette.setQuery(e.currentTarget.value)}
+        onkeydown={(e) => {
+          if (palette.handleKeyDown(e)) e.stopPropagation();
+        }}
+        class="w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+      />
+      {#if palette.items.length === 0}
+        <div class="px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+      {:else}
+        <ul bind:this={listEl} id={listId} role="listbox" aria-label="Commands" class="max-h-80 overflow-y-auto py-1">
+          {#each palette.items as item, index (item.id)}
+            <li
+              id={optionId(index)}
+              role="option"
+              aria-selected={index === palette.activeIndex}
+              aria-disabled={!item.enabled || undefined}
+              data-command-id={item.id}
+              data-recent={item.recent ? '' : undefined}
+              title={item.disabledReason}
+              onmousemove={() => index !== palette.activeIndex && palette.setActiveIndex(index)}
+              onmousedown={(e) => e.preventDefault()}
+              onclick={() => palette.run(item.id)}
+              onkeydown={() => {}}
+              class="flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm {index === palette.activeIndex
+                ? 'bg-muted'
+                : ''} {item.enabled ? '' : 'cursor-default opacity-50'}"
+            >
+              <span class="min-w-0 flex-1 truncate">
+                {#each segments(item) as segment, i (i)}{#if segment.match}<span
+                      class="font-semibold text-foreground"
+                      data-match="">{segment.ch}</span
+                    >{:else}{segment.ch}{/if}{/each}
+                {#if item.disabledReason}
+                  <span class="ml-2 text-xs text-muted-foreground" data-disabled-reason="">{item.disabledReason}</span>
+                {/if}
+              </span>
+              {#if item.group}
+                <span class="shrink-0 text-xs text-muted-foreground">{item.group}</span>
+              {/if}
+              {#if item.shortcut}
+                <kbd class="shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground"
+                  >{item.shortcut}</kbd
+                >
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/commands/CommandPalette.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SvelteCommandPalette } from './palette.svelte.js';
+interface Props {
+    /** State from `createCommandPalette`. */
+    palette: SvelteCommandPalette;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Extra classes for the dialog panel. */
+    class?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;
+//# sourceMappingURL=CommandPalette.svelte.d.ts.map

package/dist/commands/CommandPalette.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/CommandPalette.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,UAAU,KAAK;IACb,yCAAyC;IACzC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8EH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/commands/commandShortcuts.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { CommandRegistry, CommandResult, CommandSpec } from "@pixerate/editor/commands";
+type MaybeGetter<T> = T | (() => T);
+export interface CommandShortcutsOptions<TContext = any> {
+    /** Element or window to listen on (default: `window`). */
+    target?: Window | HTMLElement | null;
+    /** Active scopes, most specific first; a getter is read on every keydown. */
+    scopes?: MaybeGetter<string | readonly string[] | undefined>;
+    /** Context for the commands (default: the registry's); a getter is read on every keydown. */
+    context?: MaybeGetter<TContext | undefined>;
+    /** Fire even while typing in inputs / contenteditable (default: per binding). */
+    allowInEditable?: boolean;
+    /** Called after a shortcut ran a command. */
+    onRun?: (result: CommandResult) => void;
+}
+/**
+ * Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
+ * Typing in inputs and editors is never hijacked, and disabled commands leave the event
+ * alone. Returns `{ destroy }`.
+ */
+export declare function createCommandShortcuts<TContext = any>(registry: CommandRegistry<TContext>, options?: CommandShortcutsOptions<TContext>): {
+    destroy: () => void;
+};
+/**
+ * Registers commands for the lifetime of the calling component (call it during
+ * component initialisation). Pass a getter to react to changes: when it returns a
+ * different array, the old commands are unregistered.
+ */
+export declare function useRegisterCommands<TContext = any>(registry: MaybeGetter<CommandRegistry<TContext> | null | undefined>, specs: MaybeGetter<readonly CommandSpec<TContext>[] | null | undefined>): void;
+export {};
+//# sourceMappingURL=commandShortcuts.svelte.d.ts.map

package/dist/commands/commandShortcuts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandShortcuts.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/commandShortcuts.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7F,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAKpC,MAAM,WAAW,uBAAuB,CAAC,QAAQ,GAAG,GAAG;IACrD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;IAC7D,6FAA6F;IAC7F,OAAO,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;IAC5C,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,GAAG,GAAG,EACnD,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,EACnC,OAAO,GAAE,uBAAuB,CAAC,QAAQ,CAAM,GAC9C;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAczB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,GAAG,GAAG,EAChD,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,EACnE,KAAK,EAAE,WAAW,CAAC,SAAS,WAAW,CAAC,QAAQ,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,GACtE,IAAI,CAON"}

package/dist/commands/commandShortcuts.svelte.js

@@ -0,0 +1,37 @@
+const read = (value) => typeof value === "function" ? value() : value;
+/**
+ * Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
+ * Typing in inputs and editors is never hijacked, and disabled commands leave the event
+ * alone. Returns `{ destroy }`.
+ */
+export function createCommandShortcuts(registry, options = {}) {
+    const target = options.target ?? (typeof window !== "undefined" ? window : null);
+    if (!target)
+        return { destroy: () => { } };
+    const onKeyDown = (event) => {
+        const context = options.context === undefined ? undefined : read(options.context);
+        const result = registry.handleKeyDown(event, {
+            scopes: options.scopes === undefined ? undefined : read(options.scopes),
+            ...(options.allowInEditable !== undefined ? { allowInEditable: options.allowInEditable } : {}),
+            ...(context !== undefined ? { context } : {}),
+        });
+        if (result)
+            options.onRun?.(result);
+    };
+    target.addEventListener("keydown", onKeyDown);
+    return { destroy: () => target.removeEventListener("keydown", onKeyDown) };
+}
+/**
+ * Registers commands for the lifetime of the calling component (call it during
+ * component initialisation). Pass a getter to react to changes: when it returns a
+ * different array, the old commands are unregistered.
+ */
+export function useRegisterCommands(registry, specs) {
+    $effect(() => {
+        const currentRegistry = read(registry);
+        const currentSpecs = read(specs);
+        if (!currentRegistry || !currentSpecs || currentSpecs.length === 0)
+            return;
+        return currentRegistry.register(currentSpecs);
+    });
+}

package/dist/commands/index.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "svelte";
+import type CommandPaletteComponent from "./CommandPalette.svelte";
+export { default as CommandPalette } from "./CommandPalette.svelte";
+export * from "./palette.svelte.js";
+export * from "./commandShortcuts.svelte.js";
+export type CommandPaletteProps = ComponentProps<typeof CommandPaletteComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/commands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/commands/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/commands/index.js

@@ -0,0 +1,3 @@
+export { default as CommandPalette } from "./CommandPalette.svelte";
+export * from "./palette.svelte.js";
+export * from "./commandShortcuts.svelte.js";

package/dist/commands/palette.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type CommandPaletteController, type CommandPaletteItem, type CommandPaletteOptions, type CommandRegistry, type CommandResult } from "@pixerate/editor/commands";
+export interface CreateCommandPaletteOptions<TContext = any> extends CommandPaletteOptions<TContext> {
+    /** Chord that toggles the palette from anywhere, also while typing (e.g. `Mod+K`). */
+    hotkey?: string;
+    /** Element or window the hotkey listens on (default: `window`). */
+    hotkeyTarget?: Window | HTMLElement | null;
+}
+export interface SvelteCommandPalette {
+    readonly open: boolean;
+    readonly query: string;
+    readonly activeIndex: number;
+    readonly items: CommandPaletteItem[];
+    readonly recents: string[];
+    readonly lastResult: CommandResult | null;
+    readonly controller: CommandPaletteController;
+    setOpen(open: boolean): void;
+    toggle(): void;
+    setQuery(query: string): void;
+    setActiveIndex(index: number): void;
+    move(delta: number): void;
+    run(id: string): CommandResult | null;
+    runActive(): CommandResult | null;
+    handleKeyDown(event: KeyboardEvent): boolean;
+    /** Stops following the registry and removes the hotkey listener. */
+    destroy(): void;
+}
+/**
+ * Reactive command palette state over a `CommandRegistry` (Svelte 5 runes): ranked rows
+ * with shortcuts and disabled reasons, active row and recents. Render it with
+ * `<CommandPalette palette={…} />` or your own markup. Call `destroy()` when done
+ * (e.g. in `onDestroy`).
+ */
+export declare function createCommandPalette<TContext = any>(registry: CommandRegistry<TContext>, options?: CreateCommandPaletteOptions<TContext>): SvelteCommandPalette;
+//# sourceMappingURL=palette.svelte.d.ts.map

package/dist/commands/palette.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/palette.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAE1B,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,2BAA2B,CAAC,QAAQ,GAAG,GAAG,CAAE,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAClG,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,UAAU,EAAE,wBAAwB,CAAC;IAC9C,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC;IACtC,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC;IAC7C,oEAAoE;IACpE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,GAAG,GAAG,EACjD,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,EACnC,OAAO,GAAE,2BAA2B,CAAC,QAAQ,CAAM,GAClD,oBAAoB,CAsDtB"}

package/dist/commands/palette.svelte.js

@@ -0,0 +1,61 @@
+import { createCommandPaletteController, matchPaletteHotkey, } from "@pixerate/editor/commands";
+/**
+ * Reactive command palette state over a `CommandRegistry` (Svelte 5 runes): ranked rows
+ * with shortcuts and disabled reasons, active row and recents. Render it with
+ * `<CommandPalette palette={…} />` or your own markup. Call `destroy()` when done
+ * (e.g. in `onDestroy`).
+ */
+export function createCommandPalette(registry, options = {}) {
+    const controller = createCommandPaletteController(registry, options);
+    let state = $state.raw(controller.getState());
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    let removeHotkey = () => { };
+    const { hotkey } = options;
+    const target = options.hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
+    if (hotkey && target) {
+        const onKeyDown = (event) => {
+            const e = event;
+            if (e.defaultPrevented || !matchPaletteHotkey(e, hotkey, options.platform))
+                return;
+            e.preventDefault();
+            controller.toggle();
+        };
+        target.addEventListener("keydown", onKeyDown);
+        removeHotkey = () => target.removeEventListener("keydown", onKeyDown);
+    }
+    return {
+        get open() {
+            return state.open;
+        },
+        get query() {
+            return state.query;
+        },
+        get activeIndex() {
+            return state.activeIndex;
+        },
+        get items() {
+            return state.items;
+        },
+        get recents() {
+            return state.recents;
+        },
+        get lastResult() {
+            return state.lastResult;
+        },
+        controller,
+        setOpen: controller.setOpen,
+        toggle: controller.toggle,
+        setQuery: controller.setQuery,
+        setActiveIndex: controller.setActiveIndex,
+        move: controller.move,
+        run: controller.run,
+        runActive: controller.runActive,
+        handleKeyDown: controller.handleKeyDown,
+        destroy() {
+            unsubscribe();
+            removeHotkey();
+        },
+    };
+}

package/dist/history/createHistoryShortcuts.d.ts

@@ -1,4 +1,4 @@
-import { HistoryManager } from "@pixerate/editor/history";
+import type { HistoryManager } from "@pixerate/editor/history";
 export interface HistoryShortcutsOptions {
     /**
      * Whether keyboard shortcuts are enabled. Defaults to true.

package/dist/history/createHistoryShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createHistoryShortcuts.d.ts","sourceRoot":"","sources":["../../src/history/createHistoryShortcuts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE,uBAA4B,GACpC;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqEzB"}
+{"version":3,"file":"createHistoryShortcuts.d.ts","sourceRoot":"","sources":["../../src/history/createHistoryShortcuts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE,uBAA4B,GACpC;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqCzB"}

package/dist/history/createHistoryShortcuts.js

@@ -1,3 +1,4 @@
+import { matchHistoryShortcut } from "@pixerate/editor/commands";
 /**
  * Attaches keyboard listeners for Undo (Mod+Z) and Redo (Mod+Shift+Z / Mod+Y).
  * Returns an object with a `destroy()` function for lifecycle cleanup.
@@ -13,39 +14,16 @@ export function createHistoryShortcuts(manager, options = {}) {
     }
     const handleKeyDown = (event) => {
         const e = event;
-        const isMac = typeof navigator !== "undefined" &&
-            /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-        const modifier = isMac ? e.metaKey : e.ctrlKey;
-        if (!modifier)
-            return;
-        if (ignoreEditableElements && typeof document !== "undefined") {
-            const targetEl = (e.target || document.activeElement);
-            if (targetEl && targetEl.tagName) {
-                const tagName = targetEl.tagName.toLowerCase();
-                const isInput = tagName === "input" || tagName === "textarea";
-                const isContentEditable = targetEl.isContentEditable ||
-                    targetEl.getAttribute?.("contenteditable") === "true";
-                if (isInput || isContentEditable) {
-                    return;
-                }
-            }
+        // Default bindings from the command system: Mod+Z, Mod+Shift+Z and (off macOS) Mod+Y,
+        // matched by `event.code` with `Mod` = ⌘ on macOS and Ctrl elsewhere.
+        const action = matchHistoryShortcut(e, { allowInEditable: !ignoreEditableElements });
+        if (action === "undo" && manager.getState().canUndo) {
+            e.preventDefault();
+            manager.undo();
         }
-        const key = e.key?.toLowerCase();
-        // Undo: Mod+Z (without Shift)
-        if (key === "z" && !e.shiftKey) {
-            if (manager.getState().canUndo) {
-                e.preventDefault();
-                manager.undo();
-            }
-            return;
-        }
-        // Redo: Mod+Shift+Z or (on non-Mac) Mod+Y
-        const isRedoKey = (key === "z" && e.shiftKey) || (!isMac && key === "y" && !e.shiftKey);
-        if (isRedoKey) {
-            if (manager.getState().canRedo) {
-                e.preventDefault();
-                manager.redo();
-            }
+        else if (action === "redo" && manager.getState().canRedo) {
+            e.preventDefault();
+            manager.redo();
         }
     };
     eventTarget.addEventListener("keydown", handleKeyDown);

package/dist/history/history.svelte.d.ts

@@ -1,14 +1,23 @@
-import { HistoryManager, HistoryState, Command, HistoryManagerOptions } from "@pixerate/editor/history";
+import { HistoryManager, HistoryState, HistoryEntry, HistoryMark, MergedExecutionOptions, Command, HistoryManagerOptions } from "@pixerate/editor/history";
 export interface SvelteHistory extends HistoryState {
     readonly manager: HistoryManager;
+    /** History panel rows (undo steps, then redo steps). */
+    readonly entries: HistoryEntry[];
     undo(): boolean;
     redo(): boolean;
     clear(): void;
     execute(command: Command): void;
-    executeMerged(command: Command, options?: {
-        windowMs?: number;
-    }): void;
+    executeMerged(command: Command, options?: MergedExecutionOptions): void;
     batch(name: string, fn: () => void): void;
+    /** Undoes / redoes until the entry at `index` is current (`-1` = before all). */
+    goTo(index: number): number;
+    /** Captures the current point, e.g. when a drag starts. */
+    mark(): HistoryMark;
+    /** Takes back every step since `mark` without leaving redo (Escape-cancel). */
+    revertTo(mark: HistoryMark): number;
+    /** Joins every merged execute into one step until `endGesture`. */
+    beginGesture(key: string): void;
+    endGesture(): void;
     subscribe(run: (value: HistoryState) => void): () => void;
 }
 /**

package/dist/history/history.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"history.svelte.d.ts","sourceRoot":"","sources":["../../src/history/history.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,OAAO,EAEP,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,qBAAqB,GACxD,aAAa,CA2Cf"}
+{"version":3,"file":"history.svelte.d.ts","sourceRoot":"","sources":["../../src/history/history.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,OAAO,EAEP,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC;IACjC,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACxE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IAC1C,iFAAiF;IACjF,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,IAAI,IAAI,WAAW,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAC;IACpC,mEAAmE;IACnE,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,IAAI,IAAI,CAAC;IACnB,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,gBAAgB,CAAC,EAAE,cAAc,GAAG,qBAAqB,GACxD,aAAa,CAqDf"}

package/dist/history/history.svelte.js

@@ -32,12 +32,22 @@ export function createHistory(managerOrOptions) {
         get manager() {
             return manager;
         },
+        get entries() {
+            // Reading `state` makes the getter reactive; getEntries() is cached per change.
+            void state;
+            return manager.getEntries();
+        },
         undo: () => manager.undo(),
         redo: () => manager.redo(),
         clear: () => manager.clear(),
         execute: (cmd) => manager.execute(cmd),
         executeMerged: (cmd, opts) => manager.executeMerged(cmd, opts),
         batch: (name, fn) => manager.batch(name, fn),
+        goTo: (index) => manager.goTo(index),
+        mark: () => manager.mark(),
+        revertTo: (m) => manager.revertTo(m),
+        beginGesture: (key) => manager.beginGesture(key),
+        endGesture: () => manager.endGesture(),
         subscribe: (run) => manager.subscribe(run),
     };
 }

package/dist/history/historyDirty.svelte.d.ts

@@ -0,0 +1,31 @@
+import { DirtyTracker, type DirtyTrackerOptions, type HistoryManager } from "@pixerate/editor/history";
+export interface CreateHistoryDirtyOptions<T> extends DirtyTrackerOptions<T> {
+    /** The history whose changes re-check the document (a `createHistory().manager`). */
+    history: HistoryManager;
+    /** Reads the current document value. */
+    getValue: () => T;
+    /** Existing tracker to drive. */
+    tracker?: DirtyTracker<T>;
+}
+export interface SvelteHistoryDirty<T> {
+    /** Whether the document differs from the saved state (reactive). */
+    readonly isDirty: boolean;
+    /** Marks the current document as saved. */
+    markClean(): void;
+    /** Runs a load / restore without marking the document dirty (re-entrant). */
+    suppress<R>(fn: () => R): R;
+    /** Re-checks after a change made outside the history. */
+    refresh(): boolean;
+    readonly tracker: DirtyTracker<T>;
+    /** Stops following the history. */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: dirty-vs-saved tracking bound to a HistoryManager. Undoing
+ * back to the saved state makes the document clean again, so a navigation
+ * guard fed with `isDirty` stops prompting.
+ *
+ * Usage: `createNavigationGuard({ isDirty: () => dirty.isDirty })`.
+ */
+export declare function createHistoryDirty<T>(options: CreateHistoryDirtyOptions<T>): SvelteHistoryDirty<T>;
+//# sourceMappingURL=historyDirty.svelte.d.ts.map

package/dist/history/historyDirty.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"historyDirty.svelte.d.ts","sourceRoot":"","sources":["../../src/history/historyDirty.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,yBAAyB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC1E,qFAAqF;IACrF,OAAO,EAAE,cAAc,CAAC;IACxB,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,oEAAoE;IACpE,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,IAAI,IAAI,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,yDAAyD;IACzD,OAAO,IAAI,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAClC,mCAAmC;IACnC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACpC,kBAAkB,CAAC,CAAC,CAAC,CAsBvB"}

package/dist/history/historyDirty.svelte.js

@@ -0,0 +1,30 @@
+import { bindDirtyToHistory, } from "@pixerate/editor/history";
+/**
+ * Svelte 5 rune: dirty-vs-saved tracking bound to a HistoryManager. Undoing
+ * back to the saved state makes the document clean again, so a navigation
+ * guard fed with `isDirty` stops prompting.
+ *
+ * Usage: `createNavigationGuard({ isDirty: () => dirty.isDirty })`.
+ */
+export function createHistoryDirty(options) {
+    const binding = bindDirtyToHistory(options);
+    let isDirty = $state(binding.dirty);
+    const unsubscribe = binding.subscribe((dirty) => {
+        isDirty = dirty;
+    });
+    return {
+        get isDirty() {
+            return isDirty;
+        },
+        markClean: () => binding.markClean(),
+        suppress: (fn) => binding.suppress(fn),
+        refresh: () => binding.refresh(),
+        get tracker() {
+            return binding.tracker;
+        },
+        destroy() {
+            unsubscribe();
+            binding.destroy();
+        },
+    };
+}

package/dist/history/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./history.svelte.js";
 export * from "./createHistoryShortcuts.js";
+export * from "./historyDirty.svelte.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/history/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/history/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/history/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC"}

package/dist/history/index.js

@@ -1,2 +1,3 @@
 export * from "./history.svelte.js";
 export * from "./createHistoryShortcuts.js";
+export * from "./historyDirty.svelte.js";

package/dist/image-editor/ImageEditor.svelte

@@ -16,6 +16,8 @@
     getCropCursor,
     calculateCropDrag,
     hitTestAnnotation,
+    normalizeProcessVersion,
+    LATEST_PROCESS_VERSION,
   } from '@pixerate/editor/image-editor';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
@@ -47,6 +49,9 @@
   const internalEditor = createReactiveImageEditor();
   const editor = $derived(propEditor || internalEditor);
   onDestroy(() => internalEditor.destroy());
+  const legacyProcess = $derived(
+    normalizeProcessVersion(editor.state.adjustments.process) < LATEST_PROCESS_VERSION
+  );
 
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
@@ -961,6 +966,40 @@
             />
           </div>
 
+          <!-- Tint (process 2 white balance) -->
+          <div>
+            <div class="flex justify-between text-slate-400 mb-1">
+              <span>Tint</span>
+              <span class="font-mono">{editor.state.adjustments.tint ?? 0}</span>
+            </div>
+            <input
+              type="range"
+              min="-100"
+              max="100"
+              aria-label="Tint"
+              disabled={legacyProcess}
+              value={editor.state.adjustments.tint ?? 0}
+              oninput={(e) => editor.setAdjustments({ tint: Number((e.target as HTMLInputElement).value) })}
+              class="w-full accent-indigo-500 disabled:opacity-40"
+            />
+          </div>
+
+          {#if legacyProcess}
+            <div
+              class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
+              data-testid="image-editor-process-notice"
+            >
+              <span>Legacy rendering (process 1). Tint needs the current process.</span>
+              <button
+                type="button"
+                onclick={() => editor.upgradeProcess()}
+                class="shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30"
+              >
+                Update
+              </button>
+            </div>
+          {/if}
+
           <!-- Blur -->
           <div>
             <div class="flex justify-between text-slate-400 mb-1">

package/dist/image-editor/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AASzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AA+hCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAWzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAojCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -14,6 +14,8 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
     flipVertical(): void;
     setAdjustments(partial: Partial<ImageAdjustments>, commitToHistory?: boolean): void;
     resetAdjustments(): void;
+    /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
+    upgradeProcess(): boolean;
     setDepthMask(partial: Partial<DepthMaskOptions>): void;
     resetDepthMask(): void;
     addAnnotation(ann: CreateAnnotationPayload): string;

package/dist/image-editor/imageEditorState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,UAAU,EAChB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;;kBA0BxD,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;0BAM3B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;mBAGhB,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;oCAGhC,MAAM;4CAGE,MAAM;IAG9C,8EAA8E;;EAKjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,UAAU,EAChB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;;kBA0BxD,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;0BAI9E,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;mBAGhB,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;oCAGhC,MAAM;4CAGE,MAAM;IAG9C,8EAA8E;;EAKjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/dist/image-editor/imageEditorState.svelte.js

@@ -53,6 +53,10 @@ export function createReactiveImageEditor(options = {}) {
         resetAdjustments() {
             controller.resetAdjustments();
         },
+        /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
+        upgradeProcess() {
+            return controller.upgradeProcess();
+        },
         setDepthMask(partial) {
             controller.setDepthMask(partial);
         },

package/dist/index.d.ts

@@ -11,8 +11,8 @@ export * from "./history/index.js";
 export * from "./fileImport.svelte.js";
 export * from "./agentTools.svelte.js";
 export * from "./outline.svelte.js";
-export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, } from "@pixerate/editor";
-export type { DirtyTrackerOptions, Command, HistoryState, HistoryManagerOptions, } from "@pixerate/editor";
+export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, bindDirtyToHistory, withoutDirty, } from "@pixerate/editor";
+export type { DirtyTrackerOptions, Command, HistoryState, HistoryManagerOptions, HistoryEntry, HistoryMark, MergedExecutionOptions, HistoryDirtyBinding, BindDirtyToHistoryOptions, } from "@pixerate/editor";
 export type EditableTextNodeEditorProps = ComponentProps<typeof EditableTextNodeEditorComponent>;
 export type BubbleMenuProps = ComponentProps<typeof BubbleMenuComponent>;
 export type TemplateRendererProps = ComponentProps<typeof TemplateRendererComponent>;
@@ -28,4 +28,5 @@ export type { PromptValues, PromptDiagnostic, VariableFormField, } from "@pixera
 export * from "./spreadsheet/index.js";
 export * from "./image-editor/index.js";
 export * from "./review/index.js";
+export * from "./commands/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAEpC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAEpC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -5,7 +5,7 @@ export * from "./history/index.js";
 export * from "./fileImport.svelte.js";
 export * from "./agentTools.svelte.js";
 export * from "./outline.svelte.js";
-export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, } from "@pixerate/editor";
+export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, bindDirtyToHistory, withoutDirty, } from "@pixerate/editor";
 export { default as EditableTextNodeEditor } from "./EditableTextNodeEditor.svelte";
 export { default as BubbleMenu } from "./BubbleMenu.svelte";
 export { default as TemplateRenderer } from "./TemplateRenderer.svelte";
@@ -14,3 +14,4 @@ export { default as OutlinePanel } from "./OutlinePanel.svelte";
 export * from "./spreadsheet/index.js";
 export * from "./image-editor/index.js";
 export * from "./review/index.js";
+export * from "./commands/index.js";

package/dist/spreadsheet/SpreadsheetEditor.svelte

@@ -12,7 +12,8 @@
     type CellRange,
     type SpreadsheetMenuItem,
     type SpreadsheetViewColumn,
-    type SpreadsheetViewRow
+    type SpreadsheetViewRow,
+    formatCellDisplay
   } from '@pixerate/editor/spreadsheet';
   import FormulaBar from './FormulaBar.svelte';
   import SpreadsheetContextMenu from './SpreadsheetContextMenu.svelte';
@@ -589,7 +590,7 @@
                     class="truncate block max-w-full {cell.error ? 'text-destructive font-semibold' : ''}"
                     title={cell.error ? (cell.errorMessage ?? cell.error) : undefined}
                   >
-                    {cell.error || (cell.value ?? '')}
+                    {formatCellDisplay(cell)}
                   </span>
                 {/if}
                 {#if activeSpill && rangeContains(activeSpill.range, rIdx, cIdx)}

package/dist/spreadsheet/SpreadsheetEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,QAAQ,EAKd,MAAM,8BAA8B,CAAC;AAKxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA+hBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,QAAQ,EAMd,MAAM,8BAA8B,CAAC;AAKxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA+hBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/spreadsheet/spreadsheet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAErB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;aAmL8zuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA/G33uB,MAAM;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;wBAMxC,MAAM;;oBAWV,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;EAc7B"}
+{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAErB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;aAmLy20B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA/Gt60B,MAAM;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;wBAMxC,MAAM;;oBAWV,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;EAc7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -33,6 +33,11 @@
       "svelte": "./dist/image-editor/index.js",
       "default": "./dist/image-editor/index.js"
     },
+    "./commands": {
+      "types": "./dist/commands/index.d.ts",
+      "svelte": "./dist/commands/index.js",
+      "default": "./dist/commands/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -45,6 +50,9 @@
       ],
       "image-editor": [
         "./dist/image-editor/index.d.ts"
+      ],
+      "commands": [
+        "./dist/commands/index.d.ts"
       ]
     }
   },
@@ -59,7 +67,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.22.0"
+    "@pixerate/editor": "0.23.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",