@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/layers/types/html/html-layer-active.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { tick, untrack } from 'svelte';
+	import type { HtmlLayer } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { createEditor, EditorContent } from './editor/index.js';
+	import { extensions } from './index.js';
+	import { calculateNewPosition } from '../../utils.js';
+	import { SideScaleControl } from '../../controls/side-scale-control/index.js';
+	import { CornerScaleControl } from '../../controls/corner-scale-control/index.js';
+	import { RotateControl } from '../../controls/rotate-control/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	import './editor.css';
+
+	interface Props {
+		layer: HtmlLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editorState = getPresentationEditorContext();
+
+	let scaleAndZoom = $derived((layer.scale || 1) * editorState.zoom);
+	let rotate = $derived(layer.rotate || 0);
+
+	let undo: object | null = null;
+	let currentLayer: HtmlLayer | null = $state(layer);
+	let currentHtml: object | undefined = layer.html;
+
+	const updateContent = (reset: boolean = true) => {
+		if (reset) {
+			$editor.chain().setContent(layer.html).selectAll().run();
+		} else {
+			console.log('html changed');
+			if (editorState.activeAction?.type === 'edit') {
+				if (layer.html !== currentHtml) {
+					$editor.chain().setContent(layer.html).focus().run();
+				}
+			} else {
+				$editor.chain().setContent(layer.html).selectAll().run();
+			}
+		}
+		currentHtml = layer.html;
+	};
+
+	const debouncedUpdates = createDebouncedCallback((e, action) => {
+		console.log('debouncedUpdates', action);
+		editorState.historyPush(action);
+		undo = null;
+	}, 750);
+
+	console.log('create editor');
+	const editor = createEditor({
+		content: layer.html,
+		extensions,
+		injectCSS: false,
+		editorProps: { attributes: { class: 'whitespace-pre-wrap focus:outline-none' } },
+		onUpdate: async (e) => {
+			if (!undo) {
+				undo = { html: currentHtml, x: layer.x, y: layer.y, height: layer.height };
+			}
+			layer.html = e.editor.getJSON();
+			currentHtml = layer.html;
+			await tick();
+
+			const { x, y, width, height } = layer;
+			const scale = layer.scale || 1;
+			const rotate = layer.rotate || 0;
+			const layerContent = document.getElementById(`layer-content-${layer.id}`);
+			if (layerContent) {
+				const contentHeight = layerContent.offsetHeight;
+				if (contentHeight !== height) {
+					const newHeight = contentHeight * scale;
+
+					const { newX, newY } = calculateNewPosition(
+						`top-left`,
+						{ x, y, width: width * scale, height: height * scale, rotate },
+						width * scale,
+						newHeight,
+					);
+
+					const newValues = { x: newX, y: newY, height: newHeight / scale };
+					Object.assign(layer, newValues);
+				}
+			}
+			const action = {
+				type: 'layer',
+				layer: { id: layer.id, type: layer.type },
+				undo: undo,
+				redo: { html: e.editor.getJSON(), x: layer.x, y: layer.y, height: layer.height },
+			};
+			debouncedUpdates(e, action);
+		},
+		onDestroy: () => {
+			console.log('destroy editor');
+			editorState.htmlEditor = null;
+		},
+	});
+
+	editorState.htmlEditor = editor;
+	updateContent();
+
+	$effect(() => {
+		if (currentLayer !== layer) {
+			console.log('layer changed');
+			currentLayer = layer;
+			updateContent();
+		}
+	});
+
+	// update html when it changes by history undo/redo
+	$effect(() => {
+		if (layer.html !== untrack(() => currentHtml)) {
+			updateContent(false);
+		}
+	});
+</script>
+
+{#if editorState.activeAction?.type === 'edit'}
+	<div
+		class="absolute origin-top-left select-none"
+		hidden={editorState.activeAction?.type !== 'edit'}
+	>
+		<div
+			class="pointer-events-auto select-text"
+			style:width={`${layer.width * scaleAndZoom}px`}
+			style:height={`${layer.height * scaleAndZoom}px`}
+			style:transform={`translate(${layer.x * editorState.zoom}px, ${layer.y * editorState.zoom}px) rotate(${rotate}deg)`}
+		>
+			<div
+				class="origin-top-left"
+				style:width="{layer.width}px"
+				style:height="{layer.height}px"
+				style:transform={`scale(${scaleAndZoom})`}
+			>
+				<EditorContent editor={$editor} />
+			</div>
+		</div>
+	</div>
+{/if}
+
+<div
+	class="pointer-events-none absolute left-0 top-0 h-full w-full"
+	style:width={`${layer.width * scaleAndZoom}px`}
+	style:height={`${layer.height * scaleAndZoom}px`}
+	style:transform={`translate(${layer.x * editorState.zoom}px, ${layer.y * editorState.zoom}px) rotate(${rotate}deg)`}
+>
+	<div class="h-full w-full outline-none transition-opacity duration-300">
+		<div class="flex h-full w-full items-center justify-center">
+			<SideScaleControl origin="left" bind:layer />
+			<SideScaleControl origin="right" bind:layer />
+			<CornerScaleControl origin="bottom-right" bind:layer />
+			<CornerScaleControl origin="bottom-left" bind:layer />
+			<CornerScaleControl origin="top-right" bind:layer />
+			<CornerScaleControl origin="top-left" bind:layer />
+			<RotateControl bind:layer />
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/layers/types/html/html-layer-active.svelte.d.ts

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

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Readable } from 'svelte/store';
+	import type { HtmlLayer } from '../../../types.js';
+	import { Separator } from '../../../../ui/separator/index.js';
+	import { FontSizeButton } from './buttons/font-size-button/index.js';
+	import { ColorButton } from './buttons/color-button/index.js';
+	import { BoldButton } from './buttons/bold-button/index.js';
+	import { ItalicButton } from './buttons/italic-button/index.js';
+	import { UnderlineButton } from './buttons/underline-button/index.js';
+	import { StrikethroughButton } from './buttons/strikethrough-button/index.js';
+	import { CaseButton } from './buttons/case-button/index.js';
+	import { AlignmentButton } from './buttons/alignment-button/index.js';
+	import { ListButton } from './buttons/list-button/index.js';
+	import { OpacityButton } from '../../buttons/opacity-button/index.js';
+	import type { Editor } from './editor/Editor.js';
+
+	interface Props {
+		htmlEditor: Readable<Editor>;
+		layer: HtmlLayer;
+	}
+
+	let { htmlEditor, layer = $bindable() }: Props = $props();
+</script>
+
+{#if $htmlEditor}
+	<FontSizeButton {layer} editor={$htmlEditor} />
+	<ColorButton editor={$htmlEditor} />
+	<div class="grid grid-flow-col items-center gap-0.5">
+		<BoldButton editor={$htmlEditor} />
+		<ItalicButton editor={$htmlEditor} />
+		<UnderlineButton editor={$htmlEditor} />
+		<StrikethroughButton editor={$htmlEditor} />
+		<CaseButton editor={$htmlEditor} />
+	</div>
+	<Separator orientation="vertical" />
+	<div class="grid grid-flow-col items-center gap-0.5">
+		<AlignmentButton editor={$htmlEditor} />
+		<ListButton editor={$htmlEditor} />
+	</div>
+	<Separator orientation="vertical" />
+	<OpacityButton bind:layer />
+{/if}

package/dist/components/presentation-editor/layers/types/html/html-layer-buttons.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Readable } from 'svelte/store';
+import type { HtmlLayer } from '../../../types.js';
+import type { Editor } from './editor/Editor.js';
+interface Props {
+    htmlEditor: Readable<Editor>;
+    layer: HtmlLayer;
+}
+declare const HtmlLayerButtons: import("svelte").Component<Props, {}, "layer">;
+type HtmlLayerButtons = ReturnType<typeof HtmlLayerButtons>;
+export default HtmlLayerButtons;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HtmlLayer } from '../../../types.js';
+	import { HtmlContent } from './index.js';
+
+	interface Props {
+		layer: HtmlLayer;
+		thumbScale: number;
+	}
+
+	let { layer, thumbScale }: Props = $props();
+</script>
+
+<div
+	class="h-full origin-top-left"
+	style:width="{layer.width}px"
+	style:height="{layer.height}px"
+	style:transform={`scale(${thumbScale * (layer.scale || 1)})`}
+>
+	<div
+		class="whitespace-pre-wrap break-words p-0 text-left text-base font-normal normal-case not-italic text-black"
+	>
+		<HtmlContent html={layer.html} />
+	</div>
+</div>

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

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

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { HtmlLayer } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { cn } from '../../../../../utils.js';
+	import { HtmlContent } from './index.js';
+
+	interface Props {
+		layer: HtmlLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let ref: HTMLElement;
+
+	let scale = $derived(layer.scale || 1);
+
+	onMount(() => {
+		layer.height = ref.offsetHeight;
+	});
+
+	const onMouseDown = () => {
+		console.log('mousedown', layer.id);
+		if (editor.activeLayer?.id === layer.id && !editor.activeAction) {
+			addEventListener('mouseup', onMouseUp);
+		}
+	};
+
+	const onMouseUp = (e: MouseEvent) => {
+		console.log('mouseup', layer.id);
+		if (editor.activeLayer?.id === layer.id && !editor.activeAction) {
+			console.log('edit layer', layer.id);
+			editor.activeAction = {
+				type: 'edit',
+				clientX: e.clientX,
+				clientY: e.clientY,
+				layer: { ...layer },
+			};
+		}
+		removeEventListener('mouseup', onMouseUp);
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter html layer', e);
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (editor.dragged) {
+			editor.dragged = { ...editor.dragged, hidden: false, scale: editor.zoom, sticky: true };
+		}
+	};
+
+	const onDrop = (e: DragEvent) => {
+		console.log('drop html layer', e);
+		e.preventDefault();
+
+		const { dragged } = editor;
+		if (dragged) {
+			editor.addImageLayer({
+				x: e.offsetX - dragged.offsetX / editor.zoom + layer.x,
+				y: e.offsetY - dragged.offsetY / editor.zoom + layer.y,
+				width: dragged.image.width,
+				height: dragged.image.height,
+				image: {
+					id: dragged.image.id,
+					src: dragged.image.src,
+					width: dragged.image.width,
+					height: dragged.image.height,
+				},
+			});
+		}
+	};
+</script>
+
+<div
+	class={cn('h-full', { 'origin-top-left': scale !== 1 })}
+	style:width="{layer.width}px"
+	style:height="{layer.height}px"
+	style:transform={scale !== 1 ? `scale(${layer.scale})` : ''}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="whitespace-pre-wrap break-words p-0 text-left text-base font-normal normal-case not-italic text-black"
+		bind:this={ref}
+		id="layer-content-{layer.id}"
+		style:opacity={editor.activeLayer?.id === layer.id && editor.activeAction?.type === 'edit'
+			? 0
+			: null}
+		onmousedown={onMouseDown}
+		ondragenter={onDragEnter}
+		ondrop={onDrop}
+	>
+		<HtmlContent html={layer.html} />
+	</div>
+</div>

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

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

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

@@ -0,0 +1,7 @@
+import Root from './html-layer.svelte';
+import HtmlLayerThumb from './html-layer-thumb.svelte';
+import HtmlContent from './html-content.svelte';
+import HtmlLayerButtons from './html-layer-buttons.svelte';
+import HtmlLayerActive from './html-layer-active.svelte';
+declare const extensions: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any>)[];
+export { Root, Root as HtmlLayer, HtmlLayerThumb, HtmlContent, HtmlLayerButtons, HtmlLayerActive, extensions, };

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

@@ -0,0 +1,58 @@
+import { Document } from '@tiptap/extension-document';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Text } from '@tiptap/extension-text';
+import { ListItem } from '@tiptap/extension-list-item';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { OrderedList } from '@tiptap/extension-ordered-list';
+import { UnstyledList } from './extensions/unstyled-list/index.js';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { LineHeight } from './extensions/line-height/index.js';
+import { TextTransform } from './extensions/text-transform/index.js';
+import { FontSize } from './extensions/font-size/index.js';
+import { Color } from '@tiptap/extension-color';
+import { Bold } from '@tiptap/extension-bold';
+import { Italic } from '@tiptap/extension-italic';
+import { Underline } from '@tiptap/extension-underline';
+import { Strike } from '@tiptap/extension-strike';
+import { Selection } from './extensions/selection/index.js';
+import Root from './html-layer.svelte';
+import HtmlLayerThumb from './html-layer-thumb.svelte';
+import HtmlContent from './html-content.svelte';
+import HtmlLayerButtons from './html-layer-buttons.svelte';
+import HtmlLayerActive from './html-layer-active.svelte';
+const extensions = [
+    Document,
+    Paragraph,
+    Text,
+    ListItem.configure({
+        HTMLAttributes: { style: 'margin-left: calc(var(--list-item-ident)*1em)' },
+    }),
+    BulletList.configure({
+        HTMLAttributes: { class: 'list-disc', style: '--list-item-ident: 1.7' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    OrderedList.configure({
+        HTMLAttributes: { class: 'list-decimal', style: '--list-item-ident: 1.7' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    UnstyledList.configure({
+        HTMLAttributes: { class: 'list-none', style: '--list-item-ident: 0' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    TextStyle,
+    TextAlign.configure({ types: ['paragraph', 'listItem'] }),
+    LineHeight.configure({ types: ['paragraph', 'listItem'] }),
+    TextTransform.configure({ types: ['paragraph', 'listItem'] }),
+    FontSize.configure({ types: ['paragraph', 'listItem'] }),
+    Color.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
+    Bold,
+    Italic,
+    Underline,
+    Strike,
+    Selection,
+];
+export { Root, Root as HtmlLayer, HtmlLayerThumb, HtmlContent, HtmlLayerButtons, HtmlLayerActive, extensions, };

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { ImageLayer } from '../../../types.js';
+	import { generateId } from '../../../../../utils.js';
+
+	interface Props {
+		layer: ImageLayer;
+		thumbScale?: number;
+	}
+
+	let { layer = $bindable(), thumbScale = 1 }: Props = $props();
+
+	let imageLoaded = $state(false);
+	const image = new Image();
+	image.crossOrigin = 'anonymous';
+	image.src = layer.image.src;
+	image.onload = () => (imageLoaded = true);
+
+	const layerBorderId = generateId();
+
+	let scale = $derived(layer.scale || 1);
+	let width = $derived(layer.width * scale * thumbScale);
+	let height = $derived(layer.height * scale * thumbScale);
+	let flipTransform = $derived(
+		layer.flipX || layer.flipY ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})` : null,
+	);
+
+	let cornderRadius = $derived((layer.cornerRadius || 0) * thumbScale);
+
+	const bezier = 0.447715;
+	let roundedClipPath = $derived(
+		cornderRadius
+			? `M0,${cornderRadius}L0,${height - cornderRadius}C0,${height - cornderRadius * bezier} ${cornderRadius * bezier},${height} ${cornderRadius},${height}L${width - cornderRadius},${height}C${width - cornderRadius * bezier},${height} ${width},${height - cornderRadius * bezier} ${width},${height - cornderRadius}L${width},${cornderRadius}C${width},${cornderRadius * bezier} ${width - cornderRadius * bezier},0 ${width - cornderRadius},0L${cornderRadius},0C${cornderRadius * bezier},0 0,${cornderRadius * bezier} 0,${cornderRadius}Z`
+			: null,
+	);
+</script>
+
+<div
+	class="relative h-full w-full overflow-hidden"
+	style:clip-path={roundedClipPath ? `path("${roundedClipPath}")` : null}
+>
+	<div class="h-full w-full transition-transform" style:transform={flipTransform}>
+		<div
+			class="relative"
+			style:width="{layer.image.width * scale * thumbScale}px"
+			style:height="{layer.image.height * scale * thumbScale}px"
+			style:transform={`translate(${-(layer.offsetX || 0) * scale * thumbScale}px, ${-(layer.offsetY || 0) * scale * thumbScale}px)`}
+		>
+			{#if imageLoaded}
+				<img
+					src={layer.image.src}
+					alt=""
+					crossorigin="anonymous"
+					class="pointer-events-none absolute h-full w-full object-fill"
+					draggable={false}
+				/>
+			{/if}
+		</div>
+	</div>
+
+	{#if layer.borderWidth}
+		{@const borderWidth = layer.borderWidth * thumbScale}
+		{@const path = `M0,0L0,${height}L${width},${height}L${width},0L0,0`}
+		<div
+			class="pointer-events-none absolute left-0 top-0 origin-top-left"
+			style:width="{width}px"
+			style:height="{height}px"
+		>
+			<svg
+				class="absolute left-0 top-0 overflow-hidden"
+				preserveAspectRatio="none"
+				viewBox="0 0 {width} {height}"
+				style:width="{width}px"
+				style:height="{height}px"
+			>
+				<defs>
+					<clipPath id={layerBorderId}>
+						<path d={path}></path>
+					</clipPath>
+				</defs>
+				<path
+					d={roundedClipPath || path}
+					stroke={layer.borderColor || '#000000'}
+					stroke-width={borderWidth * 2}
+					stroke-linecap="butt"
+					clip-path="url(#{layerBorderId})"
+					fill="none"
+					vector-effect="non-scaling-stroke"
+					stroke-dasharray={layer.borderStyle !== 'solid'
+						? `${(layer.borderStyle === 'dashed' ? 3 : 1) * borderWidth},${borderWidth}`
+						: null}
+				>
+				</path>
+			</svg>
+		</div>
+	{/if}
+</div>

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

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

package/dist/components/presentation-editor/layers/types/image/image-layer-active.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { ImageLayer } from '../../../types.js';
+	import { SideResizeControl } from '../../controls/side-resize-control/index.js';
+	import { CornerScaleControl } from '../../controls/corner-scale-control/index.js';
+	import { RotateControl } from '../../controls/rotate-control/index.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	let scale = $derived(layer.scale || 1);
+	let rotate = $derived(layer.rotate || 0);
+</script>
+
+<div
+	class="pointer-events-none absolute left-0 top-0 h-full w-full"
+	style:width={`${layer.width * scale * editor.zoom}px`}
+	style:height={`${layer.height * scale * editor.zoom}px`}
+	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${rotate}deg)`}
+>
+	<div class="h-full w-full outline-none transition-opacity duration-300">
+		<div class="flex h-full w-full items-center justify-center">
+			<SideResizeControl origin="left" bind:layer />
+			<SideResizeControl origin="right" bind:layer />
+			<SideResizeControl origin="top" bind:layer />
+			<SideResizeControl origin="bottom" bind:layer />
+			<CornerScaleControl origin="bottom-right" bind:layer />
+			<CornerScaleControl origin="bottom-left" bind:layer />
+			<CornerScaleControl origin="top-right" bind:layer />
+			<CornerScaleControl origin="top-left" bind:layer />
+			<RotateControl bind:layer />
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/layers/types/image/image-layer-active.svelte.d.ts

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ImageLayer } from '../../../types.js';
+	import { Separator } from '../../../../ui/separator/index.js';
+	import { BorderButton } from '../../buttons/border-button/index.js';
+	import { CornerRadiusButton } from '../../buttons/corner-radius-button/index.js';
+	import { FlipButton } from '../../buttons/flip-button/index.js';
+	import { OpacityButton } from '../../buttons/opacity-button/index.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+</script>
+
+<BorderButton bind:layer />
+<CornerRadiusButton bind:layer />
+<Separator orientation="vertical" />
+<FlipButton bind:layer />
+<Separator orientation="vertical" />
+<OpacityButton bind:layer />

package/dist/components/presentation-editor/layers/types/image/image-layer-buttons.svelte.d.ts

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

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { ImageLayer } from '../../../types.js';
+	import ImageLayerContent from './image-content.svelte';
+
+	interface Props {
+		layer: ImageLayer;
+		thumbScale: number;
+	}
+
+	let { layer, thumbScale }: Props = $props();
+</script>
+
+<ImageLayerContent {layer} {thumbScale} />

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

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