@peteai/presentation-editor 0.0.6 → 0.0.8

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,9 @@
 
 	let { viewportRef = $bindable(null), wrapperRef = $bindable(null) }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
+
+	let pageRef: HTMLDivElement | null = $state(null);
 
 	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
 
@@ -37,7 +40,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 bind:this={pageRef} class="relative flex flex-col items-center">
 						<div
 							class="m-0 overflow-hidden shadow-xl"
 							style:width="{scaledWidth}px"
@@ -55,17 +58,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,18 +78,22 @@
 							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}
 
-							<ActiveLayers />
+							{#if viewportRef && pageRef}
+								<ActiveLayers {viewportRef} {wrapperRef} {pageRef} />
+							{/if}
 
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
 						</div>

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;

package/dist/components/{presentation-editor/slides-navigation/slide-preview.svelte → editor/pages-navigation/pages-navigation-item.svelte}

@@ -1,30 +1,25 @@
 <script lang="ts">
 	import { dragHandle } from 'svelte-dnd-action';
-	import PlusIcon from 'lucide-svelte/icons/plus';
-	import EllipsisIcon from 'lucide-svelte/icons/ellipsis';
-	import IconLocked from 'lucide-svelte/icons/lock-keyhole';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import IconLocked from '@lucide/svelte/icons/lock-keyhole';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import {
-		BackgroundLayerContent,
-		HtmlLayerContent,
-		ImageLayerContent,
-		LayerThumbWrapper,
-	} from '../layers/index.js';
 	import { cn } from '../../../utils.js';
-	import type { PresentationEditor } from '../presentation-editor.svelte.js';
-	import type { Slide } from '../types.js';
-	import SlidePreviewMenuContent from '../menu/slide-menu-content.svelte';
+	import type { Editor } from '../editor.svelte.js';
+	import type { Page } from '../types.js';
+	import PagePreviewMenuContent from '../menu/page-menu-content.svelte';
+	import PagePreview from './page-preview.svelte';
 
 	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
+		editor: Editor;
+		page: Page;
 		index: number;
 		thumbScale: number;
 	}
 
-	let { editor, slide, index, thumbScale }: Props = $props();
+	let { editor, page, index, thumbScale }: Props = $props();
 
 	let menuOpen = $state(false);
 </script>
@@ -43,7 +38,7 @@
 					variant="outline"
 					size="icon-xs"
 					class="my-1 h-6 w-6 rounded-full"
-					onclick={() => editor.addSlide({ index })}
+					onclick={() => editor.addPage({ index })}
 				>
 					<PlusIcon class="h-4 w-4" />
 				</Button>
@@ -52,7 +47,7 @@
 	</div>
 	<div class="group relative mx-2 my-1 transition-transform">
 		<div use:dragHandle role="none">
-			<button class="block" onclick={() => editor.setActiveSlide(slide.id)}>
+			<button class="block" onclick={() => editor.setActivePage(page.id)}>
 				<ContextMenu.Root>
 					<ContextMenu.Trigger>
 						<div
@@ -60,40 +55,25 @@
 								'relative',
 								{
 									'after:absolute after:inset-0 after:rounded-xl after:border-2':
-										editor.activeSlide.id === slide.id,
+										editor.activePage.id === page.id,
 								},
-								editor.slideSelected ? 'after:border-primary' : 'after:border-gray-400',
+								editor.pageSelected ? 'after:border-primary' : 'after:border-gray-400',
 							)}
 						>
 							<div
 								class="relative overflow-hidden rounded-lg bg-white"
-								style:clip-path={editor.activeSlide.id === slide.id
+								style:clip-path={editor.activePage.id === page.id
 									? 'inset(5px round 8px)'
 									: 'inset(0px round 10px)'}
 								style:width="{editor.width * thumbScale}px"
 								style:height="{editor.height * thumbScale}px"
 							>
-								<div class="absolute inset-0 overflow-hidden">
-									<div class="h-full w-full">
-										<BackgroundLayerContent {slide} {thumbScale} />
-									</div>
-								</div>
-								{#each slide.layers as layer (layer.id)}
-									<LayerThumbWrapper {layer} thumb={thumbScale}>
-										{#snippet children({ thumbScale })}
-											{#if layer.type === 'html'}
-												<HtmlLayerContent {layer} {thumbScale} />
-											{:else if layer.type === 'image'}
-												<ImageLayerContent {layer} {thumbScale} />
-											{/if}
-										{/snippet}
-									</LayerThumbWrapper>
-								{/each}
+								<PagePreview {page} {thumbScale} />
 							</div>
 						</div>
 					</ContextMenu.Trigger>
 					<ContextMenu.Content class="w-72">
-						<SlidePreviewMenuContent {editor} {slide} />
+						<PagePreviewMenuContent {editor} {page} />
 					</ContextMenu.Content>
 				</ContextMenu.Root>
 			</button>
@@ -102,15 +82,15 @@
 			class={cn(
 				'pointer-events-none absolute z-10 flex flex-col-reverse flex-wrap overflow-hidden',
 			)}
-			style:inset={editor.activeSlide.id === slide.id ? '5px' : '0'}
-			style:border-radius={editor.activeSlide.id === slide.id ? '8px' : '10px'}
+			style:inset={editor.activePage.id === page.id ? '5px' : '0'}
+			style:border-radius={editor.activePage.id === page.id ? '8px' : '10px'}
 		>
 			<div
 				class="flex h-8 min-h-5 w-fit max-w-full items-end overflow-hidden rounded-bl-md rounded-br-md"
 				style:background={`radial-gradient(100% 120% at 0% 120%, rgba(255, 255, 255, 0.8) 55%, rgba(0, 0, 0, 0))`}
 			>
 				<div class="relative flex h-5 items-center px-2">
-					{#if slide.locked}
+					{#if page.locked}
 						<IconLocked class="mr-1 size-4" />
 					{/if}
 					<p class="text-xs font-semibold">{index + 1}</p>
@@ -135,7 +115,7 @@
 				</DropdownMenu.Trigger>
 
 				<DropdownMenu.Content class="w-72" side="top" align="start" trapFocus={false}>
-					<SlidePreviewMenuContent {editor} {slide} />
+					<PagePreviewMenuContent {editor} {page} />
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</div>

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

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

package/dist/components/{presentation-editor/slides-navigation/slides-navigation.svelte → editor/pages-navigation/pages-navigation.svelte}

@@ -1,33 +1,38 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
-	import { dragHandleZone } from 'svelte-dnd-action';
-	import PlusIcon from 'lucide-svelte/icons/plus';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import SlidePreview from './slide-preview.svelte';
+	import { dragHandleZone, type DndEvent } from 'svelte-dnd-action';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import type { Editor } from '../editor.svelte.js';
+	import type { Page } from '../types.js';
+	import PagesNavigationItem from './pages-navigation-item.svelte';
 
-	const editor = getPresentationEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const height = 72;
 
 	let thumbScale = $derived(height / editor.height);
 
 	const flipDurationMs = 300;
-	const otherOptions = { flipDurationMs, type: 'slides', dropTargetStyle: {} };
+	const otherOptions = { flipDurationMs, type: 'pages', dropTargetStyle: {} };
 
-	function handleDndConsider(e) {
-		editor.slides = e.detail.items;
+	function handleDndConsider(e: CustomEvent<DndEvent<Page>>) {
+		editor.sortedPages = e.detail.items;
 	}
 
-	async function handleDndFinalize(e) {
+	async function handleDndFinalize(e: CustomEvent<DndEvent<Page>>) {
 		console.log('handleDndFinalize', e);
 
-		editor.slides = e.detail.items;
+		editor.sortedPages = e.detail.items;
 
-		const index = editor.findSlideIndex(e.detail.info.id);
-		const item = editor.slides[index];
+		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
+		const item = e.detail.items[index];
 
-		const prev = editor.slides[index - 1];
-		const next = editor.slides[index + 1];
+		const prev = e.detail.items[index - 1];
+		const next = e.detail.items[index + 1];
 
 		// const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
 		// const item = e.detail.items[index];
@@ -51,8 +56,8 @@
 
 		if (redo) {
 			editor.historyPush({
-				type: 'slide',
-				slideId: item.id,
+				type: 'pageUpdate',
+				pageId: item.id,
 				undo: { sortOrder: item.sortOrder },
 				redo,
 			});
@@ -64,18 +69,18 @@
 	<div class="flex w-fit max-w-full overflow-x-auto">
 		<section
 			class="flex"
-			aria-label="Slides"
-			use:dragHandleZone={{ items: editor.slides, ...otherOptions }}
+			aria-label="Pages"
+			use:dragHandleZone={{ items: editor.sortedPages, ...otherOptions }}
 			onconsider={handleDndConsider}
 			onfinalize={handleDndFinalize}
 		>
-			{#each editor.slides as slide, index (slide.id)}
+			{#each editor.sortedPages as page, index (page.id)}
 				<div
 					class="relative py-2"
 					aria-label="Page {index + 1}"
 					animate:flip={{ duration: flipDurationMs }}
 				>
-					<SlidePreview {editor} {slide} {index} {thumbScale} />
+					<PagesNavigationItem {editor} {page} {index} {thumbScale} />
 				</div>
 			{/each}
 		</section>
@@ -83,7 +88,7 @@
 			<button
 				class="mx-2 my-1 rounded-xl"
 				aria-label="New Page"
-				onclick={() => editor.addSlide({ index: editor.slides.length })}
+				onclick={() => editor.addPage({ index: editor.pages.length })}
 			>
 				<div
 					class="relative flex items-center justify-center overflow-hidden rounded-lg bg-gray-400"

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SettingsIcon from 'lucide-svelte/icons/settings-2';
+	import SettingsIcon from '@lucide/svelte/icons/settings-2';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { ColorIndicator } from '../../color-indicator/index.js';
 	import { ColorPickerAlphaGrid } from '../../../ui/color-picker/index.js';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
-	import PlusIcon from 'lucide-svelte/icons/plus';
+	import XIcon from '@lucide/svelte/icons/x';
+	import PlusIcon from '@lucide/svelte/icons/plus';
 	import { Button, buttonVariants } from '../../../ui/button/index.js';
 	import { ColorIndicator } from '../../color-indicator/index.js';
 	import { ColorPicker, ColorPickerAlphaGrid } from '../../../ui/color-picker/index.js';