Merge branch 'mobile-editing' into card-command-bar

src/lib/cards/BaseCard/BaseCard.svelte

···
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getColor } from '..';
+	import { getIsCoarse } from '$lib/website/context';
+
+	function tryGetIsCoarse(): (() => boolean) | undefined {
+		try {
+			return getIsCoarse();
+		} catch {
+			return undefined;
+		}
+	}
+	const isCoarse = tryGetIsCoarse();
 
 	const colors = {
 		base: 'bg-base-200/50 dark:bg-base-950/50',
···
 	id={item.id}
 	data-flip-id={item.id}
 	bind:this={ref}
-	draggable={isEditing && !locked}
+	draggable={isEditing && !locked && !isCoarse?.()}
 	class={[
 		'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
 		color ? (colors[color] ?? colors.accent) : colors.base,

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	import { ColorSelect } from '@foxui/colors';
 	import { AllCardDefinitions, CardDefinitionsByType, getColor } from '..';
 	import { COLUMNS } from '$lib';
-	import { getCanEdit, getIsMobile } from '$lib/website/context';
+	import {
+		getCanEdit,
+		getIsCoarse,
+		getIsMobile,
+		getSelectedCardId,
+		getSelectCard
+	} from '$lib/website/context';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import { fixAllCollisions, fixCollisions } from '$lib/helper';
 
···
 
 	let canEdit = getCanEdit();
 	let isMobile = getIsMobile();
+	let isCoarse = getIsCoarse();
+
+	let selectedCardId = getSelectedCardId();
+	let selectCard = getSelectCard();
+	let isSelected = $derived(selectedCardId?.() === item.id);
+	let isDimmed = $derived(isCoarse?.() && selectedCardId?.() != null && !isSelected);
 
 	let colorPopoverOpen = $state(false);
 
···
 	{item}
 	isEditing={true}
 	bind:ref
-	showOutline={isResizing}
+	showOutline={isResizing || (isCoarse?.() && isSelected)}
 	locked={item.cardData?.locked}
-	class="scale-100 opacity-100 starting:scale-0 starting:opacity-0"
+	class={[
+		'scale-100 starting:scale-0 starting:opacity-0',
+		isCoarse?.() && isSelected ? 'ring-accent-500 z-10 ring-2 ring-offset-2' : '',
+		isDimmed ? 'opacity-70' : 'opacity-100'
+	]}
 	{...rest}
 >
 	{#if !item.cardData?.locked}
-		<div class="absolute inset-0 cursor-grab"></div>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			role="button"
+			tabindex="-1"
+			class={['absolute inset-0', isCoarse?.() ? 'cursor-pointer' : 'cursor-grab']}
+			onclick={(e) => {
+				if (isCoarse?.()) {
+					e.stopPropagation();
+					selectCard?.(item.id);
+				}
+			}}
+		></div>
 	{/if}
 	{@render children?.()}
 
···
 		<div
 			class={cn(
 				'bg-base-200/50 dark:bg-base-900/50 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
-				!item.cardData.label && 'hidden group-hover/card:block'
+				!item.cardData.label && 'hidden lg:group-hover/card:block'
 			)}
 		>
 			<PlainTextEditor
···
 			{#if changeOptions.length > 1}
 				<div
 					class={[
-						'absolute -top-3 -right-3 hidden group-focus-within:inline-flex group-hover/card:inline-flex',
+						'absolute -top-3 -right-3 hidden lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
 						changePopoverOpen ? 'inline-flex' : ''
 					]}
 				>
···
 				onclick={() => {
 					ondelete();
 				}}
-				class="absolute -top-3 -left-3 hidden group-focus-within:inline-flex group-hover/card:inline-flex"
+				class="absolute -top-3 -left-3 hidden lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
···
 
 			<div
 				class={[
-					'absolute -bottom-7 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover/card:inline-flex',
+					'absolute -bottom-7 w-full items-center justify-center text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
 					colorPopoverOpen || settingsPopoverOpen ? 'inline-flex' : 'hidden'
 				]}
 			>
···
 				<!-- Resize handle at bottom right corner -->
 				<div
 					onpointerdown={handleResizeStart}
-					class="bg-base-300/70 dark:bg-base-900/70 pointer-events-auto absolute right-0.5 bottom-0.5 hidden cursor-se-resize rounded-md rounded-br-3xl p-1 group-hover/card:block"
+					class="bg-base-300/70 dark:bg-base-900/70 pointer-events-auto absolute right-0.5 bottom-0.5 hidden cursor-se-resize rounded-md rounded-br-3xl p-1 lg:group-hover/card:block"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

src/lib/website/EditBar.svelte

···
 <script lang="ts">
 	import { dev } from '$app/environment';
 	import { user } from '$lib/atproto';
-	import type { WebsiteData } from '$lib/types';
+	import { COLUMNS } from '$lib';
+	import type { Item, WebsiteData } from '$lib/types';
+	import { CardDefinitionsByType } from '$lib/cards';
 	import { Button, Input, Navbar, Popover, Toggle, toast } from '@foxui/core';
+	import { ColorSelect } from '@foxui/colors';
 
 	let {
 		data,
···
 		handleVideoInputChange,
 
 		showCardCommand
+		selectedCard = null,
+		isMobile = false,
+		isCoarse = false,
+		ondeselect,
+		ondelete,
+		onsetsize
 	}: {
 		data: WebsiteData;
 		linkValue: string;
···
 		handleVideoInputChange: (evt: Event) => void;
 
 		showCardCommand: () => void;
+		selectedCard?: Item | null;
+		isMobile?: boolean;
+		isCoarse?: boolean;
+		ondeselect?: () => void;
+		ondelete?: () => void;
+		onsetsize?: (w: number, h: number) => void;
 	} = $props();
 
 	let linkPopoverOpen = $state(false);
···
 		await navigator.clipboard.writeText(url);
 		toast.success('Link copied to clipboard!');
 	}
+
+	let colorsChoices = [
+		{ class: 'text-base-500', label: 'base' },
+		{ class: 'text-accent-500', label: 'accent' },
+		{ class: 'text-base-300 dark:text-base-700', label: 'transparent' },
+		{ class: 'text-red-500', label: 'red' },
+		{ class: 'text-orange-500', label: 'orange' },
+		{ class: 'text-amber-500', label: 'amber' },
+		{ class: 'text-yellow-500', label: 'yellow' },
+		{ class: 'text-lime-500', label: 'lime' },
+		{ class: 'text-green-500', label: 'green' },
+		{ class: 'text-emerald-500', label: 'emerald' },
+		{ class: 'text-teal-500', label: 'teal' },
+		{ class: 'text-cyan-500', label: 'cyan' },
+		{ class: 'text-sky-500', label: 'sky' },
+		{ class: 'text-blue-500', label: 'blue' },
+		{ class: 'text-indigo-500', label: 'indigo' },
+		{ class: 'text-violet-500', label: 'violet' },
+		{ class: 'text-purple-500', label: 'purple' },
+		{ class: 'text-fuchsia-500', label: 'fuchsia' },
+		{ class: 'text-pink-500', label: 'pink' },
+		{ class: 'text-rose-500', label: 'rose' }
+	];
+
+	let selectedColor = $derived(
+		selectedCard
+			? colorsChoices.find((c) => (selectedCard!.color ?? 'base') === c.label)
+			: undefined
+	);
+
+	let cardDef = $derived(
+		selectedCard ? (CardDefinitionsByType[selectedCard.cardType] ?? null) : null
+	);
+
+	let colorPopoverOpen = $state(false);
+	let sizePopoverOpen = $state(false);
+	let settingsPopoverOpen = $state(false);
+
+	const minW = $derived(cardDef?.minW ?? 2);
+	const minH = $derived(cardDef?.minH ?? 2);
+	const maxW = $derived(cardDef?.maxW ?? COLUMNS);
+	const maxH = $derived(cardDef?.maxH ?? (isMobile ? 12 : 6));
+
+	function canSetSize(w: number, h: number) {
+		if (!cardDef) return false;
+		if (isMobile) {
+			return w >= minW && w * 2 <= maxW && h >= minH && h * 2 <= maxH;
+		}
+		return w >= minW && w <= maxW && h >= minH && h <= maxH;
+	}
+
+	const showMobileEditControls = $derived(isCoarse && selectedCard);
 </script>
 
 <input
···
 
 {#if dev || (user.isLoggedIn && user.profile?.did === data.did)}
 	<Navbar
-		class={[
-			'dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto lg:inline-flex',
-			!dev ? 'hidden' : ''
-		]}
+		class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto"
 	>
-		<div class="flex items-center gap-2">
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					newCard('section');
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
+		{#if showMobileEditControls}
+			<!-- Mobile edit controls: left = color, size, settings; right = delete, deselect -->
+			<div class="flex items-center gap-1">
+				{#if cardDef?.allowSetColor !== false}
+					<Popover bind:open={colorPopoverOpen}>
+						{#snippet child({ props })}
+							<button
+								{...props}
+								class={[
+									'cursor-pointer rounded-xl p-2',
+									!selectedCard?.color ||
+									selectedCard.color === 'base' ||
+									selectedCard.color === 'transparent'
+										? 'text-base-800 dark:text-base-200'
+										: 'text-accent-500'
+								]}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									class="size-5"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</button>
+						{/snippet}
+						<ColorSelect
+							selected={selectedColor}
+							colors={colorsChoices}
+							onselected={(color, previous) => {
+								if (typeof previous === 'string' || typeof color === 'string') {
+									return;
+								}
+								if (selectedCard) {
+									selectedCard.color = color.label;
+								}
+							}}
+							class="w-64"
+						/>
+					</Popover>
+				{/if}
+
+				<Popover bind:open={sizePopoverOpen}>
+					{#snippet child({ props })}
+						<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="size-5"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+								/>
+							</svg>
+						</button>
+					{/snippet}
+					<div class="flex items-center gap-1">
+						{#if canSetSize(2, 2)}
+							<button
+								onclick={() => onsetsize?.(4, 4)}
+								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+							>
+								<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
+								<span class="sr-only">set size to 1x1</span>
+							</button>
+						{/if}
+						{#if canSetSize(4, 2)}
+							<button
+								onclick={() => onsetsize?.(8, 4)}
+								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+							>
+								<div class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"></div>
+								<span class="sr-only">set size to 2x1</span>
+							</button>
+						{/if}
+						{#if canSetSize(2, 4)}
+							<button
+								onclick={() => onsetsize?.(4, 8)}
+								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+							>
+								<div class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"></div>
+								<span class="sr-only">set size to 1x2</span>
+							</button>
+						{/if}
+						{#if canSetSize(4, 4)}
+							<button
+								onclick={() => onsetsize?.(8, 8)}
+								class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+							>
+								<div class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"></div>
+								<span class="sr-only">set size to 2x2</span>
+							</button>
+						{/if}
+					</div>
+				</Popover>
+
+				{#if cardDef?.settingsComponent && selectedCard}
+					<Popover bind:open={settingsPopoverOpen} class="bg-base-50 dark:bg-base-900">
+						{#snippet child({ props })}
+							<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="2"
+									stroke="currentColor"
+									class="size-5"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+									/>
+								</svg>
+							</button>
+						{/snippet}
+						<cardDef.settingsComponent
+							bind:item={selectedCard}
+							onclose={() => {
+								settingsPopoverOpen = false;
+							}}
+						/>
+					</Popover>
+				{/if}
+			</div>
+			<div class="flex items-center gap-1">
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="text-rose-500 backdrop-blur-none"
+					onclick={() => ondelete?.()}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+						/>
+					</svg>
+				</Button>
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => ondeselect?.()}
 				>
-			</Button>
-
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					newCard('text');
-				}}
-			>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-					><path
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
 						stroke="currentColor"
+						class="size-5"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+					</svg>
+				</Button>
+			</div>
+		{:else}
+			<!-- Normal add-card controls -->
+			<div class="flex items-center gap-2">
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => {
+						newCard('section');
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
 						stroke-linecap="round"
 						stroke-linejoin="round"
+						><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
+					>
+				</Button>
+
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => {
+						newCard('text');
+					}}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+						><path
+							fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
+						/></svg
+					>
+				</Button>
+
+				<Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900">
+					{#snippet child({ props })}
+						<Button
+							size="iconLg"
+							variant="ghost"
+							class="backdrop-blur-none"
+							onclick={() => {
+								newCard('link');
+							}}
+							{...props}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="-2 -2 28 28"
+								stroke-width="2"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+								/>
+							</svg>
+						</Button>
+					{/snippet}
+					<Input
+						spellcheck={false}
+						type="url"
+						bind:value={linkValue}
+						onkeydown={(event) => {
+							if (event.code === 'Enter') {
+								addLink(linkValue);
+								event.preventDefault();
+							}
+						}}
+						placeholder="Enter link"
+					/>
+					<Button onclick={() => addLink(linkValue)} size="icon"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-6"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+						</svg>
+					</Button>
+				</Popover>
+
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => {
+						imageInputRef?.click();
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
 						stroke-width="2"
-						d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
-					/></svg
-				>
-			</Button>
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+						/>
+					</svg>
+				</Button>
 
-			<Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900">
-				{#snippet child({ props })}
+				{#if dev}
 					<Button
 						size="iconLg"
 						variant="ghost"
 						class="backdrop-blur-none"
 						onclick={() => {
-							newCard('link');
+							videoInputRef?.click();
 						}}
-						{...props}
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
-							viewBox="-2 -2 28 28"
-							stroke-width="2"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
 							stroke="currentColor"
 						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
-								d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+								d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
 							/>
 						</svg>
 					</Button>
-				{/snippet}
-				<Input
-					spellcheck={false}
-					type="url"
-					bind:value={linkValue}
-					onkeydown={(event) => {
-						if (event.code === 'Enter') {
-							addLink(linkValue);
-							event.preventDefault();
-						}
-					}}
-					placeholder="Enter link"
-				/>
-				<Button onclick={() => addLink(linkValue)} size="icon"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-						class="size-6"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-					</svg>
-				</Button>
-			</Popover>
+				{/if}
 
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					imageInputRef?.click();
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-					/>
-				</svg>
-			</Button>
-
-			{#if dev}
 				<Button
 					size="iconLg"
 					variant="ghost"
 					class="backdrop-blur-none"
-					onclick={() => {
-						videoInputRef?.click();
-					}}
+					popovertarget="mobile-menu"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
···
 						stroke-width="1.5"
 						stroke="currentColor"
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
-						/>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 					</svg>
 				</Button>
 			{/if}
···
 			</Button>
 		</div>
 		<div class="flex items-center gap-2">
+			</div>
+		{/if}
+		<div class={['flex items-center gap-2', showMobileEditControls ? 'hidden' : '']}>
 			<Toggle
 				class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent"
 				bind:pressed={showingMobileView}

src/lib/website/EditableWebsite.svelte

···
 	import { tick, type Component } from 'svelte';
 	import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
 	import { dev } from '$app/environment';
-	import { setIsMobile } from './context';
+	import { setIsCoarse, setIsMobile, setSelectedCardId, setSelectCard } from './context';
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
···
 
 	setIsMobile(() => isMobile);
 
+	const isCoarse = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+	setIsCoarse(() => isCoarse);
+
+	let selectedCardId: string | null = $state(null);
+	let selectedCard = $derived(
+		selectedCardId ? (items.find((i) => i.id === selectedCardId) ?? null) : null
+	);
+
+	setSelectedCardId(() => selectedCardId);
+	setSelectCard((id: string | null) => {
+		selectedCardId = id;
+	});
+
 	const getY = (item: Item) => (isMobile ? (item.mobileY ?? item.y) : item.y);
 	const getH = (item: Item) => (isMobile ? (item.mobileH ?? item.h) : item.h);
 
···
 	}
 
 	function newCard(type: string = 'link', cardData?: any) {
+		selectedCardId = null;
+
 		// close sidebar if open
 		const popover = document.getElementById('mobile-menu');
 		if (popover) {
···
 
 	let debugPoint = $state({ x: 0, y: 0 });
 
-	function getDragXY(
-		e: DragEvent & {
-			currentTarget: EventTarget & HTMLDivElement;
-		}
+	function getGridPosition(
+		clientX: number,
+		clientY: number
 	):
 		| { x: number; y: number; swapWithId: string | null; placement: 'above' | 'below' | null }
 		| undefined {
 		if (!container || !activeDragElement.item) return;
 
 		// x, y represent the top-left corner of the dragged card
-		const x = e.clientX + activeDragElement.mouseDeltaX;
-		const y = e.clientY + activeDragElement.mouseDeltaY;
+		const x = clientX + activeDragElement.mouseDeltaX;
+		const y = clientY + activeDragElement.mouseDeltaY;
 
 		const rect = container.getBoundingClientRect();
 		const currentMargin = isMobile ? mobileMargin : margin;
···
 		return { x: gridX, y: gridY, swapWithId, placement };
 	}
 
+	function getDragXY(
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLDivElement;
+		}
+	) {
+		return getGridPosition(e.clientX, e.clientY);
+	}
+
+	// Touch drag system (instant drag on selected card)
+	let touchDragActive = $state(false);
+
+	function touchStart(e: TouchEvent) {
+		if (!selectedCardId || !container) return;
+		const touch = e.touches[0];
+		if (!touch) return;
+
+		// Check if the touch is on the selected card element
+		const target = (e.target as HTMLElement)?.closest?.('.card');
+		if (!target || target.id !== selectedCardId) return;
+
+		const item = items.find((i) => i.id === selectedCardId);
+		if (!item || item.cardData?.locked) return;
+
+		// Start dragging immediately
+		touchDragActive = true;
+
+		const cardEl = container.querySelector(`#${CSS.escape(selectedCardId)}`) as HTMLDivElement;
+		if (!cardEl) return;
+
+		activeDragElement.element = cardEl;
+		activeDragElement.w = item.w;
+		activeDragElement.h = item.h;
+		activeDragElement.item = item;
+
+		// Store original positions of all items
+		activeDragElement.originalPositions = new Map();
+		for (const it of items) {
+			activeDragElement.originalPositions.set(it.id, {
+				x: it.x,
+				y: it.y,
+				mobileX: it.mobileX,
+				mobileY: it.mobileY
+			});
+		}
+
+		const rect = cardEl.getBoundingClientRect();
+		activeDragElement.mouseDeltaX = rect.left - touch.clientX;
+		activeDragElement.mouseDeltaY = rect.top - touch.clientY;
+	}
+
+	function touchMove(e: TouchEvent) {
+		if (!touchDragActive) return;
+
+		const touch = e.touches[0];
+		if (!touch) return;
+
+		e.preventDefault();
+
+		const result = getGridPosition(touch.clientX, touch.clientY);
+		if (!result || !activeDragElement.item) return;
+
+		const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id);
+
+		// Reset all items to original positions first
+		for (const it of items) {
+			const origPos = activeDragElement.originalPositions.get(it.id);
+			if (origPos && it !== activeDragElement.item) {
+				if (isMobile) {
+					it.mobileX = origPos.mobileX;
+					it.mobileY = origPos.mobileY;
+				} else {
+					it.x = origPos.x;
+					it.y = origPos.y;
+				}
+			}
+		}
+
+		// Update dragged item position
+		if (isMobile) {
+			activeDragElement.item.mobileX = result.x;
+			activeDragElement.item.mobileY = result.y;
+		} else {
+			activeDragElement.item.x = result.x;
+			activeDragElement.item.y = result.y;
+		}
+
+		// Handle horizontal swap
+		if (result.swapWithId && draggedOrigPos) {
+			const swapTarget = items.find((it) => it.id === result.swapWithId);
+			if (swapTarget) {
+				if (isMobile) {
+					swapTarget.mobileX = draggedOrigPos.mobileX;
+					swapTarget.mobileY = draggedOrigPos.mobileY;
+				} else {
+					swapTarget.x = draggedOrigPos.x;
+					swapTarget.y = draggedOrigPos.y;
+				}
+			}
+		}
+
+		fixCollisions(items, activeDragElement.item, isMobile);
+
+		// Auto-scroll near edges
+		const scrollZone = 100;
+		const scrollSpeed = 10;
+		const viewportHeight = window.innerHeight;
+
+		if (touch.clientY < scrollZone) {
+			const intensity = 1 - touch.clientY / scrollZone;
+			window.scrollBy(0, -scrollSpeed * intensity);
+		} else if (touch.clientY > viewportHeight - scrollZone) {
+			const intensity = 1 - (viewportHeight - touch.clientY) / scrollZone;
+			window.scrollBy(0, scrollSpeed * intensity);
+		}
+	}
+
+	function touchEnd() {
+		if (touchDragActive && activeDragElement.item) {
+			// Finalize position
+			fixCollisions(items, activeDragElement.item, isMobile);
+
+			activeDragElement.x = -1;
+			activeDragElement.y = -1;
+			activeDragElement.element = null;
+			activeDragElement.item = null;
+			activeDragElement.lastTargetId = null;
+			activeDragElement.lastPlacement = null;
+		}
+
+		touchDragActive = false;
+	}
+
+	// Only register non-passive touchmove when actively dragging
+	$effect(() => {
+		const el = container;
+		if (!touchDragActive || !el) return;
+
+		el.addEventListener('touchmove', touchMove, { passive: false });
+		return () => {
+			el.removeEventListener('touchmove', touchMove);
+		};
+	});
+
 	let linkValue = $state('');
 
 	function addLink(url: string) {
···
 			]}
 		>
 			<div class="pointer-events-none"></div>
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
 			<div
 				bind:this={container}
+				onclick={(e) => {
+					// Deselect when tapping empty grid space
+					if (e.target === e.currentTarget || !(e.target as HTMLElement)?.closest?.('.card')) {
+						selectedCardId = null;
+					}
+				}}
+				ontouchstart={touchStart}
+				ontouchend={touchEnd}
 				ondragover={(e) => {
 					e.preventDefault();
 
···
 		{handleVideoInputChange}
 		showCardCommand={() => {
 			showCardCommand = true;
+		{selectedCard}
+		{isMobile}
+		{isCoarse}
+		ondeselect={() => {
+			selectedCardId = null;
+		}}
+		ondelete={() => {
+			if (selectedCard) {
+				items = items.filter((it) => it.id !== selectedCardId);
+				compactItems(items, false);
+				compactItems(items, true);
+				selectedCardId = null;
+			}
+		}}
+		onsetsize={(w: number, h: number) => {
+			if (selectedCard) {
+				if (isMobile) {
+					selectedCard.mobileW = w;
+					selectedCard.mobileH = h;
+				} else {
+					selectedCard.w = w;
+					selectedCard.h = h;
+				}
+				fixCollisions(items, selectedCard, isMobile);
+			}
 		}}
 	/>
 

src/lib/website/context.ts

···
 export const [getCanEdit, setCanEdit] = createContext<() => boolean>();
 export const [getAdditionalUserData, setAdditionalUserData] =
 	createContext<Record<string, unknown>>();
+export const [getIsCoarse, setIsCoarse] = createContext<() => boolean>();
+export const [getSelectedCardId, setSelectedCardId] = createContext<() => string | null>();
+export const [getSelectCard, setSelectCard] = createContext<(id: string | null) => void>();