@peteai/presentation-editor 0.0.2 → 0.0.3

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { BackgroundImage } from '../../../types.js';
+
+	interface Props {
+		backgroundImage: BackgroundImage;
+		thumbScale?: number;
+	}
+
+	let { backgroundImage, thumbScale = 1 }: Props = $props();
+
+	let scale = $derived((backgroundImage.scale || 1) * thumbScale);
+
+	let flipTransform = $derived(
+		backgroundImage.flipX || backgroundImage.flipY
+			? `scale(${backgroundImage.flipX ? -1 : 1}, ${backgroundImage.flipY ? -1 : 1})`
+			: '',
+	);
+</script>
+
+<div
+	class="h-full w-full"
+	style:transform={backgroundImage.rotate ? `rotate(${backgroundImage.rotate}deg)` : null}
+	style:opacity={backgroundImage.opacity}
+>
+	<div class="h-full w-full transition-transform" style:transform={flipTransform}>
+		<div
+			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)`}
+		>
+			<img
+				src={backgroundImage.image.src}
+				alt=""
+				crossorigin="anonymous"
+				class="pointer-events-none absolute h-full w-full object-fill"
+				draggable={false}
+			/>
+		</div>
+	</div>
+</div>

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

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

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

@@ -1,81 +1,35 @@
 <script lang="ts">
-	import PaletteIcon from 'lucide-svelte/icons/palette';
+	import { Separator } from '../../../../ui/separator/index.js';
+	import { Button } from '../../../../ui/button/index.js';
 	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';
+	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 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 });
-	};
+	let backgroundColor = $derived(editor.activeSlide.backgroundColor || '#ffffff');
 </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>
+<Separator orientation="vertical" />
+<Button
+	variant="ghost"
+	size="icon-xs"
+	onclick={() => editor.toggleActiveSidebarPopup('backgroundColor')}
+	active={editor.activeSidebarPopup === 'backgroundColor'}
+>
+	<div
+		class="after:shadow-inner-1 relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full"
+	>
+		<ColorPickerAlphaGrid size={12}>
+			<ColorIndicator color={backgroundColor} />
+		</ColorPickerAlphaGrid>
+	</div>
+</Button>
+{#if editor.activeSlide.backgroundImage}
+	<Separator orientation="vertical" />
+	<FlipButton bind:layers={editor.activeSlide.backgroundImage} />
+	<Separator orientation="vertical" />
+	<OpacityButton bind:layers={editor.activeSlide.backgroundImage} />
+{/if}

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

@@ -1,18 +1,3 @@
-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>;
+declare const BackgroundLayerButtons: import("svelte").Component<Record<string, never>, {}, "">;
+type BackgroundLayerButtons = ReturnType<typeof BackgroundLayerButtons>;
 export default BackgroundLayerButtons;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Slide } from '../../../types.js';
+	import { ColorIndicator } from '../../../color-indicator/index.js';
+	import BackgroundContentImage from './background-content-image.svelte';
+
+	interface Props {
+		slide: Slide;
+		thumbScale?: number;
+	}
+
+	let { slide, thumbScale }: Props = $props();
+
+	let backgroundColor = $derived(slide.backgroundColor || '#ffffff');
+</script>
+
+<ColorIndicator color={backgroundColor} />
+{#if slide.backgroundImage}
+	<BackgroundContentImage backgroundImage={slide.backgroundImage} {thumbScale} />
+{/if}

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

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

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

@@ -1,103 +1,111 @@
 <script lang="ts">
-	import BackgroundContent from './background-content.svelte';
-	import { calculateImageFill } from '../../utils.js';
+	import * as ContextMenu from '../../../../ui/context-menu/index.js';
 	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import type { Layer } from '../../../types.js';
+	import BackgroundMenuContent from '../../../menu/background-menu-content.svelte';
+	import { BackgroundLayerContent } from './index.js';
+	import { calculateImageCover } from '../../utils.js';
 
 	interface Props {
-		hoveredLayer: Layer | 'background' | null;
+		hoveredLayerId: string | null;
 	}
 
-	let { hoveredLayer = $bindable(null) }: Props = $props();
+	let { hoveredLayerId = $bindable(null) }: Props = $props();
 
 	let ref: HTMLDivElement;
 
 	const editor = getPresentationEditorContext();
 
-	const onMouseDown = () => {
-		console.log('mousedown', 'background');
+	const onMouseDown = (e: MouseEvent) => {
+		console.log('mousedown', 'background', e);
 		editor.setActiveBackground(true);
 	};
 
 	const onMouseOver = () => {
 		console.log('mouseover', 'background');
-		hoveredLayer = 'background';
+		hoveredLayerId = 'background';
 	};
 
 	const onMouseLeave = () => {
 		console.log('mouseleave', 'background');
-		hoveredLayer = null;
+		hoveredLayerId = null;
 	};
 
 	const onDragEnter = (e: DragEvent) => {
-		console.log('dragenter background image', e);
-
-		e.preventDefault();
-		e.stopPropagation();
-
 		console.log('dragenter background', e);
 
 		if (editor.dragged) {
-			const rect = ref.getBoundingClientRect();
-			const { scale, offsetX, offsetY } = calculateImageFill(editor.dragged.image, rect);
-			editor.dragged = {
-				...editor.dragged,
-				hidden: false,
-				scale,
-				sticky: false,
-				x: rect.left + editor.dragged.offsetX - offsetX * scale,
-				y: rect.top + editor.dragged.offsetY - offsetY * scale,
-			};
+			e.preventDefault();
+			e.stopPropagation();
+			if ('image' in editor.dragged) {
+				const rect = ref.getBoundingClientRect();
+				const { scale, offsetX, offsetY } = calculateImageCover(editor.dragged.image, rect);
+				editor.dragged = {
+					...editor.dragged,
+					hidden: false,
+					customScale: scale,
+					sticky: false,
+					x: rect.left + editor.dragged.offsetX - offsetX * scale,
+					y: rect.top + editor.dragged.offsetY - offsetY * scale,
+				};
+			} else {
+				editor.dragged = { ...editor.dragged, inside: true };
+			}
 		}
 	};
 
 	const onDragOver = (e: DragEvent) => {
 		// console.log('dragover background image', e);
-		e.preventDefault();
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
 	};
 
 	const onDrop = (e: DragEvent) => {
 		console.log('drop background image', e);
-		e.preventDefault();
 
 		const { dragged } = editor;
 		if (dragged) {
-			console.log(
-				dragged.image,
-				{ width: editor.width, height: editor.height },
-				calculateImageFill(dragged.image, { width: editor.width, height: editor.height }),
-			);
-			editor.addImageLayer({
-				sortOrder: editor.activeSlide.layers.length
-					? editor.activeSlide.layers[0].sortOrder - 1
-					: 1,
-				x: 0,
-				y: 0,
-				...calculateImageFill(dragged.image, { width: editor.width, height: editor.height }),
-				image: {
-					id: dragged.image.id,
-					src: dragged.image.src,
-					width: dragged.image.width,
-					height: dragged.image.height,
-				},
-			});
+			e.preventDefault();
+			e.stopPropagation();
+			if ('image' in dragged) {
+				const layer = editor.buildImageLayer({
+					x: 0,
+					y: 0,
+					...calculateImageCover(dragged.image, { width: editor.width, height: editor.height }),
+					image: dragged.image,
+				});
+				editor.addLayers(editor.activeSlide.id, layer, 0);
+			} else {
+				const rect = ref.getBoundingClientRect();
+				const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom;
+				const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom;
+				editor.dropDragged(x, y);
+			}
 		}
 	};
 </script>
 
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	bind:this={ref}
-	class="pointer-events-auto absolute inset-0 overflow-hidden"
-	onmousedown={onMouseDown}
-	onmouseover={onMouseOver}
-	onmouseleave={onMouseLeave}
-	ondragenter={onDragEnter}
-	ondragover={onDragOver}
-	ondrop={onDrop}
->
-	<div class="h-full w-full">
-		<BackgroundContent slide={editor.activeSlide} />
-	</div>
-</div>
+<ContextMenu.Root>
+	<ContextMenu.Trigger>
+		<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			bind:this={ref}
+			class="absolute inset-0 overflow-hidden"
+			onmousedown={onMouseDown}
+			onmouseover={onMouseOver}
+			onmouseleave={onMouseLeave}
+			ondragenter={onDragEnter}
+			ondragover={onDragOver}
+			ondrop={onDrop}
+		>
+			<div class="h-full w-full">
+				<BackgroundLayerContent slide={editor.activeSlide} />
+			</div>
+		</div>
+	</ContextMenu.Trigger>
+	<ContextMenu.Content class="w-80">
+		<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+	</ContextMenu.Content>
+</ContextMenu.Root>

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

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

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

@@ -1,5 +1,4 @@
 import Root from './background-layer.svelte';
-import BackgroundLayerThumb from './background-layer-thumb.svelte';
-import BackgroundContent from './background-content.svelte';
+import BackgroundLayerContent from './background-layer-content.svelte';
 import BackgroundLayerButtons from './background-layer-buttons.svelte';
-export { Root, Root as BackgroundLayer, BackgroundLayerThumb, BackgroundContent, BackgroundLayerButtons, };
+export { Root, Root as BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, };

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

@@ -1,7 +1,6 @@
 import Root from './background-layer.svelte';
-import BackgroundLayerThumb from './background-layer-thumb.svelte';
-import BackgroundContent from './background-content.svelte';
+import BackgroundLayerContent from './background-layer-content.svelte';
 import BackgroundLayerButtons from './background-layer-buttons.svelte';
 export { Root, 
 //
-Root as BackgroundLayer, BackgroundLayerThumb, BackgroundContent, BackgroundLayerButtons, };
+Root as BackgroundLayer, BackgroundLayerContent, BackgroundLayerButtons, };

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

@@ -1,16 +1,23 @@
 <script lang="ts">
-	import type { Editor } from '../../editor/index.js';
 	import AlignJustifyIcon from 'lucide-svelte/icons/align-justify';
 	import AlignRightIcon from 'lucide-svelte/icons/align-right';
 	import AlignCenterIcon from 'lucide-svelte/icons/align-center';
 	import AlignLeftIcon from 'lucide-svelte/icons/align-left';
 	import { Button } from '../../../../../../ui/button/index.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import type { HtmlLayer } from '../../../../../types.js';
+	import type { Editor } from '../../editor/index.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
 
 	type TextAlign = 'left' | 'center' | 'right' | 'justify';
 
@@ -21,23 +28,59 @@
 		center: 'left',
 	};
 
-	const getAlign = (): TextAlign | undefined => {
-		const align: TextAlign[] = ['left', 'center', 'right', 'justify'];
-		return align.find((alignment) => editor.isActive({ textAlign: alignment }));
+	const editorNotReactive = createEditorNotReactive();
+
+	const getAlign = (editor: Editor): TextAlign => {
+		const alignments: TextAlign[] = ['left', 'center', 'right', 'justify'];
+		return alignments.find((alignment) => editor.isActive({ textAlign: alignment })) || 'left';
 	};
 
-	const switchAlign = () => {
-		const align: TextAlign = getAlign() || 'left';
-		editor.commands.setTextAlign(nextAlign[align]);
+	const currentAlign = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return getAlign($htmlEditor);
+		} else {
+			const set = new Set<TextAlign>();
+			layers.forEach((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				set.add(getAlign(editorNotReactive));
+			});
+			return set.size > 1 ? 'center' : Array.from(set)[0];
+		}
+	});
+
+	const switchAlign = async () => {
+		if (editor.activeAction?.type === 'edit') {
+			$htmlEditor.commands.setTextAlign(nextAlign[currentAlign]);
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: layers.map((layer) => {
+					editorNotReactive
+						.chain()
+						.setContent(layer.html)
+						.selectAll()
+						.setTextAlign(nextAlign[currentAlign])
+						.run();
+
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { html: layer.html },
+						redo: { html: editorNotReactive.getJSON() },
+					};
+				}),
+			});
+		}
 	};
 </script>
 
 <Button variant="ghost" size="icon-xs" onclick={switchAlign}>
-	{#if editor.isActive({ textAlign: 'justify' })}
+	{#if currentAlign === 'justify'}
 		<AlignJustifyIcon class="h-6 w-6" />
-	{:else if editor.isActive({ textAlign: 'right' })}
+	{:else if currentAlign === 'right'}
 		<AlignRightIcon class="h-6 w-6" />
-	{:else if editor.isActive({ textAlign: 'center' })}
+	{:else if currentAlign === 'center'}
 		<AlignCenterIcon class="h-6 w-6" />
 	{:else}
 		<AlignLeftIcon class="h-6 w-6" />

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

@@ -1,7 +1,7 @@
-import type { Editor } from '../../editor/index.js';
+import type { HtmlLayer } from '../../../../../types.js';
 interface Props {
-    editor: Editor;
+    layers: HtmlLayer[];
 }
-declare const AlignmentButton: import("svelte").Component<Props, {}, "">;
+declare const AlignmentButton: import("svelte").Component<Props, {}, "layers">;
 type AlignmentButton = ReturnType<typeof AlignmentButton>;
 export default AlignmentButton;

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

@@ -1,19 +1,71 @@
 <script lang="ts">
 	import BoldIcon from 'lucide-svelte/icons/bold';
-	import type { Editor } from '../../editor/Editor.js';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { HtmlLayer } from '../../../../../types.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
+	import { applyHtmlToLayer } from '../../../../utils.js';
 
 	interface Props {
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('bold');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('bold');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setBold().run();
+			} else {
+				$htmlEditor.chain().focus().unsetBold().run();
+			}
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: await Promise.all(
+					layers.map(async (layer) => {
+						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+						if (value) {
+							chain = chain.setBold();
+						} else {
+							chain = chain.unsetBold();
+						}
+						chain.run();
+
+						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
+						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
+
+						return {
+							type: 'layer',
+							slideId: editor.activeSlide.id,
+							layer: { id: layer.id, type: layer.type },
+							undo,
+							redo,
+						};
+					}),
+				),
+			});
+		}
+	};
 </script>
 
-<Toggle
-	size="xs"
-	pressed={editor.isActive('bold')}
-	onPressedChange={(val) => (val ? editor.commands.setBold() : editor.commands.unsetBold())}
->
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
 	<BoldIcon class="h-6 w-6" />
 </Toggle>

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

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