@peteai/presentation-editor 0.0.5 → 0.0.7

package/dist/components/{presentation-editor → editor}/menu/layer-menu-content.svelte

@@ -1,34 +1,37 @@
 <script lang="ts">
-	import CopyIcon from 'lucide-svelte/icons/copy';
-	import PasteIcon from 'lucide-svelte/icons/clipboard';
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import LayerIcon from 'lucide-svelte/icons/layers';
-	import LayerBringForwardIcon from 'lucide-svelte/icons/arrow-up';
-	import LayerBringToFrontIcon from 'lucide-svelte/icons/arrow-up-to-line';
-	import LayerSendBackwardIcon from 'lucide-svelte/icons/arrow-down';
-	import LayerSendToBackIcon from 'lucide-svelte/icons/arrow-down-to-line';
-	import AlignLeftIcon from 'lucide-svelte/icons/align-start-vertical';
-	import AlignCenterIcon from 'lucide-svelte/icons/align-center-vertical';
-	import AlignRightIcon from 'lucide-svelte/icons/align-end-vertical';
-	import AlignTopIcon from 'lucide-svelte/icons/align-start-horizontal';
-	import AlignMiddleIcon from 'lucide-svelte/icons/align-center-horizontal';
-	import AlignBottomIcon from 'lucide-svelte/icons/align-end-horizontal';
-	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
-	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
-	import SetAsBackgroundIcon from 'lucide-svelte/icons/image-upscale';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import PasteIcon from '@lucide/svelte/icons/clipboard';
+	import DuplicateIcon from '@lucide/svelte/icons/copy-plus';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import LayerIcon from '@lucide/svelte/icons/layers';
+	import LayerBringForwardIcon from '@lucide/svelte/icons/arrow-up';
+	import LayerBringToFrontIcon from '@lucide/svelte/icons/arrow-up-to-line';
+	import LayerSendBackwardIcon from '@lucide/svelte/icons/arrow-down';
+	import LayerSendToBackIcon from '@lucide/svelte/icons/arrow-down-to-line';
+	import AlignLeftIcon from '@lucide/svelte/icons/align-start-vertical';
+	import AlignCenterIcon from '@lucide/svelte/icons/align-center-vertical';
+	import AlignRightIcon from '@lucide/svelte/icons/align-end-vertical';
+	import AlignTopIcon from '@lucide/svelte/icons/align-start-horizontal';
+	import AlignMiddleIcon from '@lucide/svelte/icons/align-center-horizontal';
+	import AlignBottomIcon from '@lucide/svelte/icons/align-end-horizontal';
+	import GroupIcon from '@lucide/svelte/icons/group';
+	import UngroupIcon from '@lucide/svelte/icons/ungroup';
+	import LockIcon from '@lucide/svelte/icons/lock-keyhole';
+	import UnlockIcon from '@lucide/svelte/icons/lock-keyhole-open';
+	import SetAsBackgroundIcon from '@lucide/svelte/icons/image-upscale';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 	import { checkIfMac } from '../../../utils.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const someLayersLocked = $derived(editor.activeLayers.some((layer) => layer.locked));
-	const locked = $derived(editor.activeSlide.locked || someLayersLocked);
+	const locked = $derived(editor.activePage.locked || someLayersLocked);
 
 	const isMac = checkIfMac();
 
 	const activeLayerIds = $derived(editor.activeLayers.map((l) => l.id));
+	const selectedLayerIds = $derived(editor.selectedLayers.map((l) => l.id));
 
 	const singleImageLayer = $derived(
 		editor.activeLayers.length === 1 && editor.activeLayers[0].type === 'image'
@@ -36,10 +39,10 @@
 			: null,
 	);
 
-	let overlaps = editor.getLayerOverlaps(editor.activeSlide, editor.activeLayers);
+	let overlaps = editor.getLayerOverlaps(editor.activePage, editor.activeLayers);
 </script>
 
-<DropdownMenu.Item onclick={() => editor.copyLayers(editor.activeSlide.id, activeLayerIds)}>
+<DropdownMenu.Item onclick={() => editor.copyLayers(editor.activePage.id, activeLayerIds)}>
 	<CopyIcon />
 	Copy
 	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
@@ -55,7 +58,7 @@
 	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 <DropdownMenu.Item
-	onclick={() => editor.removeLayers(editor.activeSlide.id, activeLayerIds)}
+	onclick={() => editor.removeLayers(editor.activePage.id, selectedLayerIds)}
 	disabled={locked}
 >
 	<TrashIcon />
@@ -74,7 +77,7 @@
 		<DropdownMenu.SubContent class="w-56" align="start">
 			<DropdownMenu.Item
 				disabled={overlaps.forward === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'forward')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'forward')}
 			>
 				<LayerBringForwardIcon />
 				Bring forward
@@ -82,7 +85,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.front === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'front')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'front')}
 			>
 				<LayerBringToFrontIcon />
 				Bring to front
@@ -90,7 +93,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.backward === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'backward')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'backward')}
 			>
 				<LayerSendBackwardIcon />
 				Send backward
@@ -98,7 +101,7 @@
 			</DropdownMenu.Item>
 			<DropdownMenu.Item
 				disabled={overlaps.back === undefined}
-				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'back')}
+				onclick={() => editor.moveLayers(editor.activePage.id, activeLayerIds, 'back')}
 			>
 				<LayerSendToBackIcon />
 				Send to back
@@ -115,38 +118,38 @@
 	</DropdownMenu.SubTrigger>
 	<DropdownMenu.SubContent class="w-32" align="start">
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'left')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'left')}
 		>
 			<AlignLeftIcon />
 			Left
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'center')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'center')}
 		>
 			<AlignCenterIcon />
 			Center
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'right')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'right')}
 		>
 			<AlignRightIcon />
 			Right
 		</DropdownMenu.Item>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'top')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'top')}
 		>
 			<AlignTopIcon />
 			Top
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'middle')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'middle')}
 		>
 			<AlignMiddleIcon />
 			Middle
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'bottom')}
+			onclick={() => editor.alignLayers(editor.activePage.id, activeLayerIds, 'bottom')}
 		>
 			<AlignBottomIcon />
 			Bottom
@@ -156,10 +159,31 @@
 
 <DropdownMenu.Separator />
 
+{#if editor.activeLayers.length > 1}
+	<DropdownMenu.Item
+		onclick={() => editor.groupLayers(editor.activePage.id, activeLayerIds)}
+		disabled={locked}
+	>
+		<GroupIcon />
+		Group
+		<DropdownMenu.Shortcut>{isMac ? '⌘G' : 'Ctrl+G'}</DropdownMenu.Shortcut>
+	</DropdownMenu.Item>
+{/if}
+
+{#if editor.activeLayers.every((layer) => layer.type === 'group')}
+	<DropdownMenu.Item
+		onclick={() => editor.ungroupLayers(editor.activePage.id, activeLayerIds)}
+		disabled={locked}
+	>
+		<UngroupIcon />
+		Ungroup
+		<DropdownMenu.Shortcut>{isMac ? '⇧⌘G' : 'Ctrl+Shift+G'}</DropdownMenu.Shortcut>
+	</DropdownMenu.Item>
+{/if}
+
 <DropdownMenu.Item
-	onclick={() =>
-		editor.toggleLayersLocked(editor.activeSlide.id, activeLayerIds, !someLayersLocked)}
-	disabled={editor.activeSlide.locked}
+	onclick={() => editor.toggleLayersLocked(editor.activePage.id, activeLayerIds, !someLayersLocked)}
+	disabled={editor.activePage.locked}
 >
 	{#if someLayersLocked}
 		<UnlockIcon />
@@ -174,7 +198,7 @@
 {#if singleImageLayer}
 	<DropdownMenu.Separator />
 	<DropdownMenu.Item
-		onclick={() => editor.imageLayerToBackground(editor.activeSlide.id, singleImageLayer.id)}
+		onclick={() => editor.imageLayerToBackground(editor.activePage.id, singleImageLayer.id)}
 		disabled={locked}
 	>
 		<SetAsBackgroundIcon />

package/dist/components/{presentation-editor/menu/slide-menu-content.svelte → editor/menu/page-menu-content.svelte}

@@ -1,29 +1,29 @@
 <script lang="ts">
-	import CopyIcon from 'lucide-svelte/icons/copy';
-	import PasteIcon from 'lucide-svelte/icons/clipboard';
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import AddIcon from 'lucide-svelte/icons/file-plus-2';
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
-	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import PasteIcon from '@lucide/svelte/icons/clipboard';
+	import DuplicateIcon from '@lucide/svelte/icons/copy-plus';
+	import AddIcon from '@lucide/svelte/icons/file-plus-2';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import LockIcon from '@lucide/svelte/icons/lock-keyhole';
+	import UnlockIcon from '@lucide/svelte/icons/lock-keyhole-open';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import type { PresentationEditor } from '../presentation-editor.svelte.js';
-	import type { Slide } from '../types.js';
+	import type { Editor } from '../editor.svelte.js';
+	import type { Page } from '../types.js';
 	import { checkIfMac } from '../../../utils.js';
 
 	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
+		editor: Editor;
+		page: Page;
 	}
 
-	let { editor, slide }: Props = $props();
+	let { editor, page }: Props = $props();
 
-	const locked = $derived(slide.locked);
+	const locked = $derived(page.locked);
 
 	const isMac = checkIfMac();
 </script>
 
-<DropdownMenu.Item onclick={() => editor.copySlide(slide.id)}>
+<DropdownMenu.Item onclick={() => editor.copyPage(page.id)}>
 	<CopyIcon />
 	Copy
 	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
@@ -35,19 +35,19 @@
 	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 
-<DropdownMenu.Item onclick={() => editor.addSlide()}>
+<DropdownMenu.Item onclick={() => editor.addPage()}>
 	<AddIcon />
 	Add page
 	<DropdownMenu.Shortcut>{isMac ? '⌘⏎' : 'Ctrl+⏎'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 
-<DropdownMenu.Item onclick={() => editor.duplicateSlide(slide)}>
+<DropdownMenu.Item onclick={() => editor.duplicatePage(page)}>
 	<DuplicateIcon />
 	Duplicate page
 	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 
-<DropdownMenu.Item onclick={() => editor.removeSlide(slide.id)} disabled={locked}>
+<DropdownMenu.Item onclick={() => editor.removePage(page.id)} disabled={locked}>
 	<TrashIcon />
 	Delete page
 	<DropdownMenu.Shortcut>DELETE</DropdownMenu.Shortcut>
@@ -55,8 +55,8 @@
 
 <DropdownMenu.Separator />
 
-<DropdownMenu.Item onclick={() => editor.toggleSlideLocked(slide.id)}>
-	{#if slide.locked}
+<DropdownMenu.Item onclick={() => editor.togglePageLocked(page.id)}>
+	{#if page.locked}
 		<UnlockIcon />
 		Unlock page
 	{:else}

package/dist/components/editor/menu/page-menu-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '../editor.svelte.js';
+import type { Page } from '../types.js';
+interface Props {
+    editor: Editor;
+    page: Page;
+}
+declare const PageMenuContent: import("svelte").Component<Props, {}, "">;
+type PageMenuContent = ReturnType<typeof PageMenuContent>;
+export default PageMenuContent;

package/dist/components/{presentation-editor/slide-editor.svelte → editor/page-editor.svelte}

@@ -5,13 +5,14 @@
 		ActiveLayerBorder,
 		LayerWrapper,
 		BackgroundLayer,
-		HtmlLayer,
+		TextLayer,
 		ImageLayer,
 		ActiveBackgroundBorder,
+		GroupLayer,
 	} from './layers/index.js';
 	import type { ActiveLayerGuide } from './types.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
-	import SlideInner from './slide-inner.svelte';
+	import { getEditorContext } from './editor.svelte.js';
+	import PageInner from './page-inner.svelte';
 	import ActiveLayers from './active-layers.svelte';
 	import SnappingGuides from './snapping-guides.svelte';
 
@@ -22,7 +23,7 @@
 
 	let { viewportRef = $bindable(null), wrapperRef = $bindable(null) }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
 
@@ -37,7 +38,7 @@
 		<div class="flex min-h-full flex-1">
 			<div class="box-border flex w-full shrink-0 items-center justify-center p-0">
 				<div bind:this={wrapperRef} class="translate-x-0 translate-y-0 p-4 transition-transform">
-					<div class="relative flex flex-col items-center" data-slide-container>
+					<div class="relative flex flex-col items-center" data-page-container>
 						<div
 							class="m-0 overflow-hidden shadow-xl"
 							style:width="{scaledWidth}px"
@@ -55,17 +56,15 @@
 									style:height="{editor.height}px"
 								>
 									<BackgroundLayer bind:hoveredLayerId />
-									<SlideInner />
-									{#each editor.activeSlide.layers as layer, i (layer.id)}
-										<LayerWrapper
-											bind:layer={editor.activeSlide.layers[i]}
-											bind:hoveredLayerId
-											bind:activeLayerGuides
-										>
-											{#if editor.activeSlide.layers[i].type === 'html'}
-												<HtmlLayer bind:layer={editor.activeSlide.layers[i]} />
-											{:else if editor.activeSlide.layers[i].type === 'image'}
-												<ImageLayer bind:layer={editor.activeSlide.layers[i]} />
+									<PageInner />
+									{#each editor.rootLayers as layer (layer.id)}
+										<LayerWrapper {layer} bind:hoveredLayerId bind:activeLayerGuides>
+											{#if layer.type === 'text'}
+												<TextLayer {layer} />
+											{:else if layer.type === 'image'}
+												<ImageLayer {layer} />
+											{:else if layer.type === 'group'}
+												<GroupLayer page={editor.activePage} {layer} />
 											{/if}
 										</LayerWrapper>
 									{/each}
@@ -77,14 +76,16 @@
 							style:width="{scaledWidth}px"
 							style:height="{scaledHeight}px"
 						>
-							{#if hoveredLayerId === 'background'}
-								{#if !editor.activeBackground}
-									<ActiveBackgroundBorder />
-								{/if}
-							{:else if hoveredLayerId && !editor.activeLayerIds.has(hoveredLayerId)}
-								{@const layer = editor.activeSlide.layers.find(({ id }) => id === hoveredLayerId)}
-								{#if layer}
-									<ActiveLayerBorder {layer} />
+							{#if hoveredLayerId}
+								{#if hoveredLayerId === 'background'}
+									{#if editor.activeSelection.type !== 'background'}
+										<ActiveBackgroundBorder />
+									{/if}
+								{:else if !editor.activeLayers.find((l) => l.id === hoveredLayerId)}
+									{@const layer = editor.rootLayers.find(({ id }) => id === hoveredLayerId)}
+									{#if layer}
+										<ActiveLayerBorder {layer} />
+									{/if}
 								{/if}
 							{/if}
 

package/dist/components/editor/page-editor.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    viewportRef: HTMLDivElement | null;
+    wrapperRef: HTMLDivElement | null;
+}
+declare const PageEditor: import("svelte").Component<Props, {}, "viewportRef" | "wrapperRef">;
+type PageEditor = ReturnType<typeof PageEditor>;
+export default PageEditor;

package/dist/components/{presentation-editor/slide-inner.svelte → editor/page-inner.svelte}

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
-	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import { getEditorContext } from './editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const inset = Math.round(Math.min(editor.width, editor.height) / 10);
 
 	const onDragEnter = (e: DragEvent) => {
-		console.log('dragenter slide inner', e);
+		console.log('dragenter page inner', e);
 
 		if (editor.dragged) {
 			e.preventDefault();
@@ -23,7 +23,7 @@
 	};
 
 	const onDragOver = (e: DragEvent) => {
-		// console.log('dragover slide inner', e);
+		// console.log('dragover page inner', e);
 		if (editor.dragged) {
 			e.preventDefault();
 			e.stopPropagation();
@@ -31,7 +31,7 @@
 	};
 
 	const onDrop = (e: DragEvent) => {
-		console.log('drop slide inner', e);
+		console.log('drop page inner', e);
 
 		const { dragged } = editor;
 		if (dragged) {

package/dist/components/{presentation-editor/sidebar/sidebar.svelte.d.ts → editor/page-inner.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Sidebar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const PageInner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Sidebar = InstanceType<typeof Sidebar>;
-export default Sidebar;
+type PageInner = InstanceType<typeof PageInner>;
+export default PageInner;

package/dist/components/editor/page.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+	import type { PageOptions } from './types.js';
+	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
+	import { defaultFonts } from './fonts.js';
+	import PagePreview from './pages-navigation/page-preview.svelte';
+
+	const {
+		page,
+		thumbScale = 1,
+		fonts = defaultFonts,
+		loadFont = async (family: string) => {
+			const font = fonts[family];
+			if (!font) return;
+			const WebFont = await import('webfontloader');
+			return new Promise((resolve, reject) => {
+				WebFont.load({
+					[font.type]: { families: [family] },
+					active: () => resolve(),
+					inactive: reject,
+				});
+			});
+		},
+		class: className,
+		...restProps
+	}: PageOptions = $props();
+
+	if (BROWSER) {
+		const fontFamilies = page.layers
+			.filter((layer) => layer.type === 'text')
+			.flatMap((layer) => extractNodeFonts(layer.html));
+		Promise.all(fontFamilies.map(loadFont));
+	}
+
+	let element: HTMLDivElement | null = $state(null);
+
+	let width = 1920 * thumbScale;
+	let height = 1080 * thumbScale;
+
+	let scale = $state(1);
+
+	onMount(() => {
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const scaleX = entry.contentRect.width / width;
+				const scaleY = entry.contentRect.height / height;
+				scale = Math.min(scaleX, scaleY); // preserve aspect ratio
+			}
+		});
+
+		if (element) observer.observe(element);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div class={className} {...restProps}>
+	<div bind:this={element} class="h-full w-full">
+		<div
+			class="relative origin-top-left"
+			style:width="{width}px"
+			style:height="{height}px"
+			style:transform="scale({scale})"
+		>
+			<PagePreview {page} {thumbScale} />
+		</div>
+	</div>
+</div>

package/dist/components/editor/page.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PageOptions } from './types.js';
+declare const Page: import("svelte").Component<PageOptions, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/components/editor/pages-navigation/page-preview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {
+		BackgroundLayerContent,
+		LayerThumbWrapper,
+		TextLayerContent,
+		ImageLayerContent,
+		GroupLayerContent,
+	} from '../layers/index.js';
+	import type { Page } from '../types.js';
+
+	interface Props {
+		page: Page;
+		thumbScale: number;
+	}
+
+	let { page, thumbScale }: Props = $props();
+
+	let rootLayers = $derived(page.layers.filter((l) => l.type === 'group' || !l.groupId));
+</script>
+
+<div class="absolute inset-0 overflow-hidden">
+	<BackgroundLayerContent {page} {thumbScale} />
+</div>
+{#each rootLayers as layer (layer.id)}
+	<LayerThumbWrapper {layer} thumb={thumbScale}>
+		{#snippet children({ thumbScale })}
+			{#if layer.type === 'text'}
+				<TextLayerContent {layer} {thumbScale} />
+			{:else if layer.type === 'image'}
+				<ImageLayerContent {layer} {thumbScale} />
+			{:else if layer.type === 'group'}
+				<GroupLayerContent {page} {layer} {thumbScale} />
+			{/if}
+		{/snippet}
+	</LayerThumbWrapper>
+{/each}

package/dist/components/editor/pages-navigation/page-preview.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Page } from '../types.js';
+interface Props {
+    page: Page;
+    thumbScale: number;
+}
+declare const PagePreview: import("svelte").Component<Props, {}, "">;
+type PagePreview = ReturnType<typeof PagePreview>;
+export default PagePreview;