cleanup

package.json

···
 		"@atproto/api": "^0.15.6",
 		"@atproto/common-web": "^0.4.2",
 		"@foxui/core": "^0.4.7",
+		"@foxui/social": "^0.4.7",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tiptap/core": "^2.12.0",
 		"@tiptap/extension-document": "^2.12.0",

pnpm-lock.yaml

···
       '@foxui/core':
         specifier: ^0.4.7
         version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
+      '@foxui/social':
+        specifier: ^0.4.7
+        version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
       '@tailwindcss/typography':
         specifier: ^0.5.16
         version: 0.5.16(tailwindcss@4.1.5)
···
       svelte: '>=5'
       tailwindcss: '>=3'
 
+  '@foxui/social@0.4.7':
+    resolution: {integrity: sha512-KeA0Ppl8NVzPwJsibAGFJMCPlLfOa7L3LQqS4YBfPd0hhribBQ9MHWTfN+JM0upYt/E97XPsL/EoIrWfY67obA==, tarball: https://registry.npmjs.org/@foxui/social/-/social-0.4.7.tgz}
+    peerDependencies:
+      svelte: '>=5'
+      tailwindcss: '>=3'
+
+  '@foxui/time@0.4.7':
+    resolution: {integrity: sha512-N4jN1QfUi7IY53MQETZp4MDj6DwwONoRi4yrN96SjpB71w7cvhli1jQCSG4QqCtyvISaizlg4T5gzORg7PYWrA==, tarball: https://registry.npmjs.org/@foxui/time/-/time-0.4.7.tgz}
+    peerDependencies:
+      svelte: '>=5'
+      tailwindcss: '>=3'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==, tarball: https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz}
     engines: {node: '>=18.18.0'}
···
     resolution: {integrity: sha512-1rYQTCLFFzOI5Nl0c8LUpJT8HxpwVRn9E4CkMsYfuN6ctmQqExjSTzzSk0Tz2apmXy7WU6/6fyaZVVA/thPN+w==, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.32.0.tgz}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@use-gesture/core@10.3.1':
+    resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==, tarball: https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz}
+
+  '@use-gesture/vanilla@10.3.1':
+    resolution: {integrity: sha512-lT4scGLu59ovA3zmtUonukAGcA0AdOOh+iwNDS05Bsu7Lq9aZToDHhI6D8Q2qvsVraovtsLLYwPrWdG/noMAKw==, tarball: https://registry.npmjs.org/@use-gesture/vanilla/-/vanilla-10.3.1.tgz}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==, tarball: https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz}
     engines: {node: '>= 0.6'}
···
     resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==, tarball: https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz}
     engines: {node: '>=18'}
 
+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==, tarball: https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz}
+
   cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==, tarball: https://registry.npmjs.org/cors/-/cors-2.8.5.tgz}
     engines: {node: '>= 0.10'}
···
     engines: {node: '>=4'}
     hasBin: true
 
+  custom-event-polyfill@1.0.7:
+    resolution: {integrity: sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==, tarball: https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==, tarball: https://registry.npmjs.org/debug/-/debug-4.4.0.tgz}
     engines: {node: '>=6.0'}
···
 
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==, tarball: https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz}
+
+  emoji-picker-element@1.28.1:
+    resolution: {integrity: sha512-8c64IPish2PWoV9oYCo2pvuPHwIv+uK9bO0dfpPyMupDAvaWL9ZvYhWNTAR+2sx7BhfRjciImqP6CIUgNX+DMg==, tarball: https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.28.1.tgz}
 
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==, tarball: https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz}
···
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==, tarball: https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz}
     engines: {node: '>= 0.4'}
 
+  hls.js@1.6.15:
+    resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==, tarball: https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==, tarball: https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz}
 
···
 
   is-arrayish@0.3.4:
     resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==, tarball: https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz}
+
+  is-emoji-supported@0.0.5:
+    resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==, tarball: https://registry.npmjs.org/is-emoji-supported/-/is-emoji-supported-0.0.5.tgz}
 
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==, tarball: https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz}
···
   linkifyjs@4.3.1:
     resolution: {integrity: sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==, tarball: https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.1.tgz}
 
+  loadjs@4.3.0:
+    resolution: {integrity: sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==, tarball: https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==, tarball: https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz}
 
···
     resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==, tarball: https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz}
     engines: {node: '>=16.20.0'}
 
+  plyr@3.8.4:
+    resolution: {integrity: sha512-DrzLbK9Wol3zeiuZCleD9aUOl0KAaBHR9H6WVVVYPZ4Ya+LYxUFTgSF1jooHcMQCv96Ws96wCaZzIoP3bES8pQ==, tarball: https://registry.npmjs.org/plyr/-/plyr-3.8.4.tgz}
+
   postcss-load-config@3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==, tarball: https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz}
     engines: {node: '>= 10'}
···
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==, tarball: https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz}
     engines: {node: '>= 0.6'}
 
+  rangetouch@2.0.1:
+    resolution: {integrity: sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==, tarball: https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz}
+
   raw-body@3.0.0:
     resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==, tarball: https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz}
     engines: {node: '>= 0.8'}
···
 
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==, tarball: https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz}
+
+  url-polyfill@1.1.14:
+    resolution: {integrity: sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==, tarball: https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.14.tgz}
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==, tarball: https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz}
···
       tailwind-variants: 1.0.0(tailwindcss@4.1.5)
       tailwindcss: 4.1.5
 
+  '@foxui/social@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)':
+    dependencies:
+      '@atproto/api': 0.15.6
+      '@foxui/core': 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
+      '@foxui/time': 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
+      '@use-gesture/vanilla': 10.3.1
+      bits-ui: 1.8.0(svelte@5.45.8)
+      emoji-picker-element: 1.28.1
+      hls.js: 1.6.15
+      is-emoji-supported: 0.0.5
+      plyr: 3.8.4
+      svelte: 5.45.8
+      tailwindcss: 4.1.5
+
+  '@foxui/time@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)':
+    dependencies:
+      '@foxui/core': 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)
+      '@number-flow/svelte': 0.3.9(svelte@5.45.8)
+      bits-ui: 1.8.0(svelte@5.45.8)
+      svelte: 5.45.8
+      tailwindcss: 4.1.5
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
···
       '@typescript-eslint/types': 8.32.0
       eslint-visitor-keys: 4.2.0
 
+  '@use-gesture/core@10.3.1': {}
+
+  '@use-gesture/vanilla@10.3.1':
+    dependencies:
+      '@use-gesture/core': 10.3.1
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.1
···
 
   cookie@1.1.1: {}
 
+  core-js@3.47.0: {}
+
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
···
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
+
+  custom-event-polyfill@1.0.7: {}
 
   debug@4.4.0:
     dependencies:
···
       gopd: 1.2.0
 
   ee-first@1.1.1: {}
+
+  emoji-picker-element@1.28.1: {}
 
   encodeurl@2.0.0: {}
 
···
     dependencies:
       function-bind: 1.1.2
 
+  hls.js@1.6.15: {}
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0
···
   ipaddr.js@1.9.1: {}
 
   is-arrayish@0.3.4: {}
+
+  is-emoji-supported@0.0.5: {}
 
   is-extglob@2.1.1: {}
 
···
       uc.micro: 2.1.0
 
   linkifyjs@4.3.1: {}
+
+  loadjs@4.3.0: {}
 
   locate-character@3.0.0: {}
 
···
 
   pkce-challenge@5.0.0: {}
 
+  plyr@3.8.4:
+    dependencies:
+      core-js: 3.47.0
+      custom-event-polyfill: 1.0.7
+      loadjs: 4.3.0
+      rangetouch: 2.0.1
+      url-polyfill: 1.1.14
+
   postcss-load-config@3.1.4(postcss@8.5.3):
     dependencies:
       lilconfig: 2.1.0
···
   queue-microtask@1.2.3: {}
 
   range-parser@1.2.1: {}
+
+  rangetouch@2.0.1: {}
 
   raw-body@3.0.0:
     dependencies:
···
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
+
+  url-polyfill@1.1.14: {}
 
   util-deprecate@1.0.2: {}
 

src/lib/EditableWebsite.svelte

···
 <script lang="ts">
-	import { setContext } from 'svelte';
-	import { BlueskyLogin, Button, Navbar, toast, Toaster } from './website/foxui';
 	import { client, login } from '$lib/oauth/auth.svelte.js';
 
-	import { settingsModal } from './website/components/head/EditHead.svelte';
-	import HeadItem from './website/components/head/HeadItem.svelte';
-	import {
-		setDataContext,
-		setDidContext,
-		setIsEditing,
-		setUpdateFunctionsContext,
-		type UpdateFunction
-	} from './website/context';
+	import { Navbar, Button, toast, Toaster } from '@foxui/core';
+	import { BlueskyLogin } from '@foxui/social';
 
 	import { margin } from '$lib';
-	import EditingImageCard from './cards/ImageCard/EditingImageCard.svelte';
-	import { cardsEqual, clamp, fixCollisions, overlaps, sortItems } from './helper';
+	import { cardsEqual, clamp, fixCollisions, overlaps, setPositionOfNewItem } from './helper';
 	import Profile from './Profile.svelte';
 	import type { Item } from './types';
 	import { deleteRecord, putRecord } from './oauth/atproto';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { TID } from '@atproto/common-web';
 	import EditingCard from './cards/Card/EditingCard.svelte';
+	import { CardDefinitionsByType } from './cards';
 
 	let {
 		handle,
···
 	// svelte-ignore state_referenced_locally
 	let items: Item[] = $state(originalItems);
 
-	let updateFunctions: UpdateFunction[] = $state([]);
-
-	setIsEditing(true);
-	// svelte-ignore state_referenced_locally
-	setDidContext(data.did);
-	setUpdateFunctionsContext(updateFunctions);
-	// svelte-ignore state_referenced_locally
-	setContext('current', data.current);
-	// svelte-ignore state_referenced_locally
-	setDataContext(data.data);
-
 	let container: HTMLDivElement | undefined = $state();
 
 	let activeDragElement: {
···
 			mobileX: 0,
 			mobileY: 0,
 			cardType: type,
-			cardData: {
-				href: 'https://bsky.app/profile/flo-bit.dev'
-			}
+			cardData: {}
 		};
+		const cardDef = CardDefinitionsByType[type];
+		cardDef?.createNew?.(newItem);
 
-		let foundPosition = false;
-		while (!foundPosition) {
-			for (newItem.x = 0; newItem.x <= 4 - newItem.w; newItem.x++) {
-				let collision = items.find((item) => overlaps(newItem, item));
-				console.log('checking position', newItem.x, newItem.y, 'collision:', collision);
-				if (!collision) {
-					foundPosition = true;
-					break;
-				}
-			}
-			if (!foundPosition) newItem.y += 1;
-		}
-
-		let foundMobilePosition = false;
-		while (!foundMobilePosition) {
-			for (newItem.mobileX = 0; newItem.mobileX <= 4 - newItem.mobileW; newItem.mobileX += 1) {
-				let collision = items.find((item) => overlaps(newItem, item, true));
-
-				if (!collision) {
-					foundMobilePosition = true;
-					break;
-				}
-			}
-			if (!foundMobilePosition) newItem.mobileY! += 2;
-		}
+		setPositionOfNewItem(newItem, items);
 
 		items = [...items, newItem];
 	}
+
+	let isSaving = $state(false);
 </script>
 
-<Profile {handle} {did} />
+<Profile {handle} {did} {data} />
 
-<div class="mx-auto max-w-2xl lg:grid-cols-4 lg:grid lg:max-w-none xl:grid-cols-3">
+<div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-4 xl:grid-cols-3">
 	<div></div>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
···
 			activeDragElement.element = null;
 			return true;
 		}}
-		class="relative col-span-3 xl:col-span-2 py-8 px-2 lg:px-8"
+		class="relative col-span-3 px-2 py-8 lg:px-8 xl:col-span-2"
 		style="container-type: inline-size;"
 	>
 		{#each items as item, i}
···
 	</div>
 </div>
 
-<HeadItem collection="com.example.head" />
-
-<Navbar
-	class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 lg:mx-auto"
->
-	<div class="flex items-center gap-2">
-		<Button
-			size="iconLg"
-			variant="ghost"
-			class="backdrop-blur-none"
-			onclick={() => (settingsModal.show = true)}
-		>
-			<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="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>
-		<Button
-			size="iconLg"
-			variant="ghost"
-			class="backdrop-blur-none"
-			onclick={() => {
-				newCard();
-			}}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
+{#if !client.isLoggedIn || client.profile?.did === 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 lg:mx-auto"
+	>
+		<div class="flex items-center gap-2">
+			<Button
+				size="iconLg"
+				variant="ghost"
+				class="backdrop-blur-none"
+				onclick={() => {
+					newCard('text');
+				}}
 			>
-				<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">
-		{#if client.isInitializing}{:else if client.isLoggedIn}
+				<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="1.5"
+						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>
 			<Button
-				onclick={async () => {
-					// check if did is same
-					if (client?.profile?.did !== data.did) {
-						toast('Not authorized', {
-							description: 'Please login with the correct account'
-						});
-						return;
-					}
+				size="iconLg"
+				variant="ghost"
+				class="backdrop-blur-none"
+				onclick={() => {
+					newCard('link');
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="-2 -2 28 28"
+					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"
+					/>
+				</svg>
+			</Button>
 
-					for (const updateFunction of updateFunctions) {
-						await updateFunction();
-					}
+			<Button
+				size="iconLg"
+				variant="ghost"
+				class="backdrop-blur-none"
+				onclick={() => {
+					newCard('image');
+				}}
+			>
+				<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="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>
+		</div>
+		<div class="flex items-center gap-2">
+			{#if client.isLoggedIn}
+				<Button
+					disabled={isSaving}
+					onclick={async () => {
+						isSaving = true;
 
-					// find all cards that have been updated (where items differ from originalItems)
-					for (let item of items) {
-						const originalItem = originalItems.find((i) => cardsEqual(i, item));
+						// find all cards that have been updated (where items differ from originalItems)
+						for (let item of items) {
+							const originalItem = originalItems.find((i) => cardsEqual(i, item));
 
-						if (!originalItem) {
-							console.log('updated or new item', item);
-							item.updatedAt = new Date().toISOString();
-							await putRecord({ collection: 'com.example.bento', rkey: item.id, record: item });
+							if (!originalItem) {
+								console.log('updated or new item', item);
+								item.updatedAt = new Date().toISOString();
+								await putRecord({ collection: 'com.example.bento', rkey: item.id, record: item });
+							}
 						}
-					}
 
-					// delete items that are in originalItems but not in items
-					for (let originalItem of originalItems) {
-						const item = items.find((i) => i.id === originalItem.id);
-						if (!item) {
-							console.log('deleting item', originalItem);
-							await deleteRecord({ collection: 'com.example.bento', rkey: originalItem.id, did });
+						// delete items that are in originalItems but not in items
+						for (let originalItem of originalItems) {
+							const item = items.find((i) => i.id === originalItem.id);
+							if (!item) {
+								console.log('deleting item', originalItem);
+								await deleteRecord({ collection: 'com.example.bento', rkey: originalItem.id, did });
+							}
 						}
-					}
 
-					toast('Saved', {
-						description: 'Your website has been saved!'
-					});
-				}}>Save</Button
-			>
-		{:else}
-			<BlueskyLogin
-				login={async (handle) => {
-					await login(handle);
-					return true;
-				}}
-			/>
-		{/if}
-	</div>
-</Navbar>
+						isSaving = false;
+
+						toast('Saved', {
+							description: 'Your website has been saved!'
+						});
+					}}>{isSaving ? 'Saving...' : 'Save'}</Button
+				>
+			{:else}
+				<BlueskyLogin
+					login={async (handle) => {
+						await login(handle);
+						return true;
+					}}
+				/>
+			{/if}
+		</div>
+	</Navbar>
+{/if}
 
 <Toaster />

src/lib/Profile.svelte

···
 <script lang="ts">
 	import Favicon from './Favicon.svelte';
-	import { MarkdownText, SingleRecord } from './website/components';
 
-	let { handle, did }: { handle: string; did: string } = $props();
+	import { marked } from 'marked';
+	import { client } from './oauth';
+	import { Button } from '@foxui/core';
+	let {
+		handle,
+		did,
+		data,
+		showEditButton = false
+	}: { handle: string; did: string; data: any; showEditButton: boolean } = $props();
+	$inspect(data);
+
+	const profileData = data?.data?.['app.bsky.actor.profile']?.self?.value;
+	$inspect(profileData);
+
+	const renderer = new marked.Renderer();
+	renderer.link = ({ href, title, text }) =>
+		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
 </script>
 
-<div class="mx-auto flex max-w-2xl px-10 lg:px-12 pt-16 lg:pt-24 pb-8 lg:fixed lg:h-screen lg:w-1/4 xl:w-1/3 lg:max-w-none">
+<div
+	class="mx-auto flex max-w-2xl px-10 pt-16 pb-8 lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3"
+>
 	<div class="flex flex-col gap-4">
-		<SingleRecord collection="app.bsky.actor.profile" rkey="self">
-			{#snippet child(data)}
-				<Favicon
-					favicon={'https://cdn.bsky.app/img/avatar/plain/' +
-						did +
-						'/' +
-						data.value.avatar.ref.$link}
-				/>
-				<img
-					class="rounded-fulll size-32 lg:size-44 rounded-full"
-					src={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + data.value.avatar.ref.$link}
-					alt=""
-				/>
-				<div class="line-clamp-2 text-4xl font-bold wrap-anywhere">{handle}</div>
+		<Favicon
+			favicon={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
+		/>
+		<img
+			class="rounded-fulll size-32 rounded-full lg:size-44"
+			src={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
+			alt=""
+		/>
+		<div class="line-clamp-2 text-4xl font-bold wrap-anywhere">{handle}</div>
 
-				<div
-					class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline line-clamp-3"
+		<div
+			class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline line-clamp-3"
+		>
+			{@html marked.parse(profileData.description ?? '', { renderer })}
+		</div>
+
+		{#if showEditButton && client.isLoggedIn && client.profile?.did === did}
+			<div>
+				<Button href="./edit" class="mt-2">
+					<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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+						/>
+					</svg>
+
+					Edit Your Website</Button
 				>
-					<MarkdownText key="description" {data} />
-				</div>
-			{/snippet}
-		</SingleRecord>
+			</div>
+		{/if}
 	</div>
 </div>

src/lib/Website.svelte

···
 	import type { Item } from './types';
 	import { innerWidth } from 'svelte/reactivity/window';
 
-	let { handle, did, items }: { handle: string; did: string; items: Item[] } = $props();
+	let { handle, did, items, data }: { handle: string; did: string; items: Item[], data:any } = $props();
 
 	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
 
···
 	let container: HTMLDivElement | undefined = $state();
 </script>
 
-<Profile {handle} {did} />
+<Profile {handle} {did} {data} showEditButton={true} />
 
 <div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-4 xl:grid-cols-3">
 	<div></div>

src/lib/cards/Card/Card.svelte

···
 <script lang="ts">
-	import { CardDefinitionsByType } from '.';
+	import { CardDefinitionsByType } from '..';
 	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
-	import ImageCard from '../ImageCard/ImageCard.svelte';
-	import TextCard from '../TextCard/TextCard.svelte';
 
 	let { item, ref = $bindable(null), ...rest }: BaseCardProps = $props();
 </script>

src/lib/cards/Card/EditingCard.svelte

···
 <script lang="ts">
 	import type { BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
-	import { CardDefinitionsByType } from '.';
+	import { CardDefinitionsByType } from '..';
 	import BaseCard from '../BaseCard/BaseCard.svelte';
 
 	let { item = $bindable(), ref = $bindable(), ...rest }: BaseEditingCardProps = $props();

src/lib/cards/Card/index.ts

···
-import { ImageCardDefinition } from '../ImageCard';
-import { LinkCardDefinition } from '../LinkCard';
-import { TextCardDefinition } from '../TextCard';
-import type { CardDefinition } from '../types';
-
-export const AllCardDefinitions = [
-	ImageCardDefinition,
-	TextCardDefinition,
-	LinkCardDefinition
-] as const;
-
-export const CardDefinitionsByType = AllCardDefinitions.reduce(
-	(acc, item) => {
-		acc[item.type] = item;
-		return acc;
-	},
-	{} as Record<string, CardDefinition>
-);

src/lib/cards/ImageCard/index.ts

···
 	createNew: (card) => {
 		card.cardType = 'image';
 		card.cardData = {
-			src: '',
+			image: `https://picsum.photos/seed/${card.id}/800/800`,
 			alt: '',
-			href: ''
+			href: 'https://example.com'
 		};
+		console.log('adding new card', card);
 	}
 } as CardDefinition & { type: 'image' };

src/lib/cards/LinkCard/index.ts

···
 	createNew: (card) => {
 		card.cardType = 'link';
 		card.cardData = {
-			src: '',
-			alt: '',
-			href: ''
+			href: 'https://flo-bit.dev'
 		};
 	}
 } as CardDefinition & { type: 'link' };

src/lib/cards/TextCard/index.ts

···
 	createNew: (card) => {
 		card.cardType = 'text';
 		card.cardData = {
-			text: ''
+			text: 'hello world'
 		};
 	}
 } as CardDefinition & { type: 'text' };

src/lib/cards/index.ts

···
+import { ImageCardDefinition } from './ImageCard';
+import { LinkCardDefinition } from './LinkCard';
+import { TextCardDefinition } from './TextCard';
+import type { CardDefinition } from './types';
+
+export const AllCardDefinitions = [
+	ImageCardDefinition,
+	TextCardDefinition,
+	LinkCardDefinition
+] as const;
+
+export const CardDefinitionsByType = AllCardDefinitions.reduce(
+	(acc, item) => {
+		acc[item.type] = item;
+		return acc;
+	},
+	{} as Record<string, CardDefinition>
+);

src/lib/helper.ts

···
 		a.mobileY === b.mobileY
 	);
 }
+
+export function setPositionOfNewItem(newItem: Item, items: Item[]) {
+	let foundPosition = false;
+	while (!foundPosition) {
+		for (newItem.x = 0; newItem.x <= 4 - newItem.w; newItem.x++) {
+			const collision = items.find((item) => overlaps(newItem, item));
+			if (!collision) {
+				foundPosition = true;
+				break;
+			}
+		}
+		if (!foundPosition) newItem.y += 1;
+	}
+
+	let foundMobilePosition = false;
+	while (!foundMobilePosition) {
+		for (newItem.mobileX = 0; newItem.mobileX <= 4 - newItem.mobileW; newItem.mobileX += 1) {
+			const collision = items.find((item) => overlaps(newItem, item, true));
+
+			if (!collision) {
+				foundMobilePosition = true;
+				break;
+			}
+		}
+		if (!foundMobilePosition) newItem.mobileY! += 2;
+	}
+}

src/lib/website/EditingWebsiteWrapper.svelte

···
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import { BlueskyLogin, Button, Navbar, toast, Toaster } from './foxui';
-	import { client, login } from '$lib/oauth/auth.svelte.js';
-
-	import { settingsModal } from './components/head/EditHead.svelte';
-	import { base } from '$app/paths';
-	import HeadItem from './components/head/HeadItem.svelte';
-	import { setDataContext, setDidContext, setIsEditing, setUpdateFunctionsContext, type UpdateFunction } from './context';
-
-	let updateFunctions: UpdateFunction[] = $state([]);
-
-	let { data, children } = $props();
-
-	setIsEditing(true);
-
-	// svelte-ignore state_referenced_locally
-	setDidContext(data.did);
-	setUpdateFunctionsContext(updateFunctions);
-	// svelte-ignore state_referenced_locally
-	setContext('current', data.current);
-	// svelte-ignore state_referenced_locally
-	setDataContext(data.data);
-</script>
-
-{@render children?.()}
-
-<HeadItem collection="com.example.head" />
-
-<Navbar class="dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 lg:mx-auto">
-	<div class="flex items-center gap-2">
-		<Button size="iconLg" variant="ghost" class="backdrop-blur-none" href={base + '/'}>
-			<span class="sr-only">home</span>
-			<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="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-				/>
-			</svg>
-		</Button>
-
-		<Button
-			size="iconLg"
-			variant="ghost"
-			class="backdrop-blur-none"
-			onclick={() => (settingsModal.show = true)}
-		>
-			<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="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>
-	</div>
-	<div class="flex items-center gap-2">
-		{#if client.isInitializing}{:else if client.isLoggedIn}
-			<Button
-				onclick={async () => {
-					// check if did is same
-					if (client?.profile?.did !== data.did) {
-						toast('Not authorized', {
-							description: 'Please login with the correct account'
-						});
-						return;
-					}
-
-					for (const updateFunction of updateFunctions) {
-						await updateFunction();
-					}
-
-					toast('Saved', {
-						description: 'Your website has been saved!'
-					});
-				}}>Save</Button
-			>
-		{:else}
-			<BlueskyLogin
-				login={async (handle) => {
-					await login(handle);
-					return true;
-				}}
-			/>
-		{/if}
-	</div>
-</Navbar>
-
-<Toaster />

src/lib/website/WebsiteWrapper.svelte

···
-<script>
-	import { setContext } from "svelte";
-	import { setDataContext, setDidContext, setIsEditing } from "./context";
-
-	let { data, children, handle } = $props();
-
-	// svelte-ignore state_referenced_locally
-	setDidContext(data.did);
-	// svelte-ignore state_referenced_locally
-	setDataContext(data.data);
-	// svelte-ignore state_referenced_locally
-	setContext('current', data.current);
-
-	setIsEditing(false);
-
-	$inspect(data);
-</script>
-
-{@render children?.()}

src/lib/website/components/head/EditHead.svelte

···
-<script lang="ts" module>
-	export const settingsModal = $state({
-		show: false,
-		title: '',
-		favicon: '',
-		edited: false
-	});
-</script>
-
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import Head from './Head.svelte';
-	import { Modal, Heading, Label, Input } from '../../foxui';
-	import { getUpdateRecordFunctionsContext } from '$lib/website/context';
-
-	let { data } = $props();
-
-	$effect(() => {
-		settingsModal.title = data?.value?.title;
-		settingsModal.favicon = data?.value?.favicon;
-	});
-
-	const updateFunctions = getUpdateRecordFunctionsContext();
-
-	const update = async () => {
-		if (!settingsModal.edited) return {};
-
-		settingsModal.edited = false;
-
-		return {
-			title: settingsModal.title,
-			favicon: settingsModal.favicon
-		};
-	};
-
-	onMount(() => {
-		updateFunctions.push(update);
-	});
-
-	onDestroy(() => {
-		updateFunctions.splice(updateFunctions.indexOf(update), 1);
-	});
-
-	$inspect(settingsModal);
-</script>
-
-<Modal bind:open={settingsModal.show}>
-	<Heading>Website Settings</Heading>
-
-	<Label>Title</Label>
-	<Input
-		type="text"
-		bind:value={settingsModal.title}
-		onkeydown={() => (settingsModal.edited = true)}
-	/>
-</Modal>
-
-{#key settingsModal.title + settingsModal.favicon}
-	<Head data={{ value: { title: settingsModal.title, favicon: settingsModal.favicon } }} />
-{/key}

src/lib/website/components/head/Head.svelte

···
-<script lang="ts">
-	let { data } = $props();
-</script>
-
-<svelte:head>
-	{#if data?.value?.favicon}
-		<link
-			rel="icon"
-			href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{data
-				.value.favicon}</text></svg>"
-		/>
-	{/if}
-
-	<meta property="og:type" content="website" />
-
-	{#if data?.value?.description}
-		<meta name="description" content={data.value.description} />
-		<meta property="og:description" content={data.value.description} />
-		<meta name="twitter:description" content={data.value.description} />
-	{/if}
-
-	{#if data?.value?.title}
-		<title>{data.value.title}</title>
-		<meta property="og:title" content={data.value.title} />
-		<meta name="twitter:title" content={data.value.title} />
-	{/if}
-
-	{#if data?.value?.image}
-		<meta property="og:image" content={data.value.image} />
-		<meta name="twitter:image" content={data.value.image} />
-		<meta name="twitter:card" content="summary_large_image" />
-	{/if}
-
-	{#if data?.value?.url}
-		<meta property="twitter:domain" content={new URL(data.value.url).hostname} />
-		<meta property="twitter:url" content={data.value.url} />
-	{/if}
-</svelte:head>

src/lib/website/components/head/HeadItem.svelte

···
-<script lang="ts">
-	import { hasContext } from 'svelte';
-	import { SingleRecord } from '../single-record';
-	import Head from './Head.svelte';
-	import type { ElementType, IndividualCollections } from '$lib/website/data';
-	import { isEditing } from '$lib/website/context';
-
-	let {
-		collection,
-		rkey = 'self'
-	}: {
-		collection: IndividualCollections;
-		rkey?: ElementType<IndividualCollections>;
-	} = $props();
-</script>
-
-<SingleRecord {collection} {rkey}>
-	{#snippet child(data)}
-		{#if isEditing()}
-			{#await import('./EditHead.svelte') then { default: EditHead }}
-				<EditHead {data} />
-			{/await}
-		{:else}
-			<Head {data} />
-		{/if}
-	{/snippet}
-</SingleRecord>

src/lib/website/components/image/Image.svelte

···
-<script lang="ts">
-	import { base } from '$app/paths';
-	import { isEditing } from '$lib/website/context';
-	import { getContext } from 'svelte';
-
-	let {
-		key,
-		data,
-		class: className,
-		rkey
-	}: {
-		key: string;
-		data: Record<string, any>;
-		class?: string;
-		rkey: string;
-	} = $props();
-
-	$inspect(data);
-</script>
-
-{#if isEditing()}
-	{#await import('./ImageEditor.svelte') then { default: ImageEditor }}
-		<ImageEditor class={className} {key} data={data.value} {rkey} />
-	{/await}
-{:else}
-	<img class={className} src={base + '/image/' + data.value?.[key]?.ref.$link} alt="" />
-{/if}

src/lib/website/components/image/ImageEditor.svelte

···
-<script lang="ts">
-	import { getBlob, uploadImage } from '$lib/oauth/atproto';
-	import { getDidContext } from '$lib/website/context';
-	import { image_collection } from '$lib/website/data';
-	import { cn } from '$lib/website/foxui';
-	import Button from '$lib/website/foxui/button/Button.svelte';
-
-	let {
-		key,
-		data,
-		class: className,
-		rkey
-	}: {
-		key: string;
-		data: Record<string, any>;
-		class?: string;
-		rkey: string;
-	} = $props();
-
-	const did = getDidContext();
-
-	let image = $state('');
-
-	$effect(() => {
-		console.log('getting blob for', data?.[key]?.ref.$link);
-		getBlob({ cid: data?.[key]?.ref.$link, did }).then((url) => {
-			image = url;
-		});
-	});
-	$inspect(image);
-</script>
-
-<div class={cn(className)}>
-	{#key image}
-		{#if image}
-			<img class="h-full w-full object-cover" src={image} alt="" />
-		{/if}
-	{/key}
-
-	<Button
-		onclick={() => {
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.accept = 'image/*';
-			input.onchange = async () => {
-				const file = input.files?.[0];
-				if (file) {
-					// convert to blob
-					const blob = new Blob([await file.arrayBuffer()], { type: file.type });
-
-					const blobInfo = await uploadImage({
-						image: blob,
-						did,
-						collection: image_collection,
-						rkey,
-						key
-					});
-
-					data ??= {};
-					console.log('blobInfo', blobInfo);
-					data[key] = blobInfo;
-
-					getBlob({ cid: data?.[key]?.ref.$link, did }).then((url) => {
-						image = url;
-					});
-				}
-			};
-			input.click();
-		}}
-		class="absolute bottom-2 right-2">Edit</Button
-	>
-</div>

src/lib/website/components/image/ImageItem.svelte

···
-<script lang="ts">
-	import { image_collection } from '$lib/website/data';
-	import {
-		type ElementType,
-		type IndividualCollections
-	} from '$lib/website/types';
-	import { SingleRecord } from '../single-record';
-	import Image from './Image.svelte';
-
-	let {
-		rkey = 'self',
-		key,
-		class: className
-	}: {
-		rkey?: ElementType<IndividualCollections>;
-		key: string;
-		class?: string;
-	} = $props();
-</script>
-
-<SingleRecord collection={image_collection} {rkey}>
-	{#snippet child(data)}
-		<Image {key} {data} class={className} {rkey} />
-	{/snippet}
-</SingleRecord>

src/lib/website/components/index.ts

···
-export * from './single-record';
-export * from './markdown';
-export * from './list';
-export * from './plain-text';

src/lib/website/components/list-record/EditSingleRecord.svelte

···
-<script lang="ts">
-	import { onDestroy, onMount, type Snippet } from 'svelte';
-	import {
-		getUpdateFunctionsContext,
-		type UpdateRecordFunction,
-		setUpdateRecordFunctionsContext
-	} from '../../context';
-	import { putRecord } from '$lib/oauth/atproto';
-	import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
-	import { parseUri } from '$lib/website/utils';
-
-	let {
-		data,
-		child
-	}: {
-		data: ListRecord;
-		child: Snippet<[ListRecord]>;
-	} = $props();
-
-	let updateRecordFunctions: UpdateRecordFunction[] = $state([]);
-	setUpdateRecordFunctionsContext(updateRecordFunctions);
-
-	const updateFunctions = getUpdateFunctionsContext();
-	const update = async () => {
-		const updated: Record<string, any> = {};
-
-		for (const updateFunction of updateRecordFunctions) {
-			const updatedPart = await updateFunction();
-			for (const key in updatedPart) {
-				updated[key] = updatedPart[key];
-				data.value[key] = updatedPart[key];
-			}
-		}
-
-		if (Object.keys(updated).length > 0 || !data.cid) {
-			if (!data.value.createdAt) {
-				data.value.createdAt = new Date().toISOString();
-			}
-			data.value.updatedAt = new Date().toISOString();
-
-			const { collection, rkey } = parseUri(data.uri);
-			await putRecord({ collection, rkey, record: data.value });
-			return true;
-		}
-
-		return false;
-	};
-
-	onMount(() => {
-		updateFunctions.push(update);
-	});
-	onDestroy(() => {
-		updateFunctions.splice(updateFunctions.indexOf(update), 1);
-	});
-</script>
-
-{@render child(data)}

src/lib/website/components/list-record/SingleRecord.svelte

···
-<script lang="ts">
-	import { getRecord } from '$lib/oauth/atproto';
-	import { getContext, type Snippet } from 'svelte';
-	import { type ElementType, type IndividualCollections } from '../../types';
-	import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
-	import { getDataContext, getDidContext, isEditing } from '$lib/website/context';
-
-	let {
-		collection,
-		rkey,
-		child
-	}: {
-		collection: IndividualCollections;
-		rkey: ElementType<IndividualCollections>;
-		child: Snippet<[ListRecord]>;
-	} = $props();
-
-	const data = getDataContext();
-	const did = getDidContext();
-</script>
-
-{#if isEditing()}
-	{#await import('./EditSingleRecord.svelte') then { default: EditSingleRecord }}
-		{#await getRecord({ did, collection, rkey }) then record}
-			<EditSingleRecord data={record}>
-				{#snippet child(recordData)}
-					{@render child(recordData)}
-				{/snippet}
-			</EditSingleRecord>
-		{:catch error}
-			<EditSingleRecord
-				data={{
-					uri: 'at://' + did + '/' + collection + '/' + rkey,
-					value: {},
-					cid: ''
-				}}
-			>
-				{#snippet child(recordData)}
-					{@render child(recordData)}
-				{/snippet}
-			</EditSingleRecord>
-		{/await}
-	{/await}
-{:else}
-	{@render child(data?.[collection]?.[rkey])}
-{/if}

src/lib/website/components/list-record/index.ts

···
-export { default as EditSingleRecord } from './EditSingleRecord.svelte';
-export { default as SingleRecord } from './SingleRecord.svelte';

src/lib/website/components/list/EditingList.svelte

···
-<script lang="ts">
-	import { getContext, type Snippet } from 'svelte';
-	import { SingleRecord } from '..';
-	import { TID } from '@atproto/common-web';
-	import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
-	import { deleteRecord } from '$lib/oauth/atproto';
-	import { parseUri } from '../../utils';
-	import type { ListCollections } from '$lib/website/types';
-
-	let {
-		records,
-		collection,
-		item,
-		addItem,
-		empty
-	}: {
-		records: Record<string, ListRecord>;
-		collection: ListCollections;
-		item: Snippet<[any, any]>;
-		addItem: Snippet<[any]>;
-		empty?: Snippet;
-	} = $props();
-
-	let allRecords = $state(records);
-
-	$inspect(records);
-
-	const did = getContext('did') as string;
-</script>
-
-{#if Object.keys(allRecords).length === 0 && empty}
-	{@render empty()}
-{:else}
-	{#each Object.values(allRecords) as itemData}
-		<SingleRecord data={itemData} collection={collection} rkey={parseUri(itemData.uri as string).rkey}>
-			{#snippet child(data)}
-				{@render item(data, async () => {
-					if (!itemData.cid) {
-						const { rkey } = parseUri(itemData.uri as string);
-						delete allRecords[rkey];
-						return;
-					}
-					const { rkey } = parseUri(itemData.uri as string);
-					await deleteRecord({ did, collection, rkey });
-
-					delete allRecords[rkey];
-				})}
-			{/snippet}
-		</SingleRecord>
-	{/each}
-{/if}
-
-{@render addItem?.((record) => {
-	const rkey = TID.nextStr();
-
-	allRecords[rkey] = {
-		cid: '',
-		uri: 'at://' + did + '/' + collection + '/' + rkey,
-		value: record ?? {}
-	};
-	console.log(allRecords);
-})}

src/lib/website/components/list/List.svelte

···
-<script lang="ts">
-	import { getContext, hasContext, type Snippet } from 'svelte';
-	import { listRecords } from '$lib/oauth/atproto';
-	import EditingList from './EditingList.svelte';
-	import type { ListCollections } from '$lib/website/types';
-	import { getDataContext, isEditing } from '$lib/website/context';
-
-	let {
-		collection,
-		item,
-		addItem,
-		empty
-	}: {
-		collection: ListCollections;
-		item: Snippet<[any, any]>;
-		addItem: Snippet<[any]>;
-		empty?: Snippet;
-	} = $props();
-
-	const data = getDataContext();
-	const did = getContext('did') as string;
-</script>
-
-{#if isEditing()}
-	{#await listRecords({ did, collection }) then records}
-		<EditingList {records} {collection} {item} {addItem} {empty} />
-	{:catch error}
-		{error}
-	{/await}
-{:else if !data[collection] || Object.keys(data[collection]).length === 0}
-	{@render empty?.()}
-{:else}
-	{#each Object.values(data[collection]) as itemData}
-		{@render item(itemData, () => {})}
-	{/each}
-{/if}

src/lib/website/components/list/index.ts

···
-export { default as EditingList } from './EditingList.svelte';
-export { default as List } from './List.svelte';

src/lib/website/components/markdown/MarkdownItem.svelte

···
-<script lang="ts">
-	import { type ElementType, type IndividualCollections } from '../../types';
-	import { SingleRecord } from '..';
-	import MarkdownText from './MarkdownText.svelte';
-
-	let {
-		collection,
-		rkey,
-		key,
-		placeholder,
-		defaultContent
-	}: {
-		collection: IndividualCollections;
-		rkey: ElementType<IndividualCollections>;
-		key: string;
-		placeholder?: string;
-		defaultContent?: string;
-	} = $props();
-</script>
-
-<SingleRecord {collection} {rkey}>
-	{#snippet child(data)}
-		<MarkdownText {key} {placeholder} {defaultContent} {data} />
-	{/snippet}
-</SingleRecord>

src/lib/website/components/markdown/MarkdownText.svelte

···
-<script lang="ts">
-	import { isEditing } from '$lib/website/context';
-	import { marked } from 'marked';
-	import { getContext } from 'svelte';
-
-	let {
-		key,
-		data,
-		placeholder,
-		defaultContent,
-		class: className
-	}: {
-		key: string;
-		data: Record<string, any>;
-		placeholder?: string;
-		defaultContent?: string;
-		class?: string;
-	} = $props();
-</script>
-
-{#if isEditing()}
-	{#await import('./MarkdownTextEditor.svelte') then { default: MarkdownTextEditor }}
-		<MarkdownTextEditor {key} data={data.value} {placeholder} {defaultContent} />
-	{/await}
-{:else}
-	{@html marked.parse(data?.value?.[key] ?? defaultContent ?? ('' as string))}
-{/if}

src/lib/website/components/markdown/MarkdownTextEditor.svelte

···
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { Editor, type Content, type Extensions } from '@tiptap/core';
-	import StarterKit from '@tiptap/starter-kit';
-	import Image from '@tiptap/extension-image';
-	import Placeholder from '@tiptap/extension-placeholder';
-	import Link from '@tiptap/extension-link';
-	import { marked } from 'marked';
-	import { generateJSON } from '@tiptap/core';
-	import TurndownService from 'turndown';
-	import { RichTextLink } from './extensions/RichTextLink';
-	import { getUpdateRecordFunctionsContext } from '../../context';
-
-	let element: HTMLElement | undefined = $state();
-	let editor: Editor | null = $state(null);
-
-	let loaded = $state(false);
-
-	let edited = $state(false);
-
-	let {
-		key,
-		data,
-		placeholder = '',
-		defaultContent = ''
-	}: {
-		key: string;
-		data: Record<string, any>;
-		placeholder?: string;
-		defaultContent?: string;
-	} = $props();
-
-	const updateFunctions = getUpdateRecordFunctionsContext();
-
-	const update = async () => {
-		if (!edited || !editor) return {};
-
-		edited = false;
-
-		const html = editor.getHTML();
-
-		var turndownService = new TurndownService({
-			headingStyle: 'atx',
-			bulletListMarker: '-'
-		});
-		const markdown = turndownService.turndown(html);
-
-		edited = false;
-
-		return {
-			[key]: markdown
-		};
-	};
-
-	onMount(async () => {
-		if (!element || editor) return;
-
-		let json: Content = '';
-
-		try {
-			let html = await marked.parse(data[key] ?? (defaultContent as string));
-
-			// parse to json
-			json = generateJSON(html, [
-				StarterKit.configure(),
-				Image.configure(),
-				RichTextLink.configure({
-					openOnClick: false
-				})
-			]);
-		} catch (error) {
-			console.error(error);
-		}
-
-		let extensions: Extensions = [
-			StarterKit.configure(),
-			Image.configure(),
-			Link.configure({
-				openOnClick: false
-			})
-		];
-
-		if (placeholder) {
-			extensions.push(
-				Placeholder.configure({
-					placeholder: placeholder
-				})
-			);
-		}
-
-		editor = new Editor({
-			element: element,
-			extensions: extensions,
-			onTransaction: () => {
-				editor = editor;
-			},
-			onUpdate: () => {
-				edited = true;
-			},
-
-			content: json,
-
-			editorProps: {
-				attributes: {
-					class: 'outline-none'
-				}
-			}
-		});
-
-		updateFunctions.push(update);
-
-		loaded = true;
-	});
-
-	onDestroy(() => {
-		if (editor) {
-			editor.destroy();
-		}
-
-		updateFunctions.splice(updateFunctions.indexOf(update), 1);
-	});
-</script>
-
-<div bind:this={element}></div>
-
-<style>
-	:global(.tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-800);
-		content: attr(data-placeholder);
-		float: left;
-		height: 0;
-		pointer-events: none;
-	}
-	:global(.dark .tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-200);
-	}
-</style>

src/lib/website/components/markdown/extensions/RichTextLink.ts

···
-import { InputRule, markInputRule, markPasteRule, PasteRule } from '@tiptap/core';
-import { Link } from '@tiptap/extension-link';
-
-import type { LinkOptions } from '@tiptap/extension-link';
-
-/**
- * The input regex for Markdown links with title support, and multiple quotation marks (required
- * in case the `Typography` extension is being included).
- */
-const inputRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)$/i;
-
-/**
- * The paste regex for Markdown links with title support, and multiple quotation marks (required
- * in case the `Typography` extension is being included).
- */
-const pasteRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)/gi;
-
-/**
- * Input rule built specifically for the `Link` extension, which ignores the auto-linked URL in
- * parentheses (e.g., `(https://doist.dev)`).
- *
- * @see https://github.com/ueberdosis/tiptap/discussions/1865
- */
-function linkInputRule(config: Parameters<typeof markInputRule>[0]) {
-	const defaultMarkInputRule = markInputRule(config);
-
-	return new InputRule({
-		find: config.find,
-		handler(props) {
-			const { tr } = props.state;
-
-			defaultMarkInputRule.handler(props);
-			tr.setMeta('preventAutolink', true);
-		}
-	});
-}
-
-/**
- * Paste rule built specifically for the `Link` extension, which ignores the auto-linked URL in
- * parentheses (e.g., `(https://doist.dev)`). This extension was inspired from the multiple
- * implementations found in a Tiptap discussion at GitHub.
- *
- * @see https://github.com/ueberdosis/tiptap/discussions/1865
- */
-function linkPasteRule(config: Parameters<typeof markPasteRule>[0]) {
-	const defaultMarkPasteRule = markPasteRule(config);
-
-	return new PasteRule({
-		find: config.find,
-		handler(props) {
-			const { tr } = props.state;
-
-			defaultMarkPasteRule.handler(props);
-			tr.setMeta('preventAutolink', true);
-		}
-	});
-}
-
-/**
- * The options available to customize the `RichTextLink` extension.
- */
-type RichTextLinkOptions = LinkOptions;
-
-/**
- * Custom extension that extends the built-in `Link` extension to add additional input/paste rules
- * for converting the Markdown link syntax (i.e. `[Doist](https://doist.com)`) into links, and also
- * adds support for the `title` attribute.
- */
-const RichTextLink = Link.extend<RichTextLinkOptions>({
-	inclusive: false,
-	addOptions() {
-		return {
-			...this.parent?.(),
-			openOnClick: 'whenNotEditable'
-		};
-	},
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			title: {
-				default: null
-			}
-		};
-	},
-	addInputRules() {
-		return [
-			linkInputRule({
-				find: inputRegex,
-				type: this.type,
-
-				// We need to use `pop()` to remove the last capture groups from the match to
-				// satisfy Tiptap's `markPasteRule` expectation of having the content as the last
-				// capture group in the match (this makes the attribute order important)
-				getAttributes(match) {
-					return {
-						title: match.pop()?.trim(),
-						href: match.pop()?.trim()
-					};
-				}
-			})
-		];
-	},
-	addPasteRules() {
-		return [
-			linkPasteRule({
-				find: pasteRegex,
-				type: this.type,
-
-				// We need to use `pop()` to remove the last capture groups from the match to
-				// satisfy Tiptap's `markInputRule` expectation of having the content as the last
-				// capture group in the match (this makes the attribute order important)
-				getAttributes(match) {
-					return {
-						title: match.pop()?.trim(),
-						href: match.pop()?.trim()
-					};
-				}
-			})
-		];
-	}
-});
-
-export { RichTextLink };
-
-export type { RichTextLinkOptions };

src/lib/website/components/markdown/index.ts

···
-export { default as MarkdownItem } from './MarkdownItem.svelte';
-export { default as MarkdownText } from './MarkdownText.svelte';
-export { default as MarkdownTextEditor } from './MarkdownTextEditor.svelte';

src/lib/website/components/plain-text/PlainText.svelte

···
-<script lang="ts">
-	import { isEditing } from '$lib/website/context';
-	import { getContext } from 'svelte';
-
-	let {
-		key,
-		data,
-		placeholder,
-		defaultContent,
-		class: className
-	}: {
-		key: string;
-		data: Record<string, any>;
-		placeholder?: string;
-		defaultContent?: string;
-		class?: string;
-	} = $props();
-</script>
-
-{#if isEditing()}
-	{#await import('./PlainTextEditor.svelte') then { default: PlainTextEditor }}
-		<PlainTextEditor class={className} {key} data={data.value} {placeholder} {defaultContent} />
-	{/await}
-{:else}
-	<span class={className}>{data?.value?.[key] || defaultContent || placeholder}</span>
-{/if}

src/lib/website/components/plain-text/PlainTextEditor.svelte

···
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { Editor, type Extensions } from '@tiptap/core';
-	import Placeholder from '@tiptap/extension-placeholder';
-	import Paragraph from '@tiptap/extension-paragraph';
-	import Document from '@tiptap/extension-document';
-	import Text from '@tiptap/extension-text';
-	import { getUpdateRecordFunctionsContext } from '../../context';
-
-	let element: HTMLElement | undefined = $state();
-	let editor: Editor | null = $state(null);
-
-	let edited = $state(false);
-
-	const updateFunctions = getUpdateRecordFunctionsContext();
-
-	let {
-		key,
-		data,
-		class: className,
-		placeholder = '',
-		defaultContent = ''
-	}: {
-		key: string;
-		data: Record<string, any>;
-		class?: string;
-		placeholder?: string;
-		defaultContent?: string;
-	} = $props();
-
-	const update = async () => {
-		if (!edited || !editor) return {};
-
-		edited = false;
-
-		return {
-			[key]: editor.getText()
-		};
-	};
-
-	onMount(async () => {
-		if (!element || editor) return;
-
-		updateFunctions.push(update);
-
-		let extensions: Extensions = [Document.configure(), Paragraph.configure(), Text.configure()];
-
-		if (placeholder) {
-			extensions.push(
-				Placeholder.configure({
-					placeholder: placeholder
-				})
-			);
-		}
-
-		editor = new Editor({
-			element: element,
-			extensions: extensions,
-			onTransaction: () => {
-				editor = editor;
-			},
-			onUpdate: () => {
-				edited = true;
-			},
-
-			content: data[key] ?? defaultContent,
-
-			editorProps: {
-				attributes: {
-					class: 'outline-none pointer-events-auto'
-				}
-			}
-		});
-	});
-
-	onDestroy(() => {
-		if (editor) {
-			editor.destroy();
-		}
-
-		updateFunctions.splice(updateFunctions.indexOf(update), 1);
-	});
-</script>
-
-<span class={className} bind:this={element}></span>
-
-<style>
-	:global(.tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-800);
-		content: attr(data-placeholder);
-		float: left;
-		height: 0;
-		pointer-events: none;
-	}
-	:global(.dark .tiptap p.is-editor-empty:first-child::before) {
-		color: var(--color-base-200);
-	}
-</style>

src/lib/website/components/plain-text/PlainTextItem.svelte

···
-<script lang="ts">
-	import { type ElementType, type IndividualCollections } from '../../types';
-	import { SingleRecord } from '..';
-	import PlainText from './PlainText.svelte';
-
-	let {
-		collection,
-		rkey = 'self',
-		key,
-		placeholder,
-		defaultContent
-	}: {
-		collection: IndividualCollections;
-		rkey?: ElementType<IndividualCollections>;
-		key: string;
-		placeholder?: string;
-		defaultContent?: string;
-	} = $props();
-</script>
-
-<SingleRecord {collection} {rkey}>
-	{#snippet child(data)}
-		<PlainText {key} {placeholder} {defaultContent} {data} />
-	{/snippet}
-</SingleRecord>

src/lib/website/components/plain-text/index.ts

···
-export { default as PlainTextItem } from './PlainTextItem.svelte';
-export { default as PlainTextEditor } from './PlainTextEditor.svelte';
-export { default as PlainText } from './PlainText.svelte';

src/lib/website/components/single-record/EditSingleRecord.svelte

···
-<script lang="ts">
-	import { onDestroy, onMount, type Snippet } from 'svelte';
-	import {
-		getUpdateFunctionsContext,
-		type UpdateRecordFunction,
-		setUpdateRecordFunctionsContext
-	} from '../../context';
-	import { putRecord } from '$lib/oauth/atproto';
-	import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
-	import { parseUri } from '$lib/website/utils';
-
-	let {
-		data,
-		child
-	}: {
-		data: ListRecord;
-		child: Snippet<[ListRecord]>;
-	} = $props();
-
-	let updateRecordFunctions: UpdateRecordFunction[] = $state([]);
-	setUpdateRecordFunctionsContext(updateRecordFunctions);
-
-	const updateFunctions = getUpdateFunctionsContext();
-	const update = async () => {
-		const updated: Record<string, any> = {};
-
-		for (const updateFunction of updateRecordFunctions) {
-			const updatedPart = await updateFunction();
-			for (const key in updatedPart) {
-				updated[key] = updatedPart[key];
-				data.value[key] = updatedPart[key];
-			}
-		}
-
-		if (Object.keys(updated).length > 0 || !data.cid) {
-			if (!data.value.createdAt) {
-				data.value.createdAt = new Date().toISOString();
-			}
-			data.value.updatedAt = new Date().toISOString();
-
-			const { collection, rkey } = parseUri(data.uri);
-			await putRecord({ collection, rkey, record: data.value });
-			return true;
-		}
-
-		return false;
-	};
-
-	onMount(() => {
-		updateFunctions.push(update);
-	});
-	onDestroy(() => {
-		updateFunctions.splice(updateFunctions.indexOf(update), 1);
-	});
-</script>
-
-{@render child(data)}

src/lib/website/components/single-record/SingleRecord.svelte

···
-<script lang="ts">
-	import { getRecord } from '$lib/oauth/atproto';
-	import { type Snippet } from 'svelte';
-	import { type ElementType, type IndividualCollections } from '../../types';
-	import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
-	import { getDataContext, getDidContext, isEditing } from '$lib/website/context';
-
-	let {
-		collection,
-		rkey,
-		child
-	}: {
-		collection: IndividualCollections;
-		rkey: ElementType<IndividualCollections>;
-		child: Snippet<[ListRecord]>;
-	} = $props();
-
-	const data = getDataContext();
-	const did = getDidContext();
-
-	$inspect(data['app.bsky.actor.profile']);
-</script>
-
-{#if isEditing()}
-	{#await import('./EditSingleRecord.svelte') then { default: EditSingleRecord }}
-		{#await getRecord({ did, collection, rkey }) then record}
-			<EditSingleRecord data={record}>
-				{#snippet child(recordData)}
-					{@render child(recordData)}
-				{/snippet}
-			</EditSingleRecord>
-		{:catch error}
-			<EditSingleRecord
-				data={{
-					uri: 'at://' + did + '/' + collection + '/' + rkey,
-					value: {},
-					cid: ''
-				}}
-			>
-				{#snippet child(recordData)}
-					{@render child(recordData)}
-				{/snippet}
-			</EditSingleRecord>
-		{/await}
-	{/await}
-{:else}
-	{@render child(data?.[collection]?.[rkey])}
-{/if}

src/lib/website/components/single-record/index.ts

···
-export { default as EditSingleRecord } from './EditSingleRecord.svelte';
-export { default as SingleRecord } from './SingleRecord.svelte';

src/lib/website/foxui/avatar/Avatar.svelte

···
-<script lang="ts">
-	import { cn } from '..';
-	import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-
-	let {
-		src,
-		alt,
-		fallback,
-		ref = $bindable(null),
-
-		imageRef = $bindable(null),
-		imageClass,
-
-		fallbackRef = $bindable(null),
-		fallbackClass,
-
-		useThemeColor = false,
-
-		class: className,
-		...restProps
-	}: WithoutChildrenOrChild<AvatarPrimitive.RootProps> & {
-		fallback?: string;
-		imageRef?: HTMLImageElement | null;
-		imageClass?: string;
-		fallbackRef?: HTMLElement | null;
-		fallbackClass?: string;
-
-		src?: string;
-		alt?: string;
-
-		useThemeColor?: boolean;
-	} = $props();
-</script>
-
-<div
-	class={cn(
-		'border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border',
-		className
-	)}
-	{...restProps}
-	bind:this={ref}
->
-	{#if fallback}
-		<span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium"
-			>{fallback}</span
-		>
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			fill="currentColor"
-			class="text-base-400 dark:text-base-600 absolute left-1/2 top-1/2 mt-[15%] size-full -translate-x-1/2 -translate-y-1/2"
-		>
-			<path
-				fill-rule="evenodd"
-				d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
-				clip-rule="evenodd"
-			/>
-		</svg>
-	{/if}
-	{#if src}
-		<img
-			bind:this={imageRef}
-			{src}
-			alt={alt ?? ''}
-			class="z-10 aspect-square size-full object-cover"
-			onerror={() => {
-				imageRef?.classList.add('hidden');
-			}}
-		/>
-	{/if}
-</div>

src/lib/website/foxui/avatar/index.ts

···
-import Avatar from './Avatar.svelte';
-
-export { Avatar };

src/lib/website/foxui/bluesky-login/BlueskyLogin.svelte

···
-<script lang="ts">
-	import { Button } from '../button';
-	import { BlueskyLoginModal, blueskyLoginModalState, type BlueskyLoginProps } from '.';
-
-	let { login, formAction, formMethod }: BlueskyLoginProps = $props();
-</script>
-
-<Button onclick={() => blueskyLoginModalState.show()}>
-	<svg
-		fill="currentColor"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="-40 -40 680 620"
-		version="1.1"
-		aria-hidden="true"
-	>
-		<path
-			d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
-		/>
-	</svg>
-	Login
-</Button>
-
-<BlueskyLoginModal {login} {formAction} {formMethod} />

src/lib/website/foxui/bluesky-login/BlueskyLoginModal.svelte

···
-<script lang="ts" module>
-	export const blueskyLoginModalState = $state({
-		open: false,
-		show: () => (blueskyLoginModalState.open = true),
-		hide: () => (blueskyLoginModalState.open = false)
-	});
-</script>
-
-<script lang="ts">
-	import { Button, Modal, Subheading, Label, Input, Avatar } from '..';
-	import type { BlueskyLoginProps } from '.';
-
-	let value = $state('');
-	let error: string | null = $state(null);
-	let loading = $state(false);
-
-	let { login, formAction, formMethod = 'get' }: BlueskyLoginProps = $props();
-
-	async function onLogin(handle: string) {
-		if (loading || !login) return;
-
-		loading = true;
-		error = null;
-
-		try {
-			const hide = await login(handle);
-
-			if (hide) {
-				blueskyLoginModalState.hide();
-				value = '';
-			}
-		} catch (err) {
-			error = err instanceof Error ? err.message : String(err);
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function onSubmit(evt: Event) {
-		if (formAction || !login) return;
-		evt.preventDefault();
-
-		await onLogin(value);
-	}
-
-	let input: HTMLInputElement | null = $state(null);
-
-	let lastLogin: { handle: string; avatar: string } | null = $state(null);
-
-	$effect(() => {
-		let lastLoginDid = localStorage.getItem('last-login');
-
-		if (lastLoginDid) {
-			let profile = localStorage.getItem(`profile-${lastLoginDid}`);
-
-			if (profile) {
-				lastLogin = JSON.parse(profile);
-			}
-		}
-	});
-</script>
-
-<Modal
-	bind:open={blueskyLoginModalState.open}
-	class="max-w-sm gap-2 p-4 sm:p-6"
-	onOpenAutoFocus={(e: Event) => {
-		e.preventDefault();
-		input?.focus();
-	}}
->
-	<form onsubmit={onSubmit} action={formAction} method={formMethod} class="flex flex-col gap-2">
-		<Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
-			<svg
-				fill="currentColor"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="-40 -40 680 620"
-				version="1.1"
-				class={['text-accent-600 dark:text-accent-400 size-6']}
-				aria-hidden="true"
-			>
-				<path
-					d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
-				/>
-			</svg>
-			Login with Bluesky</Subheading
-		>
-
-		<div class="text-base-600 dark:text-base-400 text-xs leading-5">
-			Don't have an account?
-			<br />
-			<a
-				href="https://bsky.app"
-				target="_blank"
-				class="text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 hover:text-accent-500 font-medium transition-colors"
-			>
-				Sign up on bluesky
-			</a>, then come back here.
-		</div>
-
-		{#if lastLogin}
-			<Label for="bluesky-handle" class="mt-4 text-sm">Recent login:</Label>
-			<Button
-				class="max-w-xs justify-start overflow-x-hidden truncate"
-				variant="primary"
-				onclick={() => onLogin(lastLogin?.handle ?? '')}
-				disabled={loading}
-			>
-				<Avatar src={lastLogin.avatar} class="size-6" />
-
-				<div
-					class="text-accent-600 dark:text-accent-400 text-md max-w-full overflow-x-hidden truncate font-semibold"
-				>
-					<p>{loading ? 'Loading...' : lastLogin.handle}</p>
-				</div>
-			</Button>
-		{/if}
-
-		<div class="mt-4 w-full">
-			<Label for="bluesky-handle" class="text-sm">Your handle</Label>
-			<div class="mt-2">
-				<Input
-					bind:ref={input}
-					type="text"
-					name="bluesky-handle"
-					id="bluesky-handle"
-					placeholder="yourname.bsky.social"
-					class="w-full"
-					bind:value
-				/>
-			</div>
-		</div>
-
-		{#if error}
-			<p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
-		{/if}
-
-		<Button type="submit" class="ml-auto mt-2 w-full lg:w-auto" disabled={loading}
-			>{loading ? 'Loading...' : 'Login'}</Button
-		>
-	</form>
-</Modal>

src/lib/website/foxui/bluesky-login/index.ts

···
-export { default as BlueskyLoginModal } from './BlueskyLoginModal.svelte';
-export { blueskyLoginModalState } from './BlueskyLoginModal.svelte';
-export { default as BlueskyLogin } from './BlueskyLogin.svelte';
-
-export type BlueskyLoginProps = {
-	login?: (handle: string) => Promise<boolean | undefined>;
-	formAction?: string;
-	formMethod?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | null;
-};

src/lib/website/foxui/button/Button.svelte

···
-<script lang="ts" module>
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { type VariantProps, tv } from 'tailwind-variants';
-	import { cn } from '../';
-
-	export const buttonVariants = tv({
-		base: 'touch-manipulation hover:cursor-pointer hover:scale-101 focus-visible:scale-101 disabled:hover:scale-100 motion-safe:focus-visible:transition-transform focus-visible:outline-2 outline-offset-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl active:scale-98 text-sm font-medium motion-safe:transition-all disabled:pointer-events-none disabled:opacity-60 duration-800 active:duration-100 hover:duration-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-		variants: {
-			variant: {
-				primary:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-accent-500/5 dark:shadow-accent-500/2 disabled:shadow-md active:shadow-md  inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 focus-visible:outline-accent-500 border border-accent-500/15 dark:border-accent-500/15 hover:bg-accent-200/60 dark:hover:bg-accent-950/25 bg-accent-200/50 dark:bg-accent-950/20 text-accent-950 dark:text-accent-400',
-				secondary:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-base-500/5 dark:shadow-base-500/2 active:shadow-md inset-shadow-sm inset-shadow-base-700/2 dark:inset-shadow-base-500/2 focus-visible:outline-base-800 dark:focus-visible:outline-base-200 bg-base-300/40 dark:bg-base-800/30 text-base-900 dark:text-base-50 hover:bg-base-300/45 dark:hover:bg-base-800/35 border border-base-300/50 dark:border-base-700/30',
-				link: 'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-800 dark:text-base-200 font-semibold hover:text-accent-600 dark:hover:text-accent-400 data-[current=true]:text-accent-600 dark:data-[current=true]:text-accent-400',
-				ghost:
-					'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-800 dark:text-base-200 font-semibold hover:text-accent-600 hover:bg-accent-400/5 data-[current=true]:bg-accent-500/5 dark:hover:text-accent-400 dark:hover:bg-accent-700/5 data-[current=true]:text-accent-600 dark:data-[current=true]:text-accent-400 dark:data-[current=true]:bg-accent-500/5',
-
-				red: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-red-500/5 dark:shadow-red-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-red-500/15 inset-shadow-sm inset-shadow-red-700/5 dark:inset-shadow-red-500/2 focus-visible:outline-red-500 border border-red-500/15 dark:border-red-500/15 hover:bg-red-200/60 dark:hover:bg-red-950/30 bg-red-200/50 dark:bg-red-950/20 text-red-800 dark:text-red-400',
-				orange:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-orange-500/5 dark:shadow-orange-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-orange-500/15 inset-shadow-sm inset-shadow-orange-700/5 dark:inset-shadow-orange-500/2 focus-visible:outline-orange-500 border border-orange-500/15 dark:border-orange-500/15 hover:bg-orange-200/60 dark:hover:bg-orange-950/30 bg-orange-200/50 dark:bg-orange-950/20 text-orange-800 dark:text-orange-400',
-				amber:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-amber-500/5 dark:shadow-amber-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-amber-500/15 inset-shadow-sm inset-shadow-amber-700/5 dark:inset-shadow-amber-500/2 focus-visible:outline-amber-500 border border-amber-500/15 dark:border-amber-500/15 hover:bg-amber-200/60 dark:hover:bg-amber-950/30 bg-amber-200/50 dark:bg-amber-950/20 text-amber-800 dark:text-amber-400',
-				yellow:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-yellow-500/5 dark:shadow-yellow-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-yellow-500/15 inset-shadow-sm inset-shadow-yellow-700/5 dark:inset-shadow-yellow-500/2 focus-visible:outline-yellow-500 border border-yellow-500/15 dark:border-yellow-500/15 hover:bg-yellow-200/60 dark:hover:bg-yellow-950/30 bg-yellow-200/50 dark:bg-yellow-950/20 text-yellow-800 dark:text-yellow-400',
-				lime: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-lime-500/5 dark:shadow-lime-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-lime-500/15 inset-shadow-sm inset-shadow-lime-700/5 dark:inset-shadow-lime-500/2 focus-visible:outline-lime-500 border border-lime-500/15 dark:border-lime-500/15 hover:bg-lime-200/60 dark:hover:bg-lime-950/30 bg-lime-200/50 dark:bg-lime-950/20 text-lime-800 dark:text-lime-400',
-				green:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-green-500/5 dark:shadow-green-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-green-500/15 inset-shadow-sm inset-shadow-green-700/5 dark:inset-shadow-green-500/2 focus-visible:outline-green-500 border border-green-500/15 dark:border-green-500/15 hover:bg-green-200/60 dark:hover:bg-green-950/30 bg-green-200/50 dark:bg-green-950/20 text-green-800 dark:text-green-400',
-				emerald:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-emerald-500/5 dark:shadow-emerald-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-emerald-500/15 inset-shadow-sm inset-shadow-emerald-700/5 dark:inset-shadow-emerald-500/2 focus-visible:outline-emerald-500 border border-emerald-500/15 dark:border-emerald-500/15 hover:bg-emerald-200/60 dark:hover:bg-emerald-950/30 bg-emerald-200/50 dark:bg-emerald-950/20 text-emerald-800 dark:text-emerald-400',
-				teal: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-teal-500/5 dark:shadow-teal-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-teal-500/15 inset-shadow-sm inset-shadow-teal-700/5 dark:inset-shadow-teal-500/2 focus-visible:outline-teal-500 border border-teal-500/15 dark:border-teal-500/15 hover:bg-teal-200/60 dark:hover:bg-teal-950/30 bg-teal-200/50 dark:bg-teal-950/20 text-teal-800 dark:text-teal-400',
-				cyan: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-cyan-500/5 dark:shadow-cyan-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-cyan-500/15 inset-shadow-sm inset-shadow-cyan-700/5 dark:inset-shadow-cyan-500/2 focus-visible:outline-cyan-500 border border-cyan-500/15 dark:border-cyan-500/15 hover:bg-cyan-200/60 dark:hover:bg-cyan-950/30 bg-cyan-200/50 dark:bg-cyan-950/20 text-cyan-800 dark:text-cyan-400',
-				sky: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-sky-500/5 dark:shadow-sky-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-sky-500/15 inset-shadow-sm inset-shadow-sky-700/5 dark:inset-shadow-sky-500/2 focus-visible:outline-sky-500 border border-sky-500/15 dark:border-sky-500/15 hover:bg-sky-200/60 dark:hover:bg-sky-950/30 bg-sky-200/50 dark:bg-sky-950/20 text-sky-800 dark:text-sky-400',
-				blue: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-blue-500/5 dark:shadow-blue-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-blue-500/15 inset-shadow-sm inset-shadow-blue-700/5 dark:inset-shadow-blue-500/2 focus-visible:outline-blue-500 border border-blue-500/15 dark:border-blue-500/15 hover:bg-blue-200/60 dark:hover:bg-blue-950/30 bg-blue-200/50 dark:bg-blue-950/20 text-blue-800 dark:text-blue-400',
-				indigo:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-indigo-500/5 dark:shadow-indigo-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-indigo-500/15 inset-shadow-sm inset-shadow-indigo-700/5 dark:inset-shadow-indigo-500/2 focus-visible:outline-indigo-500 border border-indigo-500/15 dark:border-indigo-500/15 hover:bg-indigo-200/60 dark:hover:bg-indigo-950/30 bg-indigo-200/50 dark:bg-indigo-950/20 text-indigo-800 dark:text-indigo-400',
-				violet:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-violet-500/5 dark:shadow-violet-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-violet-500/15 inset-shadow-sm inset-shadow-violet-700/5 dark:inset-shadow-violet-500/2 focus-visible:outline-violet-500 border border-violet-500/15 dark:border-violet-500/15 hover:bg-violet-200/60 dark:hover:bg-violet-950/30 bg-violet-200/50 dark:bg-violet-950/20 text-violet-800 dark:text-violet-400',
-				purple:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-purple-500/5 dark:shadow-purple-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-purple-500/15 inset-shadow-sm inset-shadow-purple-700/5 dark:inset-shadow-purple-500/2 focus-visible:outline-purple-500 border border-purple-500/15 dark:border-purple-500/15 hover:bg-purple-200/60 dark:hover:bg-purple-950/30 bg-purple-200/50 dark:bg-purple-950/20 text-purple-800 dark:text-purple-400',
-				fuchsia:
-					'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-fuchsia-500/5 dark:shadow-fuchsia-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-fuchsia-500/15 inset-shadow-sm inset-shadow-fuchsia-700/5 dark:inset-shadow-fuchsia-500/2 focus-visible:outline-fuchsia-500 border border-fuchsia-500/15 dark:border-fuchsia-500/15 hover:bg-fuchsia-200/60 dark:hover:bg-fuchsia-950/30 bg-fuchsia-200/50 dark:bg-fuchsia-950/20 text-fuchsia-800 dark:text-fuchsia-400',
-				pink: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-pink-500/5 dark:shadow-pink-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-pink-500/15 inset-shadow-sm inset-shadow-pink-700/5 dark:inset-shadow-pink-500/2 focus-visible:outline-pink-500 border border-pink-500/15 dark:border-pink-500/15 hover:bg-pink-200/60 dark:hover:bg-pink-950/30 bg-pink-200/50 dark:bg-pink-950/20 text-pink-800 dark:text-pink-400',
-				rose: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-rose-500/5 dark:shadow-rose-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-rose-500/15 inset-shadow-sm inset-shadow-rose-700/5 dark:inset-shadow-rose-500/2 focus-visible:outline-rose-500 border border-rose-500/15 dark:border-rose-500/15 hover:bg-rose-200/60 dark:hover:bg-rose-950/30 bg-rose-200/50 dark:bg-rose-950/20 text-rose-800 dark:text-rose-400'
-			},
-			size: {
-				default: 'px-3 py-1.5',
-				sm: 'px-2 text-xs py-1 font-base [&_svg]:size-3 gap-1.5',
-				lg: 'px-4 gap-2.5 text-lg py-2 font-semibold [&_svg]:size-5 gap-2.5',
-				icon: 'p-2',
-				iconSm: 'p-1.5 [&_svg]:size-3',
-				iconLg: 'p-3 [&_svg]:size-5'
-			}
-		},
-		defaultVariants: {
-			variant: 'primary',
-			size: 'default'
-		}
-	});
-
-	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
-
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = 'primary',
-		size = 'default',
-		ref = $bindable(null),
-		href = undefined,
-		type = 'button',
-		children,
-		...restProps
-	}: ButtonProps = $props();
-</script>
-
-{#if href}
-	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}

src/lib/website/foxui/button/index.ts

···
-export {
-	default as Button,
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-	buttonVariants
-} from './Button.svelte';

src/lib/website/foxui/heading/Heading.svelte

···
-<script lang="ts">
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLBaseAttributes } from 'svelte/elements';
-	import { cn } from '..';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		level = 1,
-		children,
-		...restProps
-	}: WithElementRef<HTMLBaseAttributes> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
-</script>
-
-<svelte:element
-	this={'h' + level}
-	bind:this={ref}
-	class={cn('text-base-900 dark:text-base-50 text-2xl font-semibold', className)}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>

src/lib/website/foxui/heading/Subheading.svelte

···
-<script lang="ts">
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLBaseAttributes } from 'svelte/elements';
-	import { cn } from '..';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		level = 2,
-		children,
-		...restProps
-	}: WithElementRef<HTMLBaseAttributes> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
-</script>
-
-<svelte:element
-	this={'h' + level}
-	bind:this={ref}
-	class={cn('text-base-900 dark:text-base-50 text-base font-semibold sm:text-lg', className)}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>

src/lib/website/foxui/heading/index.ts

···
-import Heading from './Heading.svelte';
-import Subheading from './Subheading.svelte';
-
-export { Heading, Subheading };

src/lib/website/foxui/index.ts

···
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
-
-export * from './avatar';
-export * from './bluesky-login';
-export * from './button';
-export * from './heading';
-export * from './input';
-export * from './label';
-export * from './modal';
-export * from './navbar';
-export * from './sonner';

src/lib/website/foxui/input/Input.svelte

···
-<script lang="ts" module>
-	import type { WithElementRef } from 'bits-ui';
-	import { type VariantProps, tv } from 'tailwind-variants';
-	import { cn } from '..';
-
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-
-	export const inputVariants = tv({
-		base: 'focus:ring-2 ring-1 ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100',
-		variants: {
-			variant: {
-				primary:
-					'focus:ring-accent-500 dark:focus:ring-accent-500 ring-accent-500/30 dark:ring-accent-500/20 bg-accent-400/5 dark:bg-accent-600/5 text-accent-700 dark:text-accent-400 placeholder:text-accent-700/50 dark:placeholder:text-accent-400/50',
-				secondary:
-					'focus:ring-base-800 dark:focus:ring-base-200 bg-base-100/50 dark:bg-base-900/50 text-base-900 dark:text-base-50 ring-base-200 dark:ring-base-800 placeholder:text-base-900/50 dark:placeholder:text-base-50/50'
-			},
-			sizeVariant: {
-				default: 'px-3 py-1.5 text-base',
-				sm: 'px-3 text-xs py-1.5 font-base',
-				lg: 'px-4 text-lg py-2 font-semibold'
-			}
-		},
-		defaultVariants: {
-			variant: 'primary',
-			sizeVariant: 'default'
-		}
-	});
-
-	export type InputVariant = VariantProps<typeof inputVariants>['variant'];
-	export type InputSize = VariantProps<typeof inputVariants>['sizeVariant'];
-
-	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
-
-	export type InputProps = WithElementRef<
-		Omit<HTMLInputAttributes, 'type'> & { type?: InputType }
-	> & {
-		variant?: InputVariant;
-		sizeVariant?: InputSize;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		type,
-		class: className,
-		variant = 'primary',
-		sizeVariant = 'default',
-		...restProps
-	}: InputProps = $props();
-</script>
-
-<input
-	bind:this={ref}
-	class={cn(inputVariants({ variant, sizeVariant }), className)}
-	{type}
-	bind:value
-	{...restProps}
-/>

src/lib/website/foxui/input/index.ts

···
-import Root, {
-	type InputProps,
-	type InputSize,
-	type InputVariant,
-	inputVariants
-} from './Input.svelte';
-
-export { type InputProps, Root as Input, inputVariants, type InputSize, type InputVariant };

src/lib/website/foxui/label/Label.svelte

···
-<script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from '..';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: LabelPrimitive.RootProps = $props();
-</script>
-
-<LabelPrimitive.Root
-	bind:ref
-	class={cn(
-		'text-base-900 dark:text-base-50 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-		className
-	)}
-	{...restProps}
-/>

src/lib/website/foxui/label/index.ts

···
-export { default as Label } from './Label.svelte';

src/lib/website/foxui/modal/Modal.svelte

···
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-	import { Dialog, type WithoutChild } from 'bits-ui';
-	import { Button, type ButtonProps } from '../button';
-
-	export type ModalProps = Dialog.RootProps & {
-		title?: string;
-		titleSnippet?: Snippet;
-		titleClass?: string;
-		description?: string;
-		descriptionSnippet?: Snippet;
-		descriptionClass?: string;
-		interactOutsideBehavior?: 'close' | 'ignore';
-		closeButton?: boolean;
-		contentProps?: WithoutChild<Dialog.ContentProps>;
-
-		yesButton?:
-			| boolean
-			| {
-					label?: string;
-					onclick?: () => void;
-					variant?: ButtonProps['variant'];
-					disabled?: boolean;
-					class?: string;
-			  };
-
-		noButton?:
-			| boolean
-			| {
-					label?: string;
-					onclick?: () => void;
-					variant?: ButtonProps['variant'];
-					disabled?: boolean;
-					class?: string;
-			  };
-
-		class?: string;
-
-		onOpenAutoFocus?: (event: Event) => void;
-	};
-</script>
-
-<script lang="ts">
-	import { cn } from '..';
-
-	let {
-		open = $bindable(false),
-		children,
-		contentProps,
-		title,
-		titleSnippet,
-		titleClass,
-		description,
-		descriptionSnippet,
-		descriptionClass,
-		interactOutsideBehavior = 'close',
-		closeButton = true,
-		yesButton,
-		noButton,
-		class: className,
-		onOpenAutoFocus,
-		...restProps
-	}: ModalProps = $props();
-
-	let yesButtonRef = $state<HTMLButtonElement | null>(null);
-</script>
-
-<Dialog.Root bind:open {...restProps}>
-	<Dialog.Portal>
-		<Dialog.Overlay
-			class="motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-base-200/10 dark:bg-base-900/10 fixed inset-0 z-50 backdrop-blur-sm"
-		/>
-		<Dialog.Content
-			{onOpenAutoFocus}
-			{interactOutsideBehavior}
-			{...contentProps}
-			class={cn(
-				'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=open]:slide-in-from-bottom-1/2',
-				'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg',
-				'bg-base-50/60 dark:bg-base-900/60 border-base-200/80 dark:border-base-800 gap-4 rounded-2xl border p-6 backdrop-blur-xl',
-				className
-			)}
-		>
-			{#if title}
-				<Dialog.Title class="text-base-900 dark:text-base-100 text-lg font-semibold"
-					>{title}</Dialog.Title
-				>
-			{/if}
-			{#if titleSnippet}
-				<Dialog.Title class={titleClass}>
-					{@render titleSnippet()}
-				</Dialog.Title>
-			{/if}
-			{#if description}
-				<Dialog.Description class="text-base-600 dark:text-base-400 text-sm"
-					>{description}</Dialog.Description
-				>
-			{/if}
-			{#if descriptionSnippet}
-				<Dialog.Description class={descriptionClass}>
-					{@render descriptionSnippet?.()}
-				</Dialog.Description>
-			{/if}
-
-			{#if yesButton || noButton}
-				<div class="flex flex-col items-stretch justify-end gap-2 lg:flex-row lg:items-center">
-					{#if yesButton}
-						<Button
-							bind:ref={yesButtonRef}
-							onclick={() => {
-								open = false;
-								if (typeof yesButton === 'object') {
-									yesButton.onclick?.();
-								}
-							}}
-							class={cn('order-last', typeof yesButton === 'object' ? yesButton.class : '')}
-							variant={typeof yesButton === 'object' ? yesButton?.variant || 'primary' : 'primary'}
-							disabled={typeof yesButton === 'object' ? yesButton?.disabled : false}
-						>
-							{typeof yesButton === 'object' ? yesButton.label || 'Yes' : 'Yes'}
-						</Button>
-					{/if}
-					{#if noButton}
-						<Button
-							onclick={() => {
-								open = false;
-								if (typeof noButton === 'object') {
-									noButton.onclick?.();
-								}
-							}}
-							class={cn(typeof noButton === 'object' ? noButton.class : '')}
-							variant={typeof noButton === 'object'
-								? noButton?.variant || 'secondary'
-								: 'secondary'}
-							disabled={typeof noButton === 'object' ? noButton?.disabled : false}
-						>
-							{typeof noButton === 'object' ? noButton.label || 'No' : 'No'}
-						</Button>
-					{/if}
-				</div>
-			{/if}
-
-			{@render children?.()}
-
-			{#if closeButton}
-				<Dialog.Close
-					class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute right-2 top-2 cursor-pointer rounded-xl p-1 transition-colors focus:outline-2 focus:outline-offset-2"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="currentColor"
-						class="size-4"
-					>
-						<path
-							fill-rule="evenodd"
-							d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-
-					<span class="sr-only">Close</span>
-				</Dialog.Close>
-			{/if}
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>

src/lib/website/foxui/modal/index.ts

···
-export { default as Modal } from './Modal.svelte';
-export type { ModalProps } from './Modal.svelte';

src/lib/website/foxui/navbar/Navbar.svelte

···
-<script lang="ts">
-	import type { WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '..';
-
-	const {
-		class: className,
-		children,
-		hasSidebar = false,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { hasSidebar?: boolean } = $props();
-</script>
-
-<div
-	class={cn(
-		'border-base-400/30 dark:border-base-300/10 fixed left-0 right-0 top-1 z-50 mx-1 flex h-16 items-center justify-between overflow-hidden rounded-2xl border p-2 shadow-2xl',
-		hasSidebar ? 'lg:left-74' : '',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

src/lib/website/foxui/navbar/index.ts

···
-export { default as Navbar } from './Navbar.svelte';

src/lib/website/foxui/sonner/Toaster.svelte

···
-<script lang="ts">
-	import { Toaster as SonnerToaster } from 'svelte-sonner';
-
-	const colorClasses = {
-		blue: 'bg-blue-200/50 dark:bg-blue-950/50 text-blue-600 [&_.title]:text-blue-800 [&_.description]:text-blue-700 dark:text-blue-500 border-blue-700/20 dark:border-blue-500/20 dark:[&_.title]:text-blue-300 dark:[&_.description]:text-blue-400',
-		red: 'bg-red-200/50 dark:bg-red-950/50 text-red-600 [&_.title]:text-red-800 [&_.description]:text-red-700 dark:text-red-500 border-red-700/20 dark:border-red-500/20 dark:[&_.title]:text-red-300 dark:[&_.description]:text-red-400',
-		yellow:
-			'bg-yellow-200/50 dark:bg-yellow-950/50 text-yellow-600 [&_.title]:text-yellow-800 [&_.description]:text-yellow-700 dark:text-yellow-500 border-yellow-700/20 dark:border-yellow-500/20 dark:[&_.title]:text-yellow-300 dark:[&_.description]:text-yellow-400',
-		green:
-			'bg-green-200/50 dark:bg-green-950/50 text-green-600 [&_.title]:text-green-800 [&_.description]:text-green-700 dark:text-green-500 border-green-700/20 dark:border-green-500/20 dark:[&_.title]:text-green-300 dark:[&_.description]:text-green-400',
-		indigo:
-			'bg-indigo-200/50 dark:bg-indigo-950/50 text-indigo-600 [&_.title]:text-indigo-800 [&_.description]:text-indigo-700 dark:text-indigo-500 border-indigo-700/20 dark:border-indigo-500/20 dark:[&_.title]:text-indigo-300 dark:[&_.description]:text-indigo-400',
-		purple:
-			'bg-purple-200/50 dark:bg-purple-950/50 text-purple-600 [&_.title]:text-purple-800 [&_.description]:text-purple-700 dark:text-purple-500 border-purple-700/20 dark:border-purple-500/20 dark:[&_.title]:text-purple-300 dark:[&_.description]:text-purple-400',
-		pink: 'bg-pink-200/50 dark:bg-pink-950/50 text-pink-600 [&_.title]:text-pink-800 [&_.description]:text-pink-700 dark:text-pink-500 border-pink-700/20 dark:border-pink-500/20 dark:[&_.title]:text-pink-300 dark:[&_.description]:text-pink-400',
-		orange:
-			'bg-orange-200/50 dark:bg-orange-950/50 text-orange-600 [&_.title]:text-orange-800 [&_.description]:text-orange-700 dark:text-orange-500 border-orange-700/20 dark:border-orange-500/20 dark:[&_.title]:text-orange-300 dark:[&_.description]:text-orange-400',
-		teal: 'bg-teal-200/50 dark:bg-teal-950/50 text-teal-600 [&_.title]:text-teal-800 [&_.description]:text-teal-700 dark:text-teal-500 border-teal-700/20 dark:border-teal-500/20 dark:[&_.title]:text-teal-300 dark:[&_.description]:text-teal-400',
-		emerald:
-			'bg-emerald-200/50 dark:bg-emerald-950/50 text-emerald-600 [&_.title]:text-emerald-800 [&_.description]:text-emerald-700 dark:text-emerald-500 border-emerald-700/20 dark:border-emerald-500/20 dark:[&_.title]:text-emerald-300 dark:[&_.description]:text-emerald-400',
-		lime: 'bg-lime-200/50 dark:bg-lime-950/50 text-lime-600 [&_.title]:text-lime-800 [&_.description]:text-lime-700 dark:text-lime-500 border-lime-700/20 dark:border-lime-500/20 dark:[&_.title]:text-lime-300 dark:[&_.description]:text-lime-400',
-		cyan: 'bg-cyan-200/50 dark:bg-cyan-950/50 text-cyan-600 [&_.title]:text-cyan-800 [&_.description]:text-cyan-700 dark:text-cyan-500 border-cyan-700/20 dark:border-cyan-500/20 dark:[&_.title]:text-cyan-300 dark:[&_.description]:text-cyan-400',
-		sky: 'bg-sky-200/50 dark:bg-sky-950/50 text-sky-600 [&_.title]:text-sky-800 [&_.description]:text-sky-700 dark:text-sky-500 border-sky-700/20 dark:border-sky-500/20 dark:[&_.title]:text-sky-300 dark:[&_.description]:text-sky-400',
-		rose: 'bg-rose-200/50 dark:bg-rose-950/50 text-rose-600 [&_.title]:text-rose-800 [&_.description]:text-rose-700 dark:text-rose-500 border-rose-700/20 dark:border-rose-500/20 dark:[&_.title]:text-rose-300 dark:[&_.description]:text-rose-400',
-		amber:
-			'bg-amber-200/50 dark:bg-amber-950/50 text-amber-600 [&_.title]:text-amber-800 [&_.description]:text-amber-700 dark:text-amber-500 border-amber-700/20 dark:border-amber-500/20 dark:[&_.title]:text-amber-300 dark:[&_.description]:text-amber-400',
-		violet:
-			'bg-violet-200/50 dark:bg-violet-950/50 text-violet-600 [&_.title]:text-violet-800 [&_.description]:text-violet-700 dark:text-violet-500 border-violet-700/20 dark:border-violet-500/20 dark:[&_.title]:text-violet-300 dark:[&_.description]:text-violet-400',
-		fuchsia:
-			'bg-fuchsia-200/50 dark:bg-fuchsia-950/50 text-fuchsia-600 [&_.title]:text-fuchsia-800 [&_.description]:text-fuchsia-700 dark:text-fuchsia-500 border-fuchsia-700/20 dark:border-fuchsia-500/20 dark:[&_.title]:text-fuchsia-300 dark:[&_.description]:text-fuchsia-400',
-		base: 'bg-base-50/80 border-base-200 dark:bg-base-900/50 dark:border-base-800 [&_.title]:text-base-900 dark:[&_.title]:text-base-50 [&_.description]:text-base-800 dark:[&_.description]:text-base-100',
-		accent:
-			'bg-accent-200/50 dark:bg-accent-950/50 text-accent-600 [&_.title]:text-accent-800 [&_.description]:text-accent-700 dark:text-accent-500 border-accent-700/20 dark:border-accent-500/20 dark:[&_.title]:text-accent-300 dark:[&_.description]:text-accent-400'
-	};
-
-	type Colors = keyof typeof colorClasses;
-
-	const {
-		colors = {
-			default: 'accent',
-			success: 'green',
-			error: 'red',
-			info: 'blue'
-		}
-	}: {
-		colors?: {
-			default?: Colors;
-			success?: Colors;
-			error?: Colors;
-			info?: Colors;
-		};
-	} = $props();
-</script>
-
-<SonnerToaster
-	toastOptions={{
-		unstyled: true,
-		classes: {
-			toast:
-				'group toast min-w-12 w-fit sm:min-w-64 backdrop-blur-lg border rounded-2xl p-4 flex items-center gap-2 sm:fixed sm:bottom-4 sm:right-0 mx-2',
-			title: 'text-base title',
-			description: 'text-xs mt-1 description',
-
-			default: colorClasses[colors?.default ?? 'accent'],
-			loading: colorClasses[colors?.default ?? 'accent'],
-
-			success: colorClasses[colors?.success ?? 'green'],
-			error: colorClasses[colors?.error ?? 'red'],
-			info: colorClasses[colors?.info ?? 'blue']
-		}
-	}}
-	position="bottom-right"
-/>

src/lib/website/foxui/sonner/index.ts

···
-export { default as Toaster } from './Toaster.svelte';
-export { toast } from 'svelte-sonner';

src/lib/website/foxui/utils.ts

···
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

src/lib/website/utils.ts

···
-import { type Collection, type DownloadedData } from './types';
+import {
+	type Collection,
+	type DownloadedData,
+	type IndividualCollections,
+	type ListCollections
+} from './types';
 import { getRecord, listRecords, resolveHandle } from '$lib/oauth/atproto';
 import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
 import { data } from './data';
 
 export function parseUri(uri: string) {
-	// at://did:plc:257wekqxg4hyapkq6k47igmp/link.flo-bit.dev/3lnblfznvhr2a
 	const [did, collection, rkey] = uri.split('/').slice(2);
 	return { did, collection, rkey } as {
 		collection: `${string}.${string}.${string}`;
···
 
 	const downloadedData = {} as DownloadedData;
 
-	const promises: { collection: string; rkey?: string; record: ListRecord }[] = [];
+	const promises: {
+		collection: string;
+		rkey?: string;
+		record: Promise<ListRecord> | Promise<Record<string, ListRecord>>;
+	}[] = [];
 
 	for (const collection of Object.keys(data) as Collection[]) {
 		const cfg = data[collection];
···
 
 	for (const promise of promises) {
 		if (promise.rkey) {
-			downloadedData[promise.collection] ??= {} as Record<string, ListRecord>;
-			downloadedData[promise.collection][promise.rkey] = await promise.record;
+			downloadedData[promise.collection as IndividualCollections] ??= {} as Record<
+				string,
+				ListRecord
+			>;
+			downloadedData[promise.collection as IndividualCollections][promise.rkey] =
+				(await promise.record) as ListRecord;
 		} else {
-			downloadedData[promise.collection] ??= await promise.record;
+			downloadedData[promise.collection as ListCollections] ??= (await promise.record) as Record<
+				string,
+				ListRecord
+			>;
 		}
 	}
-
-	console.log(downloadedData);
 
 	return { did, data: JSON.parse(JSON.stringify(downloadedData)) as DownloadedData };
 }

src/routes/+layout.svelte

···
 <script lang="ts">
+	import '../app.css';
+	
 	import { ThemeToggle } from '@foxui/core';
-
-	import '../app.css';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/oauth';
-	import { gsap } from 'gsap';
-
-	import { Flip } from 'gsap/Flip';
-
-	gsap.registerPlugin(Flip);
 
 	let { children } = $props();
 

src/routes/+page.server.ts

···
+import { loadData } from '$lib/website/utils';
+
+export async function load() {
+	const mainHandle = 'flo-bit.dev';
+	const data = await loadData(mainHandle);
+	return { ...data, handle: mainHandle };
+}

src/routes/+page.svelte

···
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { page } from '$app/state';
+	import { type Item } from '$lib/types.js';
+	import Website from '$lib/Website.svelte';
 
-	onMount(async () => {
-		const data = await fetch('/api/links?link=https://bento.me/flo-bit');
-		const json = await data.json();
-		console.log(json);
-	})
+	let { data } = $props();
+	$inspect(data);
 </script>
 
-<div class="flex h-screen items-center justify-center">
-	<h1 class="text-7xl font-bold">blento</h1>
-</div>
+<Website
+	{data}
+	handle={data.handle}
+	did={data.did}
+	items={Object.values(data.data['com.example.bento']).map((i) => i.value) as Item[]}
+/>

src/routes/[handle]/+page.svelte

···
 	import { page } from '$app/state';
 	import { type Item } from '$lib/types.js';
 	import Website from '$lib/Website.svelte';
-	import WebsiteWrapper from '$lib/website/WebsiteWrapper.svelte';
 
 	let { data } = $props();
+	$inspect(data);
 </script>
 
-<WebsiteWrapper {data} handle={page.params.handle}>
-	<Website
-		handle={page.params.handle}
-		did={data.did}
-		items={Object.values(data.data['com.example.bento']).map((i) => i.value) as Item[]}
-	/>
-</WebsiteWrapper>
+<Website
+	{data}
+	handle={page.params.handle}
+	did={data.did}
+	items={Object.values(data.data['com.example.bento']).map((i) => i.value) as Item[]}
+/>

src/routes/edit/+page.server.ts

···
+import { loadData } from '$lib/website/utils';
+
+export async function load() {
+	const mainHandle = 'flo-bit.dev';
+	const data = await loadData(mainHandle);
+	return { ...data, handle: mainHandle };
+}

src/routes/edit/+page.svelte

···
+<script lang="ts">
+	import { page } from '$app/state';
+	import EditableWebsite from '$lib/EditableWebsite.svelte';
+	import { type Item } from '$lib/types.js';
+
+	let { data } = $props();
+</script>
+
+<EditableWebsite
+	handle={data.handle}
+	did={data.did}
+	{data}
+	items={Object.values(data.data['com.example.bento']).map((i) => i.value) as Item[]}
+/>