@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,37 +1,72 @@
 <script lang="ts">
 	import CaseIcon from 'lucide-svelte/icons/case-sensitive';
-	import type { Editor } from '../../editor/Editor.js';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import { extractUppercase } from '../../editor/utils.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();
-
-	const getUppercase = () => {
-		const selection = editor.view.state.selection;
-		let uppercase: boolean | null = null;
-		editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-			if (node.type.name !== 'text') {
-				if (uppercase !== false && node.attrs.textTransform === 'uppercase') {
-					uppercase = true;
-				} else {
-					uppercase = false;
-				}
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return extractUppercase($htmlEditor);
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return extractUppercase(editorNotReactive);
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setTextTransform('uppercase').run();
+			} else {
+				$htmlEditor.chain().focus().unsetTextTransform().run();
 			}
-		});
-		return !!uppercase;
-	};
+		} 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.setTextTransform('uppercase');
+						} else {
+							chain = chain.unsetTextTransform();
+						}
+						chain.run();
 
-	let uppercase = $derived(editor && getUppercase());
+						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={uppercase}
-	onPressedChange={(val) =>
-		val ? editor.commands.setTextTransform('uppercase') : editor.commands.unsetTextTransform()}
->
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
 	<CaseIcon class="h-6 w-6" />
 </Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/case-button/case-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 CaseButton: import("svelte").Component<Props, {}, "">;
+declare const CaseButton: import("svelte").Component<Props, {}, "layers">;
 type CaseButton = ReturnType<typeof CaseButton>;
 export default CaseButton;

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

@@ -1,88 +1,39 @@
 <script lang="ts">
-	import PaletteIcon from 'lucide-svelte/icons/palette';
-	import type { Editor } from '../../editor/Editor.js';
-	import * as Popover from '../../../../../../ui/popover/index.js';
-	import { Button, buttonVariants } from '../../../../../../ui/button/index.js';
-	import { cn } from '../../../../../../../utils.js';
+	import { Button } from '../../../../../../ui/button/index.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { extractNodeColors, extractSelectionColors } from '../../editor/utils.js';
+	import { buildBackgroundCircleStyle } from '../../../../utils.js';
+	import type { HtmlLayer } from '../../../../../types.js';
 
 	interface Props {
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
 
-	const defaultColor = '#000000';
+	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' },
+	const { htmlEditor } = editor;
 
-		{ 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 getColor = () => editor.getAttributes('textStyle').color || defaultColor;
-
-	const setColor = (value: string) => {
-		if (value === defaultColor) {
-			editor.chain().focus().unsetColor().run();
+	const colors = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return extractSelectionColors($htmlEditor);
 		} else {
-			editor.chain().focus().setColor(value).run();
+			const set = new Set<string>();
+			layers.forEach((layer) => extractNodeColors(layer.html, set));
+			return Array.from(set);
 		}
-	};
+	});
 </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={getColor()}
-		></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',
-							getColor() === 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>
+<Button
+	variant="ghost"
+	size="icon-xs"
+	onclick={() => editor.toggleActiveSidebarPopup('textColor')}
+	active={editor.activeSidebarPopup === 'textColor'}
+>
+	<span
+		class="h-6 w-6 rounded-full border border-gray-300"
+		style={buildBackgroundCircleStyle(colors)}
+	></span>
+</Button>

package/dist/components/presentation-editor/layers/types/html/buttons/color-button/color-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 ColorButton: import("svelte").Component<Props, {}, "">;
+declare const ColorButton: import("svelte").Component<Props, {}, "layers">;
 type ColorButton = ReturnType<typeof ColorButton>;
 export default ColorButton;

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Button } from '../../../../../../ui/button/index.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { extractNodeFonts, extractSelectionFonts } from '../../editor/utils.js';
+	import type { HtmlLayer } from '../../../../../types.js';
+
+	interface Props {
+		layers: HtmlLayer[];
+	}
+
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const fonts = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return extractSelectionFonts($htmlEditor);
+		} else {
+			const set = new Set<string>();
+			layers.forEach((layer) => extractNodeFonts(layer.html, set));
+			return Array.from(set);
+		}
+	});
+</script>
+
+<Button
+	variant="outline"
+	size="xs"
+	class="w-40 justify-start"
+	onclick={() => (editor.activeSidebarPopup = 'font')}
+	active={editor.activeSidebarPopup === 'font'}
+>
+	{fonts.length > 1 ? 'Mutliple fonts' : fonts.length ? fonts[0] : 'Default'}
+</Button>

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

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

package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/index.d.ts

@@ -0,0 +1,2 @@
+import FontFamilyButton from './font-family-button.svelte';
+export { FontFamilyButton };

package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/index.js

@@ -0,0 +1,2 @@
+import FontFamilyButton from './font-family-button.svelte';
+export { FontFamilyButton };

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

@@ -1,34 +1,33 @@
 <script lang="ts">
 	import MinusIcon from 'lucide-svelte/icons/minus';
 	import PlusIcon from 'lucide-svelte/icons/plus';
-	import type { Layer } from '../../../../../types.js';
-	import type { Editor } from '../../editor/Editor.js';
+	import type { HtmlLayer } from '../../../../../types.js';
 	import * as DropdownMenu from '../../../../../../ui/dropdown-menu/index.js';
 	import { Button, buttonVariants } from '../../../../../../ui/button/index.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import {
+		createEditorNotReactive,
+		extractNodeFontSizes,
+		extractSelectionFontSizes,
+	} from '../../editor/utils.js';
+	import { applyHtmlToLayer } from '../../../../utils.js';
 
 	interface Props {
-		layer: Layer;
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { layer, editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
 
 	let fontSizeInputEl: HTMLInputElement | null = $state(null);
 	let pxToPt = 3 / 4;
 	const min = 1;
 	const max = 800;
 
-	const getFontSize = (scale: number) => {
-		const selection = editor.view.state.selection;
-		let fontSizes: number[] = [];
-		editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-			if (node.type.name !== 'text') {
-				if (node.attrs.fontSize) {
-					fontSizes.push(node.attrs.fontSize);
-				}
-			}
-		});
-		fontSizes = [...new Set(fontSizes)];
+	const getFontSize = (fontSizes: number[], scale: number) => {
 		let fontSizePx;
 		if (fontSizes.length === 1) {
 			fontSizePx = fontSizes[0];
@@ -38,19 +37,63 @@
 		return fontSizePx ? Math.round(fontSizePx * pxToPt * scale * 10) / 10 : null;
 	};
 
-	let scale = $derived(layer.scale || 1);
-	let fontSize = $derived(editor && getFontSize(scale));
+	const fontSize = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			const fontSizesPx = extractSelectionFontSizes($htmlEditor);
+			return getFontSize(fontSizesPx, layers[0]?.scale || 1);
+		} else {
+			const set = new Set<number>();
+			layers.forEach((layer) => {
+				const fontSizesPx = extractNodeFontSizes(layer.html);
+				const fontSize = getFontSize(fontSizesPx, layer.scale || 1);
+				if (fontSize) {
+					set.add(fontSize);
+				}
+			});
+			const fontSizes = Array.from(set);
+			return fontSizes.length === 1 ? fontSizes[0] : null;
+		}
+	});
 
-	const updateFontSize = (value: number) => {
+	const updateFontSize = async (value: number) => {
 		console.log('updateFontSize', value);
-		if (editor) {
-			let fontSizePt = value;
-			if (fontSizePt < min) {
-				fontSizePt = min;
-			} else if (fontSizePt > max) {
-				fontSizePt = max;
-			}
-			editor.commands.setFontSize(fontSizePt / pxToPt / scale);
+		let fontSizePt = value;
+		if (fontSizePt < min) {
+			fontSizePt = min;
+		} else if (fontSizePt > max) {
+			fontSizePt = max;
+		}
+		if (editor.activeAction?.type === 'edit') {
+			$htmlEditor.commands.setFontSize(fontSizePt / pxToPt / (layers[0]?.scale || 1));
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: await Promise.all(
+					layers.map(async (layer) => {
+						const editorNotReactive = createEditorNotReactive(layer.html);
+						const scale = layer.scale || 1;
+						const fontSize = fontSizePt / pxToPt / scale;
+						editorNotReactive
+							.chain()
+							.setContent(layer.html)
+							.selectAll()
+							.setFontSize(fontSize)
+							.run();
+
+						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
+						const html = editorNotReactive.getJSON();
+						const redo = await applyHtmlToLayer(layer, html);
+
+						return {
+							type: 'layer',
+							slideId: editor.activeSlide.id,
+							layer: { id: layer.id, type: layer.type },
+							undo,
+							redo,
+						};
+					}),
+				),
+			});
 		}
 	};
 
@@ -70,7 +113,7 @@
 		class="w-8 rounded-r-none border-r-0"
 		onclick={incrementFontSize(-1)}
 	>
-		<MinusIcon class="h-6 w-6" />
+		<MinusIcon class="h-3 w-3" />
 	</Button>
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger
@@ -127,6 +170,6 @@
 		class="w-8 rounded-l-none border-l-0"
 		onclick={incrementFontSize()}
 	>
-		<PlusIcon class="h-6 w-6" />
+		<PlusIcon class="h-3 w-3" />
 	</Button>
 </div>

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

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

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

@@ -1,19 +1,71 @@
 <script lang="ts">
 	import ItalicIcon from 'lucide-svelte/icons/italic';
-	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('italic');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('italic');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setItalic().run();
+			} else {
+				$htmlEditor.chain().focus().unsetItalic().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.setItalic();
+						} else {
+							chain = chain.unsetItalic();
+						}
+						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('italic')}
-	onPressedChange={(val) => (val ? editor.commands.setItalic() : editor.commands.unsetItalic())}
->
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
 	<ItalicIcon class="h-6 w-6" />
 </Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/italic-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 ItalicButton: import("svelte").Component<Props, {}, "">;
+declare const ItalicButton: import("svelte").Component<Props, {}, "layers">;
 type ItalicButton = ReturnType<typeof ItalicButton>;
 export default ItalicButton;

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

@@ -1,35 +1,88 @@
 <script lang="ts">
-	import { type Editor } from '../../editor/index.js';
 	import BulletListIcon from 'lucide-svelte/icons/list';
 	import OrderedListIcon from 'lucide-svelte/icons/list-ordered';
 	import { Toggle } from '../../../../../../ui/toggle/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';
+	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;
 
 	type ListType = 'bulletList' | 'orderedList';
 
-	let listType: ListType | false = $derived(
-		editor &&
-			((editor.isActive('bulletList') && 'bulletList') ||
-				(editor.isActive('orderedList') && 'orderedList')),
-	);
-</script>
+	const editorNotReactive = createEditorNotReactive();
+
+	const getListType = (editor: Editor): ListType | false => {
+		const listTypes: ListType[] = ['bulletList', 'orderedList'];
+		for (let type of listTypes) {
+			if (editor.isActive(type)) {
+				return type;
+			}
+		}
+		return false;
+	};
+
+	const currentListType = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return getListType($htmlEditor);
+		} else {
+			const set = new Set<ListType | false>();
+			layers.forEach((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				set.add(getListType(editorNotReactive));
+			});
+			return set.size > 1 ? false : Array.from(set)[0];
+		}
+	});
 
-<Toggle
-	size="xs"
-	pressed={!!listType}
-	onPressedChange={() =>
-		!listType
+	const setNextListType = (editor: Editor, type: ListType | false) => {
+		!type
 			? editor.commands.toggleBulletList()
-			: listType === 'bulletList'
+			: type === 'bulletList'
 				? editor.commands.toggleOrderedList()
-				: editor.commands.toggleUnstyledList()}
->
-	{#if listType === 'orderedList'}
+				: editor.commands.toggleUnstyledList();
+	};
+
+	const switchListType = async () => {
+		if (editor.activeAction?.type === 'edit') {
+			setNextListType($htmlEditor, currentListType);
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: await Promise.all(
+					layers.map(async (layer) => {
+						editorNotReactive.chain().setContent(layer.html).selectAll().run();
+						setNextListType(editorNotReactive, currentListType);
+
+						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={!!currentListType} onPressedChange={switchListType}>
+	{#if currentListType === 'orderedList'}
 		<OrderedListIcon class="h-6 w-6" />
 	{:else}
 		<BulletListIcon class="h-6 w-6" />

package/dist/components/presentation-editor/layers/types/html/buttons/list-button/list-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 ListButton: import("svelte").Component<Props, {}, "">;
+declare const ListButton: import("svelte").Component<Props, {}, "layers">;
 type ListButton = ReturnType<typeof ListButton>;
 export default ListButton;