@pixerate/editor-svelte 0.24.0 → 0.25.0

package/README.md

@@ -69,6 +69,8 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 
 `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.
 
+Tables are on by default in `createRichTextPreset` (`table: false` turns them off). `<TableToolbar {editor} />` shows row, column, merge/split, header and alignment buttons while the selection is in a table (disabled buttons explain why in their tooltip; `items` picks the buttons, `showWhenOutside` keeps it visible). `<TableBubbleMenu {editor} />` shows it in a bubble menu next to the cursor, and `<InsertTableGrid {editor} oninsert={…} />` is a Word-style size picker. `createTableMenu(editor)` is the rune adapter for custom UIs.
+
 `<FindReplaceBar {editor} />` is a Word-style find bar for editors with the `FindReplace` extension (`createRichTextPreset({ findReplace: true })`): it appears on Mod+F / Mod+H (or `editor.commands.openFindReplace()`), with find and replace fields, option toggles, a "3 of 12" counter, previous/next, Replace and Replace all; Enter / Shift+Enter step, Mod+Enter in the replace field replaces all, Escape closes (`onclose`). `createFindReplace(editor)` is the rune (and Svelte store) adapter for custom UIs.
 
 ## More exports
@@ -76,7 +78,7 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 | Import | Exports |
 | :--- | :--- |
 | `@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`, `SheetTabs`, `NameManager`, `createReactiveSpreadsheet` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/spreadsheet` | `SpreadsheetEditor` (virtualised for large sheets, `virtualize` prop), `FormulaBar`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow`, `SheetTabs`, `NameManager`, `createReactiveSpreadsheet`, `createSpreadsheetViewport` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, Select & Mask (`SelectionOptionsBar`, `RefineEdgePanel`: magic wand, marquees, lasso, Refine Edge, layer 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/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |

package/dist/ExportDocxButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import type { DocxExportControllerOptions, DocxExportReport } from "@pixerate/editor/export";
+  import { createDocxExport } from "./docxExport.svelte.js";
+
+  interface Props extends DocxExportControllerOptions {
+    editor?: Editor | null;
+    class?: string;
+    children?: import("svelte").Snippet;
+    /** Called after the download with the export report. */
+    onExported?: (report: DocxExportReport) => void;
+  }
+
+  let {
+    editor = null,
+    class: className = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-50",
+    children,
+    onExported,
+    ...options
+  }: Props = $props();
+
+  // Options are applied (and kept current) by the effect below.
+  const docx = createDocxExport(() => editor);
+  $effect(() => {
+    docx.setOptions({ ...options });
+  });
+
+  async function exportNow() {
+    const report = await docx.download();
+    if (report) onExported?.(report);
+  }
+</script>
+
+<!-- A button that downloads the editor's document as a Word file (`.docx`). -->
+<button
+  type="button"
+  class={className}
+  disabled={!editor || docx.isExporting}
+  aria-busy={docx.isExporting || undefined}
+  title={docx.error ? `Export failed: ${docx.error.message}` : undefined}
+  onclick={exportNow}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    Export to Word
+  {/if}
+</button>

package/dist/ExportDocxButton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/core";
+import type { DocxExportControllerOptions, DocxExportReport } from "@pixerate/editor/export";
+interface Props extends DocxExportControllerOptions {
+    editor?: Editor | null;
+    class?: string;
+    children?: import("svelte").Snippet;
+    /** Called after the download with the export report. */
+    onExported?: (report: DocxExportReport) => void;
+}
+declare const ExportDocxButton: import("svelte").Component<Props, {}, "">;
+type ExportDocxButton = ReturnType<typeof ExportDocxButton>;
+export default ExportDocxButton;
+//# sourceMappingURL=ExportDocxButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportDocxButton.svelte.d.ts","sourceRoot":"","sources":["../src/ExportDocxButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3F,UAAU,KAAM,SAAQ,2BAA2B;IACjD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACjD;AAoCH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/canvas/AnimationTimeline.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import {
+		ANIMATION_EASING_LABELS,
+		ANIMATION_EASING_PRESETS,
+		formatAnimationTime,
+		getTimelineTicks,
+		timeToX,
+		xToTime,
+		type AnimationLoopMode,
+		type KeyframeRef
+	} from '@pixerate/editor/canvas';
+	import type { SvelteCanvasAnimation } from './createCanvasAnimation.svelte.js';
+	import type { CanvasNode } from './types.js';
+
+	interface Props {
+		/** The `createCanvasAnimation` rune. */
+		animation: SvelteCanvasAnimation<any>;
+		/** Nodes whose tracks are listed (default: the selected nodes). */
+		nodeIds?: readonly string[];
+		/** Width of the keyframe lanes in px (default 360). */
+		width?: number;
+		/** Snap distance in screen px while dragging keyframes (default 8; hold Alt to turn snapping off). */
+		snapThreshold?: number;
+		labelOf?: (node: CanvasNode) => string;
+		/** Bump to re-read the rows after changing the nodes outside the rune. */
+		revision?: unknown;
+		class?: string;
+	}
+
+	let { animation, nodeIds, width = 360, snapThreshold = 8, labelOf, revision, class: className = '' }: Props = $props();
+
+	const LOOP_LABELS: Record<AnimationLoopMode, string> = { none: 'Once', loop: 'Loop', 'ping-pong': 'Ping-pong' };
+	const labelWidth = 120;
+
+	const state = $derived(animation.state);
+	const duration = $derived(state.duration);
+	const rows = $derived.by(() => {
+		void state;
+		void revision;
+		void animation.revision;
+		return animation.timelineRows(nodeIds ?? undefined, labelOf ? { labelOf: labelOf as any } : {});
+	});
+	const ticks = $derived(getTimelineTicks(duration, width));
+	const playheadX = $derived(timeToX(state.time, duration, width));
+	const easingValue = (easing: unknown) => (typeof easing === 'string' ? easing : easing ? 'custom' : 'linear');
+	const selectedEasing = $derived.by(() => {
+		const first = state.selection[0];
+		if (!first) return '';
+		for (const row of rows) for (const k of row.keyframes) if (k.selected && k.ref.property === first.property && k.ref.nodeId === first.nodeId) return easingValue(k.easing);
+		return '';
+	});
+	const multiNode = $derived(new Set(rows.map((r) => r.nodeId)).size > 1);
+
+	let dragStartX: number | null = null;
+	const cleanups: (() => void)[] = [];
+	const listen = (move: (e: PointerEvent) => void, up: () => void) => {
+		const end = () => {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', end);
+			up();
+		};
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', end);
+		cleanups.push(() => {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', end);
+		});
+	};
+
+	function onRulerDown(event: PointerEvent) {
+		const left = (event.currentTarget as Element).getBoundingClientRect().left;
+		animation.scrub(xToTime(event.clientX - left, duration, width));
+		listen(
+			(e) => animation.scrub(xToTime(e.clientX - left, duration, width)),
+			() => animation.endScrub()
+		);
+	}
+
+	function onKeyframeDown(event: PointerEvent, ref: KeyframeRef) {
+		event.stopPropagation();
+		event.preventDefault();
+		if (event.shiftKey || event.metaKey || event.ctrlKey) {
+			animation.selectKeyframes([ref], 'toggle');
+			return;
+		}
+		animation.beginKeyframeDrag([ref]);
+		dragStartX = event.clientX;
+		const msPerPx = width > 0 ? duration / width : 0;
+		listen(
+			(e) => {
+				if (dragStartX === null) return;
+				animation.updateKeyframeDrag((e.clientX - dragStartX) * msPerPx, { snap: !e.altKey, thresholdMs: snapThreshold * msPerPx });
+			},
+			() => {
+				if (dragStartX === null) return;
+				dragStartX = null;
+				animation.endKeyframeDrag();
+			}
+		);
+	}
+
+	function onWindowKey(event: KeyboardEvent) {
+		if (event.key === 'Escape' && dragStartX !== null) {
+			dragStartX = null;
+			animation.cancelKeyframeDrag();
+		}
+	}
+
+	function onTimelineKey(event: KeyboardEvent) {
+		if ((event.key === 'Delete' || event.key === 'Backspace') && state.selection.length > 0) {
+			event.preventDefault();
+			animation.deleteKeyframes();
+		}
+	}
+
+	onDestroy(() => cleanups.forEach((fn) => fn()));
+
+	const btn = 'rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50';
+</script>
+
+<svelte:window onkeydown={onWindowKey} />
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_static_element_interactions -->
+<div data-animation-timeline="" class="flex flex-col gap-1 text-xs text-foreground {className}" tabindex="0" onkeydown={onTimelineKey}>
+	<div class="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Animation">
+		<button type="button" class={btn} data-action="toggle-play" aria-label={state.playing ? 'Pause' : 'Play'} onclick={() => animation.toggle()}>
+			{state.playing ? '❚❚' : '▶'}
+		</button>
+		<button
+			type="button"
+			class="{btn} {state.recording ? 'text-red-500' : ''}"
+			data-action="record"
+			aria-pressed={state.recording}
+			aria-label="Record keyframes"
+			onclick={() => animation.toggleRecording()}
+		>
+			● Rec
+		</button>
+		<button type="button" class={btn} data-action="add-keyframe" onclick={() => animation.addKeyframe()}>◆ Key</button>
+		<span data-time="" class="tabular-nums text-muted-foreground">{formatAnimationTime(state.time)} / {formatAnimationTime(duration)}</span>
+		<select
+			aria-label="Easing"
+			data-easing-picker=""
+			class="rounded border border-border bg-background px-1 py-0.5"
+			value={selectedEasing}
+			disabled={state.selection.length === 0}
+			onchange={(e) => {
+				const value = (e.currentTarget as HTMLSelectElement).value;
+				if (value && value !== 'custom') animation.setEasing(value);
+			}}
+		>
+			<option value="">Easing…</option>
+			{#each ANIMATION_EASING_PRESETS as preset (preset)}
+				<option value={preset}>{ANIMATION_EASING_LABELS[preset]}</option>
+			{/each}
+			{#if selectedEasing === 'custom'}<option value="custom">Custom</option>{/if}
+		</select>
+		<select
+			aria-label="Loop"
+			data-loop-picker=""
+			class="rounded border border-border bg-background px-1 py-0.5"
+			value={state.loop}
+			onchange={(e) => animation.setLoop((e.currentTarget as HTMLSelectElement).value as AnimationLoopMode)}
+		>
+			{#each Object.keys(LOOP_LABELS) as mode (mode)}
+				<option value={mode}>{LOOP_LABELS[mode as AnimationLoopMode]}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="flex">
+		<div style="width: {labelWidth}px" class="shrink-0"></div>
+		<div data-timeline-ruler="" class="relative h-5 cursor-ew-resize border-b border-border" style="width: {width}px" onpointerdown={onRulerDown}>
+			{#each ticks as tick (tick.time)}
+				<span class="absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground" style="left: {tick.x}px">{tick.label}</span>
+			{/each}
+			<div data-playhead="" class="absolute top-0 h-5 w-px bg-red-500" style="left: {playheadX}px"></div>
+		</div>
+	</div>
+	{#if rows.length === 0}
+		<p class="text-muted-foreground" data-timeline-empty="">Select an animated node, or press ◆ Key to add a keyframe.</p>
+	{:else}
+		{#each rows as row (row.id)}
+			<div class="flex items-center" data-track={row.id}>
+				<label class="flex shrink-0 items-center gap-1 truncate pr-2" style="width: {labelWidth}px" title="{row.nodeLabel} · {row.label}">
+					<input
+						type="checkbox"
+						aria-label="Enable {row.label}"
+						checked={row.enabled}
+						onchange={(e) => animation.setTrackEnabled(row.nodeId, row.property, (e.currentTarget as HTMLInputElement).checked)}
+					/>
+					<span class="truncate">{multiNode ? `${row.nodeLabel} · ` : ''}{row.label}</span>
+				</label>
+				<div data-lane="" class="relative h-5 rounded bg-muted/40 {row.enabled ? '' : 'opacity-50'}" style="width: {width}px">
+					<div class="pointer-events-none absolute top-0 h-5 w-px bg-red-500/60" style="left: {playheadX}px"></div>
+					{#if state.drag && state.drag.target !== null}
+						<div data-snap-target="" class="pointer-events-none absolute top-0 h-5 w-px bg-sky-400" style="left: {timeToX(state.drag.target, duration, width)}px"></div>
+					{/if}
+					{#each row.keyframes as k (k.ref.time)}
+						<button
+							type="button"
+							data-keyframe={k.ref.time}
+							aria-pressed={k.selected}
+							aria-label="{row.label} keyframe at {formatAnimationTime(k.ref.time)}"
+							title="{formatAnimationTime(k.time)} · {String(k.value)}"
+							class="absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 border {k.selected
+								? 'border-sky-300 bg-sky-500'
+								: 'border-foreground/60 bg-background'} {k.easing === 'hold' ? 'rounded-none' : 'rounded-[1px]'}"
+							style="left: {timeToX(k.time, duration, width)}px"
+							onpointerdown={(e) => onKeyframeDown(e, k.ref)}
+						></button>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,20 @@
+import type { SvelteCanvasAnimation } from './createCanvasAnimation.svelte.js';
+import type { CanvasNode } from './types.js';
+interface Props {
+    /** The `createCanvasAnimation` rune. */
+    animation: SvelteCanvasAnimation<any>;
+    /** Nodes whose tracks are listed (default: the selected nodes). */
+    nodeIds?: readonly string[];
+    /** Width of the keyframe lanes in px (default 360). */
+    width?: number;
+    /** Snap distance in screen px while dragging keyframes (default 8; hold Alt to turn snapping off). */
+    snapThreshold?: number;
+    labelOf?: (node: CanvasNode) => string;
+    /** Bump to re-read the rows after changing the nodes outside the rune. */
+    revision?: unknown;
+    class?: string;
+}
+declare const AnimationTimeline: import("svelte").Component<Props, {}, "">;
+type AnimationTimeline = ReturnType<typeof AnimationTimeline>;
+export default AnimationTimeline;
+//# sourceMappingURL=AnimationTimeline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/AnimationTimeline.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,wCAAwC;IACxC,SAAS,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACtC,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sGAAsG;IACtG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC;IACvC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAoKF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/canvas/CanvasComponentsPanel.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { CANVAS_COMPONENT_DRAG_TYPE, listCanvasComponents } from '@pixerate/editor/canvas';
+	import type { CanvasNode } from './types.js';
+
+	interface Props {
+		nodes: CanvasNode[];
+		/** Inserts an instance of a component (or a set's default variant); called on click. */
+		oninsert: (componentId: string) => void;
+		/** Show the search field (default `true`). */
+		search?: boolean;
+		class?: string;
+	}
+
+	let { nodes, oninsert, search = true, class: className = '' }: Props = $props();
+
+	let query = $state('');
+	const listed = $derived(listCanvasComponents(nodes as any[]));
+	const q = $derived(query.trim().toLowerCase());
+	const match = (name: string) => !q || name.toLowerCase().includes(q);
+	const lone = $derived(listed.components.filter((c) => !c.setId && match(c.name)));
+	const sets = $derived(listed.sets.filter((s) => match(s.name) || s.variants.some((v) => match(v.name))));
+
+	function dragStart(event: DragEvent, id: string, name: string) {
+		if (!event.dataTransfer) return;
+		event.dataTransfer.setData(CANVAS_COMPONENT_DRAG_TYPE, id);
+		event.dataTransfer.setData('text/plain', name);
+		event.dataTransfer.effectAllowed = 'copy';
+	}
+</script>
+
+{#snippet item(id: string, name: string, count: number, kind: string)}
+	<button
+		type="button"
+		draggable="true"
+		data-component-id={id}
+		data-kind={kind}
+		class="flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted"
+		title="Insert an instance of {name}"
+		onclick={() => oninsert(id)}
+		ondragstart={(e) => dragStart(e, id, name)}
+	>
+		<span class="truncate"><span aria-hidden="true" class="mr-1 text-muted-foreground">◇</span>{name}</span>
+		<span class="text-[10px] text-muted-foreground" data-instance-count="">{count}</span>
+	</button>
+{/snippet}
+
+<div data-components-panel="" class="flex flex-col gap-1 text-xs text-foreground {className}">
+	{#if search}
+		<input
+			type="search"
+			aria-label="Search components"
+			placeholder="Search components"
+			class="rounded border border-border bg-background px-2 py-1 text-xs"
+			oninput={(e) => (query = e.currentTarget.value)}
+		/>
+	{/if}
+	{#each sets as set (set.id)}
+		<div data-component-set={set.id} class="flex flex-col">
+			{@render item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), 'set')}
+			<div class="ml-3 flex flex-col border-l border-border pl-1">
+				{#each set.variants as v (v.id)}
+					{@render item(v.id, v.name, v.instanceCount, 'variant')}
+				{/each}
+			</div>
+		</div>
+	{/each}
+	{#each lone as c (c.id)}
+		{@render item(c.id, c.name, c.instanceCount, 'component')}
+	{/each}
+	{#if listed.components.length === 0}
+		<p class="text-muted-foreground">No components yet. Select a frame and choose Create Component.</p>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { CanvasNode } from './types.js';
+interface Props {
+    nodes: CanvasNode[];
+    /** Inserts an instance of a component (or a set's default variant); called on click. */
+    oninsert: (componentId: string) => void;
+    /** Show the search field (default `true`). */
+    search?: boolean;
+    class?: string;
+}
+declare const CanvasComponentsPanel: import("svelte").Component<Props, {}, "">;
+type CanvasComponentsPanel = ReturnType<typeof CanvasComponentsPanel>;
+export default CanvasComponentsPanel;
+//# sourceMappingURL=CanvasComponentsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasComponentsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasComponentsPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,wFAAwF;IACxF,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAsDF,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

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