@peteai/presentation-editor 0.0.9 → 0.0.10

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

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import PlusIcon from '@lucide/svelte/icons/plus';
-	// import PaletteIcon from '@lucide/svelte/icons/palette';
+	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 { getEditorContext } from '../../editor.svelte.js';
-	import type { HistoryAction, Gradient, ImageLayer, TextLayer, Layer, Page } from '../../types.js';
+	import type { Editor } from '../../editor.svelte.js';
+	import type { HistoryAction, Gradient, ImageLayer, TextLayer, Layer } from '../../types.js';
 	import SidebarWrapper from '../sidebar-wrapper.svelte';
 	import ColorSidebarGradientPicker from './color-sidebar-gradient-picker.svelte';
 	import ColorSidebarColor from './color-sidebar-color.svelte';
@@ -20,7 +20,11 @@
 
 	let open = $state(false);
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const { htmlEditor } = editor;
 
@@ -311,91 +315,82 @@
 </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="relative h-full w-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
-						>
-							<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="flex h-6 w-6 items-center justify-center rounded-full bg-background text-foreground"
-								>
-									<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>
+		<div class="flex items-center gap-2 p-2">
+			<h5 class="text-left text-sm font-bold">Document colors</h5>
 		</div>
-		{#each documentColors as color}
+		<div class="grid grid-cols-6 items-stretch gap-1 p-2">
 			<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)} />
+					<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="relative h-full w-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
+							>
+								<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="flex h-6 w-6 items-center justify-center rounded-full bg-background text-foreground"
+									>
+										<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}
-	</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-xs text-muted-foreground">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)} />
+			{#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>
-			</div>
-		{/each}
+			{/each}
+		</div>
 	</div>
 
-	{#if gradientsAllowed}
-		<div class="text-xs text-muted-foreground">Gradients</div>
-		<div class="grid grid-cols-6 items-stretch gap-1">
-			{#each defaultGradients as color}
+	<div>
+		<div class="flex items-center gap-2 p-2">
+			<PaletteIcon class="h-5 w-5" />
+			<h5 class="text-left text-sm font-bold">Default solid colors</h5>
+		</div>
+		<div class="grid grid-cols-6 items-stretch gap-1 p-2">
+			{#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)} />
@@ -403,5 +398,20 @@
 				</div>
 			{/each}
 		</div>
+	</div>
+
+	{#if gradientsAllowed}
+		<div>
+			<div class="text-xs text-muted-foreground">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>
+		</div>
 	{/if}
 </SidebarWrapper>

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

@@ -1,3 +1,7 @@
-declare const ColorSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Editor } from '../../editor.svelte.js';
+interface Props {
+    editor: Editor;
+}
+declare const ColorSidebar: import("svelte").Component<Props, {}, "">;
 type ColorSidebar = ReturnType<typeof ColorSidebar>;
 export default ColorSidebar;

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

@@ -8,7 +8,7 @@
 	import { Button } from '../../../ui/button/index.js';
 	import { Separator } from '../../../ui/separator/index.js';
 	import { cn } from '../../../../utils.js';
-	import { getEditorContext } from '../../editor.svelte.js';
+	import type { Editor } from '../../editor.svelte.js';
 	import SidebarWrapper from '../sidebar-wrapper.svelte';
 	import {
 		createEditorNotReactive,
@@ -17,7 +17,11 @@
 	} from '../../layers/types/text/editor/utils.js';
 	import FontSidebarButton from './font-sidebar-button.svelte';
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	let { htmlEditor } = editor;
 
@@ -133,7 +137,7 @@
 </script>
 
 <SidebarWrapper name="Font">
-	<div class="relative flex items-center">
+	<div class="relative flex items-center p-2">
 		<div class="pointer-events-none absolute flex w-10 items-center justify-center">
 			{#if search}
 				<Button variant="ghost" size="icon-xs" class="pointer-events-auto" onclick={cancelSearch}>
@@ -150,7 +154,7 @@
 			oninput={() => (searchedPagesLoaded = 1)}
 		/>
 	</div>
-	<div class={cn('flex-1 overflow-y-auto', search && 'hidden')}>
+	<div class={cn('flex-1 overflow-y-auto p-2', search && 'hidden')}>
 		<div class="flex items-center gap-2 py-2">
 			<DocumentIcon class="h-6 w-6" />
 			<h5 class="text-left text-sm font-bold">Document fonts</h5>
@@ -184,7 +188,7 @@
 	</div>
 
 	{#if search}
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto p-2">
 			{#if searchedFonts.length}
 				<div class="flex items-center gap-2 py-2">
 					<h5 class="text-left text-sm font-bold">All results</h5>

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

@@ -1,3 +1,7 @@
-declare const FontSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Editor } from '../../editor.svelte.js';
+interface Props {
+    editor: Editor;
+}
+declare const FontSidebar: import("svelte").Component<Props, {}, "">;
 type FontSidebar = ReturnType<typeof FontSidebar>;
 export default FontSidebar;

package/dist/components/editor/sidebar/image-crop-sidebar.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-	import XIcon from '@lucide/svelte/icons/x';
 	import { Button } from '../../ui/button/index.js';
 	import { Slider } from '../../ui/slider/index.js';
 	import { Input } from '../../ui/input/index.js';
-	import { getEditorContext } from '../editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 	import {
 		calculateImageLayerPropsForImageRotate,
 		calculateRelativeRects,
 	} from '../layers/utils.js';
 	import type { ImageLayer } from '../types.js';
+	import SidebarWrapper from './sidebar-wrapper.svelte';
 
 	interface Props {
+		editor: Editor;
 		layer: ImageLayer;
 	}
 
-	let { layer }: Props = $props();
-
-	const editor = $derived(getEditorContext());
+	let { editor, layer }: Props = $props();
 
 	let value = $derived(Math.round(layer.imageRotate * 10) / 10);
 	let originalLayer = $derived(
@@ -74,39 +73,31 @@
 	});
 </script>
 
-<div class="flex h-full flex-col gap-2">
-	<div class="flex items-center justify-between">
-		<div class="text-sm font-bold">Crop</div>
-		<Button variant="ghost" size="icon" onclick={() => (editor.imageCropLayer = null)}>
-			<XIcon />
-		</Button>
-	</div>
-	<div class="flex-1 resize-none overflow-y-auto">
-		<div class="flex items-center gap-2">
-			<div class="grow">
-				<Slider
-					type="single"
-					{value}
-					{min}
-					{max}
-					{step}
-					onValueChange={(value) => setImageRotate(value)}
-					onValueCommit={() => (layerCache = null)}
-				/>
-			</div>
-			<Input
-				class="w-12 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
-				inputmode="decimal"
-				placeholder="--"
+<SidebarWrapper name="Crop" onclose={() => (editor.imageCropLayer = null)}>
+	<div class="flex items-center gap-2 p-2">
+		<div class="grow">
+			<Slider
+				type="single"
 				{value}
-				onchange={(e) => setImageRotate(e.currentTarget.value)}
+				{min}
+				{max}
+				{step}
+				onValueChange={(value) => setImageRotate(value)}
+				onValueCommit={() => (layerCache = null)}
 			/>
 		</div>
-		<div class="flex justify-end gap-2 p-2">
-			<Button class="flex-1" variant="outline" onclick={() => (editor.imageCropLayer = null)}>
-				Cancel
-			</Button>
-			<Button class="flex-1" onclick={applyChanges}>Done</Button>
-		</div>
+		<Input
+			class="w-12 bg-transparent p-0 text-center font-semibold leading-none [&::-webkit-inner-spin-button]:appearance-none"
+			inputmode="decimal"
+			placeholder="--"
+			{value}
+			onchange={(e) => setImageRotate(e.currentTarget.value)}
+		/>
+	</div>
+	<div class="flex justify-end gap-2 p-2">
+		<Button class="flex-1" variant="outline" onclick={() => (editor.imageCropLayer = null)}>
+			Cancel
+		</Button>
+		<Button class="flex-1" onclick={applyChanges}>Done</Button>
 	</div>
-</div>
+</SidebarWrapper>

package/dist/components/editor/sidebar/image-crop-sidebar.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { Editor } from '../editor.svelte.js';
 import type { ImageLayer } from '../types.js';
 interface Props {
+    editor: Editor;
     layer: ImageLayer;
 }
 declare const ImageCropSidebar: import("svelte").Component<Props, {}, "">;

package/dist/components/editor/sidebar/position-sidebar/index.d.ts

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

package/dist/components/editor/sidebar/position-sidebar/index.js

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

package/dist/components/editor/sidebar/position-sidebar/position-sidebar.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { dndzone, type DndEvent } from 'svelte-dnd-action';
+	import * as ContextMenu from '../../../ui/context-menu/index.js';
+	import {
+		LayerButton,
+		LayerThumbWrapper,
+		TextLayerContent,
+		ImageLayerContent,
+		BackgroundLayerContent,
+		GroupLayerContent,
+	} from '../../layers/index.js';
+	import type { Editor } from '../../editor.svelte.js';
+	import LayerMenuContent from '../../menu/layer-menu-content.svelte';
+	import BackgroundMenuContent from '../../menu/background-menu-content.svelte';
+	import type { Layer } from '../../types.js';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	const flipDurationMs = 300;
+	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
+
+	function handleDndConsider(e: CustomEvent<DndEvent<Layer>>) {
+		editor.rootLayers = e.detail.items;
+	}
+
+	async function handleDndFinalize(e: CustomEvent<DndEvent<Layer>>) {
+		console.log('handleDndFinalize', e);
+
+		editor.rootLayers = e.detail.items;
+
+		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
+		const item = e.detail.items[index];
+
+		let redo;
+		const prev = e.detail.items[index - 1];
+		const next = e.detail.items[index + 1];
+		if (prev && next) {
+			if (!(prev.sortOrder < item.sortOrder && next.sortOrder > item.sortOrder)) {
+				redo = { sortOrder: (prev.sortOrder + next.sortOrder) / 2 };
+			}
+		} else if (next) {
+			if (next && next.sortOrder <= item.sortOrder) {
+				redo = { sortOrder: next.sortOrder - 1 };
+			}
+		} else if (prev) {
+			if (prev && prev.sortOrder >= item.sortOrder) {
+				redo = { sortOrder: prev.sortOrder + 1 };
+			}
+		}
+
+		if (redo) {
+			editor.historyPush({
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: item.id, type: item.type },
+				undo: { sortOrder: item.sortOrder },
+				redo,
+			});
+		}
+	}
+</script>
+
+<SidebarWrapper name="Position">
+	<div class="flex flex-col gap-2 p-2">
+		<section
+			class="flex flex-col-reverse gap-2"
+			aria-label="Layers"
+			use:dndzone={{
+				items: editor.rootLayers,
+				dragDisabled: editor.activePage.locked,
+				...otherOptions,
+			}}
+			onconsider={handleDndConsider}
+			onfinalize={handleDndFinalize}
+		>
+			{#each editor.rootLayers as layer (layer.id)}
+				<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
+					<ContextMenu.Root
+						onOpenChange={(open) =>
+							open &&
+							!editor.activeLayers.find((l) => l.id === layer.id) &&
+							editor.setActiveLayers(layer.id)}
+					>
+						<ContextMenu.Trigger>
+							<LayerButton {layer}>
+								<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
+									{#snippet children({ thumbScale })}
+										{#if layer.type === 'text'}
+											<TextLayerContent {layer} {thumbScale} />
+										{:else if layer.type === 'image'}
+											<ImageLayerContent {layer} {thumbScale} />
+										{:else if layer.type === 'group'}
+											<GroupLayerContent page={editor.activePage} {layer} {thumbScale} />
+										{/if}
+									{/snippet}
+								</LayerThumbWrapper>
+							</LayerButton>
+						</ContextMenu.Trigger>
+						<ContextMenu.Content class="w-72">
+							<LayerMenuContent />
+						</ContextMenu.Content>
+					</ContextMenu.Root>
+				</div>
+			{/each}
+		</section>
+		<ContextMenu.Root>
+			<ContextMenu.Trigger>
+				<LayerButton>
+					{@const thumbScale = Math.max(192 / editor.width, 32 / editor.height)}
+					<div
+						class="absolute top-1/2 -translate-y-1/2"
+						style:width="{editor.width * thumbScale}px"
+						style:height="{editor.height * thumbScale}px"
+					>
+						<BackgroundLayerContent page={editor.activePage} {thumbScale} />
+					</div>
+				</LayerButton>
+			</ContextMenu.Trigger>
+			<ContextMenu.Content class="w-72">
+				<BackgroundMenuContent {editor} page={editor.activePage} />
+			</ContextMenu.Content>
+		</ContextMenu.Root>
+	</div>
+</SidebarWrapper>

package/dist/components/editor/sidebar/position-sidebar/position-sidebar.svelte.d.ts

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

package/dist/components/editor/sidebar/sidebar-text-tab.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
 	import TextIcon from '@lucide/svelte/icons/type';
 	import Button from '../../ui/button/button.svelte';
-	import { getEditorContext } from '../editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 	import { buildParagraphHtml } from '../utils.js';
 	import SidebarTextTabButton from './sidebar-text-tab-button.svelte';
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	const createTextBox = () => {
 		const fontSize = 80 / 0.75;
@@ -65,7 +69,7 @@
 	];
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col p-2">
 	<Button variant="default" class="w-full" onclick={createTextBox}>
 		<TextIcon />
 		Add a text box

package/dist/components/editor/sidebar/sidebar-text-tab.svelte.d.ts

@@ -1,18 +1,7 @@
-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;
+import type { Editor } from '../editor.svelte.js';
+interface Props {
+    editor: Editor;
 }
-declare const SidebarTextTab: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SidebarTextTab = InstanceType<typeof SidebarTextTab>;
+declare const SidebarTextTab: import("svelte").Component<Props, {}, "">;
+type SidebarTextTab = ReturnType<typeof SidebarTextTab>;
 export default SidebarTextTab;

package/dist/components/editor/sidebar/sidebar-uploads-tab.svelte

@@ -7,9 +7,13 @@
 	import { Label } from '../../ui/label/index.js';
 	import UploadsImage from './uploads-image.svelte';
 	import { checkImage } from '../utils.js';
-	import { getEditorContext } from '../editor.svelte.js';
+	import type { Editor } from '../editor.svelte.js';
 
-	const editor = getEditorContext();
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
 
 	let open = $state(false);
 	let url = $state('');
@@ -44,11 +48,9 @@
 	};
 </script>
 
-<div class="relative flex h-full shrink-0 flex-col gap-2">
+<div class="relative flex h-full shrink-0 flex-col gap-2 p-2">
 	{#if editor.fileDragged}
-		<div
-			class="absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center bg-background"
-		>
+		<div class="absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center">
 			<div class="grid gap-6">
 				<div class="grid justify-center">
 					<CloudUploadIcon class="m-auto h-8 w-8" />

package/dist/components/editor/sidebar/sidebar-uploads-tab.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const SidebarUploadsTab: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Editor } from '../editor.svelte.js';
+interface Props {
+    editor: Editor;
+}
+declare const SidebarUploadsTab: import("svelte").Component<Props, {}, "">;
 type SidebarUploadsTab = ReturnType<typeof SidebarUploadsTab>;
 export default SidebarUploadsTab;

package/dist/components/editor/sidebar/sidebar-wrapper.svelte

@@ -5,18 +5,19 @@
 
 	interface Props {
 		name: string;
+		onclose?: () => void;
 		children?: import('svelte').Snippet;
 	}
 
-	let { name, children }: Props = $props();
+	let { name, children, onclose = () => (editor.activeSidebarPopup = null) }: Props = $props();
 
 	const editor = getEditorContext();
 </script>
 
 <div class="flex h-full select-none flex-col gap-2">
-	<div class="flex items-center justify-between">
+	<div class="flex items-center justify-between p-2">
 		<div class="text-sm font-bold">{name}</div>
-		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
+		<Button variant="ghost" size="icon" onclick={onclose}>
 			<XIcon />
 		</Button>
 	</div>

package/dist/components/editor/sidebar/sidebar-wrapper.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     name: string;
+    onclose?: () => void;
     children?: import('svelte').Snippet;
 }
 declare const SidebarWrapper: import("svelte").Component<Props, {}, "">;