@peteai/presentation-editor 0.0.7 → 0.0.9

package/dist/components/editor/layers/utils.d.ts

@@ -12,13 +12,6 @@ export type Transform = {
     rotate: number;
     scale: number;
 };
-export declare const rotatePointOld: (point: {
-    x: number;
-    y: number;
-}, angleRad: number) => {
-    x: number;
-    y: number;
-};
 export declare const calculateLayerTransform: (layer: Layer, groupScale?: number) => Transform;
 export declare const calculateNewPosition: (origin: Origin, transform: Transform, newWidth: number, newHeight: number) => {
     newX: number;
@@ -31,7 +24,7 @@ export declare function calculateBoundingBox(transform: Transform): {
     height: number;
 };
 export declare function degToRad(deg: number): number;
-export declare function rotatePoint(p: Point, origin: Point, angleRad: number): Point;
+export declare function rotatePoint(rad: number, p: Point, center?: Point): Point;
 export declare function getRotatedCorners(rect: Transform): Point[];
 export declare function isRotatedVertically(rotate: number): boolean;
 interface ScaleResult {
@@ -51,9 +44,9 @@ export declare function calculateRelativeRects(bbox: Transform, absoluteRects: T
     x: number;
     y: number;
     rotate: number;
+    scale: number;
     width: number;
     height: number;
-    scale: number;
 }[];
 export declare function calculateAbsoluteRects(bbox: Transform, rects: Transform[]): Transform[];
 export declare const checkPolygonsIntersect: (a: {
@@ -68,6 +61,7 @@ export declare function calculateImageCover(image: {
     width: number;
     height: number;
     rotate?: number | null;
+    imageRotate?: number | null;
 }, bbox: {
     width: number;
     height: number;
@@ -81,4 +75,25 @@ export declare function calculateImageCover(image: {
 export declare const defaultColor = "#000000";
 export declare function extractBorderColors(layers: ImageLayer[]): string[] | undefined;
 export declare function buildBackgroundCircleStyle(colors: string[]): string;
+export declare function getImageLayerBboxRelativeToImageCenter(layer: ImageLayer): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+export declare function calculateImageLayerPropsForImageRotate(layer: ImageLayer, imageRotate: number): {
+    imageRotate: number;
+    scale?: undefined;
+    width?: undefined;
+    height?: undefined;
+    offsetX?: undefined;
+    offsetY?: undefined;
+} | {
+    imageRotate: number;
+    scale: number;
+    width: number;
+    height: number;
+    offsetX: number;
+    offsetY: number;
+};
 export {};

package/dist/components/editor/layers/utils.js

@@ -1,12 +1,4 @@
-export const rotatePointOld = (point, angleRad) => {
-    const cos = Math.cos(angleRad);
-    const sin = Math.sin(angleRad);
-    return {
-        x: point.x * cos - point.y * sin,
-        y: point.x * sin + point.y * cos,
-    };
-};
-const getPoints = (origin, width, height) => {
+const getOriginRelativePoint = (origin, width, height) => {
     const halfWidth = width / 2;
     const halfHeight = height / 2;
     switch (origin) {
@@ -41,36 +33,42 @@ export const calculateLayerTransform = (layer, groupScale = 1) => ({
     scale: layer.scale,
 });
 export const calculateNewPosition = (origin, transform, newWidth, newHeight) => {
-    const { x, y, width, height, rotate, scale } = transform;
-    const oldPoint = getPoints(origin, width * scale, height * scale);
-    const newPoint = getPoints(origin, newWidth, newHeight);
-    let deltaX = newPoint.x - oldPoint.x;
-    let deltaY = newPoint.y - oldPoint.y;
-    if (rotate !== 0) {
-        const rad = (rotate * Math.PI) / 180;
-        const rotatedOldCenter = rotatePointOld(oldPoint, rad);
-        const rotatedNewCenter = rotatePointOld(newPoint, rad);
-        deltaX = rotatedNewCenter.x - rotatedOldCenter.x;
-        deltaY = rotatedNewCenter.y - rotatedOldCenter.y;
-    }
+    const { x, y, width: rawWidth, height: rawHeight, rotate, scale } = transform;
+    const width = rawWidth * scale;
+    const height = rawHeight * scale;
+    // Get relative points based on origin for old and new dimensions
+    const oldPoint = getOriginRelativePoint(origin, width, height);
+    const newPoint = getOriginRelativePoint(origin, newWidth, newHeight);
+    // Calculate position delta
+    const delta = {
+        x: newPoint.x - oldPoint.x,
+        y: newPoint.y - oldPoint.y,
+    };
+    // Apply rotation if needed
+    const rotatedDelta = rotate !== 0 ? rotatePoint(degToRad(rotate), delta) : delta;
+    // Calculate new position accounting for size difference and delta
     return {
-        newX: x - deltaX - (newWidth - width * scale) / 2,
-        newY: y - deltaY - (newHeight - height * scale) / 2,
+        newX: x - rotatedDelta.x - (newWidth - width) / 2,
+        newY: y - rotatedDelta.y - (newHeight - height) / 2,
     };
 };
 export function calculateBoundingBox(transform) {
-    const { x, y, width, height, rotate, scale } = transform;
+    const { x, y, width: rawWidth, height: rawHeight, rotate, scale } = transform;
+    const width = rawWidth * scale;
+    const height = rawHeight * scale;
     if (rotate === 0) {
-        return { x, y, width: width * scale, height: height * scale };
+        return { x, y, width, height };
     }
-    const radians = (rotate * Math.PI) / 180;
-    const origins = ['top-left', 'top-right'];
-    const corners = origins.map((position) => rotatePointOld(getPoints(position, width * scale, height * scale), radians));
-    const maxX = Math.max(...corners.map((corner) => Math.abs(corner.x)));
-    const maxY = Math.max(...corners.map((corner) => Math.abs(corner.y)));
+    const rad = degToRad(rotate);
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const hw = width / 2;
+    const hh = height / 2;
+    const maxX = Math.abs(hw * cos) + Math.abs(hh * sin);
+    const maxY = Math.abs(hw * sin) + Math.abs(hh * cos);
     return {
-        x: x + (width * scale) / 2 - maxX,
-        y: y + (height * scale) / 2 - maxY,
+        x: x + width / 2 - maxX,
+        y: y + height / 2 - maxY,
         width: maxX * 2,
         height: maxY * 2,
     };
@@ -78,20 +76,20 @@ export function calculateBoundingBox(transform) {
 export function degToRad(deg) {
     return (deg * Math.PI) / 180;
 }
-export function rotatePoint(p, origin, angleRad) {
-    const dx = p.x - origin.x;
-    const dy = p.y - origin.y;
-    const cos = Math.cos(angleRad);
-    const sin = Math.sin(angleRad);
+export function rotatePoint(rad, p, center = { x: 0, y: 0 }) {
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const dx = p.x - center.x;
+    const dy = p.y - center.y;
     return {
-        x: origin.x + dx * cos - dy * sin,
-        y: origin.y + dx * sin + dy * cos,
+        x: center.x + dx * cos - dy * sin,
+        y: center.y + dx * sin + dy * cos,
     };
 }
 export function getRotatedCorners(rect) {
+    const rad = degToRad(rect.rotate);
     const cx = rect.x + (rect.width * rect.scale) / 2;
     const cy = rect.y + (rect.height * rect.scale) / 2;
-    const angle = degToRad(rect.rotate);
     const hw = (rect.width * rect.scale) / 2;
     const hh = (rect.height * rect.scale) / 2;
     const corners = [
@@ -100,7 +98,7 @@ export function getRotatedCorners(rect) {
         { x: cx + hw, y: cy + hh },
         { x: cx - hw, y: cy + hh },
     ];
-    return corners.map((p) => rotatePoint(p, { x: cx, y: cy }, angle));
+    return corners.map((p) => rotatePoint(rad, p, { x: cx, y: cy }));
 }
 export function isRotatedVertically(rotate) {
     const rotationNormalized = ((rotate % 360) + 360) % 360;
@@ -166,9 +164,9 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
     if (!rotate)
         return calculateGroupBoundingBox(transforms);
     const allCorners = transforms.flatMap((t) => getRotatedCorners(t));
-    const theta = degToRad(-rotate); // inverse to align bbox with axes
+    const rad = degToRad(rotate);
     // Rotate all points to align with desired angle
-    const rotatedPoints = allCorners.map((p) => rotatePoint(p, { x: 0, y: 0 }, theta));
+    const rotatedPoints = allCorners.map((p) => rotatePoint(-rad, p));
     // Compute AABB of rotated points
     const xs = rotatedPoints.map((p) => p.x);
     const ys = rotatedPoints.map((p) => p.y);
@@ -183,7 +181,7 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
         y: (minY + maxY) / 2,
     };
     // Rotate center back to original space
-    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(rotate));
+    const center = rotatePoint(rad, centerRotated);
     return {
         x: center.x - width / 2,
         y: center.y - height / 2,
@@ -194,7 +192,7 @@ export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
     };
 }
 export function calculateRelativeRects(bbox, absoluteRects) {
-    const theta = degToRad(-bbox.rotate); // inverse to align bbox with axes
+    const rad = degToRad(bbox.rotate); // inverse to align bbox with axes
     const bboxCenter = {
         x: bbox.x + (bbox.width * bbox.scale) / 2,
         y: bbox.y + (bbox.height * bbox.scale) / 2,
@@ -206,17 +204,18 @@ export function calculateRelativeRects(bbox, absoluteRects) {
             y: rect.y + (rect.height * rect.scale) / 2,
         };
         // Rotate center ralatively to the bbox center
-        const relativeCenter = rotatePoint(center, bboxCenter, theta);
+        const relativeCenter = rotatePoint(-rad, center, bboxCenter);
         return {
             ...rect,
-            x: (relativeCenter.x - bbox.x) / bbox.scale - (rect.width * rect.scale) / 2,
-            y: (relativeCenter.y - bbox.y) / bbox.scale - (rect.height * rect.scale) / 2,
+            x: ((relativeCenter.x - bbox.x) / bbox.scale - (rect.width * rect.scale) / 2) / bbox.scale,
+            y: ((relativeCenter.y - bbox.y) / bbox.scale - (rect.height * rect.scale) / 2) / bbox.scale,
             rotate: rect.rotate - bbox.rotate,
+            scale: rect.scale / bbox.scale,
         };
     });
 }
 export function calculateAbsoluteRects(bbox, rects) {
-    const theta = degToRad(bbox.rotate);
+    const rad = degToRad(bbox.rotate);
     const bboxCenter = {
         x: bbox.x + (bbox.width * bbox.scale) / 2,
         y: bbox.y + (bbox.height * bbox.scale) / 2,
@@ -226,7 +225,7 @@ export function calculateAbsoluteRects(bbox, rects) {
             x: bbox.x + (rect.x + (rect.width * rect.scale) / 2) * bbox.scale,
             y: bbox.y + (rect.y + (rect.height * rect.scale) / 2) * bbox.scale,
         };
-        const center = rotatePoint(relativeCenter, bboxCenter, theta);
+        const center = rotatePoint(rad, relativeCenter, bboxCenter);
         return {
             ...rect,
             x: center.x - (rect.width * rect.scale * bbox.scale) / 2,
@@ -293,12 +292,14 @@ const minScaleToContain = (rotatedRect, rect) => {
 };
 export function calculateImageCover(image, bbox) {
     const scale = minScaleToContain(image, bbox);
+    const width = bbox.width / scale;
+    const height = bbox.height / scale;
     return {
-        width: bbox.width / scale,
-        height: bbox.height / scale,
+        width,
+        height,
         scale,
-        offsetX: (image.width - bbox.width / scale) / 2,
-        offsetY: (image.height - bbox.height / scale) / 2,
+        offsetX: (width - image.width) / 2,
+        offsetY: (height - image.height) / 2,
     };
 }
 export const defaultColor = '#000000';
@@ -322,3 +323,55 @@ export function buildBackgroundCircleStyle(colors) {
         .join(', ');
     return `background-image: conic-gradient(${gradientColors})`;
 }
+export function getImageLayerBboxRelativeToImageCenter(layer) {
+    const { width, height, image, offsetX, offsetY, imageRotate } = layer;
+    // current image center in layer coords (rotation doesn't change it)
+    const imageCenter = { x: image.width / 2 + offsetX, y: image.height / 2 + offsetY };
+    const imageRad = degToRad(imageRotate);
+    // For each corner, compute v = corner - C, rotate by -theta, accumulate max abs X/Y
+    const corners = [
+        { x: 0, y: 0 },
+        { x: width, y: 0 },
+        { x: width, y: height },
+        { x: 0, y: height },
+    ].map((p) => {
+        const v = { x: p.x - imageCenter.x, y: p.y - imageCenter.y }; // layer->center
+        return rotatePoint(-imageRad, v); // bring into image unrotated axes
+    });
+    // Compute AABB of rotated points
+    const xs = corners.map((p) => p.x);
+    const ys = corners.map((p) => p.y);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    return { minX, minY, maxX, maxY };
+}
+export function calculateImageLayerPropsForImageRotate(layer, imageRotate) {
+    const { width, height, scale, image, offsetX, offsetY } = layer;
+    // image half-width and half-height
+    const ihw = image.width / 2;
+    const ihh = image.height / 2;
+    // current image center in layer coords (rotation doesn't change it)
+    const imageCenter = { x: ihw + offsetX, y: ihh + offsetY };
+    const bbox = getImageLayerBboxRelativeToImageCenter({ ...layer, imageRotate });
+    const maxAbsX = Math.max(Math.abs(bbox.minX), Math.abs(bbox.maxX));
+    const maxAbsY = Math.max(Math.abs(bbox.minY), Math.abs(bbox.maxY));
+    // Required scale so half-extents of (Iw*s, Ih*s) cover maxAbsX/Y:
+    // Iw*s/2 >= maxAbsX  => s >= 2*maxAbsX / Iw
+    // Ih*s/2 >= maxAbsY  => s >= 2*maxAbsY / Ih
+    const sReqX = (2 * maxAbsX) / image.width;
+    const sReqY = (2 * maxAbsY) / image.height;
+    const minScaleFactor = Math.max(sReqX, sReqY);
+    if (minScaleFactor < 1) {
+        return { imageRotate };
+    }
+    return {
+        imageRotate,
+        scale: scale * minScaleFactor,
+        width: width / minScaleFactor,
+        height: height / minScaleFactor,
+        offsetX: imageCenter.x / minScaleFactor - ihw,
+        offsetY: imageCenter.y / minScaleFactor - ihh,
+    };
+}

package/dist/components/editor/page-editor.svelte

@@ -25,6 +25,8 @@
 
 	const editor = getEditorContext();
 
+	let pageRef: HTMLDivElement | null = $state(null);
+
 	let activeLayerGuides: ActiveLayerGuide[] = $state([]);
 
 	let hoveredLayerId: string | null = $state(null);
@@ -38,7 +40,7 @@
 		<div class="flex min-h-full flex-1">
 			<div class="box-border flex w-full shrink-0 items-center justify-center p-0">
 				<div bind:this={wrapperRef} class="translate-x-0 translate-y-0 p-4 transition-transform">
-					<div class="relative flex flex-col items-center" data-page-container>
+					<div bind:this={pageRef} class="relative flex flex-col items-center">
 						<div
 							class="m-0 overflow-hidden shadow-xl"
 							style:width="{scaledWidth}px"
@@ -89,7 +91,9 @@
 								{/if}
 							{/if}
 
-							<ActiveLayers />
+							{#if viewportRef && pageRef}
+								<ActiveLayers {viewportRef} {wrapperRef} {pageRef} />
+							{/if}
 
 							<SnappingGuides zoom={editor.zoom} guides={activeLayerGuides} />
 						</div>

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/image-crop-sidebar.svelte

@@ -0,0 +1,112 @@
+<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 {
+		calculateImageLayerPropsForImageRotate,
+		calculateRelativeRects,
+	} from '../layers/utils.js';
+	import type { ImageLayer } from '../types.js';
+
+	interface Props {
+		layer: ImageLayer;
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = $derived(getEditorContext());
+
+	let value = $derived(Math.round(layer.imageRotate * 10) / 10);
+	let originalLayer = $derived(
+		editor.selectedLayersNotLocked.find((l) => l.id === layer.id),
+	) as ImageLayer;
+
+	const min = -180;
+	const max = 180;
+	const step = 0.1;
+
+	let layerCache: ImageLayer | null = $state.snapshot(null);
+
+	const setImageRotate = (value: string | number) => {
+		value = Number(value);
+		if (!layerCache) {
+			layerCache = $state.snapshot(layer);
+		}
+		const props = calculateImageLayerPropsForImageRotate(layerCache, value);
+		Object.assign(layer, props);
+	};
+
+	const applyChanges = () => {
+		if (!originalLayer) return;
+		const relativeLayer = editor.activeGroupAndChild
+			? (calculateRelativeRects(editor.activeGroupAndChild.groupLayer, [layer])[0] as ImageLayer)
+			: layer;
+		// Define keys to check for changes in image layer properties
+		const imageLayerKeys: (keyof ImageLayer)[] = [
+			'imageRotate', // Rotation angle of the image
+			'scale', // Scale/zoom level
+			'width', // Width dimension
+			'height', // Height dimension
+			'offsetX', // X offset position
+			'offsetY', // Y offset position
+		];
+
+		// Filter keys that have different values between original and relative layers
+		const changedKeys = imageLayerKeys.filter((key) => originalLayer[key] !== relativeLayer[key]);
+		if (changedKeys.length > 0) {
+			editor.historyPush({
+				type: 'layerUpdate',
+				pageId: editor.activePage.id,
+				layer: { id: layer.id, type: layer.type },
+				undo: Object.fromEntries(changedKeys.map((key) => [key, originalLayer[key]])),
+				redo: Object.fromEntries(changedKeys.map((key) => [key, relativeLayer[key]])),
+			});
+		}
+		editor.imageCropLayer = null;
+	};
+
+	$effect(() => {
+		if (!originalLayer) {
+			editor.imageCropLayer = null;
+		}
+	});
+</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="--"
+				{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>
+</div>

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

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

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

@@ -19,8 +19,6 @@
 
 	const editor = $derived(getEditorContext());
 
-	$inspect(editor.sortedPages);
-
 	const flipDurationMs = 300;
 	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
 

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

@@ -10,6 +10,7 @@
 	import PositionSidebar from './position-sidebar.svelte';
 	import { ColorSidebar } from './color-sidebar/index.js';
 	import { FontSidebar } from './font-sidebar/index.js';
+	import ImageCropSidebar from './image-crop-sidebar.svelte';
 
 	interface Props {
 		editor: Editor;
@@ -62,13 +63,15 @@
 		{/each}
 	</div>
 
-	{#if editor.activeSidebarPopup || editor.activeSidebarTab}
-		<div class="bg-background h-full w-80 shrink-0 overflow-y-auto border-r border-gray-200 p-2">
-			{#if editor.activeSidebarPopup === 'position'}
+	{#if editor.activeSidebarPopup || editor.activeSidebarTab || editor.imageCropLayer}
+		<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'}
 				<PositionSidebar />
 			{:else if editor.activeSidebarPopup === 'font'}
 				<FontSidebar />
-			{:else if editor.activeSidebarPopup}
+			{:else if editor.activeSidebarPopup?.indexOf('Color')}
 				<ColorSidebar />
 			{:else if editor.activeSidebarTab === 'text'}
 				<SidebarTextTab />

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',
 				)}