@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor → editor}/sidebar/color-sidebar/color-sidebar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import PlusIcon from 'lucide-svelte/icons/plus';
-	// import PaletteIcon from 'lucide-svelte/icons/palette';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	// import PaletteIcon from '@lucide/svelte/icons/palette';
 	import { ColorPicker } from '../../../ui/color-picker/index.js';
 	import * as Popover from '../../../ui/popover/index.js';
 	import * as Tabs from '../../../ui/tabs/index.js';
 	import { cn, createDebouncedCallback } from '../../../../utils.js';
-	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
-	import type { HistoryAction, Gradient, ImageLayer, HtmlLayer } from '../../types.js';
+	import { getEditorContext } from '../../editor.svelte.js';
+	import type { HistoryAction, Gradient, ImageLayer, TextLayer, Layer, Page } from '../../types.js';
 	import SidebarWrapper from '../sidebar-wrapper.svelte';
 	import ColorSidebarGradientPicker from './color-sidebar-gradient-picker.svelte';
 	import ColorSidebarColor from './color-sidebar-color.svelte';
@@ -15,12 +15,12 @@
 		createEditorNotReactive,
 		extractNodeColors,
 		extractSelectionColors,
-	} from '../../layers/types/html/editor/utils.js';
+	} from '../../layers/types/text/editor/utils.js';
 	import { extractBorderColors } from '../../layers/utils.js';
 
 	let open = $state(false);
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -83,17 +83,26 @@
 
 	const currentColor = $derived.by(() => {
 		if (editor.activeSidebarPopup === 'backgroundColor') {
-			return editor.activeSlide.backgroundColor;
+			return editor.activePage.backgroundColor;
 		} else if (editor.activeSidebarPopup === 'textColor') {
-			if ($htmlEditor) {
+			if (editor.activeAction?.type === 'edit') {
 				const colors = extractSelectionColors($htmlEditor);
+				return colors.length === 1
+					? colors[0]
+					: $htmlEditor.getAttributes('textStyle').color || defaultColor;
+			} else {
+				const set = new Set<string>();
+				editor.selectedSimpleLayersNotLocked
+					.filter((layer) => layer.type === 'text')
+					.forEach((layer) => extractNodeColors(layer.html, set));
+				const colors = Array.from(set);
 				if (colors.length === 1) {
-					return $htmlEditor.getAttributes('textStyle').color || defaultColor;
+					return colors[0];
 				}
 			}
 		} else if (editor.activeSidebarPopup === 'borderColor') {
 			const borderColors = extractBorderColors(
-				editor.activeLayers.filter((layer) => layer.type === 'image'),
+				editor.selectedSimpleLayersNotLocked.filter((layer) => layer.type === 'image'),
 			);
 			if (!borderColors) {
 				return defaultColor;
@@ -106,19 +115,21 @@
 	const documentColors = $derived.by(() => {
 		const colorSet = new Set<string>();
 
-		editor.slides.forEach((slide) => {
-			if (slide.backgroundColor) {
-				colorSet.add(slide.backgroundColor);
-			}
-			slide.layers.forEach((layer) => {
-				if (layer.type === 'html') {
-					extractNodeColors(layer.html, colorSet);
-				} else if (layer.type === 'image') {
-					if (layer.borderWidth && layer.borderColor) {
-						colorSet.add(layer.borderColor);
-					}
+		const extractLayerColors = (layer: Layer) => {
+			if (layer.type === 'text') {
+				extractNodeColors(layer.html, colorSet);
+			} else if (layer.type === 'image') {
+				if (layer.borderWidth && layer.borderColor) {
+					colorSet.add(layer.borderColor);
 				}
-			});
+			}
+		};
+
+		editor.pages.forEach((page) => {
+			if (page.backgroundColor) {
+				colorSet.add(page.backgroundColor);
+			}
+			page.layers.forEach((layer) => extractLayerColors(layer));
 		});
 
 		let colorsArray = Array.from(colorSet);
@@ -136,7 +147,7 @@
 
 	let undo: object | null = null;
 	let initialBorderColor: (ImageLayer & { state: ImageLayer })[] | null = null;
-	let initialTextColor: (HtmlLayer & { state: HtmlLayer })[] | null = null;
+	let initialTextColor: (TextLayer & { state: TextLayer })[] | null = null;
 
 	const editorNotReactive = createEditorNotReactive();
 
@@ -149,11 +160,16 @@
 
 		if (editor.activeSidebarPopup === 'backgroundColor') {
 			if (!undo) {
-				undo = { backgroundColor: editor.activeSlide.backgroundColor };
+				undo = { backgroundColor: editor.activePage.backgroundColor };
 			}
 			const redo = { backgroundColor: value };
-			Object.assign(editor.activeSlide, redo);
-			const action: HistoryAction = { type: 'slide', slideId: editor.activeSlide.id, undo, redo };
+			Object.assign(editor.activePage, redo);
+			const action: HistoryAction = {
+				type: 'pageUpdate',
+				pageId: editor.activePage.id,
+				undo,
+				redo,
+			};
 			if (debounce) {
 				debouncedUpdates(action);
 			} else {
@@ -169,103 +185,90 @@
 				}
 			} else {
 				if (!initialTextColor) {
-					initialTextColor = editor.activeLayers
-						.filter((layer) => layer.type === 'html')
+					initialTextColor = editor.selectedSimpleLayersNotLocked
+						.filter((layer) => layer.type === 'text')
 						.map((layer) => ({ ...layer, state: layer }));
 				}
-				const action: HistoryAction = {
-					type: 'layersGroup',
-					actions: initialTextColor.map((layerWithState) => {
-						const { state, ...layer } = layerWithState;
-
-						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
-						if (value === defaultColor) {
-							chain = chain.unsetColor();
-						} else {
-							chain = chain.setColor(value);
-						}
-						chain.run();
-
-						const undo = { html: layer.html };
-						const redo = { html: editorNotReactive.getJSON() };
-						Object.assign(state, redo);
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				};
+				const actions: HistoryAction[] = initialTextColor.map((layerWithState) => {
+					const { state, ...layer } = layerWithState;
+
+					let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+					if (value === defaultColor) {
+						chain = chain.unsetColor();
+					} else {
+						chain = chain.setColor(value);
+					}
+					chain.run();
+
+					const undo = { html: layer.html };
+					const redo = { html: editorNotReactive.getJSON() };
+					Object.assign(state, redo);
+
+					return {
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
+						layer: { id: layer.id, type: layer.type },
+						undo,
+						redo,
+					};
+				});
 				if (debounce) {
-					debouncedUpdates(action);
+					debouncedUpdates(actions);
 				} else {
-					editor.historyPush(action);
+					editor.historyPush(actions);
 					initialTextColor = null;
 				}
 			}
-			if ($htmlEditor) {
-				if (value === defaultColor) {
-					$htmlEditor.chain().focus().unsetColor().run();
-				} else {
-					$htmlEditor.chain().focus().setColor(value).run();
-				}
-			}
 		} else if (editor.activeSidebarPopup === 'borderColor') {
 			if (!initialBorderColor) {
-				initialBorderColor = editor.activeLayers
+				initialBorderColor = editor.selectedSimpleLayersNotLocked
 					.filter((layer) => layer.type === 'image')
 					.filter((layer) => layer.borderWidth)
 					.map((layer) => ({ ...layer, state: layer }));
 			}
-			const action: HistoryAction = {
-				type: 'layersGroup',
-				actions: initialBorderColor.map((layerWithState) => {
-					const { state, ...layer } = layerWithState;
+			const actions: HistoryAction[] = initialBorderColor.map((layerWithState) => {
+				const { state, ...layer } = layerWithState;
 
-					const undo = { borderColor: layer.borderColor };
-					const redo = { borderColor: value };
+				const undo = { borderColor: layer.borderColor };
+				const redo = { borderColor: value };
 
-					Object.assign(state, redo);
+				Object.assign(state, redo);
 
-					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
-						layer: { id: layer.id, type: layer.type },
-						undo,
-						redo,
-					};
-				}),
-			};
+				return {
+					type: 'layerUpdate',
+					pageId: editor.activePage.id,
+					layer: { id: layer.id, type: layer.type },
+					undo,
+					redo,
+				};
+			});
 			if (debounce) {
-				debouncedUpdates(action);
+				debouncedUpdates(actions);
 			} else {
-				editor.historyPush(action);
+				editor.historyPush(actions);
 				initialBorderColor = null;
 			}
 		}
 	};
 
-	const debouncedUpdates = createDebouncedCallback((action) => {
-		console.log('debouncedUpdates', action);
-		editor.historyPush(action);
+	const debouncedUpdates = createDebouncedCallback((actions) => {
+		console.log('debouncedUpdates', actions);
+		editor.historyPush(actions);
 		undo = null;
 	}, 750);
 
 	$effect(() => {
-		const { activeLayers, activeBackground } = editor;
+		const { selectedSimpleLayersNotLocked } = editor;
 		if (editor.activeSidebarPopup === 'backgroundColor') {
-			if (!activeBackground) {
+			if (editor.activeSelection.type !== 'background') {
 				editor.activeSidebarPopup = null;
 			}
 		} else if (editor.activeSidebarPopup === 'borderColor') {
-			if (!activeLayers.some((layer) => layer.type === 'image' && layer.borderWidth)) {
+			if (!selectedSimpleLayersNotLocked.some((layer) => layer.type === 'image')) {
 				editor.activeSidebarPopup = null;
 			}
 		} else if (editor.activeSidebarPopup === 'textColor') {
-			if (!activeLayers.some((layer) => layer.type === 'html')) {
+			if (!selectedSimpleLayersNotLocked.some((layer) => layer.type === 'text')) {
 				editor.activeSidebarPopup = null;
 			}
 		}

package/dist/components/{presentation-editor → editor}/sidebar/font-sidebar/font-sidebar-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import CheckIcon from 'lucide-svelte/icons/check';
-	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { getEditorContext } from '../../editor.svelte.js';
 	import { onMount } from 'svelte';
 	import { Button, type ButtonProps } from '../../../ui/button/index.js';
 
@@ -11,7 +11,7 @@
 
 	let { family, active, ...restProps }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	onMount(() => {
 		editor.loadFont(family);

package/dist/components/{presentation-editor → editor}/sidebar/font-sidebar/font-sidebar.svelte

@@ -1,25 +1,23 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-	import SearchIcon from 'lucide-svelte/icons/search';
-	import BackIcon from 'lucide-svelte/icons/arrow-left';
-	import DocumentIcon from 'lucide-svelte/icons/file-text';
-	import PopularIcon from 'lucide-svelte/icons/chart-no-axes-combined';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import BackIcon from '@lucide/svelte/icons/arrow-left';
+	import DocumentIcon from '@lucide/svelte/icons/file-text';
+	import PopularIcon from '@lucide/svelte/icons/chart-no-axes-combined';
 	import { InfiniteLoader, LoaderState } from '../../../ui/infinite-loader/index.js';
 	import { Input } from '../../../ui/input/index.js';
 	import { Button } from '../../../ui/button/index.js';
 	import { Separator } from '../../../ui/separator/index.js';
 	import { cn } from '../../../../utils.js';
-	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../editor.svelte.js';
 	import SidebarWrapper from '../sidebar-wrapper.svelte';
 	import {
 		createEditorNotReactive,
 		extractNodeFonts,
 		extractSelectionFonts,
-	} from '../../layers/types/html/editor/utils.js';
+	} from '../../layers/types/text/editor/utils.js';
 	import FontSidebarButton from './font-sidebar-button.svelte';
-	import { applyHtmlToLayer } from '../../layers/utils.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let { htmlEditor } = editor;
 
@@ -29,14 +27,16 @@
 
 	const fonts = Object.keys(editor.fonts).map(mapFont);
 
-	let htmlLayers = $derived(editor.activeLayers.filter((layer) => layer.type === 'html'));
+	let textLayers = $derived(
+		editor.selectedSimpleLayersNotLocked.filter((layer) => layer.type === 'text'),
+	);
 
 	const currentFonts = $derived.by(() => {
 		if (editor.activeAction?.type === 'edit') {
 			return extractSelectionFonts($htmlEditor);
 		} else {
 			const set = new Set<string>();
-			htmlLayers.forEach((layer) => extractNodeFonts(layer.html, set));
+			textLayers.forEach((layer) => extractNodeFonts(layer.html, set));
 			return Array.from(set);
 		}
 	});
@@ -44,9 +44,9 @@
 	const documentFonts = $derived.by(() => {
 		const fontsSet = new Set<string>();
 
-		editor.slides.forEach((slide) => {
-			slide.layers.forEach((layer) => {
-				if (layer.type === 'html') {
+		editor.pages.forEach((page) => {
+			page.layers.forEach((layer) => {
+				if (layer.type === 'text') {
 					extractNodeFonts(layer.html).forEach(fontsSet.add, fontsSet);
 				}
 			});
@@ -66,36 +66,31 @@
 		if (editor.activeAction?.type === 'edit') {
 			$htmlEditor.commands.setFontFamily(family);
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					htmlLayers.map(async (layer) => {
-						editorNotReactive
-							.chain()
-							.setContent(layer.html)
-							.selectAll()
-							.setFontFamily(family)
-							.run();
-
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
+			editor.historyPush(
+				(
+					await Promise.all(
+						textLayers.map(async (layer) => {
+							editorNotReactive
+								.chain()
+								.setContent(layer.html)
+								.selectAll()
+								.setFontFamily(family)
+								.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
 		}
 	};
 
 	$effect(() => {
 		if (editor.activeSidebarPopup === 'font') {
-			if (!editor.activeLayers.some((layer) => layer.type === 'html')) {
+			if (!editor.selectedSimpleLayersNotLocked.some((layer) => layer.type === 'text')) {
 				editor.activeSidebarPopup = null;
 			}
 		}

package/dist/components/editor/sidebar/image-crop-sidebar.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import { Button } from '../../ui/button/index.js';
+	import { Slider } from '../../ui/slider/index.js';
+	import { Input } from '../../ui/input/index.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import {
+		calculateImageLayerPropsForImageRotate,
+		calculateRelativeRects,
+	} from '../layers/utils.js';
+	import type { ImageLayer } from '../types.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = $derived(getEditorContext());
+
+	let value = $derived(Math.round(layer.imageRotate * 10) / 10);
+	let originalLayer = $derived(
+		editor.selectedLayersNotLocked.find((l) => l.id === layer.id),
+	) as ImageLayer;
+
+	const min = -180;
+	const max = 180;
+	const step = 0.1;
+
+	let layerCache: ImageLayer | null = $state.snapshot(null);
+
+	const setImageRotate = (value: string | number) => {
+		value = Number(value);
+		if (!layerCache) {
+			layerCache = $state.snapshot(layer);
+		}
+		const props = calculateImageLayerPropsForImageRotate(layerCache, value);
+		Object.assign(layer, props);
+	};
+
+	const applyChanges = () => {
+		if (!originalLayer) return;
+		const relativeLayer = editor.activeGroupAndChild
+			? (calculateRelativeRects(editor.activeGroupAndChild.groupLayer, [layer])[0] as ImageLayer)
+			: layer;
+		// Define keys to check for changes in image layer properties
+		const imageLayerKeys: (keyof ImageLayer)[] = [
+			'imageRotate', // Rotation angle of the image
+			'scale', // Scale/zoom level
+			'width', // Width dimension
+			'height', // Height dimension
+			'offsetX', // X offset position
+			'offsetY', // Y offset position
+		];
+
+		// Filter keys that have different values between original and relative layers
+		const changedKeys = imageLayerKeys.filter((key) => originalLayer[key] !== relativeLayer[key]);
+		if (changedKeys.length > 0) {
+			editor.historyPush({
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: layer.id, type: layer.type },
+				undo: Object.fromEntries(changedKeys.map((key) => [key, originalLayer[key]])),
+				redo: Object.fromEntries(changedKeys.map((key) => [key, relativeLayer[key]])),
+			});
+		}
+		editor.imageCropLayer = null;
+	};
+
+	$effect(() => {
+		if (!originalLayer) {
+			editor.imageCropLayer = null;
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col gap-2">
+	<div class="flex items-center justify-between">
+		<div class="text-sm font-bold">Crop</div>
+		<Button variant="ghost" size="icon" onclick={() => (editor.imageCropLayer = null)}>
+			<XIcon />
+		</Button>
+	</div>
+	<div class="flex-1 resize-none overflow-y-auto">
+		<div class="flex items-center gap-2">
+			<div class="grow">
+				<Slider
+					type="single"
+					{value}
+					{min}
+					{max}
+					{step}
+					onValueChange={(value) => setImageRotate(value)}
+					onValueCommit={() => (layerCache = null)}
+				/>
+			</div>
+			<Input
+				class="w-12 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
+				inputmode="decimal"
+				placeholder="--"
+				{value}
+				onchange={(e) => setImageRotate(e.currentTarget.value)}
+			/>
+		</div>
+		<div class="flex justify-end gap-2 p-2">
+			<Button class="flex-1" variant="outline" onclick={() => (editor.imageCropLayer = null)}>
+				Cancel
+			</Button>
+			<Button class="flex-1" onclick={applyChanges}>Done</Button>
+		</div>
+	</div>
+</div>

package/dist/components/editor/sidebar/image-crop-sidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ImageLayer } from '../types.js';
+interface Props {
+    layer: ImageLayer;
+}
+declare const ImageCropSidebar: import("svelte").Component<Props, {}, "">;
+type ImageCropSidebar = ReturnType<typeof ImageCropSidebar>;
+export default ImageCropSidebar;

package/dist/components/{presentation-editor/sidebar/position-slidebar.svelte → editor/sidebar/position-sidebar.svelte}

@@ -1,33 +1,35 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
-	import { dndzone } from 'svelte-dnd-action';
-	import XIcon from 'lucide-svelte/icons/x';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import XIcon from '@lucide/svelte/icons/x';
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import {
 		LayerButton,
 		LayerThumbWrapper,
-		HtmlLayerContent,
+		TextLayerContent,
 		ImageLayerContent,
 		BackgroundLayerContent,
+		GroupLayerContent,
 	} from '../layers/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 	import LayerMenuContent from '../menu/layer-menu-content.svelte';
 	import BackgroundMenuContent from '../menu/background-menu-content.svelte';
+	import type { Layer } from '../types.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = $derived(getEditorContext());
 
 	const flipDurationMs = 300;
 	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
 
-	function handleDndConsider(e) {
-		editor.activeSlide.layers = e.detail.items;
+	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
+		editor.rootLayers = e.detail.items;
 	}
 
-	async function handleDndFinalize(e) {
+	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
 		console.log('handleDndFinalize', e);
 
-		editor.activeSlide.layers = e.detail.items;
+		editor.rootLayers = e.detail.items;
 
 		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
 		const item = e.detail.items[index];
@@ -51,8 +53,8 @@
 
 		if (redo) {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: item.id, type: item.type },
 				undo: { sortOrder: item.sortOrder },
 				redo,
@@ -61,7 +63,7 @@
 	}
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex h-full flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div class="text-sm font-bold">Position</div>
 		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
@@ -75,27 +77,31 @@
 				class="flex flex-col-reverse gap-2"
 				aria-label="Layers"
 				use:dndzone={{
-					items: editor.activeSlide.layers,
-					dragDisabled: editor.activeSlide.locked,
+					items: editor.rootLayers,
+					dragDisabled: editor.activePage.locked,
 					...otherOptions,
 				}}
 				onconsider={handleDndConsider}
 				onfinalize={handleDndFinalize}
 			>
-				{#each editor.activeSlide.layers as layer (layer.id)}
+				{#each editor.rootLayers as layer (layer.id)}
 					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
 						<ContextMenu.Root
 							onOpenChange={(open) =>
-								open && !editor.activeLayerIds.has(layer.id) && editor.setActiveLayers(layer.id)}
+								open &&
+								!editor.activeLayers.find((l) => l.id === layer.id) &&
+								editor.setActiveLayers(layer.id)}
 						>
 							<ContextMenu.Trigger>
 								<LayerButton {layer}>
 									<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
 										{#snippet children({ thumbScale })}
-											{#if layer.type === 'html'}
-												<HtmlLayerContent {layer} {thumbScale} />
+											{#if layer.type === 'text'}
+												<TextLayerContent {layer} {thumbScale} />
 											{:else if layer.type === 'image'}
 												<ImageLayerContent {layer} {thumbScale} />
+											{:else if layer.type === 'group'}
+												<GroupLayerContent page={editor.activePage} {layer} {thumbScale} />
 											{/if}
 										{/snippet}
 									</LayerThumbWrapper>
@@ -117,12 +123,12 @@
 							style:width="{editor.width * thumbScale}px"
 							style:height="{editor.height * thumbScale}px"
 						>
-							<BackgroundLayerContent slide={editor.activeSlide} {thumbScale} />
+							<BackgroundLayerContent page={editor.activePage} {thumbScale} />
 						</div>
 					</LayerButton>
 				</ContextMenu.Trigger>
 				<ContextMenu.Content class="w-72">
-					<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+					<BackgroundMenuContent {editor} page={editor.activePage} />
 				</ContextMenu.Content>
 			</ContextMenu.Root>
 		</div>

package/dist/components/editor/sidebar/position-sidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PositionSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type PositionSidebar = ReturnType<typeof PositionSidebar>;
+export default PositionSidebar;