@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/slide-editor.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { ScrollArea } from '../ui/scroll-area/index.js';
+	import { cn } from '../../utils.js';
+	import {
+		ActiveLayerBorder,
+		HoveredLayer,
+		LayerWrapper,
+		BackgroundLayer,
+		HtmlLayer,
+		ImageLayer,
+		HtmlLayerActive,
+		ImageLayerActive,
+		ActiveBackgroundBorder,
+	} from './layers/index.js';
+	import type { ActiveLayerGuide, Layer } from './types.js';
+	import SnappingGuides from './snapping-guides.svelte';
+	import SlideInner from './slide-inner.svelte';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	interface Props {
+		viewportRef: HTMLDivElement | null;
+		wrapperRef: HTMLDivElement | null;
+	}
+
+	let { viewportRef = $bindable(null), wrapperRef = $bindable(null) }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
+
+	let hoveredLayer: Layer | 'background' | null = $state(null);
+
+	let scaledWidth = $derived(editor.width * editor.zoom);
+	let scaledHeight = $derived(editor.height * editor.zoom);
+</script>
+
+<div class="relative min-h-0 flex-1">
+	<ScrollArea orientation="both" class="h-full" bind:viewportRef>
+		<div class="pointer-events-none 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
+							class="m-0 overflow-hidden shadow-xl"
+							style:width="{scaledWidth}px"
+							style:height="{scaledHeight}px"
+						>
+							<div
+								class="relative origin-top-left bg-white"
+								style:width="{editor.width}px"
+								style:height="{editor.height}px"
+								style:transform="scale({editor.zoom})"
+							>
+								<div
+									class="relative"
+									style:width="{editor.width}px"
+									style:height="{editor.height}px"
+								>
+									<BackgroundLayer bind:hoveredLayer />
+									<SlideInner />
+									{#each editor.activeSlide.layers as layer, i (layer.id)}
+										<LayerWrapper
+											bind:layer={editor.activeSlide.layers[i]}
+											bind:hoveredLayer
+											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]} />
+											{/if}
+										</LayerWrapper>
+									{/each}
+								</div>
+							</div>
+						</div>
+						<div
+							class="absolute z-10 m-0"
+							style:width="{scaledWidth}px"
+							style:height="{scaledHeight}px"
+						>
+							{#if hoveredLayer && (hoveredLayer === 'background' || hoveredLayer.id !== editor.activeLayer?.id)}
+								<HoveredLayer layer={hoveredLayer} />
+							{/if}
+							{#if editor.activeBackground}
+								<ActiveBackgroundBorder />
+							{:else if editor.activeLayer}
+								<ActiveLayerBorder layer={editor.activeLayer} />
+								{#if editor.activeLayer.type === 'html'}
+									<HtmlLayerActive bind:layer={editor.activeLayer} />
+								{:else if editor.activeLayer.type === 'image'}
+									<ImageLayerActive bind:layer={editor.activeLayer} />
+								{/if}
+							{/if}
+							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ScrollArea>
+
+	{#if editor.activeAction?.cursor}
+		<div class={cn('fixed inset-0', editor.activeAction.cursor)}></div>
+	{/if}
+</div>

package/dist/components/presentation-editor/slide-editor.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    viewportRef: HTMLDivElement | null;
+    wrapperRef: HTMLDivElement | null;
+}
+declare const SlideEditor: import("svelte").Component<Props, {}, "viewportRef" | "wrapperRef">;
+type SlideEditor = ReturnType<typeof SlideEditor>;
+export default SlideEditor;

package/dist/components/presentation-editor/slide-inner.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	const inset = Math.round(Math.min(editor.width, editor.height) / 10);
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter slide inner', e);
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (editor.dragged) {
+			editor.dragged = { ...editor.dragged, hidden: false, scale: editor.zoom, sticky: true };
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover slide inner', e);
+		e.preventDefault();
+	};
+
+	const onDrop = (e: DragEvent) => {
+		console.log('drop slide inner', e);
+		e.preventDefault();
+
+		const { dragged } = editor;
+		if (dragged) {
+			editor.addImageLayer({
+				x: e.offsetX - dragged.offsetX / editor.zoom + inset,
+				y: e.offsetY - dragged.offsetY / editor.zoom + inset,
+				width: dragged.image.width,
+				height: dragged.image.height,
+				image: {
+					id: dragged.image.id,
+					src: dragged.image.src,
+					width: dragged.image.width,
+					height: dragged.image.height,
+				},
+			});
+		}
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={cn('absolute', { 'pointer-events-auto': !!editor.dragged })}
+	style:inset="{inset}px"
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+></div>

package/dist/components/presentation-editor/slide-inner.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const SlideInner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SlideInner = InstanceType<typeof SlideInner>;
+export default SlideInner;

package/dist/components/presentation-editor/slides-navigation/buttons/slide-delete-button.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import TrashIcon from 'lucide-svelte/icons/trash-2';
+	import type { PresentationEditor } from '../../presentation-editor.svelte.js';
+	import * as ContextMenu from '../../../ui/context-menu/index.js';
+	import * as DropdownMenu from '../../../ui/dropdown-menu/index.js';
+	import type { Slide } from '../../types.js';
+
+	interface Props {
+		editor: PresentationEditor;
+		slide: Slide;
+		context?: boolean;
+	}
+
+	let { editor, slide, context }: Props = $props();
+
+	const ItemComponent = context ? ContextMenu.Item : DropdownMenu.Item;
+	const ShortcutComponent = context ? ContextMenu.Shortcut : DropdownMenu.Shortcut;
+</script>
+
+<ItemComponent onclick={() => editor.removeSlide(slide)}>
+	<div class="flex items-center">
+		<TrashIcon class="text-foreground-alt mr-2 size-5" />
+		Delete Page
+	</div>
+	<ShortcutComponent>
+		<kbd
+			class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-sm px-2 py-1 text-xs"
+		>
+			DELETE
+		</kbd>
+	</ShortcutComponent>
+</ItemComponent>

package/dist/components/presentation-editor/slides-navigation/buttons/slide-delete-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PresentationEditor } from '../../presentation-editor.svelte.js';
+import type { Slide } from '../../types.js';
+interface Props {
+    editor: PresentationEditor;
+    slide: Slide;
+    context?: boolean;
+}
+declare const SlideDeleteButton: import("svelte").Component<Props, {}, "">;
+type SlideDeleteButton = ReturnType<typeof SlideDeleteButton>;
+export default SlideDeleteButton;

package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
+	import type { PresentationEditor } from '../../presentation-editor.svelte.js';
+	import * as ContextMenu from '../../../ui/context-menu/index.js';
+	import * as DropdownMenu from '../../../ui/dropdown-menu/index.js';
+	import type { Slide } from '../../types.js';
+
+	interface Props {
+		editor: PresentationEditor;
+		slide: Slide;
+		context?: boolean;
+	}
+
+	let { editor, slide, context }: Props = $props();
+
+	const ItemComponent = context ? ContextMenu.Item : DropdownMenu.Item;
+	const ShortcutComponent = context ? ContextMenu.Shortcut : DropdownMenu.Shortcut;
+
+	const isMac = /Mac OS X/.test(navigator.userAgent);
+</script>
+
+<ItemComponent onclick={() => editor.duplicateSlide(slide)}>
+	<div class="flex items-center">
+		<DuplicateIcon class="text-foreground-alt mr-2 size-5" />
+		Duplicate Page
+	</div>
+	<ShortcutComponent>
+		<kbd
+			class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-sm px-2 py-1 text-xs"
+		>
+			{isMac ? '⌘D' : 'Ctrl+D'}
+		</kbd>
+	</ShortcutComponent>
+</ItemComponent>

package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PresentationEditor } from '../../presentation-editor.svelte.js';
+import type { Slide } from '../../types.js';
+interface Props {
+    editor: PresentationEditor;
+    slide: Slide;
+    context?: boolean;
+}
+declare const SlideDuplicateButton: import("svelte").Component<Props, {}, "">;
+type SlideDuplicateButton = ReturnType<typeof SlideDuplicateButton>;
+export default SlideDuplicateButton;

package/dist/components/presentation-editor/slides-navigation/slide-preview.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { dragHandle } from 'svelte-dnd-action';
+	import PlusIcon from 'lucide-svelte/icons/plus';
+	import EllipsisIcon from 'lucide-svelte/icons/ellipsis';
+	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 {
+		BackgroundLayerThumb,
+		HtmlLayerThumb,
+		ImageLayerThumb,
+		LayerThumbWrapper,
+	} from '../layers/index.js';
+	import { cn } from '../../../utils.js';
+	import SlideDeleteButton from './buttons/slide-delete-button.svelte';
+	import SlideDuplicateButton from './buttons/slide-duplicate-button.svelte';
+	import type { PresentationEditor } from '../presentation-editor.svelte.js';
+	import type { Slide } from '../types.js';
+
+	interface Props {
+		editor: PresentationEditor;
+		slide: Slide;
+		index: number;
+		thumbScale: number;
+	}
+
+	let { editor, slide, index, thumbScale }: Props = $props();
+
+	let menuOpen = $state(false);
+</script>
+
+<div class="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="absolute inline-flex flex-col opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+				role="menu"
+			>
+				<Button
+					variant="outline"
+					size="icon-xs"
+					class="my-1 h-6 w-6 rounded-full"
+					onclick={() => editor.addSlide({ index })}
+				>
+					<PlusIcon class="h-4 w-4" />
+				</Button>
+			</div>
+		</div>
+	</div>
+	<div use:dragHandle class="group relative mx-2 my-1 transition-transform" role="none">
+		<button class="block" onclick={() => editor.setActiveSlide(slide.id)}>
+			<ContextMenu.Root>
+				<ContextMenu.Trigger>
+					<div
+						class={cn(
+							'relative',
+							{
+								'after:absolute after:inset-0 after:rounded-xl after:border-2':
+									editor.activeSlide === slide,
+							},
+							editor.slideSelected ? 'after:border-purple-500' : 'after:border-gray-400',
+						)}
+					>
+						<div
+							class="relative overflow-hidden rounded-lg bg-white"
+							style:clip-path={editor.activeSlide === slide
+								? 'inset(5px round 8px)'
+								: 'inset(0px round 10px)'}
+							style:width="{editor.width * thumbScale}px"
+							style:height="{editor.height * thumbScale}px"
+						>
+							<BackgroundLayerThumb {slide} />
+							{#each slide.layers as layer (layer.id)}
+								<LayerThumbWrapper {layer} thumb={thumbScale}>
+									{#snippet children({ thumbScale })}
+										{#if layer.type === 'html'}
+											<HtmlLayerThumb {layer} {thumbScale} />
+										{:else if layer.type === 'image'}
+											<ImageLayerThumb {layer} {thumbScale} />
+										{/if}
+									{/snippet}
+								</LayerThumbWrapper>
+							{/each}
+						</div>
+					</div>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content class="w-72">
+					<SlideDuplicateButton {editor} {slide} />
+					<SlideDeleteButton {editor} {slide} context={true} />
+				</ContextMenu.Content>
+			</ContextMenu.Root>
+		</button>
+		<div
+			class={cn(
+				'pointer-events-none absolute z-10 flex flex-col-reverse flex-wrap overflow-hidden',
+			)}
+			style:inset={editor.activeSlide === slide ? '5px' : '0'}
+			style:border-radius={editor.activeSlide === slide ? '8px' : '10px'}
+		>
+			<div
+				class="flex h-8 min-h-5 w-8 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">
+					<p class="text-xs font-semibold">{index + 1}</p>
+				</div>
+			</div>
+		</div>
+		<div
+			class={cn('absolute right-0 top-0 px-2 py-1 opacity-0 group-hover:opacity-100', {
+				'opacity-100': menuOpen,
+			})}
+		>
+			<DropdownMenu.Root bind:open={menuOpen}>
+				<DropdownMenu.Trigger
+					class={buttonVariants({
+						variant: 'default',
+						class: 'h-4 rounded-full px-1.5 py-0',
+					})}
+				>
+					<EllipsisIcon />
+				</DropdownMenu.Trigger>
+
+				<DropdownMenu.Content side="top" align="start" class="w-72">
+					<SlideDuplicateButton {editor} {slide} />
+					<SlideDeleteButton {editor} {slide} />
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/slides-navigation/slide-preview.svelte.d.ts

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

package/dist/components/presentation-editor/slides-navigation/slides-navigation.svelte

@@ -0,0 +1,100 @@
+<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';
+
+	const editor = getPresentationEditorContext();
+
+	const height = 72;
+
+	let thumbScale = $derived(height / editor.height);
+
+	const flipDurationMs = 300;
+	const otherOptions = { flipDurationMs, type: 'slides', dropTargetStyle: {} };
+
+	function handleDndConsider(e) {
+		editor.slides = e.detail.items;
+	}
+
+	async function handleDndFinalize(e) {
+		console.log('handleDndFinalize', e);
+
+		editor.slides = e.detail.items;
+
+		const index = editor.findSlideIndex(e.detail.info.id);
+		const item = editor.slides[index];
+
+		const prev = editor.slides[index - 1];
+		const next = editor.slides[index + 1];
+
+		// 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: 'slide',
+					undo: { sortOrder: item.sortOrder },
+					redo,
+				},
+				item.id,
+			);
+		}
+	}
+</script>
+
+<nav class="relative flex w-full flex-nowrap justify-center">
+	<div class="flex w-fit max-w-full overflow-x-auto">
+		<section
+			class="flex"
+			aria-label="Slides"
+			use:dragHandleZone={{ items: editor.slides, ...otherOptions }}
+			onconsider={handleDndConsider}
+			onfinalize={handleDndFinalize}
+		>
+			{#each editor.slides as slide, index (slide.id)}
+				<div
+					class="relative py-2"
+					aria-label="Page {index + 1}"
+					animate:flip={{ duration: flipDurationMs }}
+				>
+					<SlidePreview {editor} {slide} {index} {thumbScale} />
+				</div>
+			{/each}
+		</section>
+		<div class="relative py-2" role="none">
+			<button
+				class="mx-2 my-1 rounded-xl"
+				aria-label="New Page"
+				onclick={() => editor.addSlide({ index: editor.slides.length })}
+			>
+				<div
+					class="relative flex items-center justify-center overflow-hidden rounded-lg bg-gray-400"
+					style:width="{editor.width * thumbScale}px"
+					style:height="{editor.height * thumbScale}px"
+				>
+					<PlusIcon class="h-6 w-6" />
+				</div>
+			</button>
+		</div>
+	</div>
+</nav>

package/dist/components/presentation-editor/slides-navigation/slides-navigation.svelte.d.ts

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

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { ActiveLayerGuide } from './types.js';
+	import { cn } from '../../utils.js';
+
+	interface Props {
+		guides: ActiveLayerGuide[];
+		zoom: number;
+	}
+
+	let { guides, zoom }: Props = $props();
+</script>
+
+<div class="absolute h-full w-full">
+	{#each guides as guide (guide.id)}
+		{#if guide.type === 'box'}
+			<div class="absolute border border-purple-500" style:inset="{guide.inset * zoom}px"></div>
+		{:else if guide.type === 'vertical'}
+			<div
+				class={cn(
+					'absolute h-full border-l border-purple-500',
+					guide.style === 'dashed' && 'border-dashed',
+					guide.style === 'dotted' && 'border-dotted',
+				)}
+				style:left="{guide.x * zoom}px"
+				style:top="{guide.y * zoom}px"
+				style:height="{guide.length * zoom}px"
+			></div>
+		{:else if guide.type === 'horizontal'}
+			<div
+				class={cn(
+					'absolute w-full border-t border-purple-500',
+					guide.style === 'dashed' && 'border-dashed',
+					guide.style === 'dotted' && 'border-dotted',
+				)}
+				style:left="{guide.x * zoom}px"
+				style:top="{guide.y * zoom}px"
+				style:width="{guide.length * zoom}px"
+			></div>
+		{/if}
+	{/each}
+</div>

package/dist/components/presentation-editor/snapping-guides.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ActiveLayerGuide } from './types.js';
+interface Props {
+    guides: ActiveLayerGuide[];
+    zoom: number;
+}
+declare const SnappingGuides: import("svelte").Component<Props, {}, "">;
+type SnappingGuides = ReturnType<typeof SnappingGuides>;
+export default SnappingGuides;