@pixerate/editor-svelte 0.23.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,8 +78,8 @@ 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`, `createReactiveSpreadsheet` (also re-exported from the root entry) |
-| `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-svelte/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) |
 | `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (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/StylesGallery.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { createParagraphStyles, type SvelteParagraphStyles } from "./paragraphStyles.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /**
+     * `dropdown` (default): a button showing the current style that opens the
+     * list. `gallery`: the styles are always shown, in a row.
+     */
+    variant?: "dropdown" | "gallery";
+    /** List every available paragraph style instead of the gallery (quick) styles. */
+    showAllStyles?: boolean;
+    /** Show the "Update to match selection" and "New style from selection" actions. Defaults to `true`. */
+    showActions?: boolean;
+    /** Preview each style's font, weight, style and color in its entry. Defaults to `true`. */
+    preview?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after a style is applied, updated or created. */
+    onchange?: (event: { type: "apply" | "update" | "create"; id: string }) => void;
+  }
+
+  let {
+    editor = null,
+    variant = "dropdown",
+    showAllStyles = false,
+    showActions = true,
+    preview = true,
+    class: className = "relative inline-flex flex-wrap items-center gap-1 text-sm",
+    itemClass = "rounded px-2 py-1 text-left text-xs text-foreground hover:bg-muted",
+    activeItemClass = "bg-primary/10 text-primary",
+    onchange,
+  }: Props = $props();
+
+  let styles = $state.raw<SvelteParagraphStyles>(createParagraphStyles(null));
+  $effect(() => {
+    const s = createParagraphStyles(editor);
+    styles = s;
+    return () => s.destroy();
+  });
+
+  let open = $state(false);
+  let creating = $state(false);
+  let name = $state("");
+
+  let list = $derived(showAllStyles ? styles.current.styles : styles.current.gallery);
+  let current = $derived(styles.currentStyle);
+  let expanded = $derived(variant === "gallery" || open);
+
+  function close() {
+    if (variant === "dropdown") open = false;
+    creating = false;
+    name = "";
+  }
+
+  function previewStyle(id: string): string | undefined {
+    if (!preview || !styles.registry) return undefined;
+    return Object.entries(styles.registry.previewDeclarations(id))
+      .map(([property, value]) => `${property}: ${value}`)
+      .join("; ");
+  }
+
+  function apply(id: string) {
+    if (styles.apply(id)) onchange?.({ type: "apply", id });
+    close();
+  }
+
+  function update() {
+    if (current && styles.updateFromSelection(current.id)) {
+      onchange?.({ type: "update", id: current.id });
+    }
+    close();
+  }
+
+  function create(event: SubmitEvent) {
+    event.preventDefault();
+    const id = name.trim() ? styles.createFromSelection(name) : null;
+    if (id) onchange?.({ type: "create", id });
+    close();
+  }
+
+  const keepSelection = (event: MouseEvent) => event.preventDefault();
+</script>
+
+<div class={className} role="group" aria-label="Paragraph styles" data-styles-gallery={variant}>
+  {#if variant === "dropdown"}
+    <button
+      type="button"
+      class={itemClass}
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      disabled={!editor || !styles.registry}
+      onmousedown={keepSelection}
+      onclick={() => (open = !open)}
+    >
+      {current?.name ?? "Styles"} ▾
+    </button>
+  {/if}
+  {#if expanded}
+    <div
+      class={variant === "dropdown"
+        ? "absolute left-0 top-full z-20 mt-1 flex min-w-[12rem] flex-col gap-0.5 rounded-md border border-border bg-background p-1 shadow-md"
+        : "flex flex-wrap items-center gap-1"}
+    >
+      <div
+        role="listbox"
+        aria-label="Styles"
+        class={variant === "dropdown" ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1"}
+      >
+        {#each list as style (style.id)}
+          {@const active = style.id === styles.current.currentStyleId}
+          <button
+            type="button"
+            role="option"
+            aria-selected={active}
+            data-style-id={style.id}
+            class={active ? `${itemClass} ${activeItemClass}` : itemClass}
+            style={previewStyle(style.id)}
+            onmousedown={keepSelection}
+            onclick={() => apply(style.id)}
+          >
+            {style.name}
+          </button>
+        {/each}
+      </div>
+      {#if showActions}
+        <div
+          class={variant === "dropdown"
+            ? "mt-1 flex flex-col gap-0.5 border-t border-border pt-1"
+            : "flex items-center gap-1"}
+        >
+          <button
+            type="button"
+            class={itemClass}
+            disabled={!current}
+            onmousedown={keepSelection}
+            onclick={update}
+          >
+            {current ? `Update ${current.name} to match selection` : "Update to match selection"}
+          </button>
+          {#if creating}
+            <form class="flex items-center gap-1" onsubmit={create}>
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                aria-label="New style name"
+                class="w-32 rounded border border-border bg-background px-1 py-0.5 text-xs"
+                bind:value={name}
+                autofocus
+              />
+              <button type="submit" class={itemClass} disabled={!name.trim()}>Create</button>
+            </form>
+          {:else}
+            <button
+              type="button"
+              class={itemClass}
+              disabled={!editor || !styles.registry}
+              onmousedown={keepSelection}
+              onclick={() => (creating = true)}
+            >
+              New style from selection
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/StylesGallery.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    /**
+     * `dropdown` (default): a button showing the current style that opens the
+     * list. `gallery`: the styles are always shown, in a row.
+     */
+    variant?: "dropdown" | "gallery";
+    /** List every available paragraph style instead of the gallery (quick) styles. */
+    showAllStyles?: boolean;
+    /** Show the "Update to match selection" and "New style from selection" actions. Defaults to `true`. */
+    showActions?: boolean;
+    /** Preview each style's font, weight, style and color in its entry. Defaults to `true`. */
+    preview?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after a style is applied, updated or created. */
+    onchange?: (event: {
+        type: "apply" | "update" | "create";
+        id: string;
+    }) => void;
+}
+declare const StylesGallery: import("svelte").Component<Props, {}, "">;
+type StylesGallery = ReturnType<typeof StylesGallery>;
+export default StylesGallery;
+//# sourceMappingURL=StylesGallery.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StylesGallery.svelte.d.ts","sourceRoot":"","sources":["../src/StylesGallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uGAAuG;IACvG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjF;AAgHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,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"}