@peteai/presentation-editor 0.0.6 → 0.0.7

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

@@ -1,25 +1,23 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-	import SearchIcon from 'lucide-svelte/icons/search';
-	import BackIcon from 'lucide-svelte/icons/arrow-left';
-	import DocumentIcon from 'lucide-svelte/icons/file-text';
-	import PopularIcon from 'lucide-svelte/icons/chart-no-axes-combined';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import BackIcon from '@lucide/svelte/icons/arrow-left';
+	import DocumentIcon from '@lucide/svelte/icons/file-text';
+	import PopularIcon from '@lucide/svelte/icons/chart-no-axes-combined';
 	import { InfiniteLoader, LoaderState } from '../../../ui/infinite-loader/index.js';
 	import { Input } from '../../../ui/input/index.js';
 	import { Button } from '../../../ui/button/index.js';
 	import { Separator } from '../../../ui/separator/index.js';
 	import { cn } from '../../../../utils.js';
-	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../editor.svelte.js';
 	import SidebarWrapper from '../sidebar-wrapper.svelte';
 	import {
 		createEditorNotReactive,
 		extractNodeFonts,
 		extractSelectionFonts,
-	} from '../../layers/types/html/editor/utils.js';
+	} from '../../layers/types/text/editor/utils.js';
 	import FontSidebarButton from './font-sidebar-button.svelte';
-	import { applyHtmlToLayer } from '../../layers/utils.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let { htmlEditor } = editor;
 
@@ -29,14 +27,16 @@
 
 	const fonts = Object.keys(editor.fonts).map(mapFont);
 
-	let htmlLayers = $derived(editor.activeLayers.filter((layer) => layer.type === 'html'));
+	let textLayers = $derived(
+		editor.selectedSimpleLayersNotLocked.filter((layer) => layer.type === 'text'),
+	);
 
 	const currentFonts = $derived.by(() => {
 		if (editor.activeAction?.type === 'edit') {
 			return extractSelectionFonts($htmlEditor);
 		} else {
 			const set = new Set<string>();
-			htmlLayers.forEach((layer) => extractNodeFonts(layer.html, set));
+			textLayers.forEach((layer) => extractNodeFonts(layer.html, set));
 			return Array.from(set);
 		}
 	});
@@ -44,9 +44,9 @@
 	const documentFonts = $derived.by(() => {
 		const fontsSet = new Set<string>();
 
-		editor.slides.forEach((slide) => {
-			slide.layers.forEach((layer) => {
-				if (layer.type === 'html') {
+		editor.pages.forEach((page) => {
+			page.layers.forEach((layer) => {
+				if (layer.type === 'text') {
 					extractNodeFonts(layer.html).forEach(fontsSet.add, fontsSet);
 				}
 			});
@@ -66,36 +66,31 @@
 		if (editor.activeAction?.type === 'edit') {
 			$htmlEditor.commands.setFontFamily(family);
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					htmlLayers.map(async (layer) => {
-						editorNotReactive
-							.chain()
-							.setContent(layer.html)
-							.selectAll()
-							.setFontFamily(family)
-							.run();
-
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
+			editor.historyPush(
+				(
+					await Promise.all(
+						textLayers.map(async (layer) => {
+							editorNotReactive
+								.chain()
+								.setContent(layer.html)
+								.selectAll()
+								.setFontFamily(family)
+								.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
 		}
 	};
 
 	$effect(() => {
 		if (editor.activeSidebarPopup === 'font') {
-			if (!editor.activeLayers.some((layer) => layer.type === 'html')) {
+			if (!editor.selectedSimpleLayersNotLocked.some((layer) => layer.type === 'text')) {
 				editor.activeSidebarPopup = null;
 			}
 		}

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

@@ -1,33 +1,37 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
-	import { dndzone } from 'svelte-dnd-action';
-	import XIcon from 'lucide-svelte/icons/x';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import XIcon from '@lucide/svelte/icons/x';
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import {
 		LayerButton,
 		LayerThumbWrapper,
-		HtmlLayerContent,
+		TextLayerContent,
 		ImageLayerContent,
 		BackgroundLayerContent,
+		GroupLayerContent,
 	} from '../layers/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } 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';
 
-	const editor = getPresentationEditorContext();
+	const editor = $derived(getEditorContext());
+
+	$inspect(editor.sortedPages);
 
 	const flipDurationMs = 300;
 	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
 
-	function handleDndConsider(e) {
-		editor.activeSlide.layers = e.detail.items;
+	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
+		editor.rootLayers = e.detail.items;
 	}
 
-	async function handleDndFinalize(e) {
+	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
 		console.log('handleDndFinalize', e);
 
-		editor.activeSlide.layers = e.detail.items;
+		editor.rootLayers = e.detail.items;
 
 		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
 		const item = e.detail.items[index];
@@ -51,8 +55,8 @@
 
 		if (redo) {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: item.id, type: item.type },
 				undo: { sortOrder: item.sortOrder },
 				redo,
@@ -61,7 +65,7 @@
 	}
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex h-full flex-col gap-2">
 	<div class="flex items-center justify-between">
 		<div class="text-sm font-bold">Position</div>
 		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
@@ -75,27 +79,31 @@
 				class="flex flex-col-reverse gap-2"
 				aria-label="Layers"
 				use:dndzone={{
-					items: editor.activeSlide.layers,
-					dragDisabled: editor.activeSlide.locked,
+					items: editor.rootLayers,
+					dragDisabled: editor.activePage.locked,
 					...otherOptions,
 				}}
 				onconsider={handleDndConsider}
 				onfinalize={handleDndFinalize}
 			>
-				{#each editor.activeSlide.layers as layer (layer.id)}
+				{#each editor.rootLayers as layer (layer.id)}
 					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
 						<ContextMenu.Root
 							onOpenChange={(open) =>
-								open && !editor.activeLayerIds.has(layer.id) && editor.setActiveLayers(layer.id)}
+								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 === 'html'}
-												<HtmlLayerContent {layer} {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>
@@ -117,12 +125,12 @@
 							style:width="{editor.width * thumbScale}px"
 							style:height="{editor.height * thumbScale}px"
 						>
-							<BackgroundLayerContent slide={editor.activeSlide} {thumbScale} />
+							<BackgroundLayerContent page={editor.activePage} {thumbScale} />
 						</div>
 					</LayerButton>
 				</ContextMenu.Trigger>
 				<ContextMenu.Content class="w-72">
-					<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+					<BackgroundMenuContent {editor} page={editor.activePage} />
 				</ContextMenu.Content>
 			</ContextMenu.Root>
 		</div>

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

@@ -0,0 +1,3 @@
+declare const PositionSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type PositionSidebar = ReturnType<typeof PositionSidebar>;
+export default PositionSidebar;

package/dist/components/{presentation-editor → editor}/sidebar/sidebar-text-tab-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from '../../ui/button/button.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import { HtmlContent } from '../layers/types/html/index.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import { HtmlContent } from '../layers/types/text/index.js';
 	import type { DraggedHtml } from '../types.js';
 
 	interface Props {
@@ -12,7 +12,7 @@
 
 	let ref: HTMLDivElement;
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let dragging = $state(false);
 
@@ -64,13 +64,13 @@
 
 	const createLayer = () => {
 		const rect = ref.getBoundingClientRect();
-		const layer = editor.buildHtmlLayer({
+		const layer = editor.buildTextLayer({
 			width: rect.width,
 			height: rect.height,
 			scale,
 			html,
 		});
-		editor.addLayers(editor.activeSlide.id, layer);
+		editor.addLayers(editor.activePage.id, layer);
 	};
 </script>
 

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import TextIcon from 'lucide-svelte/icons/type';
+	import TextIcon from '@lucide/svelte/icons/type';
 	import Button from '../../ui/button/button.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 	import { buildParagraphHtml } from '../utils.js';
 	import SidebarTextTabButton from './sidebar-text-tab-button.svelte';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const createTextBox = () => {
 		const fontSize = 80 / 0.75;
 		const lineHeight = 1;
-		const layer = editor.buildHtmlLayer({
+		const layer = editor.buildTextLayer({
 			html: buildParagraphHtml({
 				text: 'Your paragraph text',
 				fontSize,
@@ -23,7 +23,7 @@
 			width: 1280,
 			height: fontSize * lineHeight,
 		});
-		editor.addLayers(editor.activeSlide.id, layer);
+		editor.addLayers(editor.activePage.id, layer);
 	};
 
 	const defaultTextButtons = [

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import CloudUploadIcon from 'lucide-svelte/icons/cloud-upload';
-	import ImageIcon from 'lucide-svelte/icons/image';
+	import CloudUploadIcon from '@lucide/svelte/icons/cloud-upload';
+	import ImageIcon from '@lucide/svelte/icons/image';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
 	import * as Dialog from '../../ui/dialog/index.js';
 	import { Input } from '../../ui/input/index.js';
 	import { Label } from '../../ui/label/index.js';
 	import UploadsImage from './uploads-image.svelte';
 	import { checkImage } from '../utils.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let open = $state(false);
 	let url = $state('');

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import XIcon from 'lucide-svelte/icons/x';
+	import XIcon from '@lucide/svelte/icons/x';
 	import { Button } from '../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	interface Props {
 		name: string;
@@ -10,7 +10,7 @@
 
 	let { name, children }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 </script>
 
 <div class="flex h-full select-none flex-col gap-2">
@@ -21,5 +21,7 @@
 		</Button>
 	</div>
 
-	{@render children?.()}
+	<div class="flex flex-1 flex-col gap-2 overflow-y-auto">
+		{@render children?.()}
+	</div>
 </div>

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

@@ -1,17 +1,21 @@
 <script lang="ts">
-	import type { Icon as LucideIcon } from 'lucide-svelte';
-	import TextIcon from 'lucide-svelte/icons/type';
-	import UploadIcon from 'lucide-svelte/icons/cloud-upload';
+	import type { Icon as LucideIcon } from '@lucide/svelte';
+	import TextIcon from '@lucide/svelte/icons/type';
+	import UploadIcon from '@lucide/svelte/icons/cloud-upload';
 	import Button from '../../ui/button/button.svelte';
 	import SidebarTextTab from './sidebar-text-tab.svelte';
 	import SidebarUploadsTab from './sidebar-uploads-tab.svelte';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 	import type { ActiveSidebarTab } from '../types.js';
-	import PositionSlidebar from './position-slidebar.svelte';
+	import PositionSidebar from './position-sidebar.svelte';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
 
-	const editor = getPresentationEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const tabs: { id: ActiveSidebarTab; name: string; icon: typeof LucideIcon }[] = [
 		// {
@@ -61,7 +65,7 @@
 	{#if editor.activeSidebarPopup || editor.activeSidebarTab}
 		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
 			{#if editor.activeSidebarPopup === 'position'}
-				<PositionSlidebar />
+				<PositionSidebar />
 			{:else if editor.activeSidebarPopup === 'font'}
 				<FontSidebar />
 			{:else if editor.activeSidebarPopup}

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

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

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	let { image } = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const height = 80;
 	const initialScale = height / image.height;
@@ -62,7 +62,7 @@
 	};
 
 	const createLayer = () => {
-		editor.addLayers(editor.activeSlide.id, editor.buildImageLayer({ image }));
+		editor.addLayers(editor.activePage.id, editor.buildImageLayer({ image }));
 	};
 </script>