@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/canvas/CanvasInstanceInspector.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { inspectCanvasInstance, listCanvasComponents, type CanvasComponentsController } from '@pixerate/editor/canvas';
+	import type { CanvasNode } from './types.js';
+
+	type Actions = Pick<
+		CanvasComponentsController<any>,
+		'setInstanceProperties' | 'resetOverrides' | 'detachInstance' | 'goToMainComponent' | 'pushOverrides' | 'restoreMainComponent'
+	>;
+
+	interface Props {
+		nodes: CanvasNode[];
+		/** An instance, or a layer inside one; nothing is shown otherwise. */
+		nodeId: string | null | undefined;
+		components: Actions;
+		/** Receives refusals (e.g. a property value that would nest a component in itself). */
+		onerror?: (reason: string) => void;
+		class?: string;
+	}
+
+	let { nodes, nodeId, components, onerror, class: className = '' }: Props = $props();
+
+	const info = $derived(nodeId ? inspectCanvasInstance(nodes as any[], nodeId) : undefined);
+	const allComponents = $derived(listCanvasComponents(nodes as any[]).components);
+	const btn = 'rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40';
+
+	function report(result: { ok: boolean; reason?: string } | undefined) {
+		if (result && !result.ok && result.reason) onerror?.(result.reason);
+	}
+	function setProp(name: string, value: unknown) {
+		if (info) report(components.setInstanceProperties({ [name]: value }, [info.id]));
+	}
+</script>
+
+{#if info}
+	<div data-instance-inspector="" data-instance-id={info.id} class="flex flex-col gap-2 text-xs text-foreground {className}">
+		<div class="flex items-center justify-between gap-2">
+			<span class="truncate font-medium" data-instance-main="">
+				{info.status === 'linked' ? info.componentName : 'Main component missing'}
+			</span>
+			{#if info.nested}<span class="text-muted-foreground">Nested</span>{/if}
+		</div>
+		{#each info.variantOptions as option (option.name)}
+			<label class="flex items-center gap-2" data-variant-property={option.name}>
+				<span class="w-24 shrink-0 truncate text-muted-foreground">{option.name}</span>
+				<select
+					aria-label="{option.name} variant"
+					class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+					value={info.variant[option.name] ?? ''}
+					onchange={(e) => setProp(option.name, e.currentTarget.value)}
+				>
+					{#each option.values as v (v)}
+						<option value={v}>{v}</option>
+					{/each}
+				</select>
+			</label>
+		{/each}
+		{#each info.properties as p (p.name)}
+			<label class="flex items-center gap-2" data-component-property={p.name}>
+				<span class="w-24 shrink-0 truncate text-muted-foreground">{p.name}</span>
+				{#if p.type === 'boolean'}
+					<input type="checkbox" aria-label={p.name} checked={p.value === true} onchange={(e) => setProp(p.name, e.currentTarget.checked)} />
+				{:else if p.type === 'text'}
+					{#key p.value}
+						<input
+							type="text"
+							aria-label={p.name}
+							value={String(p.value)}
+							class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+							onblur={(e) => {
+								if (e.currentTarget.value !== p.value) setProp(p.name, e.currentTarget.value);
+							}}
+							onkeydown={(e) => {
+								if (e.key === 'Enter') e.currentTarget.blur();
+							}}
+						/>
+					{/key}
+				{:else}
+					<select
+						aria-label={p.name}
+						class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+						value={String(p.value)}
+						onchange={(e) => setProp(p.name, e.currentTarget.value)}
+					>
+						{#each allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value) as c (c.id)}
+							<option value={c.id}>{c.name}</option>
+						{/each}
+					</select>
+				{/if}
+			</label>
+		{/each}
+		{#if info.overrides.length}
+			<div class="flex flex-col gap-1" data-instance-overrides="">
+				<span class="text-muted-foreground">Overrides</span>
+				{#each info.overrides as o (o.id)}
+					<div class="flex flex-wrap items-center gap-1" data-override-layer={o.id}>
+						<span class="mr-1 truncate">{o.name}</span>
+						{#each o.groups as g (g)}
+							<button
+								type="button"
+								class="rounded bg-muted px-1 text-[10px]"
+								data-override-group={g}
+								title="Reset {g}"
+								onclick={() => report(components.resetOverrides(o.id, g))}>{g} ×</button
+							>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<div class="flex flex-wrap gap-1">
+			{#if info.status === 'linked'}
+				<button type="button" class={btn} data-action="reset" onclick={() => report(components.resetOverrides(info!.id))}>Reset all</button>
+				<button type="button" class={btn} data-action="go-to-main" onclick={() => components.goToMainComponent(info!.id)}>Go to main</button>
+				<button
+					type="button"
+					class={btn}
+					data-action="push"
+					disabled={info.overrides.length === 0}
+					onclick={() => report(components.pushOverrides(info!.rootId))}>Push changes</button
+				>
+			{:else}
+				<button type="button" class={btn} data-action="restore" onclick={() => report(components.restoreMainComponent(info!.rootId))}
+					>Restore main component</button
+				>
+			{/if}
+			<button
+				type="button"
+				class={btn}
+				data-action="detach"
+				disabled={info.nested}
+				title={info.nested ? 'Detach the outer instance first' : undefined}
+				onclick={() => report(components.detachInstance([info!.id]))}>Detach</button
+			>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,16 @@
+import { type CanvasComponentsController } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+type Actions = Pick<CanvasComponentsController<any>, 'setInstanceProperties' | 'resetOverrides' | 'detachInstance' | 'goToMainComponent' | 'pushOverrides' | 'restoreMainComponent'>;
+interface Props {
+    nodes: CanvasNode[];
+    /** An instance, or a layer inside one; nothing is shown otherwise. */
+    nodeId: string | null | undefined;
+    components: Actions;
+    /** Receives refusals (e.g. a property value that would nest a component in itself). */
+    onerror?: (reason: string) => void;
+    class?: string;
+}
+declare const CanvasInstanceInspector: import("svelte").Component<Props, {}, "">;
+type CanvasInstanceInspector = ReturnType<typeof CanvasInstanceInspector>;
+export default CanvasInstanceInspector;
+//# sourceMappingURL=CanvasInstanceInspector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasInstanceInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasInstanceInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,CAClB,0BAA0B,CAAC,GAAG,CAAC,EAC/B,uBAAuB,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,eAAe,GAAG,sBAAsB,CAC9H,CAAC;AAEF,UAAU,KAAK;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAyFF,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/canvas/TokenBindingPicker.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import {
+		bindCanvasToken,
+		getBindableTokenProperties,
+		getEffectiveTokenModes,
+		getNodeTokenBindings,
+		getTokensForProperty,
+		type CanvasTokenOptions
+	} from '@pixerate/editor/canvas';
+	import { resolveToken, type TokenState } from '@pixerate/editor/tokens';
+	import type { CanvasNode } from './types.js';
+
+	interface Props {
+		state: TokenState;
+		nodes: CanvasNode[];
+		/** Nodes to bind (the first one decides which properties are listed). */
+		selectedIds: readonly string[];
+		/** Receives the nodes with the binding applied and resolved. */
+		onchange: (nodes: CanvasNode[]) => void;
+		options?: CanvasTokenOptions;
+		/** Limit to these property keys (in this order). */
+		properties?: readonly string[];
+		onerror?: (error: Error) => void;
+		class?: string;
+	}
+
+	let { state, nodes, selectedIds, onchange, options = {}, properties, onerror, class: className = '' }: Props = $props();
+
+	const selected = $derived(nodes.filter((n) => selectedIds.includes(n.id)));
+	const first = $derived(selected[0]);
+	const rows = $derived.by(() => {
+		if (!first) return [];
+		const all = getBindableTokenProperties(first as any, options);
+		return properties ? properties.map((key) => all.find((p) => p.key === key)).filter((p) => !!p) : all;
+	});
+	const modes = $derived(first ? getEffectiveTokenModes(first as any, nodes as any, state, options) : {});
+
+	function valueOf(key: string) {
+		const ids = new Set(selected.map((n) => getNodeTokenBindings(n as any)[key] ?? ''));
+		return ids.size === 1 ? [...ids][0] : '__mixed';
+	}
+
+	function change(key: string, id: string) {
+		try {
+			onchange(bindCanvasToken(nodes as any[], selectedIds, key, id || null, state, options));
+		} catch (error) {
+			onerror?.(error as Error);
+		}
+	}
+</script>
+
+{#if first}
+	<div data-token-binding-picker="" class="flex flex-col gap-1 text-xs text-foreground {className}">
+		{#each rows as property (property!.key)}
+			{@const value = valueOf(property!.key)}
+			{@const resolved = value && value !== '__mixed' ? resolveToken(state, value, modes) : null}
+			<label class="flex items-center gap-2" data-token-property={property!.key}>
+				<span class="w-28 shrink-0 text-muted-foreground">{property!.label}</span>
+				<select
+					aria-label="{property!.label} variable"
+					class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+					{value}
+					onchange={(e) => change(property!.key, e.currentTarget.value)}
+				>
+					{#if value === '__mixed'}<option value="__mixed">Mixed</option>{/if}
+					<option value="">None</option>
+					{#each getTokensForProperty(state, property!, first as any) as v (v.id)}
+						{@const collection = state.collections.find((c) => c.id === v.collectionId)}
+						<option value={v.id}>{v.name}{collection && state.collections.length > 1 ? ` (${collection.name})` : ''}</option>
+					{/each}
+				</select>
+				<span class="w-16 shrink-0 truncate text-right text-muted-foreground" data-token-resolved="">
+					{#if resolved?.ok}
+						{#if property!.type === 'color'}
+							<span
+								class="inline-block h-3 w-3 rounded border border-border align-middle"
+								style:background={String(resolved.value)}
+								title={String(resolved.value)}
+							></span>
+						{:else}
+							{String(resolved.value)}
+						{/if}
+					{:else if resolved}
+						<span title={resolved.message}>⚠</span>
+					{/if}
+				</span>
+			</label>
+		{/each}
+		{#if state.collections.length === 0}
+			<p class="text-muted-foreground">No variables yet.</p>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,20 @@
+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[];
+    /** Nodes to bind (the first one decides which properties are listed). */
+    selectedIds: readonly string[];
+    /** Receives the nodes with the binding applied and resolved. */
+    onchange: (nodes: CanvasNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Limit to these property keys (in this order). */
+    properties?: readonly string[];
+    onerror?: (error: Error) => void;
+    class?: string;
+}
+declare const TokenBindingPicker: import("svelte").Component<Props, {}, "">;
+type TokenBindingPicker = ReturnType<typeof TokenBindingPicker>;
+export default TokenBindingPicker;
+//# sourceMappingURL=TokenBindingPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenBindingPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/TokenBindingPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAML,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AAClC,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,yEAAyE;IACzE,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,oDAAoD;IACpD,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAoEF,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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/createCanvasAnimation.svelte.d.ts

@@ -0,0 +1,98 @@
+import { type AnimatableProperty, type AnimationHistoryTarget, type AnimationLoopMode, type CanvasAnimationState, type Clock } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+export interface CreateCanvasAnimationOptions<TNode extends CanvasNode = CanvasNode> {
+    getNodes: () => TNode[];
+    setNodes: (nodes: TNode[]) => void;
+    /** When set, keyframe edits are undoable steps. */
+    history?: AnimationHistoryTarget;
+    /** Ids acted on without explicit ids (default: nodes with `selected: true`). */
+    getSelectedIds?: () => string[];
+    /** Playback time source (default `realClock`); pass a `ManualClock` for tests or rendering. */
+    clock?: Clock;
+    /** Fixed timeline length (ms); omitted = the last keyframe, at least `minDuration`. */
+    duration?: number;
+    minDuration?: number;
+    loop?: AnimationLoopMode;
+    playbackRate?: number;
+    fps?: number;
+    recording?: boolean;
+    properties?: readonly AnimatableProperty[];
+    onTime?: (time: number) => void;
+}
+/**
+ * Headless Svelte 5 rune for keyframe animation on the canvas (the Svelte twin of
+ * `useCanvasAnimation`): playback on an injectable clock, record mode, undoable keyframe
+ * edits, multi-keyframe drags with snapping, copy / paste and CSS / Web Animations export.
+ *
+ * Render `displayNodes` (the nodes evaluated at the playhead) and route edits made on them
+ * through `applyDisplayChanges`, so animated properties are keyed at the playhead. Call
+ * `refresh()` after changing the nodes yourself so the automatic duration follows them.
+ */
+export declare function createCanvasAnimation<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasAnimationOptions<TNode>): {
+    state: CanvasAnimationState;
+    time: number;
+    playing: boolean;
+    recording: boolean;
+    duration: number;
+    selection: readonly import("@pixerate/editor/canvas").KeyframeRef[];
+    drag: import("@pixerate/editor/canvas").KeyframeDragState | null;
+    revision: number;
+    clipboard: import("@pixerate/editor/canvas").AnimationKeyframeClipboard | null;
+    displayNodes: TNode[];
+    destroy(): void;
+    player: import("@pixerate/editor/canvas").AnimationPlayer;
+    getState: () => CanvasAnimationState;
+    subscribe(listener: (state: CanvasAnimationState) => void): () => void;
+    refresh(): void;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    stop: () => void;
+    seek: (time: number) => void;
+    scrub: (time: number) => void;
+    endScrub: () => void;
+    setLoop: (loop: AnimationLoopMode) => void;
+    setPlaybackRate: (rate: number) => void;
+    setDuration(ms: number | null): void;
+    setFps(value: number): void;
+    setRecording(on: boolean): void;
+    toggleRecording(): void;
+    nextKeyframe(ids?: Iterable<string>): number | null;
+    previousKeyframe(ids?: Iterable<string>): number | null;
+    display: (nodes?: readonly any[] | undefined) => any[];
+    applyDisplayChanges(next: any[]): import("@pixerate/editor/canvas").KeyframeRef[];
+    addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): import("@pixerate/editor/canvas").KeyframeRef[];
+    setKeyframe(nodeId: string, property: string, value: import("@pixerate/editor/canvas").AnimationValue, time?: number, easing?: import("@pixerate/editor/canvas").AnimationEasing | string): void;
+    updateKeyframe(ref: import("@pixerate/editor/canvas").KeyframeRef, patch: import("@pixerate/editor/canvas").KeyframePatch): void;
+    deleteKeyframes(refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[]): boolean;
+    setEasing(easing: import("@pixerate/editor/canvas").AnimationEasing | string | null, refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[]): boolean;
+    setTrackEnabled(nodeId: string, property: string, enabled: boolean): void;
+    removeTrack(nodeId: string, property: string): void;
+    setMotionPath(nodeId: string, motionPath: {
+        d: string;
+        autoRotate?: boolean;
+    } | null): void;
+    animateNode(nodeId: string, opts: Omit<import("@pixerate/editor/canvas").AnimateNodeOptions, "properties">): import("@pixerate/editor/canvas").KeyframeRef[];
+    moveKeyframes(delta: number, refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[]): number;
+    scaleKeyframes(factor: number, refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[], pivot?: number): number;
+    copyKeyframes(refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[]): import("@pixerate/editor/canvas").AnimationKeyframeClipboard | null;
+    pasteKeyframes(data?: import("@pixerate/editor/canvas").AnimationKeyframeClipboard | null, nodeIds?: readonly string[], time?: number): import("@pixerate/editor/canvas").KeyframeRef[];
+    selectKeyframes(refs: readonly import("@pixerate/editor/canvas").KeyframeRef[], mode?: "replace" | "add" | "toggle"): void;
+    clearSelection(): void;
+    beginKeyframeDrag(refs?: readonly import("@pixerate/editor/canvas").KeyframeRef[]): void;
+    updateKeyframeDrag(delta: number, opts?: {
+        snap?: boolean;
+        thresholdMs?: number;
+    }): import("@pixerate/editor/canvas").KeyframeDragState | null;
+    endKeyframeDrag(): number;
+    cancelKeyframeDrag(): void;
+    timelineRows(ids?: Iterable<string>, opts?: Omit<import("@pixerate/editor/canvas").TimelineRowsOptions, "selection" | "dragDelta">): import("@pixerate/editor/canvas").TimelineRow[];
+    sampleFrames(opts?: import("@pixerate/editor/canvas").SampleAnimationOptions): import("@pixerate/editor/canvas").AnimationFrame[];
+    exportCss(nodeId: string, opts?: import("@pixerate/editor/canvas").CssExportOptions & {
+        name?: string;
+        selector?: string;
+    }): import("@pixerate/editor/canvas").CssAnimationExport;
+    toWebAnimations(nodeId: string, opts?: import("@pixerate/editor/canvas").CssExportOptions): import("@pixerate/editor/canvas").WebAnimationSpec[];
+};
+export type SvelteCanvasAnimation<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasAnimation<TNode>>;
+//# sourceMappingURL=createCanvasAnimation.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasAnimation.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAnimation.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,KAAK,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,4BAA4B,CAAC,KAAK,CAAC;;;;;;;;;;kBA2DnG,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAakl6I,CAAC;;;;;;;;;;;YAAg/C,CAAC;mBAA8B,CAAC;;;;;;;YAAmjB,CAAC;gBAA0B,CAAC;;;EAH9s+I;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasAnimation.svelte.js

@@ -0,0 +1,79 @@
+import { createCanvasAnimationController } from '@pixerate/editor/canvas';
+/**
+ * Headless Svelte 5 rune for keyframe animation on the canvas (the Svelte twin of
+ * `useCanvasAnimation`): playback on an injectable clock, record mode, undoable keyframe
+ * edits, multi-keyframe drags with snapping, copy / paste and CSS / Web Animations export.
+ *
+ * Render `displayNodes` (the nodes evaluated at the playhead) and route edits made on them
+ * through `applyDisplayChanges`, so animated properties are keyed at the playhead. Call
+ * `refresh()` after changing the nodes yourself so the automatic duration follows them.
+ */
+export function createCanvasAnimation(options) {
+    const controller = createCanvasAnimationController({
+        getNodes: () => options.getNodes(),
+        setNodes: (next) => {
+            options.setNodes(next);
+            // Edits, undo and redo re-render views even when the nodes are not `$state`.
+            revision++;
+            controller.refresh();
+        },
+        history: options.history,
+        getSelectedIds: options.getSelectedIds,
+        clock: options.clock,
+        duration: options.duration,
+        minDuration: options.minDuration,
+        loop: options.loop,
+        playbackRate: options.playbackRate,
+        fps: options.fps,
+        recording: options.recording,
+        properties: options.properties,
+        onTime: (time) => options.onTime?.(time)
+    });
+    let state = $state.raw(controller.getState());
+    let revision = $state(0);
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    return {
+        ...controller,
+        /** Playback, selection and drag state (reactive). */
+        get state() {
+            return state;
+        },
+        get time() {
+            return state.time;
+        },
+        get playing() {
+            return state.playing;
+        },
+        get recording() {
+            return state.recording;
+        },
+        get duration() {
+            return state.duration;
+        },
+        get selection() {
+            return state.selection;
+        },
+        get drag() {
+            return state.drag;
+        },
+        /** Bumped whenever the rune writes the nodes (edits, undo, redo). */
+        get revision() {
+            return revision;
+        },
+        get clipboard() {
+            return controller.clipboard;
+        },
+        /** The nodes evaluated at the playhead (re-read when the time or the nodes change). */
+        get displayNodes() {
+            void state.time;
+            void revision;
+            return controller.display(options.getNodes());
+        },
+        destroy() {
+            unsubscribe();
+            controller.destroy();
+        }
+    };
+}

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;;;;;;;;;;sBAoDwv0D,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;;;;;;;;;EAxCny3D;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;;;;;;;;;;sBAoDu2hF,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxCj9mF;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.map

@@ -1 +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;;;;;;;;aAiBw1vE,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHr7zE;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}
+{"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;;;;;;;;aAiBsg/F,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHnmjG;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,68 @@
+import { type CanvasComponentsControllerOptions } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+type CoreOptions = CanvasComponentsControllerOptions<any>;
+export interface CreateCanvasComponentsOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CoreOptions, 'getNodes' | 'setNodes' | 'onReveal'> {
+    getNodes: () => TNode[];
+    setNodes: (nodes: TNode[]) => void;
+    /** Called by `goToMainComponent` with the main (e.g. to pan the viewport to it). */
+    onReveal?: (node: TNode) => void;
+    /**
+     * Sync instances with their mains whenever the nodes `getNodes` reads change (default
+     * `true`; needs `getNodes` to read reactive state). Otherwise call `sync()` after edits.
+     */
+    autoSync?: boolean;
+}
+/**
+ * Headless Svelte 5 rune for Figma-style components and instances on a SvelteFlow canvas.
+ * After node changes it records edits inside instances as overrides and rebuilds the
+ * instances of edited main components (keeping overrides). Its actions (`createComponent`,
+ * `createInstance`, `combineAsVariants`, `detachInstance`, `resetOverrides`, `pushOverrides`,
+ * `swapInstance`, `setInstanceProperties`, `restoreMainComponent`, …) are undoable steps with a
+ * `history`, and each has a `can…` check returning `true` or the reason it can't run. Call
+ * `destroy()` to stop the automatic sync.
+ */
+export declare function createCanvasComponents<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasComponentsOptions<TNode>): {
+    /** Stops the automatic sync. */
+    destroy(): void;
+    sync: () => any[];
+    syncAll(): any[];
+    createComponent(ids?: Iterable<string>, createOptions?: Omit<import("@pixerate/editor/canvas").CreateCanvasComponentOptions, keyof import("@pixerate/editor/canvas").CanvasComponentSyncOptions>): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canCreateComponent: (ids?: Iterable<string>) => string | true;
+    combineAsVariants(ids?: Iterable<string>, combineOptions?: {
+        id?: string;
+        name?: string;
+        padding?: number;
+    }): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canCombineAsVariants: (ids?: Iterable<string>) => string | true;
+    createInstance(componentId: string, createOptions?: Omit<import("@pixerate/editor/canvas").CreateCanvasInstanceOptions, keyof import("@pixerate/editor/canvas").CanvasComponentSyncOptions>): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canCreateInstance(componentId?: string, parentId?: string): true | string;
+    detachInstance(ids?: Iterable<string>): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canDetachInstance(ids?: Iterable<string>): true | string;
+    resetOverrides(id?: string, group?: string): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canResetOverrides(id?: string): true | string;
+    pushOverrides(id?: string): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canPushOverrides(id?: string): true | string;
+    swapInstance(componentId: string, ids?: Iterable<string>, swapOptions?: {
+        keepTextOverridesOnly?: boolean;
+    }): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canSwapInstance(componentId?: string, ids?: Iterable<string>): true | string;
+    setInstanceProperties(properties: Record<string, unknown>, ids?: Iterable<string>): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canSetInstanceProperties(ids?: Iterable<string>): true | string;
+    restoreMainComponent(id?: string): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    canRestoreMainComponent(id?: string): true | string;
+    setComponentProperty(componentId: string, name: string, def: import("@pixerate/editor/canvas").CanvasComponentPropertyDef | null, propertyOptions?: {
+        newName?: string;
+    }): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    bindComponentProperty(layerId: string, field: import("@pixerate/editor/canvas").CanvasComponentPropertyField, name: string | null): import("@pixerate/editor/canvas").CanvasComponentResult<any>;
+    goToMainComponent(id?: string): string | undefined;
+    canGoToMainComponent(id?: string): true | string;
+    list: () => {
+        components: import("@pixerate/editor/canvas").CanvasComponentInfo[];
+        sets: import("@pixerate/editor/canvas").CanvasComponentSetInfo[];
+    };
+    inspect: (id?: string) => import("@pixerate/editor/canvas").CanvasInstanceInfo | undefined;
+    rootInstanceOf: (id: string) => string | undefined;
+};
+export type CanvasComponents = ReturnType<typeof createCanvasComponents>;
+export {};
+//# sourceMappingURL=createCanvasComponents.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasComponents.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasComponents.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,iCAAiC,EACtC,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,UAAU,CAAC;IAC/D,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;IAazH,gCAAgC;;;;;4BAS8wpK,CAAC;;UAAmM,CAAC;YAAsB,CAAC;eAAyB,CAAC;;8BAA8E,CAAC;;;;;;;;;;6BAA4nC,CAAC;;;;;;;;eAA6yB,CAAC;;;;;;;;;gBAAyvB,CAAC;;EAHzxvK;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC"}