@peteai/presentation-editor 0.0.2 → 0.0.3

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

@@ -17,33 +17,7 @@ declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType
     base: string;
     handler: string;
     cursor: string;
-}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-    };
-}, {
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-    };
-}>, {
+}, undefined, {
     origin: {
         right: {
             base: string;
@@ -77,33 +51,7 @@ declare const sideScaleControlVariants: import("tailwind-variants").TVReturnType
     base: string;
     handler: string;
     cursor: string;
-}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-    };
-}, {
-    origin: {
-        right: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-        left: {
-            base: string;
-            handler: string;
-            cursor: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown, undefined>>;
 type Origin = VariantProps<typeof sideScaleControlVariants>['origin'];
 export interface Props {
     origin: NonNullable<Origin>;

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

@@ -1,10 +1,9 @@
 import LayerButton from './layer-button.svelte';
 import LayerThumbWrapper from './layer-thumb-wrapper.svelte';
 import LayerWrapper from './layer-wrapper.svelte';
-import HoveredLayer from './hovered-layer.svelte';
 import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
-import { BackgroundLayerButtons, BackgroundLayer, BackgroundLayerThumb } from './types/background/index.js';
-import { HtmlLayer, HtmlLayerActive, HtmlLayerButtons, HtmlLayerThumb } from './types/html/index.js';
-import { ImageLayer, ImageLayerActive, ImageLayerButtons, ImageLayerThumb } from './types/image/index.js';
-export { LayerButton, LayerThumbWrapper, LayerWrapper, BackgroundLayer, BackgroundLayerThumb, BackgroundLayerButtons, HtmlLayer, HtmlLayerThumb, HtmlLayerButtons, HtmlLayerActive, ImageLayer, ImageLayerThumb, ImageLayerButtons, ImageLayerActive, HoveredLayer, ActiveBackgroundBorder, ActiveLayerBorder, };
+import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons } from './types/background/index.js';
+import { HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit } from './types/html/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, };

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

@@ -1,22 +1,21 @@
 import LayerButton from './layer-button.svelte';
 import LayerThumbWrapper from './layer-thumb-wrapper.svelte';
 import LayerWrapper from './layer-wrapper.svelte';
-import HoveredLayer from './hovered-layer.svelte';
 import ActiveBackgroundBorder from './active-background-border.svelte';
 import ActiveLayerBorder from './active-layer-border.svelte';
-import { BackgroundLayerButtons, BackgroundLayer, BackgroundLayerThumb, } from './types/background/index.js';
-import { HtmlLayer, HtmlLayerActive, HtmlLayerButtons, HtmlLayerThumb, } from './types/html/index.js';
-import { ImageLayer, ImageLayerActive, ImageLayerButtons, ImageLayerThumb, } from './types/image/index.js';
+import { BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, } from './types/background/index.js';
+import { HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit } from './types/html/index.js';
+import { ImageLayer, ImageLayerContent } from './types/image/index.js';
 export { 
 // layer buttons
 LayerButton, LayerThumbWrapper, 
 // layers
 LayerWrapper, 
 // background layer
-BackgroundLayer, BackgroundLayerThumb, BackgroundLayerButtons, 
+BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, 
 // html layer
-HtmlLayer, HtmlLayerThumb, HtmlLayerButtons, HtmlLayerActive, 
+HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit, 
 //image layer
-ImageLayer, ImageLayerThumb, ImageLayerButtons, ImageLayerActive, 
+ImageLayer, ImageLayerContent, 
 // layers state
-HoveredLayer, ActiveBackgroundBorder, ActiveLayerBorder, };
+ActiveBackgroundBorder, ActiveLayerBorder, };

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import GripVerticalIcon from 'lucide-svelte/icons/grip-vertical';
+	import LockedIcon from 'lucide-svelte/icons/lock-keyhole';
 	import { cn } from '../../../utils.js';
 	import type { Layer } from '../types.js';
 	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
@@ -12,27 +13,44 @@
 	let { layer, children }: Props = $props();
 
 	const editor = getPresentationEditorContext();
+
+	const onclick = (e: MouseEvent) => {
+		if (layer) {
+			if (e.metaKey) {
+				editor.setActiveLayers(layer.id, editor.activeLayerIds.has(layer.id) ? 'delete' : 'add');
+			} else {
+				editor.setActiveLayers(layer.id);
+			}
+		} else {
+			editor.setActiveBackground(true);
+		}
+	};
 </script>
 
 <div class="relative">
 	<button
-		onclick={() => (layer ? editor.setActiveLayer(layer) : editor.setActiveBackground(true))}
+		{onclick}
 		class={cn(
-			'flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
+			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
 			{
-				'border-blue-500': layer ? editor.activeLayer?.id === layer.id : editor.activeBackground,
+				'border-blue-500': layer ? editor.activeLayerIds.has(layer.id) : editor.activeBackground,
 			},
 		)}
-		style:background-color="rgba(53,71,90,.2)"
 	>
-		<div class="h-6 w-10 px-2">
+		<div class="h-6 w-6">
 			{#if layer}
-				<GripVerticalIcon />
+				{#if !editor.activeSlide.locked && !layer.locked}
+					<GripVerticalIcon class="size-6" />
+				{/if}
 			{/if}
 		</div>
 		<div class="relative flex h-8 w-48 items-center justify-center overflow-hidden rounded-sm">
 			{@render children?.()}
 		</div>
-		<div class="h-6 w-6 p-2"></div>
+		<div class="h-6 w-6">
+			{#if editor.activeSlide.locked || (layer ? layer.locked : editor.activeSlide.backgroundLocked)}
+				<LockedIcon class="size-6" />
+			{/if}
+		</div>
 	</button>
 </div>

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

@@ -1,53 +1,115 @@
 <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 } from './utils.js';
+	import {
+		calculateBoundingBox,
+		calculateGroupRotatedBoundingBox,
+		calculateLayerTransform,
+		type Transform,
+	} from './utils.js';
 	import { generateId } from '../../../utils.js';
+	import LayerMenuContent from '../menu/layer-menu-content.svelte';
 
 	interface Props {
 		layer: Layer;
-		hoveredLayer: Layer | 'background' | null;
+		hoveredLayerId: string | null;
 		activeLayerGuides: ActiveLayerGuide[];
 		children?: import('svelte').Snippet;
 	}
 
 	let {
 		layer = $bindable(),
-		hoveredLayer = $bindable(null),
+		hoveredLayerId = $bindable(null),
 		activeLayerGuides = $bindable(),
 		children,
 	}: Props = $props();
 
 	const editor = getPresentationEditorContext();
 
+	let initial: {
+		clientX: number;
+		clientY: number;
+		bbox: Transform;
+		layers: (Layer & { state: Layer })[];
+	} | null = null;
+	const actionId = editor.generateId();
+
 	let scale = $derived(layer.scale || 1);
 	let rotate = $derived(layer.rotate || 0);
 
-	const onMouseDown = () => {
-		console.log('mousedown', layer.id);
-		if (editor.activeLayer?.id !== layer.id || !editor.activeAction) {
-			editor.setActiveLayer(layer);
+	const tryToDeselect = () => {
+		removeEventListener('mouseup', tryToDeselect);
+		if (editor.activeAction?.id === actionId) return;
+		editor.setActiveLayers(layer.id, 'delete');
+	};
+
+	const onMouseDown = (e: MouseEvent) => {
+		console.log('mousedown', layer.id, e);
+		if (!editor.activeLayerIds.has(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
+		) {
+			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,
+				},
+				layers: editor.activeLayers.map((layer) => ({ ...layer, state: layer })),
+			};
 			addEventListener('mousemove', onMouseMove);
 			addEventListener('mouseup', onMouseUp);
 		}
 	};
 
-	const onMouseUp = () => {
-		console.log('mouseup', layer.id);
-		if (editor.activeLayer?.id === layer.id && editor.activeAction?.type === 'drag') {
-			if (editor.checkIfLayerInBounds(layer)) {
-				editor.historyPush({
-					type: 'layer',
-					layer: { id: layer.id, type: layer.type },
-					undo: { x: editor.activeAction.layer.x, y: editor.activeAction.layer.y },
-					redo: { x: layer.x, y: layer.y },
-				});
-				editor.activeAction = null;
-			}
-		}
-		activeLayerGuides = [];
+	const onMouseUp = (e: MouseEvent) => {
+		console.log('mouseup', layer.id, e);
 		removeEventListener('mousemove', onMouseMove);
 		removeEventListener('mouseup', onMouseUp);
+
+		activeLayerGuides = [];
+		if (editor.activeAction?.id !== actionId) return;
+		editor.activeAction = null;
+		if (!initial || (initial.clientX === e.clientX && initial.clientY === e.clientY)) return;
+
+		editor.historyPush({
+			type: 'layersGroup',
+			actions: initial.layers.map((layerWithState) => {
+				const { state, ...layer } = layerWithState;
+				if (editor.isLayerOutOfBounds(state)) {
+					return {
+						type: 'layersRemove',
+						slideId: editor.activeSlide.id,
+						layers: [layer],
+					};
+				} else {
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { x: layer.x, y: layer.y },
+						redo: { x: state.x, y: state.y },
+					};
+				}
+			}),
+		});
+		initial = null;
 	};
 
 	const boxInset = Math.round(Math.min(editor.width, editor.height) / 10);
@@ -86,8 +148,8 @@
 	let snappingGrid: LineLayerGuide[][] = [];
 	const buildSnappingGrid = () =>
 		editor.activeSlide.layers
-			.filter((l) => l.id !== layer.id)
-			.map((l) => calculateBoundingBox(l))
+			.filter((l) => !editor.activeLayerIds.has(l.id))
+			.map((l) => calculateBoundingBox(calculateLayerTransform(l)))
 			.map(({ x, y, width, height }) => {
 				const verticalPositions = [x, x + width / 2, x + width];
 				const horizontalPositions = [y, y + height / 2, y + height];
@@ -118,171 +180,159 @@
 
 	const onMouseMove = (e: MouseEvent) => {
 		console.log('mousemove', layer.id);
-		if (editor.activeLayer?.id === layer.id) {
-			if (!editor.activeAction) {
-				editor.activeAction = {
-					type: 'drag',
-					cursor: 'cursor-move',
-					clientX: e.clientX,
-					clientY: e.clientY,
-					layer: { ...layer },
-				};
-				snappingGrid = buildSnappingGrid();
-			}
-			if (editor.activeAction.type === 'drag') {
-				let x =
-					editor.activeAction.layer.x + (e.clientX - editor.activeAction.clientX) / editor.zoom;
-				let y =
-					editor.activeAction.layer.y + (e.clientY - editor.activeAction.clientY) / editor.zoom;
+		if (!editor.activeAction) {
+			editor.activeAction = { id: actionId, type: 'drag', cursor: 'cursor-move' };
+			snappingGrid = buildSnappingGrid();
+		}
 
-				const boundingBox = calculateBoundingBox({
-					x,
-					y,
-					width: layer.width,
-					height: layer.height,
-					rotate,
-				});
+		if (!initial || editor.activeAction?.id !== actionId) return;
 
-				const guides: {
-					xDiff?: number;
-					yDiff?: number;
-					x?: number;
-					y?: number;
-					guide: ActiveLayerGuide;
-				}[] = [];
-				const snapping = 10;
-				let minXDiff: number = Infinity;
-				let minYDiff: number = Infinity;
-				const xSnappingCheck = (coords: number[]) => {
-					for (let i = 0; i < coords.length; i++) {
-						const coordsForCheck = [
-							coords[i],
-							coords[i] - boundingBox.width / 2,
-							coords[i] - boundingBox.width,
-						];
-						for (let j = 0; j < coordsForCheck.length; j++) {
-							const xDiff = Math.abs(boundingBox.x - coordsForCheck[j]);
-							if (xDiff <= snapping) {
-								if (xDiff < minXDiff) {
-									minXDiff = xDiff;
-								}
-								const x = coordsForCheck[j] + (boundingBox.width - layer.width) / 2;
-								return { xDiff, x };
-							}
-						}
-					}
-				};
-				const ySnappingCheck = (coords: number[]) => {
-					for (let i = 0; i < coords.length; i++) {
-						const coordsForCheck = [
-							coords[i],
-							coords[i] - boundingBox.height / 2,
-							coords[i] - boundingBox.height,
-						];
-						for (let j = 0; j < coordsForCheck.length; j++) {
-							const yDiff = Math.abs(boundingBox.y - coordsForCheck[j]);
-							if (yDiff <= snapping) {
-								if (yDiff < minYDiff) {
-									minYDiff = yDiff;
-								}
-								const y = coordsForCheck[j] + (boundingBox.height - layer.height) / 2;
-								return { yDiff, y };
-							}
+		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 guides: {
+			xDiff?: number;
+			yDiff?: number;
+			x?: number;
+			y?: number;
+			guide: ActiveLayerGuide;
+		}[] = [];
+		const snapping = 10;
+		let minXDiff: number = Infinity;
+		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];
+				for (let j = 0; j < coordsForCheck.length; j++) {
+					const xDiff = x - coordsForCheck[j];
+					const xDiffAbs = Math.abs(xDiff);
+					if (xDiffAbs <= snapping) {
+						if (xDiffAbs < Math.abs(minXDiff)) {
+							minXDiff = xDiff;
 						}
+						const x = coordsForCheck[j];
+						return { xDiff, x };
 					}
-				};
-				const checkLineSnapping = (guide: ActiveLayerGuide) => {
-					if (guide.type === 'vertical') {
-						const xSnapping = xSnappingCheck([guide.x]);
-						if (typeof xSnapping === 'object') {
-							guides.push({ guide, ...xSnapping });
-						}
-					} else if (guide.type === 'horizontal') {
-						const ySnapping = ySnappingCheck([guide.y]);
-						if (typeof ySnapping === 'object') {
-							guides.push({ guide, ...ySnapping });
+				}
+			}
+		};
+		const ySnappingCheck = (coords: number[]) => {
+			for (let i = 0; i < coords.length; i++) {
+				const coordsForCheck = [coords[i], coords[i] - height / 2, coords[i] - height];
+				for (let j = 0; j < coordsForCheck.length; j++) {
+					const yDiff = y - coordsForCheck[j];
+					const yDiffAbs = Math.abs(yDiff);
+					if (Math.abs(yDiff) <= snapping) {
+						if (yDiffAbs < Math.abs(minYDiff)) {
+							minYDiff = yDiff;
 						}
+						const y = coordsForCheck[j];
+						return { yDiff, y };
 					}
-				};
-				const checkBoxSnapping = (guide: BoxLayerGuide) => {
-					const xSnapping = xSnappingCheck([guide.inset, editor.width - guide.inset]);
-					const ySnapping = ySnappingCheck([guide.inset, editor.height - guide.inset]);
-					if (typeof xSnapping === 'object' || typeof ySnapping === 'object') {
-						guides.push({ guide, ...xSnapping, ...ySnapping });
-					}
-				};
+				}
+			}
+		};
+		const checkLineSnapping = (guide: ActiveLayerGuide) => {
+			if (guide.type === 'vertical') {
+				const xSnapping = xSnappingCheck([guide.x]);
+				if (typeof xSnapping === 'object') {
+					guides.push({ guide, ...xSnapping });
+				}
+			} else if (guide.type === 'horizontal') {
+				const ySnapping = ySnappingCheck([guide.y]);
+				if (typeof ySnapping === 'object') {
+					guides.push({ guide, ...ySnapping });
+				}
+			}
+		};
+		const checkBoxSnapping = (guide: BoxLayerGuide) => {
+			const xSnapping = xSnappingCheck([guide.inset, editor.width - guide.inset]);
+			const ySnapping = ySnappingCheck([guide.inset, editor.height - guide.inset]);
+			if (typeof xSnapping === 'object' || typeof ySnapping === 'object') {
+				guides.push({ guide, ...xSnapping, ...ySnapping });
+			}
+		};
 
-				// slide padding
-				checkBoxSnapping(paddingGuide);
+		// slide padding
+		checkBoxSnapping(paddingGuide);
 
-				// slide edges
-				edgeGuides.forEach(checkLineSnapping);
+		// slide edges
+		edgeGuides.forEach(checkLineSnapping);
 
-				// rest of the slides
-				snappingGrid.forEach((layerGuides) => {
-					layerGuides.forEach(checkLineSnapping);
-				});
+		// rest of the slides
+		snappingGrid.forEach((layerGuides) => {
+			layerGuides.forEach(checkLineSnapping);
+		});
 
-				const guidesToSnap = guides.filter(
-					({ xDiff, yDiff }) => xDiff === minXDiff || yDiff === minYDiff,
-				);
-				guidesToSnap.forEach((guide) => {
-					if (guide.x !== undefined) {
-						x = guide.x;
-					}
-					if (guide.y !== undefined) {
-						y = guide.y;
-					}
-				});
+		if (Number.isFinite(minXDiff)) {
+			x -= minXDiff;
+			xDiff -= minXDiff;
+		}
+		if (Number.isFinite(minYDiff)) {
+			y -= minYDiff;
+			yDiff -= minYDiff;
+		}
 
-				activeLayerGuides = guidesToSnap.map(({ guide }) => {
-					if (guide.type === 'horizontal') {
-						const x = Math.min(boundingBox.x, guide.x);
-						const length = Math.max(boundingBox.x + boundingBox.width, guide.x + guide.length) - x;
-						return { ...guide, x, length };
-					} else if (guide.type === 'vertical') {
-						const y = Math.min(boundingBox.y, guide.y);
-						const length = Math.max(boundingBox.y + boundingBox.height, guide.y + guide.length) - y;
-						return { ...guide, y, length };
-					}
+		activeLayerGuides = guides
+			.filter(({ xDiff, yDiff }) => xDiff === minXDiff || yDiff === minYDiff)
+			.map(({ guide }) => {
+				if (guide.type === 'horizontal') {
+					const minX = Math.min(x, guide.x);
+					const length = Math.max(x + 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;
+					return { ...guide, y: minY, length };
+				}
 
-					return guide;
-				});
+				return guide;
+			});
 
-				Object.assign(layer, { x, y });
-			}
-		}
+		initial.layers.forEach((layer) => {
+			Object.assign(layer.state, { x: layer.x + xDiff, y: layer.y + yDiff });
+		});
 	};
 
 	const onMouseOver = () => {
 		console.log('mouseover', layer.id);
-		hoveredLayer = layer;
+		hoveredLayerId = layer.id;
 	};
 
 	const onMouseLeave = () => {
 		console.log('mouseleave', layer.id);
-		hoveredLayer = null;
+		hoveredLayerId = null;
 	};
 
 	const onDragEnter = (e: DragEvent) => {
 		console.log('dragenter layer wrapper', e);
-		e.preventDefault();
+		// e.preventDefault();
 		// e.stopPropagation();
 	};
 </script>
 
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="pointer-events-auto 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}
-	onmousedown={onMouseDown}
-	onmouseover={onMouseOver}
-	onmouseleave={onMouseLeave}
-	ondragenter={onDragEnter}
->
-	{@render children?.()}
-</div>
+<ContextMenu.Root>
+	<ContextMenu.Trigger>
+		<!-- 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}
+			onmousedown={onMouseDown}
+			onmouseover={onMouseOver}
+			onmouseleave={onMouseLeave}
+			ondragenter={onDragEnter}
+		>
+			{@render children?.()}
+		</div>
+	</ContextMenu.Trigger>
+	<ContextMenu.Content class="w-72">
+		<LayerMenuContent />
+	</ContextMenu.Content>
+</ContextMenu.Root>

package/dist/components/presentation-editor/layers/layer-wrapper.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { ActiveLayerGuide, Layer } from '../types.js';
 interface Props {
     layer: Layer;
-    hoveredLayer: Layer | 'background' | null;
+    hoveredLayerId: string | null;
     activeLayerGuides: ActiveLayerGuide[];
     children?: import('svelte').Snippet;
 }
-declare const LayerWrapper: import("svelte").Component<Props, {}, "layer" | "hoveredLayer" | "activeLayerGuides">;
+declare const LayerWrapper: import("svelte").Component<Props, {}, "layer" | "hoveredLayerId" | "activeLayerGuides">;
 type LayerWrapper = ReturnType<typeof LayerWrapper>;
 export default LayerWrapper;