@peteai/presentation-editor 0.0.9 → 0.0.10

package/dist/components/editor/design.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+	import type { DesignOptions, Page } from './types.js';
+	import { normalizePage } from './editor.svelte.js';
+	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
+	import { defaultFonts } from './fonts.js';
+	import PageWithTransition from './page-with-transition.svelte';
+
+	const {
+		pages: pagesInput,
+		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,
+				});
+			});
+		},
+	}: DesignOptions = $props();
+
+	const pages = pagesInput.map(normalizePage);
+
+	if (BROWSER) {
+		const fontFamilies = pages
+			.flatMap((page) => page.layers)
+			.filter((layer) => layer.type === 'text')
+			.flatMap((layer) => extractNodeFonts(layer.html));
+		Promise.all(fontFamilies.map(loadFont));
+	}
+
+	let element: HTMLDivElement | null = $state(null);
+
+	const width = 1920;
+	const height = 1080;
+
+	let thumbScale = $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;
+				thumbScale = Math.min(scaleX, scaleY); // preserve aspect ratio
+			}
+		});
+
+		if (element) observer.observe(element);
+
+		return () => observer.disconnect();
+	});
+
+	let sortedPages = $derived(pages.sort((a, b) => a.sortOrder - b.sortOrder));
+	let currentPageIndex = $state(0);
+	let page = $derived(sortedPages[currentPageIndex]);
+	let previousPage: Page | undefined = $state();
+
+	const setIndex = (index: number) => {
+		previousPage = page;
+		transition = page.transition;
+		currentPageIndex = index;
+	};
+	let transition = $derived(previousPage?.transition);
+
+	export const prevPage = () => {
+		if (currentPageIndex <= 0) return;
+		setIndex(currentPageIndex - 1);
+	};
+
+	export const nextPage = () => {
+		if (currentPageIndex >= sortedPages.length - 1) return;
+		setIndex(currentPageIndex + 1);
+	};
+
+	export const setPageIndex = (index: number) => {
+		if (index < 0 || index >= sortedPages.length) return;
+		setIndex(index);
+	};
+</script>
+
+<div bind:this={element} class="grid h-full w-full place-items-center">
+	<div style:width="{width * thumbScale}px" style:height="{height * thumbScale}px">
+		{#key page.id}
+			<PageWithTransition {page} {previousPage} {transition} {thumbScale} />
+		{/key}
+	</div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { DesignOptions } from './types.js';
+declare const Design: import("svelte").Component<DesignOptions, {
+    prevPage: () => void;
+    nextPage: () => void;
+    setPageIndex: (index: number) => void;
+}, "">;
+type Design = ReturnType<typeof Design>;
+export default Design;

package/dist/components/editor/editor.svelte

@@ -216,7 +216,7 @@
 <Hotkeys />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="flex h-full w-full select-none" ondragover={onDragOver} ondrop={onDrop}>
+<div class="flex h-full w-full select-none bg-background" ondragover={onDragOver} ondrop={onDrop}>
 	<Sidebar {editor} />
 	<div class="flex h-full flex-1 select-none flex-col overflow-auto">
 		<Dragged {editor} />

package/dist/components/editor/editor.svelte.js

@@ -7,6 +7,12 @@ import { calculateBoundingBox, calculateImageCover, checkPolygonsIntersect, getR
 import createEditor from './layers/types/text/editor/createEditor.js';
 import { extensions } from './layers/types/text/extensions.js';
 import { SvelteSet } from 'svelte/reactivity';
+export const normalizePage = (page) => {
+    return {
+        ...page,
+        transition: page.transition || null,
+    };
+};
 export class Editor {
     mode = 'multiple';
     fonts = defaultFonts;
@@ -125,6 +131,7 @@ export class Editor {
     selectedLayersNotLocked = $derived(this.selectedLayers.filter((layer) => !layer.locked));
     selectedSimpleLayersNotLocked = $derived(this.selectedLayersNotLocked.flatMap((l) => l.type === 'group' ? this.findGroupChildren(this.activePage, l.id) : l));
     activeGroupRotate = $state(0);
+    pageTransitionPreview = $state(null);
     pageSelected = $state(false);
     clipboard = null;
     htmlEditor = createEditor({
@@ -142,11 +149,15 @@ export class Editor {
             const { page, ...rest } = options;
             Object.assign(this, { ...rest });
             if (page) {
-                Object.assign(this, { pages: [page] });
+                Object.assign(this, { pages: [normalizePage(page)] });
             }
         }
         else {
-            Object.assign(this, options);
+            const { pages, ...rest } = options;
+            Object.assign(this, rest);
+            if (pages) {
+                Object.assign(this, { pages: pages.map(normalizePage) });
+            }
         }
         if (!this.pages.length) {
             this.addPage();
@@ -163,6 +174,7 @@ export class Editor {
             backgroundImage: null,
             backgroundLocked: false,
             layers: [],
+            transition: null,
         };
     }
     addPage({ page, index } = {}) {

package/dist/components/editor/header.svelte

@@ -16,7 +16,7 @@
 	let disabled = $derived(!!editor.imageCropLayer);
 </script>
 
-<div class="h-12 w-full border-b border-gray-200 bg-background px-2">
+<div class="h-12 w-full border-b border-gray-200 px-2">
 	<div class="flex h-full items-center justify-between">
 		<div class="grid grid-flow-col items-center gap-2">
 			<Button

package/dist/components/editor/index.d.ts

@@ -1,3 +1,4 @@
 import Editor from './editor.svelte';
+import Design from './design.svelte';
 import Page from './page.svelte';
-export { Editor, Page };
+export { Editor, Design, Page };

package/dist/components/editor/index.js

@@ -1,3 +1,4 @@
 import Editor from './editor.svelte';
+import Design from './design.svelte';
 import Page from './page.svelte';
-export { Editor, Page };
+export { Editor, Design, Page };

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

@@ -15,6 +15,7 @@
 	import PageInner from './page-inner.svelte';
 	import ActiveLayers from './active-layers.svelte';
 	import SnappingGuides from './snapping-guides.svelte';
+	import PageTransitionPreview from './page-transition-preview.svelte';
 
 	interface Props {
 		viewportRef: HTMLDivElement | null;
@@ -96,6 +97,12 @@
 							{/if}
 
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
+
+							{#if editor.pageTransitionPreview}
+								{#key editor.pageTransitionPreview}
+									<PageTransitionPreview {editor} transition={editor.pageTransitionPreview} />
+								{/key}
+							{/if}
 						</div>
 					</div>
 				</div>

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

@@ -5,15 +5,15 @@
 		TextLayerContent,
 		ImageLayerContent,
 		GroupLayerContent,
-	} from '../layers/index.js';
-	import type { Page } from '../types.js';
+	} from './layers/index.js';
+	import type { Page } from './types.js';
 
 	interface Props {
 		page: Page;
-		thumbScale: number;
+		thumbScale?: number;
 	}
 
-	let { page, thumbScale }: Props = $props();
+	let { page, thumbScale = 1 }: Props = $props();
 
 	let rootLayers = $derived(page.layers.filter((l) => l.type === 'group' || !l.groupId));
 </script>

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

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

package/dist/components/editor/page-transition-preview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { PageTransition } from './types.js';
+	import type { Editor } from './editor.svelte.js';
+	import PageWithTransition from './page-with-transition.svelte';
+
+	interface Props {
+		editor: Editor;
+		transition: PageTransition;
+	}
+
+	const { editor, transition }: Props = $props();
+
+	let nextPage = $derived(
+		editor.sortedPages.find((p) => p.sortOrder > editor.activePage.sortOrder),
+	);
+
+	onMount(() => {
+		const timeout = setTimeout(() => {
+			editor.pageTransitionPreview = null;
+		}, transition.duration + 500);
+
+		return () => clearTimeout(timeout);
+	});
+</script>
+
+{#if nextPage}
+	<PageWithTransition
+		page={nextPage}
+		previousPage={editor.activePage}
+		{transition}
+		thumbScale={editor.zoom}
+	/>
+{/if}

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

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

package/dist/components/editor/page-with-transition.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { circleWipe } from '../../transitions/circleWipe.js';
+	import { lineWipe } from '../../transitions/lineWipe.js';
+	import { stack } from '../../transitions/stack.js';
+	import type { Page, PageTransition } from './types.js';
+	import PagePreview from './page-preview.svelte';
+
+	interface Props {
+		page: Page;
+		previousPage?: Page;
+		transition: PageTransition | null | undefined;
+		thumbScale: number;
+	}
+
+	const { page, previousPage, transition, thumbScale }: Props = $props();
+
+	const previousPageTransition = (node: HTMLElement) => {
+		if (!transition) return { duration: 0 };
+		if (transition.type === 'slide') return stack(node, { ...transition, reverse: true });
+		return { duration: 0 };
+	};
+
+	const pageTransition = (node: HTMLElement) => {
+		if (!transition) return { duration: 0 };
+		if (transition.type === 'fade') return fade(node, transition);
+		if (transition.type === 'slide') return stack(node, transition);
+		if (transition.type === 'circleWipe') return circleWipe(node, transition);
+		if (transition.type === 'lineWipe') return lineWipe(node, transition);
+		if (transition.type === 'stack') return stack(node, transition);
+		return { duration: 0 };
+	};
+</script>
+
+<div class="relative h-full w-full overflow-hidden">
+	{#if previousPage}
+		<div class="absolute inset-0">
+			<div in:previousPageTransition|global class="h-full w-full">
+				<PagePreview page={previousPage} {thumbScale} />
+			</div>
+		</div>
+	{/if}
+	<div class="absolute inset-0">
+		<div in:pageTransition|global class="h-full w-full">
+			<PagePreview {page} {thumbScale} />
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,10 @@
+import type { Page, PageTransition } from './types.js';
+interface Props {
+    page: Page;
+    previousPage?: Page;
+    transition: PageTransition | null | undefined;
+    thumbScale: number;
+}
+declare const PageWithTransition: import("svelte").Component<Props, {}, "">;
+type PageWithTransition = ReturnType<typeof PageWithTransition>;
+export default PageWithTransition;

package/dist/components/editor/page.svelte

@@ -2,13 +2,13 @@
 	import { BROWSER } from 'esm-env';
 	import { onMount } from 'svelte';
 	import type { PageOptions } from './types.js';
+	import { normalizePage } from './editor.svelte.js';
 	import { extractNodeFonts } from './layers/types/text/editor/utils.js';
 	import { defaultFonts } from './fonts.js';
-	import PagePreview from './pages-navigation/page-preview.svelte';
+	import PagePreview from './page-preview.svelte';
 
 	const {
-		page,
-		thumbScale = 1,
+		page: pageInput,
 		fonts = defaultFonts,
 		loadFont = async (family: string) => {
 			const font = fonts[family];
@@ -22,10 +22,10 @@
 				});
 			});
 		},
-		class: className,
-		...restProps
 	}: PageOptions = $props();
 
+	const page = normalizePage(pageInput);
+
 	if (BROWSER) {
 		const fontFamilies = page.layers
 			.filter((layer) => layer.type === 'text')
@@ -35,17 +35,17 @@
 
 	let element: HTMLDivElement | null = $state(null);
 
-	let width = 1920 * thumbScale;
-	let height = 1080 * thumbScale;
+	const width = 1920;
+	const height = 1080;
 
-	let scale = $state(1);
+	let thumbScale = $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
+				thumbScale = Math.min(scaleX, scaleY); // preserve aspect ratio
 			}
 		});
 
@@ -55,15 +55,8 @@
 	});
 </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 bind:this={element} class="grid h-full w-full place-items-center">
+	<div class="relative" style:width="{width * thumbScale}px" style:height="{height * thumbScale}px">
+		<PagePreview {page} {thumbScale} />
 	</div>
 </div>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dragHandle } from 'svelte-dnd-action';
 	import PlusIcon from '@lucide/svelte/icons/plus';
+	import ArrowBigRightDashIcon from '@lucide/svelte/icons/arrow-big-right-dash';
 	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
 	import IconLocked from '@lucide/svelte/icons/lock-keyhole';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
@@ -9,8 +10,8 @@
 	import { cn } from '../../../utils.js';
 	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';
+	import PageMenuContent from '../menu/page-menu-content.svelte';
+	import PagePreview from '../page-preview.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -24,27 +25,29 @@
 	let menuOpen = $state(false);
 </script>
 
-<div class="relative flex items-center">
-	<div class="group h-full">
-		<div class="absolute -left-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
-		<div
-			class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
-		>
+<div class="relative flex items-stretch">
+	{#if index === 0}
+		<div class="group ml-2 py-2">
+			<div class="absolute -left-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
 			<div
-				class="absolute inline-flex flex-col opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-				role="menu"
+				class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
 			>
-				<Button
-					variant="outline"
-					size="icon-xs"
-					class="my-1 h-6 w-6 rounded-full"
-					onclick={() => editor.addPage({ index })}
+				<div
+					class="absolute inline-flex flex-col opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+					role="menu"
 				>
-					<PlusIcon class="h-4 w-4" />
-				</Button>
+					<Button
+						variant="outline"
+						size="icon-xs"
+						class="my-1 h-6 w-6 rounded-full"
+						onclick={() => editor.addPage({ index })}
+					>
+						<PlusIcon class="h-4 w-4" />
+					</Button>
+				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="group relative mx-2 my-1 transition-transform">
 		<div use:dragHandle role="none">
 			<button class="block" onclick={() => editor.setActivePage(page.id)}>
@@ -73,7 +76,7 @@
 						</div>
 					</ContextMenu.Trigger>
 					<ContextMenu.Content class="w-72">
-						<PagePreviewMenuContent {editor} {page} />
+						<PageMenuContent {editor} {page} />
 					</ContextMenu.Content>
 				</ContextMenu.Root>
 			</button>
@@ -115,9 +118,66 @@
 				</DropdownMenu.Trigger>
 
 				<DropdownMenu.Content class="w-72" side="top" align="start" trapFocus={false}>
-					<PagePreviewMenuContent {editor} {page} />
+					<PageMenuContent {editor} {page} />
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</div>
 	</div>
+	{#if index < editor.pages.length - 1}
+		<div class="group py-2">
+			<div class="absolute -right-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
+			<div
+				class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
+			>
+				<!-- {#if page.transition}
+					<div
+						class="absolute inline-flex flex-col opacity-100 transition-opacity duration-500 group-hover:opacity-0"
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							active={page.id === editor.activePage.id}
+							class="my-1 h-6 w-6 rounded-full"
+							onclick={() => editor.setActivePage(page.id)}
+						>
+							<ArrowBigRightDashIcon class="h-4 w-4" />
+						</Button>
+					</div>
+				{/if} -->
+				<div class="flex h-full flex-col items-center" role="menu">
+					<div
+						class="flex flex-1 items-center opacity-0 transition-all duration-500 group-hover:opacity-100"
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							class="h-6 w-6 rounded-full"
+							onclick={() => editor.addPage({ index: index + 1 })}
+						>
+							<PlusIcon class="h-4 w-4" />
+						</Button>
+					</div>
+					<div
+						class={cn(
+							'flex flex-1 items-center transition-all group-hover:translate-y-0 group-hover:opacity-100',
+							page.transition ? '-translate-y-1/2 duration-300' : 'opacity-0 duration-500',
+						)}
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							class="h-6 w-6 rounded-full"
+							active={!!page.transition && page.id === editor.activePage.id}
+							onclick={() => {
+								editor.setActivePage(page.id);
+								editor.activeSidebarPopup = 'transition';
+							}}
+						>
+							<ArrowBigRightDashIcon class="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>

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

@@ -5,6 +5,7 @@
 	import type { Editor } from '../editor.svelte.js';
 	import type { Page } from '../types.js';
 	import PagesNavigationItem from './pages-navigation-item.svelte';
+	import { Button } from '../../ui/button/index.js';
 
 	interface Props {
 		editor: Editor;
@@ -85,19 +86,21 @@
 			{/each}
 		</section>
 		<div class="relative py-2" role="none">
-			<button
-				class="mx-2 my-1 rounded-xl"
+			<Button
+				variant="outline"
+				size="vague"
+				class="mx-2 my-1 rounded-lg"
 				aria-label="New Page"
 				onclick={() => editor.addPage({ index: editor.pages.length })}
 			>
 				<div
-					class="relative flex items-center justify-center overflow-hidden rounded-lg bg-gray-400"
+					class="relative flex items-center justify-center"
 					style:width="{editor.width * thumbScale}px"
 					style:height="{editor.height * thumbScale}px"
 				>
 					<PlusIcon class="h-6 w-6" />
 				</div>
-			</button>
+			</Button>
 		</div>
 	</div>
 </nav>