@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/layers/utils.js

@@ -1,4 +1,5 @@
-const rotatePoint = (point, angleRad) => {
+import { tick } from 'svelte';
+export const rotatePointOld = (point, angleRad) => {
     const cos = Math.cos(angleRad);
     const sin = Math.sin(angleRad);
     return {
@@ -32,17 +33,22 @@ const getPoints = (origin, width, height) => {
             throw new Error(`Unknown origin: ${origin}`);
     }
 };
-export const calculateNewPosition = (origin, element, newWidth, newHeight) => {
-    const { x, y, width, height } = element;
-    const rotate = element.rotate || 0;
+export const calculateLayerTransform = (layer) => {
+    const { x, y, width, height } = layer;
+    const scale = layer.scale || 1;
+    const rotate = layer.rotate || 0;
+    return { x, y, width: width * scale, height: height * scale, rotate };
+};
+export const calculateNewPosition = (origin, transform, newWidth, newHeight) => {
+    const { x, y, width, height, rotate } = transform;
     const oldPoint = getPoints(origin, width, height);
     const newPoint = getPoints(origin, newWidth, newHeight);
     let deltaX = newPoint.x - oldPoint.x;
     let deltaY = newPoint.y - oldPoint.y;
     if (rotate !== 0) {
         const rad = (rotate * Math.PI) / 180;
-        const rotatedOldCenter = rotatePoint(oldPoint, rad);
-        const rotatedNewCenter = rotatePoint(newPoint, rad);
+        const rotatedOldCenter = rotatePointOld(oldPoint, rad);
+        const rotatedNewCenter = rotatePointOld(newPoint, rad);
         deltaX = rotatedNewCenter.x - rotatedOldCenter.x;
         deltaY = rotatedNewCenter.y - rotatedOldCenter.y;
     }
@@ -51,15 +57,14 @@ export const calculateNewPosition = (origin, element, newWidth, newHeight) => {
         newY: y - deltaY - (newHeight - height) / 2,
     };
 };
-export function calculateBoundingBox(element) {
-    const { x, y, width, height } = element;
-    const rotate = element.rotate || 0;
+export function calculateBoundingBox(transform) {
+    const { x, y, width, height, rotate } = transform;
     if (rotate === 0) {
         return { x, y, width, height };
     }
     const radians = (rotate * Math.PI) / 180;
     const origins = ['top-left', 'top-right'];
-    const corners = origins.map((position) => rotatePoint(getPoints(position, width, height), radians));
+    const corners = origins.map((position) => rotatePointOld(getPoints(position, width, height), radians));
     const maxX = Math.max(...corners.map((corner) => Math.abs(corner.x)));
     const maxY = Math.max(...corners.map((corner) => Math.abs(corner.y)));
     return {
@@ -69,24 +74,254 @@ export function calculateBoundingBox(element) {
         height: maxY * 2,
     };
 }
-export function calculateImageFill(image, bBox) {
-    const widthScale = bBox.width / image.width;
-    const heightScale = bBox.height / image.height;
-    const scale = Math.max(widthScale, heightScale);
-    const width = bBox.width / scale;
-    const height = bBox.height / scale;
+export function degToRad(deg) {
+    return (deg * Math.PI) / 180;
+}
+export function rotatePoint(p, origin, angleRad) {
+    const dx = p.x - origin.x;
+    const dy = p.y - origin.y;
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    return {
+        x: origin.x + dx * cos - dy * sin,
+        y: origin.y + dx * sin + dy * cos,
+    };
+}
+export function getRotatedCorners(rect) {
+    const cx = rect.x + rect.width / 2;
+    const cy = rect.y + rect.height / 2;
+    const angle = degToRad(rect.rotate);
+    const hw = rect.width / 2;
+    const hh = rect.height / 2;
+    const corners = [
+        { x: cx - hw, y: cy - hh },
+        { x: cx + hw, y: cy - hh },
+        { x: cx + hw, y: cy + hh },
+        { x: cx - hw, y: cy + hh },
+    ];
+    return corners.map((p) => rotatePoint(p, { x: cx, y: cy }, angle));
+}
+export function calculateBoundingBoxSize(width, height, rotate) {
+    const theta = degToRad(rotate);
+    const cosTheta = Math.abs(Math.cos(theta));
+    const sinTheta = Math.abs(Math.sin(theta));
+    return {
+        width: width * cosTheta + height * sinTheta,
+        height: width * sinTheta + height * cosTheta,
+    };
+}
+export function isRotatedVertically(rotate) {
+    const rotationNormalized = ((rotate % 360) + 360) % 360;
+    const rotationShifted = (rotationNormalized + 45) % 360;
+    return Math.floor(rotationShifted / 90) % 2 === 1;
+}
+export function calculateNewSize(width, height, rotate, scale, isHorizontal) {
+    const angle = degToRad(rotate);
+    const cosTheta = Math.abs(Math.cos(angle));
+    const sinTheta = Math.abs(Math.sin(angle));
+    // Bounding box dimensions
+    const bboxWidth = width * cosTheta + height * sinTheta;
+    const bboxHeight = width * sinTheta + height * cosTheta;
+    // Determine if sides are flipped by rotation
+    const rotatedVertically = isRotatedVertically(rotate);
+    const bboxSize = (isHorizontal ? bboxWidth : bboxHeight) * scale;
+    const scalingRectangleSide = isHorizontal !== rotatedVertically ? 'width' : 'height';
+    const scalingWidth = scalingRectangleSide === 'width';
+    const dimensionFactor = !rotatedVertically ? cosTheta : sinTheta;
+    const crossFactor = rotatedVertically ? cosTheta : sinTheta;
+    const newMainSize = (bboxSize - (scalingWidth ? height : width) * crossFactor) / dimensionFactor;
+    const newWidth = scalingWidth ? newMainSize : width;
+    const newHeight = !scalingWidth ? newMainSize : height;
+    return { width: newWidth, height: newHeight, scaled: scalingRectangleSide };
+}
+export function getRotatedBoundingBox(center, width, height, rotate) {
+    const angle = degToRad(rotate);
+    // Half dimensions
+    const hw = width / 2;
+    const hh = height / 2;
+    // Rotation matrix components
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    // Corners of the unrotated rectangle relative to center
+    const corners = [
+        { x: -hw, y: -hh },
+        { x: hw, y: -hh },
+        { x: hw, y: hh },
+        { x: -hw, y: hh },
+    ];
+    // Rotate corners and translate back to original position
+    const rotatedCorners = corners.map(({ x, y }) => {
+        return {
+            x: center.x + x * cos - y * sin,
+            y: center.y + x * sin + y * cos,
+        };
+    });
+    // Find min/max bounds
+    const xs = rotatedCorners.map((p) => p.x);
+    const ys = rotatedCorners.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
     return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
+export function calculateGroupRotatedBoundingBox(rects, groupRotate = 0) {
+    if (!groupRotate)
+        return { ...calculateGroupBoundingBox(rects), rotate: 0 };
+    const allCorners = rects.flatMap(getRotatedCorners);
+    const theta = degToRad(-groupRotate); // inverse to align bbox with axes
+    // Rotate all points to align with desired bbox angle
+    const rotatedPoints = allCorners.map((p) => rotatePoint(p, { x: 0, y: 0 }, theta));
+    // Compute AABB of rotated points
+    const xs = rotatedPoints.map((p) => p.x);
+    const ys = rotatedPoints.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const centerRotated = {
+        x: (minX + maxX) / 2,
+        y: (minY + maxY) / 2,
+    };
+    // Rotate center back to original space
+    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(groupRotate));
+    const bbox = {
+        x: center.x - width / 2,
+        y: center.y - height / 2,
         width,
         height,
-        scale,
-        ...(widthScale > heightScale
-            ? {
-                offsetX: 0,
-                offsetY: (image.height - bBox.height / scale) / 2,
+        rotate: groupRotate,
+    };
+    return bbox;
+}
+export function calculateRelativeRects(bbox, rects) {
+    const theta = degToRad(-bbox.rotate); // inverse to align bbox with axes
+    const bboxCenter = { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 };
+    return rects.map((rect) => {
+        // Get center of original rect
+        const center = {
+            x: rect.x + rect.width / 2,
+            y: rect.y + rect.height / 2,
+        };
+        // Rotate center ralatively to the bbox center
+        const relativeCenter = rotatePoint(center, bboxCenter, theta);
+        return {
+            x: relativeCenter.x - rect.width / 2 - bbox.x,
+            y: relativeCenter.y - rect.height / 2 - bbox.y,
+            width: rect.width,
+            height: rect.height,
+            rotate: rect.rotate - bbox.rotate,
+        };
+    });
+}
+export const checkPolygonsIntersect = (a, b) => {
+    const polygons = [a, b];
+    for (const polygon of polygons) {
+        for (let i1 = 0; i1 < polygon.length; i1++) {
+            const i2 = (i1 + 1) % polygon.length;
+            const p1 = polygon[i1];
+            const p2 = polygon[i2];
+            const normal = { x: p2.y - p1.y, y: p1.x - p2.x };
+            let minA = Infinity, maxA = -Infinity;
+            for (const point of a) {
+                const projected = normal.x * point.x + normal.y * point.y;
+                minA = Math.min(minA, projected);
+                maxA = Math.max(maxA, projected);
             }
-            : {
-                offsetX: (image.width - bBox.width / scale) / 2,
-                offsetY: 0,
-            }),
+            let minB = Infinity, maxB = -Infinity;
+            for (const point of b) {
+                const projected = normal.x * point.x + normal.y * point.y;
+                minB = Math.min(minB, projected);
+                maxB = Math.max(maxB, projected);
+            }
+            if (maxA < minB || maxB < minA)
+                return false;
+        }
+    }
+    return true;
+};
+export function calculateGroupBoundingBox(transforms) {
+    let minX = Number.MAX_VALUE;
+    let maxX = Number.MIN_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxY = Number.MIN_VALUE;
+    transforms.forEach((transform) => {
+        const bbox = calculateBoundingBox(transform);
+        minX = Math.min(minX, bbox.x);
+        maxX = Math.max(maxX, bbox.x + bbox.width);
+        minY = Math.min(minY, bbox.y);
+        maxY = Math.max(maxY, bbox.y + bbox.height);
+    });
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+const minScaleToContain = (rotatedRect, rect) => {
+    const { width: rw, height: rh, rotate } = rotatedRect;
+    const { width: w, height: h } = rect;
+    // Convert angle to radians
+    const angleRad = (rotate || 0) * (Math.PI / 180);
+    // Calculate the width and height of the bounding box of the rotated rectangle
+    const boundingWidth = Math.abs(w * Math.cos(angleRad)) + Math.abs(h * Math.sin(angleRad));
+    const boundingHeight = Math.abs(w * Math.sin(angleRad)) + Math.abs(h * Math.cos(angleRad));
+    // Calculate the scale factors needed to fit the rectangle into the bounding box
+    const scaleX = boundingWidth / rw;
+    const scaleY = boundingHeight / rh;
+    // The minimum scale factor is the maximum of the two scale factors
+    const minScale = Math.max(scaleX, scaleY);
+    return minScale;
+};
+export function calculateImageCover(image, bbox) {
+    const scale = minScaleToContain(image, bbox);
+    return {
+        width: bbox.width / scale,
+        height: bbox.height / scale,
+        scale,
+        offsetX: (image.width - bbox.width / scale) / 2,
+        offsetY: (image.height - bbox.height / scale) / 2,
     };
 }
+export const defaultColor = '#000000';
+export function extractBorderColors(layers) {
+    const layersWithBorder = layers.filter((layer) => layer.borderWidth);
+    if (!layersWithBorder.length)
+        return;
+    const set = new Set();
+    layersWithBorder.forEach((layer) => {
+        set.add(layer.borderColor || defaultColor);
+    });
+    return Array.from(set);
+}
+export function buildBackgroundCircleStyle(colors) {
+    if (colors.length < 2) {
+        return `background-color: ${colors[0] || defaultColor}`;
+    }
+    const step = 360 / colors.length;
+    const gradientColors = colors
+        .map((c, i) => `${c} ${Math.round(i * step)}deg ${Math.round((i + 1) * step)}deg`)
+        .join(', ');
+    return `background-image: conic-gradient(${gradientColors})`;
+}
+export async function applyHtmlToLayer(layer, html) {
+    layer.html = html;
+    await tick();
+    const { x, y, width, height } = layer;
+    const redo = { html, x, y, height };
+    const layerContent = document.getElementById(`layer-content-${layer.id}`);
+    if (layerContent && layerContent.offsetHeight !== layer.height) {
+        const scale = layer.scale || 1;
+        const rotate = layer.rotate || 0;
+        const newHeight = layerContent.offsetHeight * scale;
+        const { newX, newY } = calculateNewPosition(`top-left`, { x, y, width: width * scale, height: height * scale, rotate }, width * scale, newHeight);
+        redo.x = newX;
+        redo.y = newY;
+        redo.height = newHeight / scale;
+    }
+    Object.assign(layer, redo);
+    return redo;
+}

package/dist/components/presentation-editor/menu/background-menu-content.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import CopyIcon from 'lucide-svelte/icons/copy';
+	import PasteIcon from 'lucide-svelte/icons/clipboard';
+	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
+	import AddIcon from 'lucide-svelte/icons/file-plus-2';
+	import TrashIcon from 'lucide-svelte/icons/trash-2';
+	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
+	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
+	import ExtractImageIcon from 'lucide-svelte/icons/square-arrow-out-up-right';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import type { PresentationEditor } from '../presentation-editor.svelte.js';
+	import type { Slide } from '../types.js';
+	import { checkIfMac } from '../../../utils.js';
+
+	interface Props {
+		editor: PresentationEditor;
+		slide: Slide;
+	}
+
+	let { editor, slide }: Props = $props();
+
+	const locked = $derived(slide.locked || slide.backgroundLocked);
+
+	const isMac = checkIfMac();
+</script>
+
+<DropdownMenu.Item onclick={() => editor.copySlide(slide.id)}>
+	<CopyIcon />
+	Copy
+	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item
+	onclick={() => editor.clipboardPaste()}
+	disabled={!editor.clipboard || (slide.locked && !('layers' in editor.clipboard))}
+>
+	<PasteIcon />
+	Paste
+	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => editor.addSlide()}>
+	<AddIcon />
+	Add page
+	<DropdownMenu.Shortcut>{isMac ? '⌘⏎' : 'Ctrl+⏎'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => editor.duplicateSlide(slide)}>
+	<DuplicateIcon />
+	Duplicate page
+	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => editor.removeBackground(slide.id)} disabled={locked}>
+	<TrashIcon />
+	{#if slide.backgroundImage}
+		Delete background image
+	{:else}
+		Delete background
+	{/if}
+	<DropdownMenu.Shortcut>DELETE</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Separator />
+
+<DropdownMenu.Item onclick={() => editor.backgroundToggleLocked(slide.id)} disabled={slide.locked}>
+	{#if slide.backgroundLocked}
+		<UnlockIcon />
+		Unlock background
+	{:else}
+		<LockIcon />
+		Lock background
+	{/if}
+	<DropdownMenu.Shortcut>{isMac ? '⌥⇧L' : 'Alt+Shift+L'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+{#if slide.backgroundImage}
+	<DropdownMenu.Separator />
+
+	<DropdownMenu.Item onclick={() => editor.backgroundImageToLayer(slide.id)} disabled={locked}>
+		<ExtractImageIcon />
+		Detach image from background
+	</DropdownMenu.Item>
+{/if}

package/dist/components/presentation-editor/menu/background-menu-content.svelte.d.ts

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

package/dist/components/presentation-editor/menu/layer-menu-content.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import CopyIcon from 'lucide-svelte/icons/copy';
+	import PasteIcon from 'lucide-svelte/icons/clipboard';
+	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
+	import TrashIcon from 'lucide-svelte/icons/trash-2';
+	import LayerIcon from 'lucide-svelte/icons/layers';
+	import LayerBringForwardIcon from 'lucide-svelte/icons/arrow-up';
+	import LayerBringToFrontIcon from 'lucide-svelte/icons/arrow-up-to-line';
+	import LayerSendBackwardIcon from 'lucide-svelte/icons/arrow-down';
+	import LayerSendToBackIcon from 'lucide-svelte/icons/arrow-down-to-line';
+	import AlignLeftIcon from 'lucide-svelte/icons/align-start-vertical';
+	import AlignCenterIcon from 'lucide-svelte/icons/align-center-vertical';
+	import AlignRightIcon from 'lucide-svelte/icons/align-end-vertical';
+	import AlignTopIcon from 'lucide-svelte/icons/align-start-horizontal';
+	import AlignMiddleIcon from 'lucide-svelte/icons/align-center-horizontal';
+	import AlignBottomIcon from 'lucide-svelte/icons/align-end-horizontal';
+	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
+	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
+	import SetAsBackgroundIcon from 'lucide-svelte/icons/image-upscale';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { checkIfMac } from '../../../utils.js';
+
+	const editor = getPresentationEditorContext();
+
+	const someLayersLocked = $derived(editor.activeLayers.some((layer) => layer.locked));
+	const locked = $derived(editor.activeSlide.locked || someLayersLocked);
+
+	const isMac = checkIfMac();
+
+	const activeLayerIds = $derived(editor.activeLayers.map((l) => l.id));
+
+	const singleImageLayer = $derived(
+		editor.activeLayers.length === 1 && editor.activeLayers[0].type === 'image'
+			? editor.activeLayers[0]
+			: null,
+	);
+
+	let overlaps = editor.getLayerOverlaps(editor.activeSlide, editor.activeLayers);
+</script>
+
+<DropdownMenu.Item onclick={() => editor.copyLayers(editor.activeSlide.id, activeLayerIds)}>
+	<CopyIcon />
+	Copy
+	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => editor.clipboardPaste()} disabled={!editor.clipboard}>
+	<PasteIcon />
+	Paste
+	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item onclick={() => editor.duplicateLayers(editor.activeLayers)}>
+	<DuplicateIcon />
+	Duplicate
+	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+<DropdownMenu.Item
+	onclick={() => editor.removeLayers(editor.activeSlide.id, activeLayerIds)}
+	disabled={locked}
+>
+	<TrashIcon />
+	Delete
+	<DropdownMenu.Shortcut>DELETE</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Separator />
+
+{#if overlaps}
+	<DropdownMenu.Sub>
+		<DropdownMenu.SubTrigger disabled={locked}>
+			<LayerIcon />
+			Layers
+		</DropdownMenu.SubTrigger>
+		<DropdownMenu.SubContent class="w-56" align="start">
+			<DropdownMenu.Item
+				disabled={overlaps.forward === undefined}
+				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'forward')}
+			>
+				<LayerBringForwardIcon />
+				Bring forward
+				<DropdownMenu.Shortcut>{isMac ? '⌘]' : 'Ctrl+]'}</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item
+				disabled={overlaps.front === undefined}
+				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'front')}
+			>
+				<LayerBringToFrontIcon />
+				Bring to front
+				<DropdownMenu.Shortcut>{isMac ? '⌥⌘]' : 'Ctrl+]'}</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item
+				disabled={overlaps.backward === undefined}
+				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'backward')}
+			>
+				<LayerSendBackwardIcon />
+				Send backward
+				<DropdownMenu.Shortcut>{isMac ? '⌘[' : 'Ctrl+['}</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item
+				disabled={overlaps.back === undefined}
+				onclick={() => editor.moveLayers(editor.activeSlide.id, activeLayerIds, 'back')}
+			>
+				<LayerSendToBackIcon />
+				Send to back
+				<DropdownMenu.Shortcut>{isMac ? '⌥⌘[' : 'Ctrl+['}</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+{/if}
+
+<DropdownMenu.Sub>
+	<DropdownMenu.SubTrigger disabled={locked}>
+		<AlignLeftIcon />
+		Align to page
+	</DropdownMenu.SubTrigger>
+	<DropdownMenu.SubContent class="w-32" align="start">
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'left')}
+		>
+			<AlignLeftIcon />
+			Left
+		</DropdownMenu.Item>
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'center')}
+		>
+			<AlignCenterIcon />
+			Center
+		</DropdownMenu.Item>
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'right')}
+		>
+			<AlignRightIcon />
+			Right
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'top')}
+		>
+			<AlignTopIcon />
+			Top
+		</DropdownMenu.Item>
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'middle')}
+		>
+			<AlignMiddleIcon />
+			Middle
+		</DropdownMenu.Item>
+		<DropdownMenu.Item
+			onclick={() => editor.alignLayers(editor.activeSlide.id, activeLayerIds, 'bottom')}
+		>
+			<AlignBottomIcon />
+			Bottom
+		</DropdownMenu.Item>
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>
+
+<DropdownMenu.Separator />
+
+<DropdownMenu.Item
+	onclick={() =>
+		editor.toggleLayersLocked(editor.activeSlide.id, activeLayerIds, !someLayersLocked)}
+	disabled={editor.activeSlide.locked}
+>
+	{#if someLayersLocked}
+		<UnlockIcon />
+		Unlock
+	{:else}
+		<LockIcon />
+		Lock
+	{/if}
+	<DropdownMenu.Shortcut>{isMac ? '⌥⇧L' : 'Alt+Shift+L'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+{#if singleImageLayer}
+	<DropdownMenu.Separator />
+	<DropdownMenu.Item
+		onclick={() => editor.imageLayerToBackground(editor.activeSlide.id, singleImageLayer.id)}
+		disabled={locked}
+	>
+		<SetAsBackgroundIcon />
+		Set image as background
+	</DropdownMenu.Item>
+{/if}

package/dist/components/presentation-editor/menu/layer-menu-content.svelte.d.ts

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

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import CopyIcon from 'lucide-svelte/icons/copy';
+	import PasteIcon from 'lucide-svelte/icons/clipboard';
+	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
+	import AddIcon from 'lucide-svelte/icons/file-plus-2';
+	import TrashIcon from 'lucide-svelte/icons/trash-2';
+	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
+	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import type { PresentationEditor } from '../presentation-editor.svelte.js';
+	import type { Slide } from '../types.js';
+	import { checkIfMac } from '../../../utils.js';
+
+	interface Props {
+		editor: PresentationEditor;
+		slide: Slide;
+	}
+
+	let { editor, slide }: Props = $props();
+
+	const locked = $derived(slide.locked);
+
+	const isMac = checkIfMac();
+</script>
+
+<DropdownMenu.Item onclick={() => editor.copySlide(slide.id)}>
+	<CopyIcon />
+	Copy
+	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Item onclick={() => editor.clipboardPaste()} disabled={!editor.clipboard}>
+	<PasteIcon />
+	Paste
+	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Item onclick={() => editor.addSlide()}>
+	<AddIcon />
+	Add page
+	<DropdownMenu.Shortcut>{isMac ? '⌘⏎' : 'Ctrl+⏎'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Item onclick={() => editor.duplicateSlide(slide)}>
+	<DuplicateIcon />
+	Duplicate page
+	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Item onclick={() => editor.removeSlide(slide.id)} disabled={locked}>
+	<TrashIcon />
+	Delete page
+	<DropdownMenu.Shortcut>DELETE</DropdownMenu.Shortcut>
+</DropdownMenu.Item>
+
+<DropdownMenu.Separator />
+
+<DropdownMenu.Item onclick={() => editor.toggleSlideLocked(slide.id)}>
+	{#if slide.locked}
+		<UnlockIcon />
+		Unlock page
+	{:else}
+		<LockIcon />
+		Lock page
+	{/if}
+	<DropdownMenu.Shortcut>{isMac ? '⌥⇧L' : 'Alt+Shift+L'}</DropdownMenu.Shortcut>
+</DropdownMenu.Item>

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

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