@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-color.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import SettingsIcon from 'lucide-svelte/icons/settings-2';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { ColorIndicator } from '../../color-indicator/index.js';
+	import { ColorPickerAlphaGrid } from '../../../ui/color-picker/index.js';
+	import { cn } from '../../../../utils.js';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		color: string;
+		currentColor: string;
+		radius?: number;
+		settings?: boolean;
+	}
+
+	let {
+		class: className,
+		color,
+		currentColor,
+		radius,
+		settings = true,
+		...restProps
+	}: Props = $props();
+</script>
+
+<button
+	class={cn(
+		'group relative h-full w-full overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+		color === currentColor ? 'after:shadow-active' : 'hover:after:shadow-hover',
+		className,
+	)}
+	{...restProps}
+>
+	<div class="wrapper after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0">
+		<ColorPickerAlphaGrid size={12}>
+			<ColorIndicator {color} />
+		</ColorPickerAlphaGrid>
+	</div>
+
+	{#if settings && color === currentColor}
+		<div
+			class="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+		>
+			<div class="bg-background text-foreground rounded-full p-1">
+				<SettingsIcon class="h-4 w-4" />
+			</div>
+		</div>
+	{/if}
+</button>
+
+<style>
+	.wrapper {
+		border-radius: inherit;
+
+		&::after {
+			border-radius: inherit;
+		}
+	}
+</style>

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-color.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLButtonElement> {
+    color: string;
+    currentColor: string;
+    radius?: number;
+    settings?: boolean;
+}
+declare const ColorSidebarColor: import("svelte").Component<Props, {}, "">;
+type ColorSidebarColor = ReturnType<typeof ColorSidebarColor>;
+export default ColorSidebarColor;

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-gradient-picker.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
+	import PlusIcon from 'lucide-svelte/icons/plus';
+	import { Button, buttonVariants } from '../../../ui/button/index.js';
+	import { ColorIndicator } from '../../color-indicator/index.js';
+	import { ColorPicker, ColorPickerAlphaGrid } from '../../../ui/color-picker/index.js';
+	import * as Popover from '../../../ui/popover/index.js';
+	import { cn } from '../../../../utils.js';
+	import { gradientToString, stringToGradient } from '../../utils.js';
+	import type { Gradient } from '../../types.js';
+	import ColorSidebarColor from './color-sidebar-color.svelte';
+
+	interface Props {
+		color: string;
+		setColor: (value: string, debounce?: boolean) => void;
+	}
+
+	const { color, setColor }: Props = $props();
+
+	const gradient = $derived(stringToGradient(color));
+
+	let openIndex: number | null = $state(null);
+
+	const gradientTypes: Gradient['type'][] = [
+		'linear90',
+		'linear180',
+		'linear135',
+		'radialCenter',
+		'radialTopLeft',
+	];
+
+	const addColor = () => {
+		const lastColor = gradient.colors.at(-1);
+		if (!lastColor) return;
+		const newColors = [...gradient.colors, lastColor];
+		openIndex = gradient.colors.length;
+		setColor(gradientToString({ ...gradient, colors: newColors }));
+	};
+
+	const removeColor = (index: number) => {
+		if (gradient.colors.length <= 2) return;
+		const newColors = [...gradient.colors.slice(0, index), ...gradient.colors.slice(index + 1)];
+		openIndex = null;
+		setColor(gradientToString({ ...gradient, colors: newColors }));
+	};
+
+	const updateColor = (hex: string, index: number) => {
+		const newColors = [...gradient.colors];
+		newColors[index] = hex;
+		setColor(gradientToString({ ...gradient, colors: newColors }), true);
+	};
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="mt-2 text-sm font-semibold">Gradient colors</div>
+
+	<div class="grid grid-cols-6 items-center justify-items-center gap-2">
+		{#each gradient.colors as color, index}
+			<div class="group relative h-10 w-10">
+				<Popover.Root
+					open={openIndex === index}
+					onOpenChange={(val) => {
+						openIndex = val ? index : null;
+					}}
+				>
+					<Popover.Trigger
+						class={cn(
+							buttonVariants({ variant: 'ghost', size: 'icon' }),
+							'hover:after:shadow-hover data-[state=open]:after:shadow-active relative h-full w-full shrink-0 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+						)}
+					>
+						<div
+							class="wrapper after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0 after:rounded-full"
+						>
+							<ColorPickerAlphaGrid size={12}>
+								<ColorIndicator {color} />
+							</ColorPickerAlphaGrid>
+						</div>
+					</Popover.Trigger>
+					<Popover.Content align="start" sideOffset={2} class="w-80 p-4">
+						<ColorPicker
+							hex={color}
+							alpha={true}
+							onChange={({ hex }) => updateColor(hex, index)}
+							onDelete={gradient.colors.length > 2 ? () => removeColor(index) : undefined}
+						/>
+					</Popover.Content>
+				</Popover.Root>
+				{#if gradient.colors.length > 2}
+					<div class="absolute right-0 top-0 opacity-0 transition-opacity group-hover:opacity-100">
+						<Button
+							variant="muted"
+							size="icon-xs"
+							class="absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full"
+							onclick={() => removeColor(index)}
+						>
+							<XIcon class="h-3 w-3" />
+						</Button>
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		{#if gradient.colors.length < 10}
+			<Button
+				variant="ghost"
+				size="icon"
+				class="hover:after:shadow-hover relative shrink-0 p-0 after:absolute after:inset-0 after:rounded-full after:transition-shadow"
+				onclick={addColor}
+			>
+				<div
+					class="after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0 after:rounded-full"
+				>
+					<div
+						class="h-full w-full rounded-full"
+						style:background={`conic-gradient(red, orange, yellow, green, blue, indigo, violet, red)`}
+					></div>
+					<span class="absolute inset-0 flex h-full w-full items-center justify-center">
+						<span
+							class="bg-background text-foreground flex h-6 w-6 items-center justify-center rounded-full"
+						>
+							<PlusIcon />
+						</span>
+					</span>
+				</div>
+			</Button>
+		{/if}
+	</div>
+
+	<div class="mt-2 text-sm font-semibold">Style</div>
+
+	<div class="flex h-10 w-full gap-2">
+		{#each gradientTypes as type}
+			{@const gradientString = gradientToString({ ...gradient, type })}
+			<ColorSidebarColor
+				class="rounded-lg after:rounded-lg"
+				color={gradientString}
+				currentColor={color}
+				settings={false}
+				onclick={() => setColor(gradientString)}
+			/>
+		{/each}
+	</div>
+</div>

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-gradient-picker.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    color: string;
+    setColor: (value: string, debounce?: boolean) => void;
+}
+declare const ColorSidebarGradientPicker: import("svelte").Component<Props, {}, "">;
+type ColorSidebarGradientPicker = ReturnType<typeof ColorSidebarGradientPicker>;
+export default ColorSidebarGradientPicker;

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar.svelte

@@ -0,0 +1,404 @@
+<script lang="ts">
+	import PlusIcon from 'lucide-svelte/icons/plus';
+	// import PaletteIcon from 'lucide-svelte/icons/palette';
+	import { ColorPicker } from '../../../ui/color-picker/index.js';
+	import * as Popover from '../../../ui/popover/index.js';
+	import * as Tabs from '../../../ui/tabs/index.js';
+	import { cn, createDebouncedCallback } from '../../../../utils.js';
+	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import type { HistoryAction, Gradient, ImageLayer, HtmlLayer } from '../../types.js';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+	import ColorSidebarGradientPicker from './color-sidebar-gradient-picker.svelte';
+	import ColorSidebarColor from './color-sidebar-color.svelte';
+	import { gradientToString, stringToGradient } from '../../utils.js';
+	import {
+		createEditorNotReactive,
+		extractNodeColors,
+		extractSelectionColors,
+	} from '../../layers/types/html/editor/utils.js';
+	import { extractBorderColors } from '../../layers/utils.js';
+
+	let open = $state(false);
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const defaultColor = '#000000';
+
+	const gradientsAllowed = $derived(
+		editor.activeSidebarPopup &&
+			['backgroundColor', 'borderColor'].includes(editor.activeSidebarPopup),
+	);
+
+	const defaultSolidColors = {
+		'#000000': 'Black',
+		'#545454': 'Dark Gray',
+		'#737373': 'Gray',
+		'#a6a6a6': 'Gray',
+		'#d9d9d9': 'Light Gray',
+		'#ffffff': 'White',
+		'#ff3131': 'Bright Red',
+		'#ff5757': 'Coral Red',
+		'#ff66c4': 'Pink',
+		'#cb6ce6': 'Magenta',
+		'#8c52ff': 'Purple',
+		'#5e17eb': 'Violet',
+		'#0097b2': 'Dark Turquoise',
+		'#0cc0df': 'Aqua Blue',
+		'#5ce1e6': 'Turquoise Blue',
+		'#38b6ff': 'Light Blue',
+		'#5271ff': 'Royal Blue',
+		'#004aad': 'Cobalt Blue',
+		'#00bf63': 'Green',
+		'#7ed957': 'Grass Green',
+		'#c1ff72': 'Lime',
+		'#ffde59': 'Yellow',
+		'#ffbd59': 'Peach',
+		'#ff914d': 'Orange',
+	};
+
+	const defaultGradients = [
+		'linear90:#000000ff,#737373ff',
+		'linear90:#000000ff,#c89116ff',
+		'linear90:#000000ff,#3533cdff',
+		'linear90:#a6a6a6ff,#ffffffff',
+		'linear90:#fff7adff,#ffa9f9ff',
+		'linear90:#cdffd8ff,#94b9ffff',
+		'linear90:#ff3131ff,#ff914dff',
+		'linear90:#ff5757ff,#8c52ffff',
+		'linear90:#5170ffff,#ff66c4ff',
+		'linear90:#004aadff,#cb6ce6ff',
+		'linear90:#8c52ffff,#5ce1e6ff',
+		'linear90:#5de0e6ff,#004aadff',
+		'linear90:#8c52ffff,#00bf63ff',
+		'linear90:#0097b2ff,#7ed957ff',
+		'linear90:#0cc0dfff,#ffde59ff',
+		'linear90:#ffde59ff,#ff914dff',
+		'linear90:#ff66c4ff,#ffde59ff',
+		'linear90:#8c52ffff,#ff914dff',
+	];
+
+	const isGradient = (color: string) => ~color.indexOf(':');
+
+	const currentColor = $derived.by(() => {
+		if (editor.activeSidebarPopup === 'backgroundColor') {
+			return editor.activeSlide.backgroundColor;
+		} else if (editor.activeSidebarPopup === 'textColor') {
+			if ($htmlEditor) {
+				const colors = extractSelectionColors($htmlEditor);
+				if (colors.length === 1) {
+					return $htmlEditor.getAttributes('textStyle').color || defaultColor;
+				}
+			}
+		} else if (editor.activeSidebarPopup === 'borderColor') {
+			const borderColors = extractBorderColors(
+				editor.activeLayers.filter((layer) => layer.type === 'image'),
+			);
+			if (!borderColors) {
+				return defaultColor;
+			} else if (borderColors.length === 1) {
+				return borderColors[0];
+			}
+		}
+	});
+
+	const documentColors = $derived.by(() => {
+		const colorSet = new Set<string>();
+
+		editor.slides.forEach((slide) => {
+			if (slide.backgroundColor) {
+				colorSet.add(slide.backgroundColor);
+			}
+			slide.layers.forEach((layer) => {
+				if (layer.type === 'html') {
+					extractNodeColors(layer.html, colorSet);
+				} else if (layer.type === 'image') {
+					if (layer.borderWidth && layer.borderColor) {
+						colorSet.add(layer.borderColor);
+					}
+				}
+			});
+		});
+
+		let colorsArray = Array.from(colorSet);
+
+		if (!colorsArray.length) {
+			colorsArray.push('#ffffff');
+		}
+
+		if (!gradientsAllowed) {
+			colorsArray = colorsArray.filter((color) => !isGradient(color));
+		}
+
+		return colorsArray.sort();
+	});
+
+	let undo: object | null = null;
+	let initialBorderColor: (ImageLayer & { state: ImageLayer })[] | null = null;
+	let initialTextColor: (HtmlLayer & { state: HtmlLayer })[] | null = null;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const setColor = (value: string, debounce = false) => {
+		console.log('setColor', { value, debounce });
+		if (currentColor === value) {
+			open = true;
+			return;
+		}
+
+		if (editor.activeSidebarPopup === 'backgroundColor') {
+			if (!undo) {
+				undo = { backgroundColor: editor.activeSlide.backgroundColor };
+			}
+			const redo = { backgroundColor: value };
+			Object.assign(editor.activeSlide, redo);
+			const action: HistoryAction = { type: 'slide', slideId: editor.activeSlide.id, undo, redo };
+			if (debounce) {
+				debouncedUpdates(action);
+			} else {
+				editor.historyPush(action);
+				undo = null;
+			}
+		} else if (editor.activeSidebarPopup === 'textColor') {
+			if (editor.activeAction?.type === 'edit') {
+				if (value === defaultColor) {
+					$htmlEditor.chain().focus().unsetColor().run();
+				} else {
+					$htmlEditor.chain().focus().setColor(value).run();
+				}
+			} else {
+				if (!initialTextColor) {
+					initialTextColor = editor.activeLayers
+						.filter((layer) => layer.type === 'html')
+						.map((layer) => ({ ...layer, state: layer }));
+				}
+				const action: HistoryAction = {
+					type: 'layersGroup',
+					actions: initialTextColor.map((layerWithState) => {
+						const { state, ...layer } = layerWithState;
+
+						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+						if (value === defaultColor) {
+							chain = chain.unsetColor();
+						} else {
+							chain = chain.setColor(value);
+						}
+						chain.run();
+
+						const undo = { html: layer.html };
+						const redo = { html: editorNotReactive.getJSON() };
+						Object.assign(state, redo);
+
+						return {
+							type: 'layer',
+							slideId: editor.activeSlide.id,
+							layer: { id: layer.id, type: layer.type },
+							undo,
+							redo,
+						};
+					}),
+				};
+				if (debounce) {
+					debouncedUpdates(action);
+				} else {
+					editor.historyPush(action);
+					initialTextColor = null;
+				}
+			}
+			if ($htmlEditor) {
+				if (value === defaultColor) {
+					$htmlEditor.chain().focus().unsetColor().run();
+				} else {
+					$htmlEditor.chain().focus().setColor(value).run();
+				}
+			}
+		} else if (editor.activeSidebarPopup === 'borderColor') {
+			if (!initialBorderColor) {
+				initialBorderColor = editor.activeLayers
+					.filter((layer) => layer.type === 'image')
+					.filter((layer) => layer.borderWidth)
+					.map((layer) => ({ ...layer, state: layer }));
+			}
+			const action: HistoryAction = {
+				type: 'layersGroup',
+				actions: initialBorderColor.map((layerWithState) => {
+					const { state, ...layer } = layerWithState;
+
+					const undo = { borderColor: layer.borderColor };
+					const redo = { borderColor: value };
+
+					Object.assign(state, redo);
+
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo,
+						redo,
+					};
+				}),
+			};
+			if (debounce) {
+				debouncedUpdates(action);
+			} else {
+				editor.historyPush(action);
+				initialBorderColor = null;
+			}
+		}
+	};
+
+	const debouncedUpdates = createDebouncedCallback((action) => {
+		console.log('debouncedUpdates', action);
+		editor.historyPush(action);
+		undo = null;
+	}, 750);
+
+	$effect(() => {
+		const { activeLayers, activeBackground } = editor;
+		if (editor.activeSidebarPopup === 'backgroundColor') {
+			if (!activeBackground) {
+				editor.activeSidebarPopup = null;
+			}
+		} else if (editor.activeSidebarPopup === 'borderColor') {
+			if (!activeLayers.some((layer) => layer.type === 'image' && layer.borderWidth)) {
+				editor.activeSidebarPopup = null;
+			}
+		} else if (editor.activeSidebarPopup === 'textColor') {
+			if (!activeLayers.some((layer) => layer.type === 'html')) {
+				editor.activeSidebarPopup = null;
+			}
+		}
+	});
+
+	const generateComplementaryColor = (color: string): string => {
+		// Remove the hash at the start if it's there
+		const hex = color.replace('#', '');
+
+		// Convert to RGB
+		const r = parseInt(hex.substring(0, 2), 16);
+		const g = parseInt(hex.substring(2, 4), 16);
+		const b = parseInt(hex.substring(4, 6), 16);
+
+		// Find the complement
+		const compR = (255 - r).toString(16).padStart(2, '0');
+		const compG = (255 - g).toString(16).padStart(2, '0');
+		const compB = (255 - b).toString(16).padStart(2, '0');
+
+		// Return the complementary color in hex format
+		return `#${compR}${compG}${compB}`;
+	};
+
+	const switchType = (val: string) => {
+		if (val === 'gradient') {
+			if (!isGradient(currentColor)) {
+				const gradient: Gradient = {
+					type: 'linear90',
+					colors: [currentColor + 'ff', generateComplementaryColor(currentColor) + 'ff'],
+				};
+				setColor(gradientToString(gradient));
+			}
+		} else if (val === 'solid') {
+			if (isGradient(currentColor)) {
+				const gradient = stringToGradient(currentColor);
+				setColor(gradient.colors[0].slice(0, 7));
+			}
+		}
+	};
+</script>
+
+<SidebarWrapper name="Color">
+	<div class="flex items-center gap-2 py-2">
+		<h5 class="text-left text-sm font-bold">Document colors</h5>
+	</div>
+	<div class="grid grid-cols-6 items-stretch gap-1">
+		<div class="relative h-0 w-full" style:padding-top="100%">
+			<div class="absolute left-0 top-0 h-full w-full">
+				<Popover.Root bind:open>
+					<Popover.Trigger
+						class={cn(
+							'relative h-full w-full overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+							open ? 'after:shadow-active' : 'hover:after:shadow-hover',
+						)}
+					>
+						<div
+							class="after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0 after:rounded-full"
+						>
+							<div
+								class="h-full w-full rounded-full"
+								style:background={`conic-gradient(red, orange, yellow, green, blue, indigo, violet, red)`}
+							></div>
+							<span class="absolute inset-0 flex h-full w-full items-center justify-center">
+								<span
+									class="bg-background text-foreground flex h-6 w-6 items-center justify-center rounded-full"
+								>
+									<PlusIcon />
+								</span>
+							</span>
+						</div>
+					</Popover.Trigger>
+					<Popover.Content align="start" sideOffset={2} class="w-80 p-4">
+						{#if gradientsAllowed}
+							<Tabs.Root
+								value={isGradient(currentColor) ? 'gradient' : 'solid'}
+								class="w-full"
+								onValueChange={switchType}
+							>
+								<Tabs.List class="grid w-full grid-cols-2">
+									<Tabs.Trigger value="solid">Solid color</Tabs.Trigger>
+									<Tabs.Trigger value="gradient">Gradient</Tabs.Trigger>
+								</Tabs.List>
+								<Tabs.Content value="solid">
+									{#if !isGradient(currentColor)}
+										<ColorPicker hex={currentColor} onChange={({ hex }) => setColor(hex, true)} />
+									{/if}
+								</Tabs.Content>
+								<Tabs.Content value="gradient">
+									{#if isGradient(currentColor)}
+										<ColorSidebarGradientPicker color={currentColor} {setColor} />
+									{/if}
+								</Tabs.Content>
+							</Tabs.Root>
+						{:else}
+							<ColorPicker hex={currentColor} onChange={({ hex }) => setColor(hex, true)} />
+						{/if}
+					</Popover.Content>
+				</Popover.Root>
+			</div>
+		</div>
+		{#each documentColors as color}
+			<div class="relative h-0 w-full" style:padding-top="100%">
+				<div class="absolute left-0 top-0 h-full w-full">
+					<ColorSidebarColor {color} {currentColor} onclick={() => setColor(color)} />
+				</div>
+			</div>
+		{/each}
+	</div>
+	<div class="flex items-center gap-2 py-2">
+		<!-- <PaletteIcon class="h-5 w-5" /> -->
+		<h5 class="text-left text-sm font-bold">Default colors</h5>
+	</div>
+	<div class="text-muted-foreground text-xs">Solid colors</div>
+	<div class="grid grid-cols-6 items-stretch gap-1">
+		{#each Object.keys(defaultSolidColors) as color}
+			<div class="relative h-0 w-full" style:padding-top="100%">
+				<div class="absolute left-0 top-0 h-full w-full">
+					<ColorSidebarColor {color} {currentColor} onclick={() => setColor(color)} />
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if gradientsAllowed}
+		<div class="text-muted-foreground text-xs">Gradients</div>
+		<div class="grid grid-cols-6 items-stretch gap-1">
+			{#each defaultGradients as color}
+				<div class="relative h-0 w-full" style:padding-top="100%">
+					<div class="absolute left-0 top-0 h-full w-full">
+						<ColorSidebarColor {color} {currentColor} onclick={() => setColor(color)} />
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</SidebarWrapper>

package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ColorSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type ColorSidebar = ReturnType<typeof ColorSidebar>;
+export default ColorSidebar;

package/dist/components/presentation-editor/sidebar/color-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import ColorSidebar from './color-sidebar.svelte';
+export { ColorSidebar };

package/dist/components/presentation-editor/sidebar/color-sidebar/index.js

@@ -0,0 +1,2 @@
+import ColorSidebar from './color-sidebar.svelte';
+export { ColorSidebar };

package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar-button.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import CheckIcon from 'lucide-svelte/icons/check';
+	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import { onMount } from 'svelte';
+	import { Button, type ButtonProps } from '../../../ui/button/index.js';
+
+	interface Props extends ButtonProps {
+		family: string;
+		active?: boolean;
+	}
+
+	let { family, active, ...restProps }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	onMount(() => {
+		editor.loadFont(family);
+	});
+</script>
+
+<Button variant="ghost" class="justify-between" {...restProps}>
+	<div style="font-family: '{family}';">{family}</div>
+	{#if active}
+		<CheckIcon class="h-6 w-6" />
+	{/if}
+</Button>

package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ButtonProps } from '../../../ui/button/index.js';
+interface Props extends ButtonProps {
+    family: string;
+    active?: boolean;
+}
+declare const FontSidebarButton: import("svelte").Component<Props, {}, "">;
+type FontSidebarButton = ReturnType<typeof FontSidebarButton>;
+export default FontSidebarButton;