@peteai/presentation-editor 0.0.6 → 0.0.7

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';

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);