@peteai/presentation-editor 0.0.8 → 0.0.9

package/dist/components/editor/active-layers.svelte

@@ -147,14 +147,14 @@
 	>
 		{#if !group.items.length}
 			<div
-				class="border-primary absolute -inset-px border-2"
+				class="absolute -inset-px border-2 border-primary"
 				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 			></div>
 		{:else}
 			<div class="group-border absolute -inset-px"></div>
 			{#each group.items as item}
 				<div
-					class="border-primary absolute -left-px -top-px border-2"
+					class="absolute -left-px -top-px border-2 border-primary"
 					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 					style:width={`${item.width * item.scale * editor.zoom + 2}px`}
 					style:height={`${item.height * item.scale * editor.zoom + 2}px`}

package/dist/components/editor/header.svelte

@@ -16,7 +16,7 @@
 	let disabled = $derived(!!editor.imageCropLayer);
 </script>
 
-<div class="bg-background h-12 w-full border-b border-gray-200 px-2">
+<div class="h-12 w-full border-b border-gray-200 bg-background px-2">
 	<div class="flex h-full items-center justify-between">
 		<div class="grid grid-flow-col items-center gap-2">
 			<Button

package/dist/components/editor/layers/active-layer-border.svelte

@@ -18,7 +18,7 @@
 	style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}
 >
 	<div
-		class="border-primary absolute -inset-px border-2"
+		class="absolute -inset-px border-2 border-primary"
 		style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
 	></div>
 </div>

package/dist/components/editor/layers/buttons/border-button/border-button-colors.svelte

@@ -50,7 +50,7 @@
 				{/each}
 			</svg>
 			<span
-				class="bg-background absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+				class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background"
 				style:width="{width / 2}px"
 				style:height="{height / 2}px"
 			></span>

package/dist/components/editor/layers/controls/corner-scale-control/corner-scale-control.svelte

@@ -198,7 +198,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/controls/rotate-control/rotate-control.svelte

@@ -180,7 +180,7 @@
 			onmousedown={onMouseDown}
 		></div>
 		<div
-			class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors"
+			class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-primary group-hover:text-primary-foreground group-active:bg-primary group-active:text-primary-foreground"
 			style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 		>
 			<RotateIcon class="h-4 w-4" />

package/dist/components/editor/layers/controls/side-scale-control/side-scale-control.svelte

@@ -146,7 +146,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-4 w-1.5 rounded-sm bg-white transition-colors"
+		class="h-4 w-1.5 rounded-sm bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/layer-button.svelte

@@ -33,7 +33,7 @@
 	<button
 		{onclick}
 		class={cn(
-			'bg-muted flex w-full items-center justify-between rounded-md border-2 border-transparent p-2 outline-none',
+			'flex w-full items-center justify-between rounded-md border-2 border-transparent bg-muted p-2 outline-none',
 			{
 				'border-blue-500': layer
 					? editor.activeLayers.find((l) => l.id === layer.id)

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

@@ -20,7 +20,7 @@
 	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"
+		class="relative h-6 w-6 overflow-hidden rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner-1"
 	>
 		<ColorPickerAlphaGrid size={12}>
 			<ColorIndicator color={backgroundColor} />

package/dist/components/editor/layers/types/image/controls/image-rotate-control/image-rotate-control.svelte

@@ -110,7 +110,7 @@
 	onmousedown={onMouseDown}
 >
 	<div
-		class="group-hover:bg-primary group-active:bg-primary group-hover:text-primary-foreground group-active:text-primary-foreground flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors after:pointer-events-auto after:absolute after:inset-0 after:rounded-full"
+		class="flex h-6 w-6 items-center justify-center rounded-full bg-white transition-colors after:pointer-events-auto after:absolute after:inset-0 after:rounded-full group-hover:bg-primary group-hover:text-primary-foreground group-active:bg-primary group-active:text-primary-foreground"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	>
 		<RotateIcon class="h-4 w-4" />

package/dist/components/editor/layers/types/image/controls/image-scale-control/image-scale-control.svelte

@@ -148,7 +148,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class={cn(handler(), cursor())} onmousedown={onMouseDown}></div>
 	<div
-		class="group-hover:bg-primary group-active:bg-primary h-3 w-3 rounded-full bg-white transition-colors"
+		class="h-3 w-3 rounded-full bg-white transition-colors group-hover:bg-primary group-active:bg-primary"
 		style:box-shadow="0 0 4px 1px rgba(57,76,96,.15), 0 0 0 1px rgba(43,59,74,.3)"
 	></div>
 </div>

package/dist/components/editor/layers/types/image/image-layer-crop.svelte

@@ -156,7 +156,7 @@
 	</div>
 	<div class="pointer-events-auto">
 		<div
-			class="shadow-inner-1 outline-primary/50 pointer-events-none absolute outline outline-2"
+			class="pointer-events-none absolute shadow-inner-1 outline outline-2 outline-primary/50"
 			style:width={`${layer.image.width * layer.scale * editor.zoom}px`}
 			style:height={`${layer.image.height * layer.scale * editor.zoom}px`}
 			style:transform={`translate(${imageTransform.x * editor.zoom}px, ${imageTransform.y * editor.zoom}px) rotate(${imageTransform.rotate}deg)`}
@@ -173,7 +173,7 @@
 			<ImageRotateControl {pageRef} {layer} />
 		</div>
 		<div
-			class="outline-primary pointer-events-none absolute outline outline-2"
+			class="pointer-events-none absolute outline outline-2 outline-primary"
 			style:width={`${layer.width * layer.scale * editor.zoom}px`}
 			style:height={`${layer.height * layer.scale * editor.zoom}px`}
 			style:transform={`translate(${layer.x * editor.zoom}px, ${layer.y * editor.zoom}px) rotate(${layer.rotate}deg)`}

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

@@ -325,7 +325,7 @@
 						)}
 					>
 						<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"
@@ -333,7 +333,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>
@@ -381,7 +381,7 @@
 		<!-- <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="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%">
@@ -393,7 +393,7 @@
 	</div>
 
 	{#if gradientsAllowed}
-		<div class="text-muted-foreground text-xs">Gradients</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%">

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

@@ -202,7 +202,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/sidebar-uploads-tab.svelte

@@ -47,7 +47,7 @@
 <div class="relative flex h-full shrink-0 flex-col gap-2">
 	{#if editor.fileDragged}
 		<div
-			class="bg-background absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center"
+			class="absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center bg-background"
 		>
 			<div class="grid gap-6">
 				<div class="grid justify-center">
@@ -60,7 +60,7 @@
 						<ImageIcon class="h-4 w-4" />
 						<p class="text-sm font-semibold">Images</p>
 					</div>
-					<p class="text-muted-foreground text-xs">GIF, JPG, PNG</p>
+					<p class="text-xs text-muted-foreground">GIF, JPG, PNG</p>
 				</div>
 			</div>
 		</div>
@@ -91,7 +91,7 @@
 								class="col-span-3"
 							/>
 							{#if error}
-								<div class="text-destructive col-span-3 col-start-2 text-sm font-medium">
+								<div class="col-span-3 col-start-2 text-sm font-medium text-destructive">
 									Invalid
 								</div>
 							{/if}

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

@@ -64,7 +64,7 @@
 	</div>
 
 	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
-		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
+		<div class="h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 bg-background p-2">
 			{#if editor.imageCropLayer}
 				<ImageCropSidebar layer={editor.imageCropLayer} />
 			{:else if editor.activeSidebarPopup === 'position'}

package/dist/components/editor/snapping-guides.svelte

@@ -13,11 +13,11 @@
 <div class="absolute h-full w-full">
 	{#each guides as guide (guide.id)}
 		{#if guide.type === 'box'}
-			<div class="border-primary absolute border" style:inset="{guide.inset * zoom}px"></div>
+			<div class="absolute border border-primary" style:inset="{guide.inset * zoom}px"></div>
 		{:else if guide.type === 'vertical'}
 			<div
 				class={cn(
-					'border-primary absolute h-full border-l',
+					'absolute h-full border-l border-primary',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}
@@ -28,7 +28,7 @@
 		{:else if guide.type === 'horizontal'}
 			<div
 				class={cn(
-					'border-primary absolute w-full border-t',
+					'absolute w-full border-t border-primary',
 					guide.style === 'dashed' && 'border-dashed',
 					guide.style === 'dotted' && 'border-dotted',
 				)}

package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte

@@ -21,7 +21,8 @@
 <style>
 	.alpha-grid {
 		background-color: hsl(var(--background));
-		background-image: linear-gradient(
+		background-image:
+			linear-gradient(
 				-45deg,
 				hsl(var(--foreground)) 25%,
 				transparent 25%,

package/dist/components/ui/color-picker/color-picker.svelte

@@ -237,7 +237,7 @@
 				style:background="linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))"
 			>
 				<div
-					class="border-primary relative m-0 -translate-x-1/2 -translate-y-1/2 rounded-full p-0"
+					class="relative m-0 -translate-x-1/2 -translate-y-1/2 rounded-full border-primary p-0"
 					style:width="16px"
 					style:height="16px"
 					style:border="2px solid #fffb"
@@ -275,7 +275,7 @@
 				></span>
 				<Slider.Thumb
 					index={0}
-					class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+					class="border-border-input hover:border-dark-40 block size-2 cursor-pointer rounded-full border bg-background shadow transition-colors focus-visible:outline-none active:scale-150 dark:bg-foreground dark:shadow-card"
 				/>
 			{/snippet}
 		</Slider.Root>
@@ -294,7 +294,7 @@
 				{#snippet children()}
 					<AlphaGrid
 						size={8}
-						class="shadow-inner-1 relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full"
+						class="relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full shadow-inner-1"
 					>
 						<div
 							class="h-full w-full rounded-full"
@@ -303,7 +303,7 @@
 					</AlphaGrid>
 					<Slider.Thumb
 						index={0}
-						class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+						class="border-border-input hover:border-dark-40 block size-2 cursor-pointer rounded-full border bg-background shadow transition-colors focus-visible:outline-none active:scale-150 dark:bg-foreground dark:shadow-card"
 					/>
 				{/snippet}
 			</Slider.Root>
@@ -327,9 +327,9 @@
 					</AlphaGrid>
 				</div>
 			</div>
-			<div class="text-muted-foreground pointer-events-none absolute left-10 text-sm">#</div>
+			<div class="pointer-events-none absolute left-10 text-sm text-muted-foreground">#</div>
 			<Input
-				class={cn('pl-12', invalidHex && 'ring-destructive ring-1')}
+				class={cn('pl-12', invalidHex && 'ring-1 ring-destructive')}
 				value={hexValue.slice(0, 7).replace('#', '')}
 				oninput={onHexInput}
 				onchange={onHexChange}

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-content.svelte

@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		portalProps,
+		preventScroll = false,
 		class: className,
 		...restProps
 	}: ContextMenuPrimitive.ContentProps & {
@@ -15,8 +16,9 @@
 <ContextMenuPrimitive.Portal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		bind:ref
+		{preventScroll}
 		class={cn(
-			'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
+			'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 			className,
 		)}
 		{...restProps}

package/dist/components/ui/context-menu/context-menu-group-heading.svelte

@@ -14,6 +14,6 @@
 
 <ContextMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-item.svelte

@@ -15,7 +15,7 @@
 <ContextMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <ContextMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-separator.svelte

@@ -11,6 +11,6 @@
 
 <ContextMenuPrimitive.Separator
 	bind:ref
-	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-shortcut.svelte

@@ -14,7 +14,7 @@
 <kbd
 	bind:this={ref}
 	class={cn(
-		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		'ml-auto rounded-sm bg-muted px-2 py-1 font-sans text-xs tracking-widest text-muted-foreground',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-content.svelte

@@ -12,7 +12,7 @@
 <ContextMenuPrimitive.SubContent
 	bind:ref
 	class={cn(
-		'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-none',
+		'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dialog/dialog-content.svelte

@@ -7,6 +7,7 @@
 
 	let {
 		ref = $bindable(null),
+		preventScroll = false,
 		class: className,
 		portalProps,
 		children,
@@ -21,15 +22,16 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		{preventScroll}
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
 			className,
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		preventScroll = false,
 		class: className,
 		...restProps
 	}: DropdownMenuPrimitive.ContentProps = $props();
@@ -13,6 +14,7 @@
 <DropdownMenuPrimitive.Content
 	bind:ref
 	{sideOffset}
+	{preventScroll}
 	class={cn(
 		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none',
 		className,

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -14,7 +14,7 @@
 <kbd
 	bind:this={ref}
 	class={cn(
-		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		'ml-auto rounded-sm bg-muted px-2 py-1 font-sans text-xs tracking-widest text-muted-foreground',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[state=open]:bg-accent data-[highlighted]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/input/input.svelte

@@ -14,7 +14,7 @@
 <input
 	bind:this={ref}
 	class={cn(
-		'border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 		className,
 	)}
 	bind:value

package/dist/components/ui/slider/slider.svelte

@@ -28,16 +28,16 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{#snippet children({ thumbs })}
 		<span
 			data-orientation={orientation}
-			class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+			class="relative grow overflow-hidden rounded-full bg-secondary data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
 		>
 			<SliderPrimitive.Range
-				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+				class="absolute bg-primary data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
 			/>
 		</span>
 		{#each thumbs as thumb (thumb)}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

package/dist/components/ui/tabs/index.d.ts

@@ -1,6 +1,6 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/index.js

@@ -1,7 +1,7 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 const Root = TabsPrimitive.Root;
 export { Root, Content, List, Trigger, 
 //

package/dist/components/ui/tabs/tabs-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,8 @@
 <TabsPrimitive.Content
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
+		'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
+import { Tabs as TabsPrimitive } from 'bits-ui';
 declare const TabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
 type TabsContent = ReturnType<typeof TabsContent>;
 export default TabsContent;

package/dist/components/ui/tabs/tabs-list.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
-		className
+		'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
+import { Tabs as TabsPrimitive } from 'bits-ui';
 declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,8 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-		className
+		'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
+import { Tabs as TabsPrimitive } from 'bits-ui';
 declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
 type TabsTrigger = ReturnType<typeof TabsTrigger>;
 export default TabsTrigger;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -47,35 +47,35 @@
 		"svelte": "^5.19.7"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.54.1",
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/kit": "^2.26.1",
-		"@sveltejs/package": "^2.4.0",
-		"@sveltejs/vite-plugin-svelte": "^6.1.0",
+		"@playwright/test": "^1.55.1",
+		"@sveltejs/adapter-auto": "^6.1.0",
+		"@sveltejs/kit": "^2.43.4",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@types/eslint": "^9.6.1",
 		"@types/uniqid": "^5.3.4",
 		"@types/webfontloader": "^1.6.38",
 		"autoprefixer": "^10.4.21",
-		"eslint": "^9.32.0",
+		"eslint": "^9.36.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.11.0",
-		"globals": "^16.3.0",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
 		"postcss-cli": "^11.0.1",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",
-		"publint": "^0.3.12",
-		"svelte": "^5.37.1",
-		"svelte-check": "^4.3.0",
+		"publint": "^0.3.13",
+		"svelte": "^5.39.6",
+		"svelte-check": "^4.3.2",
 		"svelte-kit-sst": "^2.43.5",
 		"tailwindcss": "^3.4.17",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.38.0",
-		"vite": "^7.0.6",
+		"typescript": "^5.9.2",
+		"typescript-eslint": "^8.44.1",
+		"vite": "^7.1.7",
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.534.0",
+		"@lucide/svelte": "^0.544.0",
 		"@tiptap/core": "^2.14.0",
 		"@tiptap/extension-bold": "^2.14.0",
 		"@tiptap/extension-bullet-list": "^2.14.0",
@@ -92,11 +92,11 @@
 		"@tiptap/extension-text-style": "^2.14.0",
 		"@tiptap/extension-underline": "^2.14.0",
 		"@tiptap/pm": "^2.14.0",
-		"bits-ui": "^2.8.13",
+		"bits-ui": "^2.11.4",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.2.2",
-		"svelte-dnd-action": "^0.9.64",
-		"svelte-radix": "^2.0.1",
+		"svelte-dnd-action": "^0.9.65",
+		"svelte-radix": "^2.0.2",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss-animate": "^1.0.7",