Merge remote-tracking branch 'origin/next' into card-command-bar-v2

docs/Beta.md

···
-# Todo for beta version
-
-- site.standard
-  - move description to markdownDescription and set description as text only
-
-- allow editing on mobile
-
-- get automatic layout for mobile if only edited on desktop (and vice versa)
-
-- add cards in middle of current position (both mobile and desktop version)
-
-- show nsfw warnings
-
-- card with big call to action button "create your blento"
-
-- ask to fill with some default cards on page creation
-
-- when adding images try to add them in a size that best fits aspect ratio
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- analytics?
-
-- refresh recently updated blentos (move to top of list, update profiles every 24 hours)
-
-- server side oauth?

package.json

···
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",
+		"tailwindcss-animate": "^1.0.7",
 		"three": "^0.176.0",
 		"turndown": "^7.2.2",
 		"wrangler": "^4.60.0"

pnpm-lock.yaml

···
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.18)
       three:
         specifier: ^0.176.0
         version: 0.176.0
···
     peerDependenciesMeta:
       tailwind-merge:
         optional: true
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==, tarball: https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
 
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
···
       tailwindcss: 4.1.18
     optionalDependencies:
       tailwind-merge: 3.4.0
+
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
 
   tailwindcss@4.1.18: {}
 

src/lib/cards/ATProtoCollectionsCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>`
+
 } as CardDefinition & { type: 'atprotocollections' };

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>
+	{#if isCoarse?.() ? !isSelected : !item.cardData?.locked}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			role="button"
+			tabindex="-1"
+			class={['absolute inset-0', isCoarse?.() ? 'z-20 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/cards/BigSocialCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" /></svg>`
+
 } as CardDefinition & { type: 'bigsocial' };
 
 import {

src/lib/cards/BlueskyMediaCard/index.ts

···
 
 	name: 'Video/Image from Bluesky',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0 1 18 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0 1 18 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 0 1 6 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" /></svg>`
+
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/BlueskyPostCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /></svg>`
+
 } as CardDefinition & { type: 'blueskyPost' };

src/lib/cards/ButtonCard/index.ts

···
 	groups: ['Utilities'],
 	name: 'Button',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" /></svg>`
+
 };

src/lib/cards/DrawCard/index.ts

···
 
 	groups: ['Visual'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>`
+
 } as CardDefinition & { type: 'draw' };

src/lib/cards/EmbedCard/index.ts

···
 	name: 'Embed',
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>`
+
 } as CardDefinition & { type: 'embed' };

src/lib/cards/EventCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>`
+
 } as CardDefinition & { type: 'event' };

src/lib/cards/FluidTextCard/index.ts

···
 	groups: ['Visual'],
 	name: 'Fluid Text',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg>`
+
 } as CardDefinition & { type: 'fluid-text' };

src/lib/cards/GIFCard/index.ts

···
 
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 8.25v7.5m-6-3.75h3v3.75m-3-7.5h3M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /></svg>`
+
 } as CardDefinition & { type: 'gif' };

src/lib/cards/GameCards/DinoGameCard/index.ts

···
 	groups: ['Games'],
 	name: 'Dino Game',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.491 48.491 0 0 1-4.163-.3c-1.228-.158-2.33.895-2.33 2.134v0c0 1.26 1.09 2.22 2.34 2.14a48.089 48.089 0 0 1 3.27-.108c.43 0 .78.348.78.78v0c0 .22-.09.422-.234.577a8.398 8.398 0 0 0-2.07 4.238c-.19 1.14.513 2.163 1.578 2.428a2.07 2.07 0 0 0 2.478-1.41c.203-.636.37-1.294.524-1.947.128-.537.612-.898 1.16-.84 1.378.15 2.782.18 4.17.076 1.156-.087 2.03-1.09 1.883-2.24a8.52 8.52 0 0 0-1.568-3.7A2.01 2.01 0 0 1 18 8.053v0c0-1.064.82-1.98 1.88-2.08A48.678 48.678 0 0 0 24 5.328v0" /></svg>`
+
 } as CardDefinition & { type: 'dino-game' };

src/lib/cards/GameCards/TetrisCard/index.ts

···
 
 	name: 'Tetris',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M14 4h-4v4H6v4h4v4h4v-4h4V8h-4V4Z" /></svg>`
+
 } as CardDefinition & { type: 'tetris' };

src/lib/cards/GitHubProfileCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>`
+
 } as CardDefinition & { type: 'githubProfile' };
 
 function getGitHubUsername(url: string | undefined): string | undefined {

src/lib/cards/GuestbookCard/index.ts

···
 	name: 'Guestbook',
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /></svg>`
+
 } as CardDefinition & { type: 'guestbook' };

src/lib/cards/LatestBlueskyPostCard/index.ts

···
 
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M6.335 3.836a47.2 47.2 0 0 1 5.354 4.94c.088.093.165.18.232.26a18 18 0 0 1 .232-.26 47.2 47.2 0 0 1 5.355-4.94C18.882 2.687 21.46 1.37 22.553 2.483c.986 1.003.616 4.264.305 5.857-.567 2.902-2.018 4.274-3.703 4.542 2.348.386 4.678 1.96 3.13 5.602-1.97 4.636-7.065 1.763-9.795-.418a3 3 0 0 1-.18-.15 3 3 0 0 1-.18.15c-2.73 2.18-7.825 5.054-9.795.418-1.548-3.643.782-5.216 3.13-5.602C3.98 12.631 2.529 11.26 1.962 8.357c-.311-1.593-.681-4.854.305-5.857C3.361 1.37 5.94 2.687 6.335 3.836Z" /></svg>`
+
 } as CardDefinition & { type: 'latestPost' };

src/lib/cards/LivestreamCard/index.ts

···
 	name: 'Latest Livestream (stream.place)',
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><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" /></svg>`
+
 } as CardDefinition & { type: 'latestLivestream' };
 
 export const LivestreamEmbedCardDefitition = {

src/lib/cards/PopfeedReviews/index.ts

···
 	groups: ['Media'],
 	name: 'Movie and TV Reviews',
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" /></svg>`
+
 } as CardDefinition & { type: 'recentPopfeedReviews' };

src/lib/cards/SpotifyCard/index.ts

···
 
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" /></svg>`
+
 } as CardDefinition & { type: typeof cardType };
 
 // Match Spotify album and playlist URLs

src/lib/cards/StandardSiteDocumentListCard/index.ts

···
 
 	groups: ['Content'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`
+
 } as CardDefinition & { type: 'site.standard.document list' };

src/lib/cards/StatusphereCard/index.ts

···
 	name: 'Emoji',
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>`
+
 } as CardDefinition & { type: 'statusphere' };
 
 export function emojiToNotoAnimatedWebp(emoji: string | undefined): string | undefined {

src/lib/cards/TealFMPlaysCard/index.ts

···
 
 	groups: ['Media'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
+
 } as CardDefinition & { type: 'recentTealFMPlays' };

src/lib/cards/TimerCard/index.ts

···
 			item.cardData.label = data.label;
 		}
 	}
+
 } as CardDefinition & { type: 'timer' };

src/lib/cards/VCardCard/index.ts

···
 	name: 'vCard Card',
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" /></svg>`
+
 } as CardDefinition & { type: 'vcard' };

src/lib/types.ts

···
 			// theme colors
 			accentColor?: string;
 			baseColor?: string;
+
+			// layout mirroring: 0/undefined=never edited, 1=desktop only, 2=mobile only, 3=both
+			editedOn?: number;
 		};
 	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;

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 { Button, Navbar, Toggle, toast } from '@foxui/core';
+	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,
···
 
 		save,
 
-		showCardCommand
+		handleImageInputChange,
+		handleVideoInputChange,
+
+		newCard,
+		addLink,
+		linkValue = $bindable(''),
+
+		showCardCommand,
+		selectedCard = null,
+		isMobile = false,
+		isCoarse = false,
+		ondeselect,
+		ondelete,
+		onsetsize
 	}: {
 		data: WebsiteData;
 
···
 
 		save: () => Promise<void>;
 
+		handleImageInputChange: (evt: Event) => void;
+		handleVideoInputChange: (evt: Event) => void;
+
+		newCard: (type?: string, cardData?: any) => void;
+		addLink: (url: string) => void;
+		linkValue: string;
+
 		showCardCommand: () => void;
+		selectedCard?: Item | null;
+		isMobile?: boolean;
+		isCoarse?: boolean;
+		ondeselect?: () => void;
+		ondelete?: () => void;
+		onsetsize?: (w: number, h: number) => void;
 	} = $props();
 
+	let linkPopoverOpen = $state(false);
+	let imageInputRef: HTMLInputElement | undefined = $state();
+	let videoInputRef: HTMLInputElement | undefined = $state();
+
 	function getShareUrl() {
 		const base = typeof window !== 'undefined' ? window.location.origin : '';
 		const pagePath =
···
 		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
+	type="file"
+	accept="image/*"
+	onchange={handleImageInputChange}
+	class="hidden"
+	id="image-input"
+	multiple
+	bind:this={imageInputRef}
+/>
+
+<input
+	type="file"
+	accept="video/*"
+	onchange={handleVideoInputChange}
+	class="hidden"
+	id="video-input"
+	multiple
+	bind:this={videoInputRef}
+/>
+
 {#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={showCardCommand}>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
+		{#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?.()}
 				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-				</svg>
-			</Button>
-		</div>
-		<div class="flex items-center gap-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="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?.()}
+				>
+					<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"
+						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>
+
+				<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+					</svg>
+				</Button>
+			</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';
···
 	import { launchConfetti } from '@foxui/visual';
 	import Controls from './Controls.svelte';
 	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
+	import { shouldMirror, mirrorLayout } from './layout-mirror';
 
 	let {
 		data
···
 
 	// Check if floating login button will be visible (to hide MadeWithBlento)
 	const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
-
-	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
-	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
 
 	function updateTheme(newAccent: string, newBase: string) {
 		data.publication.preferences ??= {};
···
 
 	setIsMobile(() => isMobile);
 
+	// svelte-ignore state_referenced_locally
+	let editedOn = $state(data.publication.preferences?.editedOn ?? 0);
+
+	function onLayoutChanged() {
+		// Set the bit for the current layout: desktop=1, mobile=2
+		editedOn = editedOn | (isMobile ? 2 : 1);
+		if (shouldMirror(editedOn)) {
+			mirrorLayout(items, 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) {
···
 		compactItems(items, false);
 		compactItems(items, true);
 
+		onLayoutChanged();
+
 		newItem = {};
 
 		await tick();
···
 				await checkAndUploadImage(data.publication, 'icon');
 			}
 
+			// Persist layout editing state
+			data.publication.preferences ??= {};
+			data.publication.preferences.editedOn = editedOn;
+
 			await savePage(data, items, publication);
 
 			publication = JSON.stringify(data.publication);
···
 
 	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);
+			onLayoutChanged();
+
+			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, specificCardDef?: CardDefinition) {
 		let link = validateLink(url);
 		if (!link) {
···
 			compactItems(items, false);
 			compactItems(items, true);
 		}
+
+		onLayoutChanged();
 
 		await tick();
 
···
 		fixCollisions(items, item, true, true);
 		compactItems(items, false);
 		compactItems(items, true);
+
+		onLayoutChanged();
 
 		await tick();
 
···
 		target.value = '';
 	}
 
-	// $inspect(items);
-
-	let showCardCommand = $state(true);
+	let showCardCommand = $state(false);
 </script>
 
 <svelte:body
···
 			]}
 		>
 			<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 -->
+			<!-- svelte-ignore 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();
 
···
 				}}
 				ondragend={async (e) => {
 					e.preventDefault();
-					const cell = getDragXY(e);
-					if (!cell) return;
-
-					if (activeDragElement.item) {
-						if (isMobile) {
-							activeDragElement.item.mobileX = cell.x;
-							activeDragElement.item.mobileY = cell.y;
-						} else {
-							activeDragElement.item.x = cell.x;
-							activeDragElement.item.y = cell.y;
-						}
-
-						// Fix collisions and compact items after drag ends
-						fixCollisions(items, activeDragElement.item, isMobile);
-					}
+					// safari fix
 					activeDragElement.x = -1;
 					activeDragElement.y = -1;
 					activeDragElement.element = null;
···
 							items = items.filter((it) => it !== item);
 							compactItems(items, false);
 							compactItems(items, true);
+							onLayoutChanged();
 						}}
 						onsetsize={(newW: number, newH: number) => {
 							if (isMobile) {
···
 							}
 
 							fixCollisions(items, item, isMobile);
+							onLayoutChanged();
 						}}
 						ondragstart={(e: DragEvent) => {
 							const target = e.currentTarget as HTMLDivElement;
···
 							activeDragElement.w = item.w;
 							activeDragElement.h = item.h;
 							activeDragElement.item = item;
+							// fix for div shadow during drag and drop
+							const transparent = document.createElement('div');
+							transparent.style.position = 'fixed';
+							transparent.style.top = '-1000px';
+							transparent.style.width = '1px';
+							transparent.style.height = '1px';
+							document.body.appendChild(transparent);
+							e.dataTransfer?.setDragImage(transparent, 0, 0);
+							requestAnimationFrame(() => transparent.remove());
 
 							// Store original positions of all items
 							activeDragElement.originalPositions = new Map();
···
 		</div>
 	</div>
 
-	<Sidebar mobileOnly mobileClasses="lg:block p-4 gap-4">
-		<div class="flex flex-col gap-2">
-			{#each sidebarItems as cardDef (cardDef.type)}
-				<Button onclick={() => newCard(cardDef.type)} variant="ghost" class="w-full justify-start"
-					>{cardDef.sidebarButtonText}</Button
-				>
-			{/each}
-		</div>
-	</Sidebar>
-
-	<input
-		type="file"
-		accept="image/*"
-		onchange={handleImageInputChange}
-		class="hidden"
-		id="image-input"
-		multiple
-	/>
-
-	<input
-		type="file"
-		accept="video/*"
-		onchange={handleVideoInputChange}
-		class="hidden"
-		id="video-input"
-		multiple
-	/>
-
 	<EditBar
 		{data}
+		bind:linkValue
 		bind:isSaving
 		bind:showingMobileView
 		{hasUnsavedChanges}
+		{newCard}
+		{addLink}
 		{save}
+		{handleImageInputChange}
+		{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);
+				onLayoutChanged();
+				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);
+				onLayoutChanged();
+			}
+		}}
 	/>
 
 	<Toaster />
 
 	<FloatingEditButton {data} />
+
+	{#if dev}
+		<div
+			class="bg-base-900/70 text-base-100 fixed top-2 right-2 z-50 rounded px-2 py-1 font-mono text-xs"
+		>
+			editedOn: {editedOn}
+		</div>
+	{/if}
 </Context>

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>();

src/lib/website/layout-mirror.ts

···
+import { COLUMNS } from '$lib';
+import { CardDefinitionsByType } from '$lib/cards';
+import { clamp, fixAllCollisions } from '$lib/helper';
+import type { Item } from '$lib/types';
+
+/**
+ * Returns true when mirroring should still happen (i.e. user hasn't edited both layouts).
+ * editedOn: 0/undefined = never, 1 = desktop only, 2 = mobile only, 3 = both
+ */
+export function shouldMirror(editedOn: number | undefined): boolean {
+	return (editedOn ?? 0) !== 3;
+}
+
+/** Snap a value to the nearest even integer (min 2). */
+function snapEven(v: number): number {
+	return Math.max(2, Math.round(v / 2) * 2);
+}
+
+/**
+ * Compute the other layout's size for a single item, preserving aspect ratio.
+ * Clamps to the card definition's minW/maxW/minH/maxH if defined.
+ * Mutates the item in-place.
+ */
+export function mirrorItemSize(item: Item, fromMobile: boolean): void {
+	const def = CardDefinitionsByType[item.cardType];
+	const minW = def?.minW ?? 2;
+	const maxW = def?.maxW ?? COLUMNS;
+	const minH = def?.minH ?? 2;
+	const maxH = def?.maxH ?? Infinity;
+
+	if (fromMobile) {
+		const srcW = item.mobileW;
+		const srcH = item.mobileH;
+		// Full-width cards stay full-width
+		item.w = srcW >= COLUMNS ? COLUMNS : clamp(snapEven(srcW / 2), minW, maxW);
+		item.h = clamp(snapEven((srcH * item.w) / srcW), minH, maxH);
+	} else {
+		const srcW = item.w;
+		const srcH = item.h;
+		// Full-width cards stay full-width
+		if (srcW >= COLUMNS) {
+			item.mobileW = clamp(COLUMNS, minW, Math.min(maxW, COLUMNS));
+		} else {
+			const scaleFactor = Math.min(2, COLUMNS / srcW);
+			item.mobileW = clamp(snapEven(srcW * scaleFactor), minW, Math.min(maxW, COLUMNS));
+		}
+		item.mobileH = clamp(snapEven((srcH * item.mobileW) / srcW), minH, maxH);
+	}
+}
+
+/**
+ * Mirror the full layout from one view to the other.
+ * Copies sizes proportionally and maps positions, then resolves collisions.
+ * Mutates items in-place.
+ */
+export function mirrorLayout(items: Item[], fromMobile: boolean): void {
+	for (const item of items) {
+		mirrorItemSize(item, fromMobile);
+
+		if (fromMobile) {
+			// Mobile → Desktop positions
+			item.x = clamp(Math.floor(item.mobileX / 2 / 2) * 2, 0, COLUMNS - item.w);
+			item.y = Math.max(0, Math.round(item.mobileY / 2));
+		} else {
+			// Desktop → Mobile positions
+			item.mobileX = clamp(Math.floor((item.x * 2) / 2) * 2, 0, COLUMNS - item.mobileW);
+			item.mobileY = Math.max(0, Math.round(item.y * 2));
+		}
+	}
+
+	// Resolve collisions on the target layout
+	fixAllCollisions(items, !fromMobile);
+}

wrangler.jsonc

···
 			"id": "d6ff203259de48538d332b0a5df258a7"
 		}
 	]
+
 	/**
 	 * Service Bindings (communicate between multiple Workers)
 	 * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings