commit

src/lib/helper.ts

···
 import { CardDefinitionsByType } from './cards';
 import { deleteRecord, getCDNImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
 import * as TID from '@atcute/tid';
-import { overlaps } from './layout';
-
 export function clamp(value: number, min: number, max: number): number {
 	return Math.min(Math.max(value, min), max);
 }
···
 	'bg-pink-500',
 	'bg-rose-500'
 ];
-
 
 export function sortItems(a: Item, b: Item) {
 	return a.y * COLUMNS + a.x - b.y * COLUMNS - b.x;
···
 		a.color === b.color &&
 		a.page === b.page
 	);
-}
-
-export function setPositionOfNewItem(
-	newItem: Item,
-	items: Item[],
-	viewportCenter?: { gridY: number; isMobile: boolean }
-) {
-	if (viewportCenter) {
-		const { gridY, isMobile } = viewportCenter;
-
-		if (isMobile) {
-			// Place at viewport center Y
-			newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2));
-			newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2;
-
-			// Try to find a free X at this Y
-			let found = false;
-			for (
-				newItem.mobileX = 0;
-				newItem.mobileX <= COLUMNS - newItem.mobileW;
-				newItem.mobileX += 2
-			) {
-				if (!items.some((item) => overlaps(newItem, item, true))) {
-					found = true;
-					break;
-				}
-			}
-			if (!found) {
-				newItem.mobileX = 0;
-			}
-
-			// Desktop: derive from mobile
-			newItem.y = Math.max(0, Math.round(newItem.mobileY / 2));
-			found = false;
-			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
-				if (!items.some((item) => overlaps(newItem, item, false))) {
-					found = true;
-					break;
-				}
-			}
-			if (!found) {
-				newItem.x = 0;
-			}
-		} else {
-			// Place at viewport center Y
-			newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2));
-
-			// Try to find a free X at this Y
-			let found = false;
-			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
-				if (!items.some((item) => overlaps(newItem, item, false))) {
-					found = true;
-					break;
-				}
-			}
-			if (!found) {
-				newItem.x = 0;
-			}
-
-			// Mobile: derive from desktop
-			newItem.mobileY = Math.max(0, Math.round(newItem.y * 2));
-			found = false;
-			for (
-				newItem.mobileX = 0;
-				newItem.mobileX <= COLUMNS - newItem.mobileW;
-				newItem.mobileX += 2
-			) {
-				if (!items.some((item) => overlaps(newItem, item, true))) {
-					found = true;
-					break;
-				}
-			}
-			if (!found) {
-				newItem.mobileX = 0;
-			}
-		}
-		return;
-	}
-
-	let foundPosition = false;
-	while (!foundPosition) {
-		for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {
-			const collision = items.find((item) => overlaps(newItem, item, false));
-			if (!collision) {
-				foundPosition = true;
-				break;
-			}
-		}
-		if (!foundPosition) newItem.y += 1;
-	}
-
-	let foundMobilePosition = false;
-	while (!foundMobilePosition) {
-		for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 1) {
-			const collision = items.find((item) => overlaps(newItem, item, true));
-
-			if (!collision) {
-				foundMobilePosition = true;
-				break;
-			}
-		}
-		if (!foundMobilePosition) newItem.mobileY! += 1;
-	}
-}
-
-/**
- * Find a valid position for a new item in a single mode (desktop or mobile).
- * This modifies the item's position properties in-place.
- */
-export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) {
-	if (mobile) {
-		let foundPosition = false;
-		newItem.mobileY = 0;
-		while (!foundPosition) {
-			for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) {
-				const collision = items.find((item) => overlaps(newItem, item, true));
-				if (!collision) {
-					foundPosition = true;
-					break;
-				}
-			}
-			if (!foundPosition) newItem.mobileY! += 1;
-		}
-	} else {
-		let foundPosition = false;
-		newItem.y = 0;
-		while (!foundPosition) {
-			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {
-				const collision = items.find((item) => overlaps(newItem, item, false));
-				if (!collision) {
-					foundPosition = true;
-					break;
-				}
-			}
-			if (!foundPosition) newItem.y += 1;
-		}
-	}
 }
 
 export async function refreshData(data: { updatedAt?: number; handle: string }) {

src/lib/layout.ts

···
 	const compacted = verticalCompactor.compact(layout, COLUMNS) as LayoutItem[];
 	applyLayout(items, compacted, mobile);
 }
+
+export function setPositionOfNewItem(
+	newItem: Item,
+	items: Item[],
+	viewportCenter?: { gridY: number; isMobile: boolean }
+) {
+	const desktopLayout = toLayout(items, false);
+	const mobileLayout = toLayout(items, true);
+
+	function hasCollision(mobile: boolean): boolean {
+		const layout = mobile ? mobileLayout : desktopLayout;
+		return getFirstCollision(layout, toLayoutItem(newItem, mobile)) !== undefined;
+	}
+
+	if (viewportCenter) {
+		const { gridY, isMobile } = viewportCenter;
+
+		if (isMobile) {
+			// Place at viewport center Y
+			newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2));
+			newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2;
+
+			// Try to find a free X at this Y
+			let found = false;
+			for (
+				newItem.mobileX = 0;
+				newItem.mobileX <= COLUMNS - newItem.mobileW;
+				newItem.mobileX += 2
+			) {
+				if (!hasCollision(true)) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.mobileX = 0;
+			}
+
+			// Desktop: derive from mobile
+			newItem.y = Math.max(0, Math.round(newItem.mobileY / 2));
+			found = false;
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
+				if (!hasCollision(false)) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.x = 0;
+			}
+		} else {
+			// Place at viewport center Y
+			newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2));
+
+			// Try to find a free X at this Y
+			let found = false;
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) {
+				if (!hasCollision(false)) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.x = 0;
+			}
+
+			// Mobile: derive from desktop
+			newItem.mobileY = Math.max(0, Math.round(newItem.y * 2));
+			found = false;
+			for (
+				newItem.mobileX = 0;
+				newItem.mobileX <= COLUMNS - newItem.mobileW;
+				newItem.mobileX += 2
+			) {
+				if (!hasCollision(true)) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				newItem.mobileX = 0;
+			}
+		}
+		return;
+	}
+
+	let foundPosition = false;
+	while (!foundPosition) {
+		for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {
+			if (!hasCollision(false)) {
+				foundPosition = true;
+				break;
+			}
+		}
+		if (!foundPosition) newItem.y += 1;
+	}
+
+	let foundMobilePosition = false;
+	while (!foundMobilePosition) {
+		for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 1) {
+			if (!hasCollision(true)) {
+				foundMobilePosition = true;
+				break;
+			}
+		}
+		if (!foundMobilePosition) newItem.mobileY! += 1;
+	}
+}
+
+/**
+ * Find a valid position for a new item in a single mode (desktop or mobile).
+ * This modifies the item's position properties in-place.
+ */
+export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) {
+	const layout = toLayout(items, mobile);
+
+	if (mobile) {
+		let foundPosition = false;
+		newItem.mobileY = 0;
+		while (!foundPosition) {
+			for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) {
+				if (!getFirstCollision(layout, toLayoutItem(newItem, true))) {
+					foundPosition = true;
+					break;
+				}
+			}
+			if (!foundPosition) newItem.mobileY! += 1;
+		}
+	} else {
+		let foundPosition = false;
+		newItem.y = 0;
+		while (!foundPosition) {
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {
+				if (!getFirstCollision(layout, toLayoutItem(newItem, false))) {
+					foundPosition = true;
+					break;
+				}
+			}
+			if (!foundPosition) newItem.y += 1;
+		}
+	}
+}

src/lib/website/EditableWebsite.svelte

···
 		isTyping,
 		savePage,
 		scrollToItem,
-		setPositionOfNewItem,
 		validateLink,
 		getImage
 	} from '../helper';
···
 	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
 	import { shouldMirror, mirrorLayout } from './layout-mirror';
 	import { SvelteMap } from 'svelte/reactivity';
-	import { fixCollisions, compactItems, fixAllCollisions } from '$lib/layout';
+	import { fixCollisions, compactItems, fixAllCollisions, setPositionOfNewItem } from '$lib/layout';
 
 	let {
 		data

src/lib/website/layout-mirror.ts

···
 import { COLUMNS } from '$lib';
 import { CardDefinitionsByType } from '$lib/cards';
-import { clamp, findValidPosition } from '$lib/helper';
-import { fixAllCollisions } from '$lib/layout';
+import { clamp } from '$lib/helper';
+import { fixAllCollisions, findValidPosition } from '$lib/layout';
 import type { Item } from '$lib/types';
 
 /**