@peteai/presentation-editor 0.0.6 → 0.0.7

package/dist/components/{presentation-editor → editor}/layers/controls/rotate-control/rotate-control.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
-	import RotateIcon from 'lucide-svelte/icons/refresh-cw';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import {
-		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
-		type Transform,
-	} from '../../utils.js';
+	import RotateIcon from '@lucide/svelte/icons/refresh-cw';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { calculateGroupRotatedBoundingBox, type Transform } from '../../utils.js';
 	import type { Layer } from '../../../types.js';
 
 	const type = 'rotate';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let element: HTMLElement | null = $state(null);
 
@@ -46,13 +42,11 @@
 		initial = {
 			clientX: e.clientX,
 			clientY: e.clientY,
-			bbox:
+			bbox: $state.snapshot(
 				editor.activeLayers.length === 1
-					? calculateLayerTransform(editor.activeLayers[0])
-					: calculateGroupRotatedBoundingBox(
-							editor.activeLayers.map(calculateLayerTransform),
-							editor.activeGroupRotate,
-						),
+					? editor.activeLayers[0]
+					: calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate),
+			),
 			layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 		};
 		editor.activeAction = { id: actionId, type, cursor: 'cursor-grabbing' };
@@ -70,41 +64,40 @@
 		editor.activeAction = null;
 		if (!initial || currentRotate === initial.bbox.rotate) return;
 
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: initial.layers.map((layer) => {
+		editor.historyPush(
+			initial.layers.map((layer) => {
 				if (editor.isLayerOutOfBounds(layer.state)) {
 					return {
-						type: 'layersRemove',
-						slideId: editor.activeSlide.id,
-						layers: [layer],
+						type: 'layerRemove',
+						pageId: editor.activePage.id,
+						layer,
 					};
 				} else {
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { x: layer.x, y: layer.y, rotate: layer.rotate },
 						redo: { x: layer.state.x, y: layer.state.y, rotate: layer.state.rotate },
 					};
 				}
 			}),
-		});
+		);
 	};
 
 	const onMouseMove = (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId || !element) return;
 
-		const slideClientRect = element.closest('[data-slide-container]')?.getBoundingClientRect();
-		if (!slideClientRect) return;
+		const pageClientRect = element.closest('[data-page-container]')?.getBoundingClientRect();
+		if (!pageClientRect) return;
 
-		const { x: slideX, y: slideY } = slideClientRect;
+		const { x: pageX, y: pageY } = pageClientRect;
 
-		const { width, height, x, y, rotate } = initial.bbox;
+		const { width, height, x, y, rotate, scale } = initial.bbox;
 
 		// Calculate the center of the layer
-		const clientX = slideX + x * editor.zoom + (width * editor.zoom) / 2;
-		const clientY = slideY + y * editor.zoom + (height * editor.zoom) / 2;
+		const clientX = pageX + x * editor.zoom + (width * scale * editor.zoom) / 2;
+		const clientY = pageY + y * editor.zoom + (height * scale * editor.zoom) / 2;
 
 		// Calculate the current angle based on the current mouse position relative to the center of the layer
 		const currentAngle = Math.atan2(
@@ -134,10 +127,10 @@
 			const centerY = y + height / 2;
 
 			initial.layers.forEach((layer) => {
-				const { width, height, x, y, rotate } = calculateLayerTransform(layer);
+				const { width, height, x, y, rotate, scale } = layer;
 				// Find center of layerect
-				const layerCenterX = x + width / 2;
-				const layerCenterY = y + height / 2;
+				const layerCenterX = x + (width * scale) / 2;
+				const layerCenterY = y + (height * scale) / 2;
 
 				// Translate to origin
 				const dx = layerCenterX - centerX;
@@ -152,8 +145,8 @@
 				const newCenterY = rotatedY + centerY;
 
 				// Compute new top-left corner
-				const newX = newCenterX - width / 2;
-				const newY = newCenterY - height / 2;
+				const newX = newCenterX - (width * scale) / 2;
+				const newY = newCenterY - (height * scale) / 2;
 
 				const newRotate = normalizeRotation(rotate + rotateDiff);
 

package/dist/components/{presentation-editor → editor}/layers/controls/side-resize-control/side-resize-control.svelte

@@ -48,13 +48,13 @@
 </script>
 
 <script lang="ts">
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { cn } from '../../../../../utils.js';
 	import { calculateNewPosition } from '../../utils.js';
 
 	let { origin, layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { base, handler, grip, cursor } = sideResizeControlVariants({ origin });
 
@@ -94,14 +94,14 @@
 
 		if (editor.isLayerOutOfBounds(layer)) {
 			editor.historyPush({
-				type: 'layersRemove',
-				slideId: editor.activeSlide.id,
-				layers: [initial.layer],
+				type: 'layerRemove',
+				pageId: editor.activePage.id,
+				layer: initial.layer,
 			});
 		} else {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: layer.id, type: layer.type },
 				undo: {
 					scale: initial.layer.scale,
@@ -130,11 +130,7 @@
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
 		isChanged = true;
-		const { width, height, x, y, flipX, flipY } = initial.layer;
-		const scale = initial.layer.scale || 1;
-		const rotate = initial.layer.rotate || 0;
-		const offsetX = initial.layer.offsetX || 0;
-		const offsetY = initial.layer.offsetY || 0;
+		const { width, height, x, y, scale, rotate, offsetX, offsetY, flipX, flipY } = initial.layer;
 
 		const angle = (rotate * Math.PI) / 180;
 		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
@@ -196,7 +192,7 @@
 
 		const { newX, newY } = calculateNewPosition(
 			origin,
-			{ x, y, width: width * scale, height: height * scale, rotate },
+			{ x, y, width, height, rotate, scale },
 			newWidth,
 			newHeight,
 		);

package/dist/components/{presentation-editor → editor}/layers/controls/side-scale-control/side-scale-control.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
-	import type { HtmlLayer } from '../../../types.js';
+	import type { TextLayer } from '../../../types.js';
 
 	const sideScaleControlVariants = tv({
 		slots: {
@@ -28,21 +28,21 @@
 
 	export interface Props {
 		origin: NonNullable<Origin>;
-		layer: HtmlLayer;
+		layer: TextLayer;
 	}
 </script>
 
 <script lang="ts">
 	import { tick } from 'svelte';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { cn } from '../../../../../utils.js';
 	import { calculateNewPosition } from '../../utils.js';
 
 	let { origin, layer = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let initial: { clientX: number; clientY: number; layer: HtmlLayer } | null = null;
+	let initial: { clientX: number; clientY: number; layer: TextLayer } | null = null;
 	let isChanged = false;
 	const actionId = editor.generateId();
 
@@ -79,14 +79,14 @@
 
 		if (editor.isLayerOutOfBounds(layer)) {
 			editor.historyPush({
-				type: 'layersRemove',
-				slideId: editor.activeSlide.id,
-				layers: [initial.layer],
+				type: 'layerRemove',
+				pageId: editor.activePage.id,
+				layer: initial.layer,
 			});
 		} else {
 			editor.historyPush({
-				type: 'layer',
-				slideId: editor.activeSlide.id,
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
 				layer: { id: layer.id, type: layer.type },
 				undo: {
 					x: initial.layer.x,
@@ -103,9 +103,7 @@
 	const onMouseMove = async (e: MouseEvent) => {
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		const { width, height, x, y } = initial.layer;
-		const scale = initial.layer.scale || 1;
-		const rotate = initial.layer.rotate || 0;
+		const { width, height, x, y, scale, rotate } = initial.layer;
 
 		const angle = (rotate * Math.PI) / 180;
 		const xDiff = (e.clientX - initial.clientX) / editor.zoom;
@@ -121,7 +119,7 @@
 		newWidth = Math.max(newWidth, 10);
 		isChanged = newWidth !== width * scale;
 
-		layer.width = newWidth / scale;
+		Object.assign(layer, { width: newWidth / scale });
 		await tick();
 
 		const layerContent = document.getElementById(`layer-content-${layer.id}`);
@@ -130,7 +128,7 @@
 
 		const { newX, newY } = calculateNewPosition(
 			`top-${origin}`,
-			{ x, y, width: width * scale, height: height * scale, rotate },
+			{ x, y, width, height, rotate, scale },
 			newWidth,
 			newHeight,
 		);

package/dist/components/{presentation-editor → editor}/layers/controls/side-scale-control/side-scale-control.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'tailwind-variants';
-import type { HtmlLayer } from '../../../types.js';
+import type { TextLayer } from '../../../types.js';
 declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType<{
     origin: {
         right: {
@@ -55,7 +55,7 @@ declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType
 type Origin = VariantProps<typeof sideScaleControlVariants>['origin'];
 export interface Props {
     origin: NonNullable<Origin>;
-    layer: HtmlLayer;
+    layer: TextLayer;
 }
 declare const SideScaleControl: import("svelte").Component<Props, {}, "layer">;
 type SideScaleControl = ReturnType<typeof SideScaleControl>;

package/dist/components/{presentation-editor → editor}/layers/index.d.ts

@@ -4,6 +4,7 @@ import LayerWrapper from './layer-wrapper.svelte';
 import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
 import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons } from './types/background/index.js';
-import { HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit } from './types/html/index.js';
+import { TextLayer, TextLayerContent, HtmlContent, TextLayerEdit } from './types/text/index.js';
 import { ImageLayer, ImageLayerContent } from './types/image/index.js';
-export { LayerButton, LayerThumbWrapper, LayerWrapper, BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit, ImageLayer, ImageLayerContent, ActiveBackgroundBorder, ActiveLayerBorder, };
+import { GroupLayer, GroupLayerContent } from './types/group/index.js';
+export { LayerButton, LayerThumbWrapper, LayerWrapper, BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, ImageLayer, ImageLayerContent, GroupLayer, GroupLayerContent, ActiveBackgroundBorder, ActiveLayerBorder, };

package/dist/components/{presentation-editor → editor}/layers/index.js

@@ -4,8 +4,9 @@ import LayerWrapper from './layer-wrapper.svelte';
 import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
 import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, } from './types/background/index.js';
-import { HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit } from './types/html/index.js';
+import { TextLayer, TextLayerContent, HtmlContent, TextLayerEdit } from './types/text/index.js';
 import { ImageLayer, ImageLayerContent } from './types/image/index.js';
+import { GroupLayer, GroupLayerContent } from './types/group/index.js';
 export { 
 // layer buttons
 LayerButton, LayerThumbWrapper, 
@@ -13,9 +14,11 @@ LayerButton, LayerThumbWrapper,
 LayerWrapper, 
 // background layer
 BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, 
-// html layer
-HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit, 
+// text layer
+TextLayer, TextLayerContent, HtmlContent, TextLayerEdit, 
 //image layer
 ImageLayer, ImageLayerContent, 
+// group layer
+GroupLayer, GroupLayerContent, 
 // layers state
 ActiveBackgroundBorder, ActiveLayerBorder, };

package/dist/components/{presentation-editor → editor}/layers/layer-button.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import GripVerticalIcon from 'lucide-svelte/icons/grip-vertical';
-	import LockedIcon from 'lucide-svelte/icons/lock-keyhole';
+	import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+	import LockedIcon from '@lucide/svelte/icons/lock-keyhole';
+	import GroupIcon from '@lucide/svelte/icons/group';
 	import { cn } from '../../../utils.js';
 	import type { Layer } from '../types.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { getEditorContext } from '../editor.svelte.js';
 
 	interface Props {
 		layer?: Layer;
@@ -12,12 +13,13 @@
 
 	let { layer, children }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const onclick = (e: MouseEvent) => {
 		if (layer) {
 			if (e.metaKey) {
-				editor.setActiveLayers(layer.id, editor.activeLayerIds.has(layer.id) ? 'delete' : 'add');
+				const action = editor.activeLayers.find((l) => l.id === layer.id) ? 'delete' : 'add';
+				editor.setActiveLayers(layer.id, action);
 			} else {
 				editor.setActiveLayers(layer.id);
 			}
@@ -33,13 +35,15 @@
 		class={cn(
 			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
 			{
-				'border-blue-500': layer ? editor.activeLayerIds.has(layer.id) : editor.activeBackground,
+				'border-blue-500': layer
+					? editor.activeLayers.find((l) => l.id === layer.id)
+					: editor.activeSelection.type === 'background',
 			},
 		)}
 	>
 		<div class="h-6 w-6">
 			{#if layer}
-				{#if !editor.activeSlide.locked && !layer.locked}
+				{#if !editor.activePage.locked && !layer.locked}
 					<GripVerticalIcon class="size-6" />
 				{/if}
 			{/if}
@@ -48,8 +52,10 @@
 			{@render children?.()}
 		</div>
 		<div class="h-6 w-6">
-			{#if editor.activeSlide.locked || (layer ? layer.locked : editor.activeSlide.backgroundLocked)}
+			{#if editor.activePage.locked || (layer ? layer.locked : editor.activePage.backgroundLocked)}
 				<LockedIcon class="size-6" />
+			{:else if layer?.type === 'group'}
+				<GroupIcon class="size-6" />
 			{/if}
 		</div>
 	</button>

package/dist/components/{presentation-editor → editor}/layers/layer-thumb-wrapper.svelte

@@ -16,21 +16,20 @@
 		const cos = Math.abs(Math.cos(radians));
 		const sin = Math.abs(Math.sin(radians));
 
-		const width = layer.width * scale * cos + layer.height * scale * sin;
-		const height = layer.width * scale * sin + layer.height * scale * cos;
+		const width = layer.width * layer.scale * cos + layer.height * layer.scale * sin;
+		const height = layer.width * layer.scale * sin + layer.height * layer.scale * cos;
 
 		return Math.min(thumb.width / width, thumb.height / height);
 	};
 
-	let scale = $derived(layer.scale || 1);
 	let thumbScale = $derived(typeof thumb === 'object' ? getThumbScale(layer, thumb) : thumb);
 </script>
 
 <div
 	class="pointer-events-none absolute"
-	style:width="{layer.width * scale * thumbScale}px"
-	style:height="{layer.height * scale * thumbScale}px"
-	style:transform={`${typeof thumb !== 'object' ? `translate(${layer.x * thumbScale}px, ${layer.y * thumbScale}px)` : ''} rotate(${layer.rotate || 0}deg)`}
+	style:width="{layer.width * layer.scale * thumbScale}px"
+	style:height="{layer.height * layer.scale * thumbScale}px"
+	style:transform={`${typeof thumb !== 'object' ? `translate(${layer.x * thumbScale}px, ${layer.y * thumbScale}px)` : ''} rotate(${layer.rotate}deg)`}
 >
 	{@render children?.({ thumbScale })}
 </div>

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

@@ -1,13 +1,8 @@
 <script lang="ts">
 	import * as ContextMenu from '../../ui/context-menu/index.js';
 	import type { ActiveLayerGuide, BoxLayerGuide, Layer, LineLayerGuide } from '../types.js';
-	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
-	import {
-		calculateBoundingBox,
-		calculateGroupRotatedBoundingBox,
-		calculateLayerTransform,
-		type Transform,
-	} from './utils.js';
+	import { getEditorContext } from '../editor.svelte.js';
+	import { calculateBoundingBox, calculateGroupRotatedBoundingBox } from './utils.js';
 	import { generateId } from '../../../utils.js';
 	import LayerMenuContent from '../menu/layer-menu-content.svelte';
 
@@ -25,18 +20,21 @@
 		children,
 	}: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	let initial: {
 		clientX: number;
 		clientY: number;
-		bbox: Transform;
+		bbox: { x: number; y: number; width: number; height: number };
 		layers: (Layer & { state: Layer })[];
 	} | null = null;
 	const actionId = editor.generateId();
 
-	let scale = $derived(layer.scale || 1);
-	let rotate = $derived(layer.rotate || 0);
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (e.shiftKey) return;
+		editor.setActiveLayers(layer.id);
+	};
 
 	const tryToDeselect = () => {
 		removeEventListener('mouseup', tryToDeselect);
@@ -46,31 +44,21 @@
 
 	const onMouseDown = (e: MouseEvent) => {
 		console.log('mousedown', layer.id, e);
-		if (!editor.activeLayerIds.has(layer.id)) {
+		if (editor.activeAction) return;
+		if (!editor.activeLayers.find((l) => l.id === layer.id)) {
 			editor.setActiveLayers(layer.id, e.shiftKey ? 'add' : undefined);
 		} else if (e.shiftKey) {
 			addEventListener('mouseup', tryToDeselect);
 		}
-		if (
-			!editor.activeSlide.locked &&
-			!editor.activeLayers.some((l) => l.locked) &&
-			!editor.activeAction &&
-			e.button === 0
-		) {
+		if (!editor.activePage.locked && !editor.activeLayers.some((l) => l.locked) && e.button === 0) {
 			initial = {
 				clientX: e.clientX,
 				clientY: e.clientY,
-				bbox: {
-					...calculateBoundingBox(
-						editor.activeLayers.length === 1
-							? calculateLayerTransform(editor.activeLayers[0])
-							: calculateGroupRotatedBoundingBox(
-									editor.activeLayers.map(calculateLayerTransform),
-									editor.activeGroupRotate,
-								),
-					),
-					rotate: 0,
-				},
+				bbox: calculateBoundingBox(
+					editor.activeLayers.length === 1
+						? editor.activeLayers[0]
+						: calculateGroupRotatedBoundingBox(editor.activeLayers, editor.activeGroupRotate),
+				),
 				layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
 			};
 			addEventListener('mousemove', onMouseMove);
@@ -88,27 +76,26 @@
 		editor.activeAction = null;
 		if (!initial || (initial.clientX === e.clientX && initial.clientY === e.clientY)) return;
 
-		editor.historyPush({
-			type: 'layersGroup',
-			actions: initial.layers.map((layerWithState) => {
+		editor.historyPush(
+			initial.layers.map((layerWithState) => {
 				const { state, ...layer } = layerWithState;
 				if (editor.isLayerOutOfBounds(state)) {
 					return {
-						type: 'layersRemove',
-						slideId: editor.activeSlide.id,
-						layers: [layer],
+						type: 'layerRemove',
+						pageId: editor.activePage.id,
+						layer,
 					};
 				} else {
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { x: layer.x, y: layer.y },
 						redo: { x: state.x, y: state.y },
 					};
 				}
 			}),
-		});
+		);
 		initial = null;
 	};
 
@@ -147,9 +134,9 @@
 
 	let snappingGrid: LineLayerGuide[][] = [];
 	const buildSnappingGrid = () =>
-		editor.activeSlide.layers
-			.filter((l) => !editor.activeLayerIds.has(l.id))
-			.map((l) => calculateBoundingBox(calculateLayerTransform(l)))
+		editor.rootLayers
+			.filter((layer) => !editor.activeLayers.find((l) => l.id === layer.id))
+			.map((layer) => calculateBoundingBox(layer))
 			.map(({ x, y, width, height }) => {
 				const verticalPositions = [x, x + width / 2, x + width];
 				const horizontalPositions = [y, y + height / 2, y + height];
@@ -187,11 +174,11 @@
 
 		if (!initial || editor.activeAction?.id !== actionId) return;
 
-		let xDiff = (e.clientX - initial.clientX) / editor.zoom;
-		let yDiff = (e.clientY - initial.clientY) / editor.zoom;
-		let x = initial.bbox.x + xDiff;
-		let y = initial.bbox.y + yDiff;
-		const { width, height } = initial.bbox;
+		const { clientX, clientY, bbox } = initial;
+		let xDiff = (e.clientX - clientX) / editor.zoom;
+		let yDiff = (e.clientY - clientY) / editor.zoom;
+		let x = bbox.x + xDiff;
+		let y = bbox.y + yDiff;
 
 		const guides: {
 			xDiff?: number;
@@ -205,7 +192,7 @@
 		let minYDiff: number = Infinity;
 		const xSnappingCheck = (coords: number[]) => {
 			for (let i = 0; i < coords.length; i++) {
-				const coordsForCheck = [coords[i], coords[i] - width / 2, coords[i] - width];
+				const coordsForCheck = [coords[i], coords[i] - bbox.width / 2, coords[i] - bbox.width];
 				for (let j = 0; j < coordsForCheck.length; j++) {
 					const xDiff = x - coordsForCheck[j];
 					const xDiffAbs = Math.abs(xDiff);
@@ -221,7 +208,7 @@
 		};
 		const ySnappingCheck = (coords: number[]) => {
 			for (let i = 0; i < coords.length; i++) {
-				const coordsForCheck = [coords[i], coords[i] - height / 2, coords[i] - height];
+				const coordsForCheck = [coords[i], coords[i] - bbox.height / 2, coords[i] - bbox.height];
 				for (let j = 0; j < coordsForCheck.length; j++) {
 					const yDiff = y - coordsForCheck[j];
 					const yDiffAbs = Math.abs(yDiff);
@@ -256,13 +243,13 @@
 			}
 		};
 
-		// slide padding
+		// page padding
 		checkBoxSnapping(paddingGuide);
 
-		// slide edges
+		// page edges
 		edgeGuides.forEach(checkLineSnapping);
 
-		// rest of the slides
+		// rest of the pages
 		snappingGrid.forEach((layerGuides) => {
 			layerGuides.forEach(checkLineSnapping);
 		});
@@ -281,11 +268,11 @@
 			.map(({ guide }) => {
 				if (guide.type === 'horizontal') {
 					const minX = Math.min(x, guide.x);
-					const length = Math.max(x + width, guide.x + guide.length) - minX;
+					const length = Math.max(x + bbox.width, guide.x + guide.length) - minX;
 					return { ...guide, x: minX, length };
 				} else if (guide.type === 'vertical') {
 					const minY = Math.min(y, guide.y);
-					const length = Math.max(y + height, guide.y + guide.length) - minY;
+					const length = Math.max(y + bbox.height, guide.y + guide.length) - minY;
 					return { ...guide, y: minY, length };
 				}
 
@@ -316,14 +303,16 @@
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="absolute select-none"
-			style:width="{layer.width * scale}px"
-			style:height="{layer.height * scale}px"
-			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${rotate}deg)`}
-			style:opacity={layer.opacity ?? null}
+			style:width="{layer.width * layer.scale}px"
+			style:height="{layer.height * layer.scale}px"
+			style:transform={`translate(${layer.x}px, ${layer.y}px) rotate(${layer.rotate}deg)`}
+			style:opacity={layer.opacity}
+			onclick={onClick}
 			onmousedown={onMouseDown}
 			onmouseover={onMouseOver}
 			onmouseleave={onMouseLeave}

package/dist/components/{presentation-editor → editor}/layers/types/background/background-content-image.svelte

@@ -8,7 +8,7 @@
 
 	let { backgroundImage, thumbScale = 1 }: Props = $props();
 
-	let scale = $derived((backgroundImage.scale || 1) * thumbScale);
+	let scale = $derived(backgroundImage.scale * thumbScale);
 
 	let flipTransform = $derived(
 		backgroundImage.flipX || backgroundImage.flipY
@@ -27,7 +27,7 @@
 			class="relative"
 			style:width="{backgroundImage.image.width * scale}px"
 			style:height="{backgroundImage.image.height * scale}px"
-			style:transform={`translate(${-(backgroundImage.offsetX || 0) * scale}px, ${-(backgroundImage.offsetY || 0) * scale}px)`}
+			style:transform={`translate(${-backgroundImage.offsetX * scale}px, ${-backgroundImage.offsetY * scale}px)`}
 		>
 			<img
 				src={backgroundImage.image.src}

package/dist/components/{presentation-editor → editor}/layers/types/background/background-layer-buttons.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { Separator } from '../../../../ui/separator/index.js';
 	import { Button } from '../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
 	import { ColorIndicator } from '../../../color-indicator/index.js';
 	import { ColorPickerAlphaGrid } from '../../../../ui/color-picker/index.js';
 	import { FlipButton } from '../../buttons/flip-button/index.js';
 	import { OpacityButton } from '../../buttons/opacity-button/index.js';
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
-	let backgroundColor = $derived(editor.activeSlide.backgroundColor || '#ffffff');
+	let backgroundColor = $derived(editor.activePage.backgroundColor || '#ffffff');
 </script>
 
 <Separator orientation="vertical" />
@@ -27,9 +27,9 @@
 		</ColorPickerAlphaGrid>
 	</div>
 </Button>
-{#if editor.activeSlide.backgroundImage}
+{#if editor.activePage.backgroundImage}
 	<Separator orientation="vertical" />
-	<FlipButton bind:layers={editor.activeSlide.backgroundImage} />
+	<FlipButton bind:layers={editor.activePage.backgroundImage} />
 	<Separator orientation="vertical" />
-	<OpacityButton bind:layers={editor.activeSlide.backgroundImage} />
+	<OpacityButton bind:layers={editor.activePage.backgroundImage} />
 {/if}