@peteai/presentation-editor 0.0.8 → 0.0.10

package/dist/components/editor/pages-navigation/pages-navigation-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dragHandle } from 'svelte-dnd-action';
 	import PlusIcon from '@lucide/svelte/icons/plus';
+	import ArrowBigRightDashIcon from '@lucide/svelte/icons/arrow-big-right-dash';
 	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
 	import IconLocked from '@lucide/svelte/icons/lock-keyhole';
 	import { Button, buttonVariants } from '../../ui/button/index.js';
@@ -9,8 +10,8 @@
 	import { cn } from '../../../utils.js';
 	import type { Editor } from '../editor.svelte.js';
 	import type { Page } from '../types.js';
-	import PagePreviewMenuContent from '../menu/page-menu-content.svelte';
-	import PagePreview from './page-preview.svelte';
+	import PageMenuContent from '../menu/page-menu-content.svelte';
+	import PagePreview from '../page-preview.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -24,27 +25,29 @@
 	let menuOpen = $state(false);
 </script>
 
-<div class="relative flex items-center">
-	<div class="group h-full">
-		<div class="absolute -left-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
-		<div
-			class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
-		>
+<div class="relative flex items-stretch">
+	{#if index === 0}
+		<div class="group ml-2 py-2">
+			<div class="absolute -left-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
 			<div
-				class="absolute inline-flex flex-col opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-				role="menu"
+				class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
 			>
-				<Button
-					variant="outline"
-					size="icon-xs"
-					class="my-1 h-6 w-6 rounded-full"
-					onclick={() => editor.addPage({ index })}
+				<div
+					class="absolute inline-flex flex-col opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+					role="menu"
 				>
-					<PlusIcon class="h-4 w-4" />
-				</Button>
+					<Button
+						variant="outline"
+						size="icon-xs"
+						class="my-1 h-6 w-6 rounded-full"
+						onclick={() => editor.addPage({ index })}
+					>
+						<PlusIcon class="h-4 w-4" />
+					</Button>
+				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
 	<div class="group relative mx-2 my-1 transition-transform">
 		<div use:dragHandle role="none">
 			<button class="block" onclick={() => editor.setActivePage(page.id)}>
@@ -73,7 +76,7 @@
 						</div>
 					</ContextMenu.Trigger>
 					<ContextMenu.Content class="w-72">
-						<PagePreviewMenuContent {editor} {page} />
+						<PageMenuContent {editor} {page} />
 					</ContextMenu.Content>
 				</ContextMenu.Root>
 			</button>
@@ -115,9 +118,66 @@
 				</DropdownMenu.Trigger>
 
 				<DropdownMenu.Content class="w-72" side="top" align="start" trapFocus={false}>
-					<PagePreviewMenuContent {editor} {page} />
+					<PageMenuContent {editor} {page} />
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</div>
 	</div>
+	{#if index < editor.pages.length - 1}
+		<div class="group py-2">
+			<div class="absolute -right-2 top-0 z-20 h-full w-4 group-hover:w-16"></div>
+			<div
+				class="relative z-30 flex h-full w-0 items-center justify-center transition-all duration-300 group-hover:w-6"
+			>
+				<!-- {#if page.transition}
+					<div
+						class="absolute inline-flex flex-col opacity-100 transition-opacity duration-500 group-hover:opacity-0"
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							active={page.id === editor.activePage.id}
+							class="my-1 h-6 w-6 rounded-full"
+							onclick={() => editor.setActivePage(page.id)}
+						>
+							<ArrowBigRightDashIcon class="h-4 w-4" />
+						</Button>
+					</div>
+				{/if} -->
+				<div class="flex h-full flex-col items-center" role="menu">
+					<div
+						class="flex flex-1 items-center opacity-0 transition-all duration-500 group-hover:opacity-100"
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							class="h-6 w-6 rounded-full"
+							onclick={() => editor.addPage({ index: index + 1 })}
+						>
+							<PlusIcon class="h-4 w-4" />
+						</Button>
+					</div>
+					<div
+						class={cn(
+							'flex flex-1 items-center transition-all group-hover:translate-y-0 group-hover:opacity-100',
+							page.transition ? '-translate-y-1/2 duration-300' : 'opacity-0 duration-500',
+						)}
+					>
+						<Button
+							variant="outline"
+							size="icon-xs"
+							class="h-6 w-6 rounded-full"
+							active={!!page.transition && page.id === editor.activePage.id}
+							onclick={() => {
+								editor.setActivePage(page.id);
+								editor.activeSidebarPopup = 'transition';
+							}}
+						>
+							<ArrowBigRightDashIcon class="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>

package/dist/components/editor/pages-navigation/pages-navigation.svelte

@@ -5,6 +5,7 @@
 	import type { Editor } from '../editor.svelte.js';
 	import type { Page } from '../types.js';
 	import PagesNavigationItem from './pages-navigation-item.svelte';
+	import { Button } from '../../ui/button/index.js';
 
 	interface Props {
 		editor: Editor;
@@ -85,19 +86,21 @@
 			{/each}
 		</section>
 		<div class="relative py-2" role="none">
-			<button
-				class="mx-2 my-1 rounded-xl"
+			<Button
+				variant="outline"
+				size="vague"
+				class="mx-2 my-1 rounded-lg"
 				aria-label="New Page"
 				onclick={() => editor.addPage({ index: editor.pages.length })}
 			>
 				<div
-					class="relative flex items-center justify-center overflow-hidden rounded-lg bg-gray-400"
+					class="relative flex items-center justify-center"
 					style:width="{editor.width * thumbScale}px"
 					style:height="{editor.height * thumbScale}px"
 				>
 					<PlusIcon class="h-6 w-6" />
 				</div>
-			</button>
+			</Button>
 		</div>
 	</div>
 </nav>

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

@@ -30,7 +30,7 @@
 	)}
 	{...restProps}
 >
-	<div class="wrapper after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0">
+	<div class="wrapper relative h-full w-full after:absolute after:inset-0 after:shadow-inner-1">
 		<ColorPickerAlphaGrid size={12}>
 			<ColorIndicator {color} />
 		</ColorPickerAlphaGrid>
@@ -40,7 +40,7 @@
 		<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">
+			<div class="rounded-full bg-background p-1 text-foreground">
 				<SettingsIcon class="h-4 w-4" />
 			</div>
 		</div>

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

@@ -66,11 +66,11 @@
 					<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',
+							'relative h-full w-full shrink-0 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:transition-shadow hover:after:shadow-hover data-[state=open]:after:shadow-active',
 						)}
 					>
 						<div
-							class="wrapper after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0 after:rounded-full"
+							class="wrapper relative h-full w-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
 						>
 							<ColorPickerAlphaGrid size={12}>
 								<ColorIndicator {color} />
@@ -105,11 +105,11 @@
 			<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"
+				class="relative shrink-0 p-0 after:absolute after:inset-0 after:rounded-full after:transition-shadow hover:after:shadow-hover"
 				onclick={addColor}
 			>
 				<div
-					class="after:shadow-inner-1 relative h-full w-full after:absolute after:inset-0 after:rounded-full"
+					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"
@@ -117,7 +117,7 @@
 					></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"
+							class="flex h-6 w-6 items-center justify-center rounded-full bg-background text-foreground"
 						>
 							<PlusIcon />
 						</span>

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="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>
+		<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-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)} />
+			{#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-muted-foreground text-xs">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>
@@ -202,7 +206,7 @@
 					</InfiniteLoader>
 				</div>
 			{:else}
-				<p class="text-muted-foreground text-sm">
+				<p class="text-sm text-muted-foreground">
 					We couldn't find any results for “{search}”. Try searching for something else.
 				</p>
 			{/if}

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 };