@pixerate/editor-svelte 0.20.0 → 0.22.0

package/README.md

@@ -37,7 +37,7 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 
 `content` sets the initial document. Read later changes from the bound `editor` (for example in `onUpdate`), as above. The editor is preloaded with `createRichTextPreset()`. Pass `markdown`, `image`, `uploadImage`, `extensions` or `richTextOptions` to configure it.
 
-`fileImport` imports dropped/pasted `.md`, `.html`, `.txt` and `.rtf` files at the drop position, and `richClipboard` copies lossless slices between editors (both opt-in). `createFileImport(() => editor)` returns reactive `isImporting` / `error` plus `openFilePicker()` and `importFiles()` for an import button.
+`fileImport` imports dropped/pasted `.md`, `.html`, `.txt`, `.rtf` and `.docx` files (plus any adapter you register, e.g. PDF or zipped exports) at the drop position, and `richClipboard` copies lossless slices between editors (both opt-in). `createFileImport(() => editor)` returns reactive `isImporting` / `error` plus `openFilePicker()` and `importFiles()` for an import button.
 
 `useAgentToolProvider(registry, () => editor && createRichTextToolProvider(editor, { id: "doc" }))` registers an agent tool provider (see `ToolRegistry` in `@pixerate/editor/agent`) for the component's lifetime. Call it during component initialisation.
 
@@ -67,15 +67,16 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 <CommentsPanel {editor} />
 ```
 
-Put `<CommentButton {editor} />` inside a `BubbleMenu` to comment on the selection. `createComments(editorOrStore)` and `createTrackChanges(editor)` are rune (and Svelte store) adapters for custom UIs.
+`ReviewToolbar` steps through insertions, deletions, formatting and block changes and shows the current one's author and description (e.g. "Ada: Formatted: Bold"); hide it with `showDescription={false}` or restyle it with `descriptionClass`. Put `<CommentButton {editor} />` inside a `BubbleMenu` to comment on the selection. `createComments(editorOrStore)` and `createTrackChanges(editor)` are rune (and Svelte store) adapters for custom UIs.
 
 ## More exports
 
 | 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/ShapeNode.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getShapeRenderData, isShapeDescription, type ShapeDescription } from '@pixerate/editor/canvas';
+
+	interface Props {
+		/** Node data; `data.shape` holds the shape description. */
+		data: { shape?: ShapeDescription; [key: string]: any };
+		/** Node width / height (SvelteFlow passes them to custom nodes). */
+		width?: number;
+		height?: number;
+		selected?: boolean;
+		class?: string;
+		/** Rendered over the shape, e.g. SvelteFlow `<Handle>`s or a label. */
+		children?: Snippet;
+		[key: string]: any;
+	}
+
+	let { data, width, height, selected = false, class: className = '', children }: Props = $props();
+
+	const shape = $derived(isShapeDescription(data?.shape) ? data.shape : null);
+	const render = $derived(shape ? getShapeRenderData(shape, { width, height }) : null);
+</script>
+
+<!--
+	Headless shape node: draws `data.shape` as one SVG path that fills the node box.
+	Register it as a SvelteFlow node type (`nodeTypes={{ shape: ShapeNode }}`), or wrap it
+	to add handles. Strokes keep their width when the node is resized.
+-->
+{#if shape && render}
+	<div
+		class="pixerate-shape-node {className}"
+		data-shape-kind={shape.kind}
+		data-selected={selected ? 'true' : undefined}
+		style="position: relative; width: 100%; height: 100%;"
+	>
+		<svg
+			viewBox={render.viewBox}
+			preserveAspectRatio="none"
+			width="100%"
+			height="100%"
+			style="display: block; overflow: visible;"
+			aria-hidden="true"
+		>
+			<path
+				d={render.d}
+				transform={render.transform}
+				fill={render.fill}
+				fill-rule={render.fillRule}
+				stroke={render.stroke}
+				stroke-width={render.strokeWidth}
+				opacity={render.opacity}
+				vector-effect="non-scaling-stroke"
+			/>
+		</svg>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { type ShapeDescription } from '@pixerate/editor/canvas';
+interface Props {
+    /** Node data; `data.shape` holds the shape description. */
+    data: {
+        shape?: ShapeDescription;
+        [key: string]: any;
+    };
+    /** Node width / height (SvelteFlow passes them to custom nodes). */
+    width?: number;
+    height?: number;
+    selected?: boolean;
+    class?: string;
+    /** Rendered over the shape, e.g. SvelteFlow `<Handle>`s or a label. */
+    children?: Snippet;
+    [key: string]: any;
+}
+declare const ShapeNode: import("svelte").Component<Props, {}, "">;
+type ShapeNode = ReturnType<typeof ShapeNode>;
+export default ShapeNode;
+//# sourceMappingURL=ShapeNode.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeNode.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/ShapeNode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAA0C,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGvG,UAAU,KAAK;IACd,2DAA2D;IAC3D,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,gBAAgB,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAwBF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,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[];
@@ -33,10 +44,21 @@ export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNod
     unlock: (ids?: Iterable<string>) => string[];
     toggleLock(ids?: Iterable<string>): string[];
     isLocked: (id: string) => boolean;
+    combineShapes(operation: import("@pixerate/editor/canvas").ShapeOperation, ids?: Iterable<string>, combineOptions?: import("@pixerate/editor/canvas").CombineShapeNodesOptions): import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    unite: (ids?: Iterable<string>, o?: import("@pixerate/editor/canvas").CombineShapeNodesOptions) => import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    intersect: (ids?: Iterable<string>, o?: import("@pixerate/editor/canvas").CombineShapeNodesOptions) => import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    subtract: (ids?: Iterable<string>, o?: import("@pixerate/editor/canvas").CombineShapeNodesOptions) => import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    exclude: (ids?: Iterable<string>, o?: import("@pixerate/editor/canvas").CombineShapeNodesOptions) => import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    divide: (ids?: Iterable<string>, o?: import("@pixerate/editor/canvas").CombineShapeNodesOptions) => import("@pixerate/editor/canvas").CombineShapeNodesResult<any>;
+    canCombineShapes: (ids?: Iterable<string>) => boolean;
     runAction(action: CanvasArrangeAction): boolean;
     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;;;;;;;sBA2D65iC,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;EAxCxvjC;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,10 @@ 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';
 export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly, type Clock, type CanvasHeightOptions } from '@pixerate/editor/canvas';
 //# sourceMappingURL=index.d.ts.map

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":"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"}

package/dist/canvas/index.js

@@ -34,6 +34,12 @@ 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)
+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 } from '@pixerate/editor/canvas';
 // Clock and view helpers from core
 export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly } from '@pixerate/editor/canvas';

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"}