@peteai/presentation-editor 0.0.8 → 0.0.10

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import * as ContextMenu from '../../../ui/context-menu/index.js';
+	import {
+		LayerButton,
+		LayerThumbWrapper,
+		TextLayerContent,
+		ImageLayerContent,
+		BackgroundLayerContent,
+		GroupLayerContent,
+	} from '../../layers/index.js';
+	import type { Editor } 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';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	const flipDurationMs = 300;
+	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
+
+	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
+		editor.rootLayers = e.detail.items;
+	}
+
+	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
+		console.log('handleDndFinalize', e);
+
+		editor.rootLayers = e.detail.items;
+
+		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
+		const item = e.detail.items[index];
+
+		let redo;
+		const prev = e.detail.items[index - 1];
+		const next = e.detail.items[index + 1];
+		if (prev && next) {
+			if (!(prev.sortOrder < item.sortOrder && next.sortOrder > item.sortOrder)) {
+				redo = { sortOrder: (prev.sortOrder + next.sortOrder) / 2 };
+			}
+		} else if (next) {
+			if (next && next.sortOrder <= item.sortOrder) {
+				redo = { sortOrder: next.sortOrder - 1 };
+			}
+		} else if (prev) {
+			if (prev && prev.sortOrder >= item.sortOrder) {
+				redo = { sortOrder: prev.sortOrder + 1 };
+			}
+		}
+
+		if (redo) {
+			editor.historyPush({
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: item.id, type: item.type },
+				undo: { sortOrder: item.sortOrder },
+				redo,
+			});
+		}
+	}
+</script>
+
+<SidebarWrapper name="Position">
+	<div class="flex flex-col gap-2 p-2">
+		<section
+			class="flex flex-col-reverse gap-2"
+			aria-label="Layers"
+			use:dndzone={{
+				items: editor.rootLayers,
+				dragDisabled: editor.activePage.locked,
+				...otherOptions,
+			}}
+			onconsider={handleDndConsider}
+			onfinalize={handleDndFinalize}
+		>
+			{#each editor.rootLayers as layer (layer.id)}
+				<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
+					<ContextMenu.Root
+						onOpenChange={(open) =>
+							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 === '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>
+							</LayerButton>
+						</ContextMenu.Trigger>
+						<ContextMenu.Content class="w-72">
+							<LayerMenuContent />
+						</ContextMenu.Content>
+					</ContextMenu.Root>
+				</div>
+			{/each}
+		</section>
+		<ContextMenu.Root>
+			<ContextMenu.Trigger>
+				<LayerButton>
+					{@const thumbScale = Math.max(192 / editor.width, 32 / editor.height)}
+					<div
+						class="absolute top-1/2 -translate-y-1/2"
+						style:width="{editor.width * thumbScale}px"
+						style:height="{editor.height * thumbScale}px"
+					>
+						<BackgroundLayerContent page={editor.activePage} {thumbScale} />
+					</div>
+				</LayerButton>
+			</ContextMenu.Trigger>
+			<ContextMenu.Content class="w-72">
+				<BackgroundMenuContent {editor} page={editor.activePage} />
+			</ContextMenu.Content>
+		</ContextMenu.Root>
+	</div>
+</SidebarWrapper>

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

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

package/dist/components/editor/sidebar/sidebar-text-tab.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
 	import TextIcon from '@lucide/svelte/icons/type';
 	import Button from '../../ui/button/button.svelte';
-	import { getEditorContext } from '../editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 	import { buildParagraphHtml } from '../utils.js';
 	import SidebarTextTabButton from './sidebar-text-tab-button.svelte';
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const createTextBox = () => {
 		const fontSize = 80 / 0.75;
@@ -65,7 +69,7 @@
 	];
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col p-2">
 	<Button variant="default" class="w-full" onclick={createTextBox}>
 		<TextIcon />
 		Add a text box

package/dist/components/editor/sidebar/sidebar-text-tab.svelte.d.ts

@@ -1,18 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Editor } from '../editor.svelte.js';
+interface Props {
+    editor: Editor;
 }
-declare const SidebarTextTab: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SidebarTextTab = InstanceType<typeof SidebarTextTab>;
+declare const SidebarTextTab: import("svelte").Component<Props, {}, "">;
+type SidebarTextTab = ReturnType<typeof SidebarTextTab>;
 export default SidebarTextTab;

package/dist/components/editor/sidebar/sidebar-uploads-tab.svelte

@@ -7,9 +7,13 @@
 	import { Label } from '../../ui/label/index.js';
 	import UploadsImage from './uploads-image.svelte';
 	import { checkImage } from '../utils.js';
-	import { getEditorContext } from '../editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	let open = $state(false);
 	let url = $state('');
@@ -44,11 +48,9 @@
 	};
 </script>
 
-<div class="relative flex h-full shrink-0 flex-col gap-2">
+<div class="relative flex h-full shrink-0 flex-col gap-2 p-2">
 	{#if editor.fileDragged}
-		<div
-			class="bg-background absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center"
-		>
+		<div class="absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center">
 			<div class="grid gap-6">
 				<div class="grid justify-center">
 					<CloudUploadIcon class="m-auto h-8 w-8" />
@@ -60,7 +62,7 @@
 						<ImageIcon class="h-4 w-4" />
 						<p class="text-sm font-semibold">Images</p>
 					</div>
-					<p class="text-muted-foreground text-xs">GIF, JPG, PNG</p>
+					<p class="text-xs text-muted-foreground">GIF, JPG, PNG</p>
 				</div>
 			</div>
 		</div>
@@ -91,7 +93,7 @@
 								class="col-span-3"
 							/>
 							{#if error}
-								<div class="text-destructive col-span-3 col-start-2 text-sm font-medium">
+								<div class="col-span-3 col-start-2 text-sm font-medium text-destructive">
 									Invalid
 								</div>
 							{/if}

package/dist/components/editor/sidebar/sidebar-uploads-tab.svelte.d.ts

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

package/dist/components/editor/sidebar/sidebar-wrapper.svelte

@@ -5,18 +5,19 @@
 
 	interface Props {
 		name: string;
+		onclose?: () => void;
 		children?: import('svelte').Snippet;
 	}
 
-	let { name, children }: Props = $props();
+	let { name, children, onclose = () => (editor.activeSidebarPopup = null) }: Props = $props();
 
 	const editor = getEditorContext();
 </script>
 
 <div class="flex h-full select-none flex-col gap-2">
-	<div class="flex items-center justify-between">
+	<div class="flex items-center justify-between p-2">
 		<div class="text-sm font-bold">{name}</div>
-		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
+		<Button variant="ghost" size="icon" onclick={onclose}>
 			<XIcon />
 		</Button>
 	</div>

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

@@ -1,5 +1,6 @@
 interface Props {
     name: string;
+    onclose?: () => void;
     children?: import('svelte').Snippet;
 }
 declare const SidebarWrapper: import("svelte").Component<Props, {}, "">;

package/dist/components/editor/sidebar/sidebar.svelte

@@ -7,9 +7,10 @@
 	import SidebarUploadsTab from './sidebar-uploads-tab.svelte';
 	import type { Editor } from '../editor.svelte.js';
 	import type { ActiveSidebarTab } from '../types.js';
-	import PositionSidebar from './position-sidebar.svelte';
+	import { PositionSidebar } from './position-sidebar/index.js';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
+	import { TransitionSidebar } from './transition-sidebar/index.js';
 	import ImageCropSidebar from './image-crop-sidebar.svelte';
 
 	interface Props {
@@ -64,19 +65,25 @@
 	</div>
 
 	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
-		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
+		<div class="h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200">
 			{#if editor.imageCropLayer}
-				<ImageCropSidebar layer={editor.imageCropLayer} />
-			{:else if editor.activeSidebarPopup === 'position'}
-				<PositionSidebar />
-			{:else if editor.activeSidebarPopup === 'font'}
-				<FontSidebar />
-			{:else if editor.activeSidebarPopup?.indexOf('Color')}
-				<ColorSidebar />
-			{:else if editor.activeSidebarTab === 'text'}
-				<SidebarTextTab />
-			{:else if editor.activeSidebarTab === 'uploads'}
-				<SidebarUploadsTab />
+				<ImageCropSidebar {editor} layer={editor.imageCropLayer} />
+			{:else if editor.activeSidebarPopup}
+				{#if editor.activeSidebarPopup === 'position'}
+					<PositionSidebar {editor} />
+				{:else if editor.activeSidebarPopup === 'font'}
+					<FontSidebar {editor} />
+				{:else if editor.activeSidebarPopup.indexOf('Color') > 0}
+					<ColorSidebar {editor} />
+				{:else if editor.activeSidebarPopup === 'transition'}
+					<TransitionSidebar {editor} />
+				{/if}
+			{:else if editor.activeSidebarTab}
+				{#if editor.activeSidebarTab === 'text'}
+					<SidebarTextTab {editor} />
+				{:else if editor.activeSidebarTab === 'uploads'}
+					<SidebarUploadsTab {editor} />
+				{/if}
 			{/if}
 		</div>
 	{/if}

package/dist/components/editor/sidebar/transition-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import TransitionSidebar from './transition-sidebar.svelte';
+export { TransitionSidebar };

package/dist/components/editor/sidebar/transition-sidebar/index.js

@@ -0,0 +1,2 @@
+import TransitionSidebar from './transition-sidebar.svelte';
+export { TransitionSidebar };

package/dist/components/editor/sidebar/transition-sidebar/transition-sidebar.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import Button from '../../../ui/button/button.svelte';
+	import type { Editor } from '../../editor.svelte.js';
+	import type {
+		HistoryAction,
+		PageTransition,
+		PageTransitionDirection,
+		PageTransitionFlow,
+	} from '../../types.js';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+	import { Slider } from '../../../ui/slider/index.js';
+	import { Input } from '../../../ui/input/index.js';
+	import { createDebouncedCallback } from '../../../../utils.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	let duration = $derived(editor.activePage.transition?.duration || 500);
+
+	const setDuration = (value: string | number, debounce = false) => {
+		if (!editor.activePage.transition) return;
+
+		value = Number(value);
+		duration = value * 1000;
+
+		if (editor.activePage.transition) {
+			setTransition({ ...editor.activePage.transition, duration }, debounce);
+		}
+	};
+
+	const directions: PageTransitionDirection[] = ['left', 'right', 'up', 'down'];
+	const flows: PageTransitionFlow[] = ['in', 'out'];
+
+	const transitionButtons: { type: string; label: string; getState: () => PageTransition }[] = [
+		{
+			type: 'fade',
+			label: 'Fade',
+			getState: () => ({ type: 'fade', duration }),
+		},
+		{
+			type: 'slide',
+			label: 'Slide',
+			getState: () => ({ type: 'slide', duration, direction: 'left' }),
+		},
+		{
+			type: 'circleWipe',
+			label: 'Circle Wipe',
+			getState: () => ({ type: 'circleWipe', duration, flow: 'in' }),
+		},
+		{
+			type: 'lineWipe',
+			label: 'Line Wipe',
+			getState: () => ({ type: 'lineWipe', duration, direction: 'left' }),
+		},
+		{
+			type: 'stack',
+			label: 'Stack',
+			getState: () => ({ type: 'stack', duration, direction: 'down' }),
+		},
+	];
+
+	let undo: object | null = null;
+
+	const debouncedUpdates = createDebouncedCallback((actions) => {
+		editor.historyPush(actions);
+		undo = null;
+	}, 500);
+
+	const setTransition = (value: PageTransition | null, debounce = false) => {
+		if (!undo) {
+			undo = { transition: $state.snapshot(editor.activePage.transition) };
+		}
+		const action: HistoryAction = {
+			type: 'pageUpdate',
+			pageId: editor.activePage.id,
+			undo,
+			redo: { transition: value },
+		};
+		if (debounce) {
+			debouncedUpdates(action);
+		} else {
+			editor.pageTransitionPreview = value;
+			editor.historyPush(action);
+			undo = null;
+		}
+	};
+
+	const allPagesHaveSameTransition = $derived.by(() => {
+		if (!editor.pages.length) return true;
+
+		const firstPageTransition = editor.pages[0].transition || {};
+		const firstPageTransitionKeys = Object.keys(firstPageTransition);
+		return editor.pages.every((page) => {
+			const transition = page.transition || {};
+
+			const keys = Object.keys(transition);
+			if (keys.length !== firstPageTransitionKeys.length) return false;
+
+			return keys.every(
+				(key) =>
+					key in firstPageTransition &&
+					(transition as Record<string, unknown>)[key] ===
+						(firstPageTransition as Record<string, unknown>)[key],
+			);
+		});
+	});
+
+	const setTransitionToAllPages = () => {
+		const redo = { transition: $state.snapshot(editor.activePage.transition) };
+		editor.historyPush(
+			editor.pages.map((page) => ({
+				type: 'pageUpdate',
+				pageId: page.id,
+				undo: { transition: $state.snapshot(page.transition) },
+				redo,
+			})),
+		);
+	};
+
+	// close sidebar if there is no next page
+	$effect(() => {
+		const nextPage = editor.sortedPages.find((p) => p.sortOrder > editor.activePage.sortOrder);
+		if (!nextPage) {
+			editor.activeSidebarPopup = null;
+		}
+	});
+</script>
+
+<SidebarWrapper name="Transition">
+	<div class="grid grid-cols-3 gap-2 p-2">
+		<Button
+			variant="outline"
+			size="vague"
+			class="aspect-square"
+			active={!editor.activePage.transition}
+			onclick={() => setTransition(null)}
+		>
+			<XIcon />
+		</Button>
+
+		{#each transitionButtons as button}
+			<Button
+				variant="outline"
+				size="vague"
+				class="aspect-square"
+				active={editor.activePage.transition?.type === button.type}
+				onclick={() => setTransition(button.getState())}
+				onmouseenter={() =>
+					(editor.pageTransitionPreview =
+						editor.activePage.transition?.type === button.type
+							? editor.activePage.transition
+							: button.getState())}
+				onmouseleave={() => (editor.pageTransitionPreview = null)}
+			>
+				{button.label}
+			</Button>
+		{/each}
+
+		{#if editor.activePage.transition}
+			{@const transition = editor.activePage.transition}
+			{@const buttonIndex =
+				transitionButtons.findIndex((button) => button.type === transition.type) + 1}
+			{@const rowIndex = Math.floor(buttonIndex / 3) + 1}
+			{@const colIndex = Math.floor(buttonIndex % 3) + 1}
+			<div class="col-span-full" style:grid-row={rowIndex + 1}>
+				<div class="grid grid-cols-3 gap-2">
+					<div
+						class="h-0 w-0 justify-self-center border-b-border"
+						style:border-bottom-width="10px"
+						style:border-left="10px solid transparent"
+						style:border-right="10px solid transparent"
+						style:grid-column="{colIndex} / {colIndex + 1}"
+					></div>
+				</div>
+				<div class="mb-4 rounded-md border border-border p-2">
+					<div class="py-2">
+						<div class="text-sm font-medium">Duration (seconds)</div>
+						<div class="flex items-center gap-2">
+							<div class="grow">
+								<Slider
+									type="single"
+									value={duration / 1000}
+									min={0.1}
+									max={2.5}
+									step={0.01}
+									onValueChange={(value) => setDuration(value, true)}
+								/>
+							</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={duration / 1000}
+								onchange={(e) => setDuration(e.currentTarget.value)}
+							/>
+						</div>
+					</div>
+					{#if ['slide', 'lineWipe', 'circleWipe', 'stack'].includes(transition.type)}
+						<div class="flex flex-col gap-2 py-2">
+							<div class="text-sm font-medium">Direction</div>
+							<div class="grid grid-flow-col gap-2">
+								{#if transition.type === 'slide' || transition.type === 'lineWipe' || transition.type === 'stack'}
+									{#each directions as direction}
+										<Button
+											variant="outline"
+											active={transition.direction === direction}
+											onclick={() => {
+												setTransition({ ...transition, direction });
+											}}
+											onmouseenter={() => {
+												editor.pageTransitionPreview = { ...transition, direction };
+											}}
+											onmouseleave={() => {
+												editor.pageTransitionPreview = null;
+											}}
+										>
+											{direction}
+										</Button>
+									{/each}
+								{:else if transition.type === 'circleWipe'}
+									{#each flows as flow}
+										<Button
+											variant="outline"
+											active={transition.flow === flow}
+											onclick={() => {
+												setTransition({ ...transition, flow });
+											}}
+											onmouseenter={() => {
+												editor.pageTransitionPreview = { ...transition, flow };
+											}}
+											onmouseleave={() => {
+												editor.pageTransitionPreview = null;
+											}}
+										>
+											{flow}
+										</Button>
+									{/each}
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+	{#if !allPagesHaveSameTransition}
+		<div class="p-2">
+			<Button class="w-full" variant="outline" onclick={() => setTransitionToAllPages()}>
+				Apply between all pages
+			</Button>
+		</div>
+	{/if}
+</SidebarWrapper>

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

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

package/dist/components/editor/snapping-guides.svelte

@@ -13,11 +13,11 @@
 <div class="absolute h-full w-full">
 	{#each guides as guide (guide.id)}
 		{#if guide.type === 'box'}
-			<div class="border-primary absolute border" style:inset="{guide.inset * zoom}px"></div>
+			<div class="absolute border border-primary" style:inset="{guide.inset * zoom}px"></div>
 		{:else if guide.type === 'vertical'}
 			<div
 				class={cn(
-					'border-primary absolute h-full border-l',
+					'absolute h-full border-l border-primary',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}
@@ -28,7 +28,7 @@
 		{:else if guide.type === 'horizontal'}
 			<div
 				class={cn(
-					'border-primary absolute w-full border-t',
+					'absolute w-full border-t border-primary',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}