@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/canvas/TokenModeSwitcher.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import {
+		getEffectiveTokenModes,
+		getNodeTokenModes,
+		setCanvasTokenMode,
+		type CanvasTokenOptions
+	} from '@pixerate/editor/canvas';
+	import { getCurrentMode, type TokenState } from '@pixerate/editor/tokens';
+	import type { CanvasNode } from './types.js';
+
+	interface Props {
+		state: TokenState;
+		nodes: CanvasNode[];
+		/** Frames / groups whose explicit mode is set (the first one's choice is shown). */
+		nodeIds: readonly string[];
+		onchange: (nodes: CanvasNode[]) => void;
+		options?: CanvasTokenOptions;
+		/** Show collections with a single mode too (default `false`). */
+		showSingleMode?: boolean;
+		class?: string;
+	}
+
+	let { state, nodes, nodeIds, onchange, options = {}, showSingleMode = false, class: className = '' }: Props = $props();
+
+	const first = $derived(nodes.find((n) => nodeIds.includes(n.id)));
+	const own = $derived(first ? getNodeTokenModes(first as any) : {});
+	const inherited = $derived.by(() => {
+		const parent = first?.parentId ? nodes.find((n) => n.id === first!.parentId) : undefined;
+		return parent ? getEffectiveTokenModes(parent as any, nodes as any, state, options) : { ...options.modes };
+	});
+	const collections = $derived(state.collections.filter((c) => showSingleMode || c.modes.length > 1));
+</script>
+
+{#if first}
+	<div data-token-mode-switcher="" class="flex flex-col gap-1 text-xs text-foreground {className}">
+		{#each collections as collection (collection.id)}
+			{@const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : ''}
+			<label class="flex items-center gap-2" data-token-collection={collection.id}>
+				<span class="w-28 shrink-0 truncate text-muted-foreground">{collection.name}</span>
+				<select
+					aria-label="{collection.name} mode"
+					class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+					value={explicit}
+					onchange={(e) =>
+						onchange(setCanvasTokenMode(nodes as any[], nodeIds, collection.id, e.currentTarget.value || null, state, options))}
+				>
+					<option value="">Auto ({getCurrentMode(collection, inherited).name})</option>
+					{#each collection.modes as m (m.id)}
+						<option value={m.id}>{m.name}</option>
+					{/each}
+				</select>
+			</label>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { type CanvasTokenOptions } from '@pixerate/editor/canvas';
+import { type TokenState } from '@pixerate/editor/tokens';
+import type { CanvasNode } from './types.js';
+interface Props {
+    state: TokenState;
+    nodes: CanvasNode[];
+    /** Frames / groups whose explicit mode is set (the first one's choice is shown). */
+    nodeIds: readonly string[];
+    onchange: (nodes: CanvasNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Show collections with a single mode too (default `false`). */
+    showSingleMode?: boolean;
+    class?: string;
+}
+declare const TokenModeSwitcher: import("svelte").Component<Props, {}, "">;
+type TokenModeSwitcher = ReturnType<typeof TokenModeSwitcher>;
+export default TokenModeSwitcher;
+//# sourceMappingURL=TokenModeSwitcher.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenModeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/TokenModeSwitcher.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AAClC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,oFAAoF;IACpF,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAsCF,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

@@ -51,6 +51,10 @@ export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNod
     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;
+    offsetShapes(distance: number, ids?: Iterable<string>, offsetOptions?: import("@pixerate/editor/canvas").OffsetShapeNodesOptions): import("@pixerate/editor/canvas").ShapePathEditResult<any>;
+    canOffsetShapes: (ids?: Iterable<string>) => boolean;
+    outlineStroke(ids?: Iterable<string>, outlineOptions?: import("@pixerate/editor/canvas").OutlineShapeStrokesOptions): import("@pixerate/editor/canvas").ShapePathEditResult<any>;
+    canOutlineStroke: (ids?: Iterable<string>) => boolean;
     runAction(action: CanvasArrangeAction): boolean;
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): import("@pixerate/editor/canvas").SnapNodeDragResult | null;

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;;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"}
+{"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;;;;;;;;;;sBAoDu6hF,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxCjhnF;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/createCanvasAutoLayout.svelte.d.ts

@@ -0,0 +1,68 @@
+import { type CanvasAutoLayoutControllerOptions, type GuideLine, type PositionChangeLike } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+type CoreOptions = CanvasAutoLayoutControllerOptions<any>;
+export interface CreateCanvasAutoLayoutOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CoreOptions, 'getNodes' | 'setNodes' | 'onGuidesChange'> {
+    getNodes: () => TNode[];
+    setNodes: (nodes: TNode[]) => void;
+    onGuidesChange?: (guides: GuideLine[]) => void;
+}
+/**
+ * Headless Svelte 5 rune for Figma-style auto layout on SvelteFlow sub-flows. Frames are
+ * nodes with `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a
+ * grid, with hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Its actions (`addNode`, `removeNodes`, `resizeNode`, `moveChild`, `applyAutoLayout`) relayout
+ * in the same undoable step when a `HistoryManager` is passed. Wire the flow's own edits with
+ * `onnodedrag={({ targetNode }) => autoLayout.dragReorder(targetNode.id)}`,
+ * `onnodedragstop={({ targetNode }) => autoLayout.endReorderDrag(targetNode.id)}`,
+ * `ondelete={({ nodes }) => autoLayout.nodesDeleted(nodes)}`,
+ * `<NodeResizer {...autoLayout.resizerHandlers(id)} />` and call `autoLayout.measured(id)` when
+ * a node's content size changes. Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+export declare function createCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasAutoLayoutOptions<TNode>): {
+    guides: GuideLine[];
+    hasPending: boolean;
+    /** Notes node changes (see the core controller) and flushes them on the next microtask. */
+    handleChanges<TChange extends PositionChangeLike>(changes: TChange[]): TChange[];
+    /** For SvelteFlow's `ondelete`: relayouts the frames the deleted nodes left. */
+    nodesDeleted(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    /** Relayouts around node `id` after its measured (content) size changed. */
+    measured(id: string): void;
+    /**
+     * Handlers for SvelteFlow's `<NodeResizer>`: children follow their constraints and the
+     * frames around the node relayout when the resize ends.
+     */
+    resizerHandlers(id: string): {
+        onResizeStart: () => void;
+        onResizeEnd: () => void;
+    };
+    applyAutoLayout(frameId?: string): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    layoutUpdates(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    relayout(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    addNode(node: any, addOptions?: {
+        index?: number;
+    }): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    removeNodes(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    resizeNode(id: string, size: {
+        width?: number;
+        height?: number;
+    }): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    moveChild(childId: string, index: number): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    getInsertTarget(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").AutoLayoutInsertTarget | undefined;
+    beginReorderDrag(id: string): void;
+    dragReorder(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").AutoLayoutInsertTarget | undefined;
+    endReorderDrag(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    noteChanges<TChange extends PositionChangeLike>(changes: TChange[]): TChange[];
+    noteRemoved(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    flush(): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    isFrame: (id: string) => boolean;
+};
+export type CanvasAutoLayout<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasAutoLayout<TNode>>;
+export {};
+//# sourceMappingURL=createCanvasAutoLayout.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,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;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiBsk/F,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHnqjG;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasAutoLayout.svelte.js

@@ -0,0 +1,78 @@
+import { createCanvasAutoLayoutController } from '@pixerate/editor/canvas';
+/**
+ * Headless Svelte 5 rune for Figma-style auto layout on SvelteFlow sub-flows. Frames are
+ * nodes with `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a
+ * grid, with hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Its actions (`addNode`, `removeNodes`, `resizeNode`, `moveChild`, `applyAutoLayout`) relayout
+ * in the same undoable step when a `HistoryManager` is passed. Wire the flow's own edits with
+ * `onnodedrag={({ targetNode }) => autoLayout.dragReorder(targetNode.id)}`,
+ * `onnodedragstop={({ targetNode }) => autoLayout.endReorderDrag(targetNode.id)}`,
+ * `ondelete={({ nodes }) => autoLayout.nodesDeleted(nodes)}`,
+ * `<NodeResizer {...autoLayout.resizerHandlers(id)} />` and call `autoLayout.measured(id)` when
+ * a node's content size changes. Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+export function createCanvasAutoLayout(options) {
+    let guides = $state.raw([]);
+    let scheduled = false;
+    const controller = createCanvasAutoLayoutController({
+        ...options,
+        onGuidesChange: (next) => {
+            guides = next;
+            options.onGuidesChange?.(next);
+        }
+    });
+    // SvelteFlow writes its own changes after its callbacks run, so the flush waits a microtask.
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            controller.flush();
+        });
+    };
+    return {
+        ...controller,
+        /** Drop marker of the active reorder drag (flow coordinates); empty otherwise. */
+        get guides() {
+            return guides;
+        },
+        get hasPending() {
+            return controller.hasPending;
+        },
+        /** Notes node changes (see the core controller) and flushes them on the next microtask. */
+        handleChanges(changes) {
+            controller.noteChanges(changes);
+            schedule();
+            return changes;
+        },
+        /** For SvelteFlow's `ondelete`: relayouts the frames the deleted nodes left. */
+        nodesDeleted(removed) {
+            controller.noteRemoved(removed);
+            schedule();
+        },
+        /** Relayouts around node `id` after its measured (content) size changed. */
+        measured(id) {
+            controller.noteChanges([{ type: 'dimensions', id }]);
+            schedule();
+        },
+        /**
+         * Handlers for SvelteFlow's `<NodeResizer>`: children follow their constraints and the
+         * frames around the node relayout when the resize ends.
+         */
+        resizerHandlers(id) {
+            return {
+                onResizeStart: () => {
+                    controller.noteChanges([{ type: 'dimensions', id, resizing: true }]);
+                },
+                onResizeEnd: () => {
+                    queueMicrotask(() => {
+                        controller.noteChanges([{ type: 'dimensions', id, resizing: false }]);
+                        controller.flush();
+                    });
+                }
+            };
+        }
+    };
+}

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

@@ -0,0 +1,31 @@
+import { type CanvasTokenOptions } from '@pixerate/editor/canvas';
+import type { TokenModeContext, TokenState, TokenStore } from '@pixerate/editor/tokens';
+import type { CanvasNode } from './types.js';
+export interface CreateCanvasTokensOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CanvasTokenOptions, 'modes'> {
+    store: TokenStore;
+    getNodes: () => TNode[];
+    setNodes: (nodes: TNode[]) => void;
+    /** Modes for nodes without an explicit mode up their tree, or a getter for reactive modes. */
+    modes?: TokenModeContext | (() => TokenModeContext | undefined);
+}
+/**
+ * Headless Svelte 5 rune keeping token-bound node properties resolved. Token edits, undo and
+ * redo re-resolve the nodes; deleting a variable detaches the nodes bound to it, keeping their
+ * values. Call `resolve()` after changing the nodes yourself (e.g. pasting bound nodes, or
+ * switching the root `modes`); `bind` and `setMode` resolve on their own.
+ */
+export declare function createCanvasTokens<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasTokensOptions<TNode>): {
+    /** The token store's state (reactive). */
+    readonly state: TokenState;
+    /** Binds (or with `null` unbinds) a property of the nodes; throws `TokenError` when refused. */
+    bind(ids: Iterable<string>, propertyKey: string, variableId: string | null): void;
+    /** Sets (or with `null` clears) an explicit mode on frames / groups; descendants follow. */
+    setMode(ids: Iterable<string>, collectionId: string, modeId: string | null): void;
+    /** The modes a node is in (its own, inherited, then the root `modes`). */
+    modesOf(nodeId: string): Record<string, string>;
+    /** Re-resolves every bound property (after changing nodes or root modes). */
+    resolve: () => void;
+    destroy: () => void;
+};
+export type SvelteCanvasTokens = ReturnType<typeof createCanvasTokens>;
+//# sourceMappingURL=createCanvasTokens.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasTokens.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasTokens.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAMN,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,yBAAyB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAAE,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC1H,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,8FAA8F;IAC9F,KAAK,CAAC,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC,CAAC;CAChE;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,yBAAyB,CAAC,KAAK,CAAC;IAoBjH,0CAA0C;;IAI1C,gGAAgG;cACtF,QAAQ,CAAC,MAAM,CAAC,eAAe,MAAM,cAAc,MAAM,GAAG,IAAI;IAG1E,4FAA4F;iBAC/E,QAAQ,CAAC,MAAM,CAAC,gBAAgB,MAAM,UAAU,MAAM,GAAG,IAAI;IAG1E,0EAA0E;oBAC1D,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAK/C,6EAA6E;;;EAI9E;AAED,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/canvas/createCanvasTokens.svelte.js

@@ -0,0 +1,50 @@
+import { bindCanvasToken, detachTokenBindings, getEffectiveTokenModes, resolveCanvasTokens, setCanvasTokenMode } from '@pixerate/editor/canvas';
+/**
+ * Headless Svelte 5 rune keeping token-bound node properties resolved. Token edits, undo and
+ * redo re-resolve the nodes; deleting a variable detaches the nodes bound to it, keeping their
+ * values. Call `resolve()` after changing the nodes yourself (e.g. pasting bound nodes, or
+ * switching the root `modes`); `bind` and `setMode` resolve on their own.
+ */
+export function createCanvasTokens(options) {
+    const { store } = options;
+    let state = $state.raw(store.getState());
+    const opts = () => ({
+        modes: typeof options.modes === 'function' ? options.modes() : options.modes,
+        properties: options.properties
+    });
+    const commit = (next) => {
+        if (next !== options.getNodes())
+            options.setNodes(next);
+    };
+    const resolve = () => commit(resolveCanvasTokens(options.getNodes(), store.getState(), opts()));
+    const unsubscribe = store.subscribe((event) => {
+        state = event.state;
+        let nodes = options.getNodes();
+        if (event.deletedVariableIds.length > 0)
+            nodes = detachTokenBindings(nodes, event.previous, event.deletedVariableIds, opts());
+        commit(resolveCanvasTokens(nodes, event.state, opts()));
+    });
+    return {
+        /** The token store's state (reactive). */
+        get state() {
+            return state;
+        },
+        /** Binds (or with `null` unbinds) a property of the nodes; throws `TokenError` when refused. */
+        bind(ids, propertyKey, variableId) {
+            commit(bindCanvasToken(options.getNodes(), ids, propertyKey, variableId, store.getState(), opts()));
+        },
+        /** Sets (or with `null` clears) an explicit mode on frames / groups; descendants follow. */
+        setMode(ids, collectionId, modeId) {
+            commit(setCanvasTokenMode(options.getNodes(), ids, collectionId, modeId, store.getState(), opts()));
+        },
+        /** The modes a node is in (its own, inherited, then the root `modes`). */
+        modesOf(nodeId) {
+            const nodes = options.getNodes();
+            const node = nodes.find((n) => n.id === nodeId);
+            return node ? getEffectiveTokenModes(node, nodes, store.getState(), opts()) : {};
+        },
+        /** Re-resolves every bound property (after changing nodes or root modes). */
+        resolve,
+        destroy: unsubscribe
+    };
+}

package/dist/canvas/index.d.ts

@@ -22,5 +22,12 @@ export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasur
 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 { offsetShapeNodes, outlineShapeNodeStrokes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, applyShapeReplacement, hasVisibleStroke, shapeToBezierPath, shapeNodeToBezierPath, pathBoolean, unitePaths, intersectPaths, subtractPaths, excludePaths, dividePaths, normalizeBezierPath, bezierPathArea, offsetPath, outlineStroke, strokeOutlineRings, dashContours, toBezierPath, bezierPathToSvg, transformBezierPath, bezierPathBounds, bezierPathSignedArea, bezierPathLength, bezierPathPointAtLength, pointInBezierPath, distanceToBezierPath, countPathSegments, type BezierCommand, type BezierPath, type BezierPathInput, type PathOperand, type PathOperandInput, type PathOpsOptions, type PathBooleanResult, type DividePathsResult, type StrokeJoin, type StrokeCap, type OutlineStrokeOptions, type OffsetPathOptions, type OffsetShapeNodesOptions, type OutlineShapeStrokesOptions, type ShapePathEditResult, type ShapePathEditRefusal, type ShapePathEditOperation } from '@pixerate/editor/canvas';
 export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly, type Clock, type CanvasHeightOptions } from '@pixerate/editor/canvas';
+export { layoutFrame, layoutAll, layoutUp, layoutUpMany, applyConstraints, getAutoLayout, getChildLayout, getLayoutSizing, getAutoLayoutGrid, getAutoLayoutInsertTarget, getFlowChildren, getLayoutParent, isAutoLayoutFrame, makeSizingCoherent, moveLayoutChild, mergeNodeUpdates, relayoutUpdates, resolvePadding, clampLayoutSize, createCanvasAutoLayoutController, AUTO_LAYOUT_DATA_KEY, CHILD_LAYOUT_DATA_KEY, type AutoLayout, type AutoLayoutChild, type AutoLayoutMode, type AutoLayoutSizing, type AutoLayoutSizingPair, type AutoLayoutSize, type AutoLayoutAlignMain, type AutoLayoutAlignCross, type AutoLayoutAlignContent, type AutoLayoutPadding, type AutoLayoutGrid, type AutoLayoutGridTrack, type AutoLayoutGridArea, type AutoLayoutGridCell, type AutoLayoutGridGeometry, type AutoLayoutCellAlign, type AutoLayoutConstraints, type AutoLayoutHorizontalConstraint, type AutoLayoutVerticalConstraint, type AutoLayoutMeasure, type AutoLayoutOptions, type AutoLayoutInsertTarget, type CanvasAutoLayoutController, type CanvasAutoLayoutControllerOptions } from '@pixerate/editor/canvas';
+export { createCanvasAutoLayout, type CanvasAutoLayout, type CreateCanvasAutoLayoutOptions } from './createCanvasAutoLayout.svelte.js';
+export { createCanvasTokens, type CreateCanvasTokensOptions, type SvelteCanvasTokens } from './createCanvasTokens.svelte.js';
+export { default as TokenBindingPicker } from './TokenBindingPicker.svelte';
+export { default as TokenModeSwitcher } from './TokenModeSwitcher.svelte';
+export { bindCanvasToken, setCanvasTokenMode, resolveCanvasTokens, detachTokenBindings, pruneCanvasTokenModes, inspectNodeTokens, getNodeTokenBindings, getNodeTokenModes, getEffectiveTokenModes, getBindableTokenProperties, getCanvasTokenProperty, getTokenPropertyScope, getTokensForProperty, readNodeStyleProperty, writeNodeStyleProperty, CANVAS_TOKEN_PROPERTIES, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, type CanvasTokenProperty, type CanvasTokenOptions, type CanvasTokenBindingInfo } 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

@@ -41,5 +41,15 @@ export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates,
 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';
+// Curve-preserving path operations, Offset Path and Outline Stroke
+export { offsetShapeNodes, outlineShapeNodeStrokes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, applyShapeReplacement, hasVisibleStroke, shapeToBezierPath, shapeNodeToBezierPath, pathBoolean, unitePaths, intersectPaths, subtractPaths, excludePaths, dividePaths, normalizeBezierPath, bezierPathArea, offsetPath, outlineStroke, strokeOutlineRings, dashContours, toBezierPath, bezierPathToSvg, transformBezierPath, bezierPathBounds, bezierPathSignedArea, bezierPathLength, bezierPathPointAtLength, pointInBezierPath, distanceToBezierPath, countPathSegments } from '@pixerate/editor/canvas';
 // Clock and view helpers from core
 export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly } from '@pixerate/editor/canvas';
+// Auto layout (Figma-style stacks, wrap, grid, hug / fill / fixed) and constraints
+export { layoutFrame, layoutAll, layoutUp, layoutUpMany, applyConstraints, getAutoLayout, getChildLayout, getLayoutSizing, getAutoLayoutGrid, getAutoLayoutInsertTarget, getFlowChildren, getLayoutParent, isAutoLayoutFrame, makeSizingCoherent, moveLayoutChild, mergeNodeUpdates, relayoutUpdates, resolvePadding, clampLayoutSize, createCanvasAutoLayoutController, AUTO_LAYOUT_DATA_KEY, CHILD_LAYOUT_DATA_KEY } from '@pixerate/editor/canvas';
+export { createCanvasAutoLayout } from './createCanvasAutoLayout.svelte.js';
+// Design tokens: bindings, per-frame modes and inspector controls
+export { createCanvasTokens } from './createCanvasTokens.svelte.js';
+export { default as TokenBindingPicker } from './TokenBindingPicker.svelte';
+export { default as TokenModeSwitcher } from './TokenModeSwitcher.svelte';
+export { bindCanvasToken, setCanvasTokenMode, resolveCanvasTokens, detachTokenBindings, pruneCanvasTokenModes, inspectNodeTokens, getNodeTokenBindings, getNodeTokenModes, getEffectiveTokenModes, getBindableTokenProperties, getCanvasTokenProperty, getTokenPropertyScope, getTokensForProperty, readNodeStyleProperty, writeNodeStyleProperty, CANVAS_TOKEN_PROPERTIES, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY } from '@pixerate/editor/canvas';

package/dist/fileImport.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import { type FileImportControllerOptions } from "@pixerate/editor";
+import { type FileImportControllerOptions, type ImportStructureSummary } from "@pixerate/editor";
 /**
  * Imports markdown, HTML, plain-text and RTF files (or anything registered
  * with `registerImportAdapter` for the `document` target) into an editor,
@@ -13,6 +13,13 @@ export declare function createFileImport(getEditor: () => Editor | null | undefi
     readonly isImporting: boolean;
     readonly error: Error | null;
     readonly lastOutcomes: import("@pixerate/editor").ImportOutcome<import("@pixerate/editor").DocumentImport>[];
+    /**
+     * Structures detected in the last import (headings, lists, tables,
+     * columns), or `null` when no adapter reported any (only structure-aware
+     * adapters such as PDF do). Turn PDF detection off with
+     * `setOptions({ adapterOptions: { pdf: { structure: false } } })`.
+     */
+    readonly structureSummary: ImportStructureSummary | null;
     /** Value for `<input type="file" accept={…}>`. */
     readonly accept: string;
     /** Opens the browser file picker and imports the chosen files at the selection. */

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

@@ -1 +1 @@
-{"version":3,"file":"fileImport.svelte.d.ts","sourceRoot":"","sources":["../src/fileImport.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAEL,KAAK,2BAA2B,EAEjC,MAAM,kBAAkB,CAAC;AAE1B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,EAC1C,OAAO,GAAE,2BAAgC;;;;IAqBvC,kDAAkD;;IAIlD,mFAAmF;;IAEnF,0FAA0F;;uBAEvE,2BAA2B;EAEjD;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"fileImport.svelte.d.ts","sourceRoot":"","sources":["../src/fileImport.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,2BAA2B,EAEhC,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAE1B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,EAC1C,OAAO,GAAE,2BAAgC;;;;IAsBvC;;;;;OAKG;+BACqB,sBAAsB,GAAG,IAAI;IAGrD,kDAAkD;;IAIlD,mFAAmF;;IAEnF,0FAA0F;;uBAEvE,2BAA2B;EAEjD;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/fileImport.svelte.js

@@ -1,4 +1,4 @@
-import { FileImportController, } from "@pixerate/editor";
+import { FileImportController, summarizeImportStructure, } from "@pixerate/editor";
 /**
  * Imports markdown, HTML, plain-text and RTF files (or anything registered
  * with `registerImportAdapter` for the `document` target) into an editor,
@@ -14,6 +14,7 @@ export function createFileImport(getEditor, options = {}) {
         return editor && !editor.isDestroyed ? editor : null;
     }, options);
     let state = $state(controller.getState());
+    let summary = $derived(summarizeImportStructure(state.lastOutcomes));
     controller.subscribe((next) => {
         state = next;
     });
@@ -27,6 +28,15 @@ export function createFileImport(getEditor, options = {}) {
         get lastOutcomes() {
             return state.lastOutcomes;
         },
+        /**
+         * Structures detected in the last import (headings, lists, tables,
+         * columns), or `null` when no adapter reported any (only structure-aware
+         * adapters such as PDF do). Turn PDF detection off with
+         * `setOptions({ adapterOptions: { pdf: { structure: false } } })`.
+         */
+        get structureSummary() {
+            return summary;
+        },
         /** Value for `<input type="file" accept={…}>`. */
         get accept() {
             return controller.accept;