@peteai/presentation-editor 0.0.1

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import type { Layer } from '../types.js';
+
+	interface Props {
+		layer: Layer | 'background';
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let x = $derived(layer === 'background' ? 0 : layer.x * editor.zoom);
+	let y = $derived(layer === 'background' ? 0 : layer.y * editor.zoom);
+	let width = $derived(
+		(layer === 'background' ? editor.width : layer.width * (layer.scale || 1)) * editor.zoom,
+	);
+	let height = $derived(
+		(layer === 'background' ? editor.height : layer.height * (layer.scale || 1)) * editor.zoom,
+	);
+	let rotate = $derived(layer === 'background' ? 0 : layer.rotate || 0);
+</script>
+
+<div
+	class="absolute"
+	style:width="{width}px"
+	style:height="{height}px"
+	style:transform={`translate(${x}px, ${y}px) rotate(${rotate}deg)`}
+>
+	<div
+		class="absolute -inset-px border-2 border-purple-500"
+		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
+	></div>
+</div>

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

@@ -0,0 +1,7 @@
+import type { Layer } from '../types.js';
+interface Props {
+    layer: Layer | 'background';
+}
+declare const HoveredLayer: import("svelte").Component<Props, {}, "">;
+type HoveredLayer = ReturnType<typeof HoveredLayer>;
+export default HoveredLayer;

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

@@ -0,0 +1,10 @@
+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, };

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

@@ -0,0 +1,22 @@
+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 { 
+// layer buttons
+LayerButton, LayerThumbWrapper, 
+// layers
+LayerWrapper, 
+// background layer
+BackgroundLayer, BackgroundLayerThumb, BackgroundLayerButtons, 
+// html layer
+HtmlLayer, HtmlLayerThumb, HtmlLayerButtons, HtmlLayerActive, 
+//image layer
+ImageLayer, ImageLayerThumb, ImageLayerButtons, ImageLayerActive, 
+// layers state
+HoveredLayer, ActiveBackgroundBorder, ActiveLayerBorder, };

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import GripVerticalIcon from 'lucide-svelte/icons/grip-vertical';
+	import { cn } from '../../../utils.js';
+	import type { Layer } from '../types.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+
+	interface Props {
+		layer?: Layer;
+		children?: import('svelte').Snippet;
+	}
+
+	let { layer, children }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+</script>
+
+<div class="relative">
+	<button
+		onclick={() => (layer ? editor.setActiveLayer(layer) : editor.setActiveBackground(true))}
+		class={cn(
+			'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,
+			},
+		)}
+		style:background-color="rgba(53,71,90,.2)"
+	>
+		<div class="h-6 w-10 px-2">
+			{#if layer}
+				<GripVerticalIcon />
+			{/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>
+	</button>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Layer } from '../types.js';
+interface Props {
+    layer?: Layer;
+    children?: import('svelte').Snippet;
+}
+declare const LayerButton: import("svelte").Component<Props, {}, "">;
+type LayerButton = ReturnType<typeof LayerButton>;
+export default LayerButton;

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Layer } from '../types.js';
+
+	type Thumb = { width: number; height: number };
+
+	interface Props {
+		layer: Layer;
+		thumb: Thumb | number;
+		children?: import('svelte').Snippet<[{ thumbScale: number }]>;
+	}
+
+	let { layer, thumb, children }: Props = $props();
+
+	const getThumbScale = (layer: Layer, thumb: Thumb) => {
+		const radians = layer.rotate ? layer.rotate * (Math.PI / 180) : 0;
+		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;
+
+		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)`}
+>
+	{@render children?.({ thumbScale })}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Layer } from '../types.js';
+type Thumb = {
+    width: number;
+    height: number;
+};
+interface Props {
+    layer: Layer;
+    thumb: Thumb | number;
+    children?: import('svelte').Snippet<[{
+        thumbScale: number;
+    }]>;
+}
+declare const LayerThumbWrapper: import("svelte").Component<Props, {}, "">;
+type LayerThumbWrapper = ReturnType<typeof LayerThumbWrapper>;
+export default LayerThumbWrapper;

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

@@ -0,0 +1,288 @@
+<script lang="ts">
+	import type { ActiveLayerGuide, BoxLayerGuide, Layer, LineLayerGuide } from '../types.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { calculateBoundingBox } from './utils.js';
+	import { generateId } from '../../../utils.js';
+
+	interface Props {
+		layer: Layer;
+		hoveredLayer: Layer | 'background' | null;
+		activeLayerGuides: ActiveLayerGuide[];
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		layer = $bindable(),
+		hoveredLayer = $bindable(null),
+		activeLayerGuides = $bindable(),
+		children,
+	}: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	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);
+			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 = [];
+		removeEventListener('mousemove', onMouseMove);
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const boxInset = Math.round(Math.min(editor.width, editor.height) / 10);
+	const paddingGuide: BoxLayerGuide = {
+		id: generateId(),
+		type: 'box',
+		style: 'solid',
+		inset: boxInset,
+	};
+
+	const verticalPositions = [0, editor.width / 2, editor.width];
+	const horizontalPositions = [0, editor.height / 2, editor.height];
+	const edgeGuides: LineLayerGuide[] = [
+		...verticalPositions.map(
+			(x): LineLayerGuide => ({
+				id: generateId(),
+				type: 'vertical',
+				style: 'solid',
+				x: x,
+				y: 0,
+				length: editor.height,
+			}),
+		),
+		...horizontalPositions.map(
+			(y): LineLayerGuide => ({
+				id: generateId(),
+				type: 'horizontal',
+				style: 'solid',
+				x: 0,
+				y: y,
+				length: editor.width,
+			}),
+		),
+	];
+
+	let snappingGrid: LineLayerGuide[][] = [];
+	const buildSnappingGrid = () =>
+		editor.activeSlide.layers
+			.filter((l) => l.id !== layer.id)
+			.map((l) => calculateBoundingBox(l))
+			.map(({ x, y, width, height }) => {
+				const verticalPositions = [x, x + width / 2, x + width];
+				const horizontalPositions = [y, y + height / 2, y + height];
+
+				return [
+					...verticalPositions.map(
+						(xPos): LineLayerGuide => ({
+							id: generateId(),
+							type: 'vertical',
+							style: 'dotted',
+							x: xPos,
+							y,
+							length: height,
+						}),
+					),
+					...horizontalPositions.map(
+						(yPos): LineLayerGuide => ({
+							id: generateId(),
+							type: 'horizontal',
+							style: 'dotted',
+							x,
+							y: yPos,
+							length: width,
+						}),
+					),
+				];
+			});
+
+	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;
+
+				const boundingBox = calculateBoundingBox({
+					x,
+					y,
+					width: layer.width,
+					height: layer.height,
+					rotate,
+				});
+
+				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 };
+							}
+						}
+					}
+				};
+				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 edges
+				edgeGuides.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;
+					}
+				});
+
+				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 };
+					}
+
+					return guide;
+				});
+
+				Object.assign(layer, { x, y });
+			}
+		}
+	};
+
+	const onMouseOver = () => {
+		console.log('mouseover', layer.id);
+		hoveredLayer = layer;
+	};
+
+	const onMouseLeave = () => {
+		console.log('mouseleave', layer.id);
+		hoveredLayer = null;
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter layer wrapper', e);
+		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>

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

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

package/dist/components/presentation-editor/layers/types/background/background-content.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Slide } from '../../../types.js';
+
+	interface Props {
+		slide: Slide;
+	}
+
+	let { slide }: Props = $props();
+</script>
+
+<div class="absolute inset-0" style:background-color={slide.backgroundColor}></div>

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

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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import PaletteIcon from 'lucide-svelte/icons/palette';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import * as Popover from '../../../../ui/popover/index.js';
+	import { Button, buttonVariants } from '../../../../ui/button/index.js';
+	import { cn } from '../../../../../utils.js';
+
+	const editor = getPresentationEditorContext();
+
+	const colors = [
+		{ value: '#000000', name: 'Black' },
+		{ value: '#545454', name: 'Dark Gray' },
+		{ value: '#737373', name: 'Gray' },
+		{ value: '#a6a6a6', name: 'Gray' },
+		{ value: '#d9d9d9', name: 'Light Gray' },
+		{ value: '#ffffff', name: 'White' },
+
+		{ value: '#ff3131', name: 'Bright Red' },
+		{ value: '#ff5757', name: 'Coral Red' },
+		{ value: '#ff66c4', name: 'Pink' },
+		{ value: '#cb6ce6', name: 'Magenta' },
+		{ value: '#8c52ff', name: 'Purple' },
+		{ value: '#5e17eb', name: 'Violet' },
+
+		{ value: '#0097b2', name: 'Dark Turquoise' },
+		{ value: '#0cc0df', name: 'Aqua Blue' },
+		{ value: '#5ce1e6', name: 'Turquoise Blue' },
+		{ value: '#38b6ff', name: 'Light Blue' },
+		{ value: '#5271ff', name: 'Royal Blue' },
+		{ value: '#004aad', name: 'Cobalt Blue' },
+
+		{ value: '#00bf63', name: 'Green' },
+		{ value: '#7ed957', name: 'Grass Green' },
+		{ value: '#c1ff72', name: 'Lime' },
+		{ value: '#ffde59', name: 'Yellow' },
+		{ value: '#ffbd59', name: 'Peach' },
+		{ value: '#ff914d', name: 'Orange' },
+	];
+
+	const setColor = (value: string) => () => {
+		const undo = { backgroundColor: editor.activeSlide.backgroundColor };
+		const redo = { backgroundColor: value };
+		Object.assign(editor.activeSlide, redo);
+		editor.historyPush({ type: 'slide', undo, redo });
+	};
+</script>
+
+<Popover.Root>
+	<Popover.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon-xs' })}>
+		<span
+			class="h-6 w-6 rounded-full border border-gray-300"
+			style:background-color={editor.activeSlide.backgroundColor}
+		></span>
+	</Popover.Trigger>
+	<Popover.Content align="start" sideOffset={2} class="w-auto p-2">
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2 p-2">
+				<PaletteIcon class="h-5 w-5" />
+				<h5 class="text-left text-sm font-bold">Colors</h5>
+			</div>
+			<div class="grid grid-cols-6 items-stretch gap-3">
+				{#each colors as color}
+					<Button
+						class={cn(
+							'relative h-10 w-10 after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+							editor.activeSlide.backgroundColor === color.value && 'after:shadow-active',
+						)}
+						variant="ghost"
+						size="icon"
+						onclick={setColor(color.value)}
+					>
+						<span
+							class="h-full w-full rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner"
+							style:background-color={color.value}
+						></span>
+					</Button>
+				{/each}
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/presentation-editor/layers/types/background/background-layer-buttons.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 BackgroundLayerButtons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BackgroundLayerButtons = InstanceType<typeof BackgroundLayerButtons>;
+export default BackgroundLayerButtons;

package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Slide } from '../../../types.js';
+	import BackgroundContent from './background-content.svelte';
+
+	interface Props {
+		slide: Slide;
+	}
+
+	let { slide }: Props = $props();
+</script>
+
+<BackgroundContent {slide} />

package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte.d.ts

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