add signup

src/lib/atproto/UI/Button.svelte

···
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = HTMLButtonAttributes & {
+		children: () => any;
+		ref?: HTMLButtonElement | null;
+	};
+
+	let { children, ref = $bindable(), class: className, ...props }: Props = $props();
+</script>
+
+<button
+	bind:this={ref}
+	class={[
+		'bg-accent-600 hover:bg-accent-500 focus-visible:outline-accent-600 text-white',
+		'inline-flex cursor-pointer justify-center rounded-full px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	]}
+	{...props}
+>
+	{@render children()}
+</button>

src/lib/atproto/UI/HandleInput.svelte

···
+<script lang="ts">
+	import { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Combobox } from 'bits-ui';
+	import { searchActorsTypeahead } from '$lib/atproto';
+	import { Avatar } from '@foxui/core';
+
+	let results: AppBskyActorDefs.ProfileViewBasic[] = $state([]);
+
+	async function search(q: string) {
+		if (!q || q.length < 2) {
+			results = [];
+			return;
+		}
+		results = (await searchActorsTypeahead(q, 5)).actors;
+	}
+	let open = $state(false);
+
+	let {
+		value = $bindable(),
+		onselected,
+		ref = $bindable()
+	}: {
+		value: string;
+		onselected: (actor: AppBskyActorDefs.ProfileViewBasic) => void;
+		ref?: HTMLInputElement | null;
+	} = $props();
+</script>
+
+<Combobox.Root
+	type="single"
+	onOpenChangeComplete={(o) => {
+		if (!o) results = [];
+	}}
+	bind:value={
+		() => {
+			return value;
+		},
+		(val) => {
+			const profile = results.find((v) => v.handle === val);
+			if (profile) onselected?.(profile);
+
+			value = val;
+		}
+	}
+	bind:open={
+		() => {
+			return open && results.length > 0;
+		},
+		(val) => {
+			open = val;
+		}
+	}
+>
+	<Combobox.Input
+		bind:ref
+		oninput={(e) => {
+			value = e.currentTarget.value;
+			search(e.currentTarget.value);
+		}}
+		class="focus-within:outline-accent-600 dark:focus-within:outline-accent-500 dark:placeholder:text-base-400 w-full touch-none rounded-full border-0 bg-white ring-0 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 dark:bg-white/5 dark:outline-white/10"
+		placeholder="handle"
+		id=""
+		aria-label="enter your handle"
+	/>
+	<Combobox.Content
+		class="border-base-300 bg-base-50 dark:bg-base-900 dark:border-base-800 z-100 max-h-[30dvh] w-full rounded-2xl border shadow-lg"
+		sideOffset={10}
+		align="start"
+		side="top"
+	>
+		<Combobox.Viewport class="w-full p-1">
+			{#each results as actor (actor.did)}
+				<Combobox.Item
+					class="rounded-button data-highlighted:bg-accent-100 dark:data-highlighted:bg-accent-600/30 my-0.5 flex w-full cursor-pointer items-center gap-2 rounded-xl p-2 px-2"
+					value={actor.handle}
+					label={actor.handle}
+				>
+					<Avatar
+						src={actor.avatar?.replace('avatar', 'avatar_thumbnail')}
+						alt=""
+						class="size-6 rounded-full"
+					/>
+					{actor.handle}
+				</Combobox.Item>
+			{/each}
+		</Combobox.Viewport>
+	</Combobox.Content>
+</Combobox.Root>

src/lib/atproto/UI/LoginModal.svelte

···
+<script lang="ts" module>
+	export const loginModalState = $state({
+		visible: false,
+		show: () => (loginModalState.visible = true),
+		hide: () => (loginModalState.visible = false)
+	});
+</script>
+
+<script lang="ts">
+	import { login, signup } from '$lib/atproto';
+	import type { ActorIdentifier, Did } from '@atcute/lexicons';
+	import Button from './Button.svelte';
+	import { onMount, tick } from 'svelte';
+	import SecondaryButton from './SecondaryButton.svelte';
+	import HandleInput from './HandleInput.svelte';
+	import { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Avatar } from '@foxui/core';
+
+	let { signUp = true, loginOnSelect = true }: { signUp?: boolean; loginOnSelect?: boolean } =
+		$props();
+
+	let value = $state('');
+	let error: string | null = $state(null);
+	let loadingLogin = $state(false);
+	let loadingSignup = $state(false);
+
+	async function onSubmit(event?: Event) {
+		event?.preventDefault();
+		if (loadingLogin) return;
+
+		error = null;
+		loadingLogin = true;
+
+		try {
+			await login(value as ActorIdentifier);
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			loadingLogin = false;
+		}
+	}
+
+	let input: HTMLInputElement | null = $state(null);
+	let submitButton: HTMLButtonElement | null = $state(null);
+
+	$effect(() => {
+		if (!loginModalState.visible) {
+			error = null;
+			value = '';
+			loadingLogin = false;
+			selectedActor = undefined;
+		} else {
+			focusInput();
+		}
+	});
+
+	function focusInput() {
+		tick().then(() => {
+			input?.focus();
+		});
+	}
+	function focusSubmit() {
+		tick().then(() => {
+			submitButton?.focus();
+		});
+	}
+
+	let selectedActor: AppBskyActorDefs.ProfileViewBasic | undefined = $state();
+
+	let recentLogins: Record<Did, AppBskyActorDefs.ProfileViewBasic> = $state({});
+
+	onMount(() => {
+		try {
+			recentLogins = JSON.parse(localStorage.getItem('recent-logins') || '{}');
+		} catch {
+			console.error('Failed to load recent logins');
+		}
+	});
+
+	function removeRecentLogin(did: Did) {
+		try {
+			delete recentLogins[did];
+
+			localStorage.setItem('recent-logins', JSON.stringify(recentLogins));
+		} catch {
+			console.error('Failed to remove recent login');
+		}
+	}
+
+	let recentLoginsView = $state(true);
+
+	let showRecentLogins = $derived(
+		Object.keys(recentLogins).length > 0 && !loadingLogin && !selectedActor && recentLoginsView
+	);
+</script>
+
+{#if loginModalState.visible}
+	<div
+		class="fixed inset-0 z-100 w-screen overflow-y-auto"
+		aria-labelledby="modal-title"
+		role="dialog"
+		aria-modal="true"
+	>
+		<div
+			class="bg-base-50/90 dark:bg-base-950/90 fixed inset-0 backdrop-blur-sm transition-opacity"
+			onclick={() => (loginModalState.visible = false)}
+			aria-hidden="true"
+		></div>
+
+		<div class="pointer-events-none fixed inset-0 isolate z-10 w-screen overflow-y-auto">
+			<div
+				class="flex min-h-full w-screen items-end justify-center p-4 text-center sm:items-center sm:p-0"
+			>
+				<div
+					class="border-base-200 bg-base-100 dark:border-base-700 dark:bg-base-800 pointer-events-auto relative w-full transform overflow-hidden rounded-2xl border px-4 pt-4 pb-4 text-left shadow-xl transition-all sm:my-8 sm:max-w-sm sm:p-6"
+				>
+					<h3 class="text-base-900 dark:text-base-100 font-semibold" id="modal-title">
+						Login with your internet handle
+					</h3>
+
+					<div class="text-base-800 dark:text-base-200 mt-2 mb-2 text-xs font-light">
+						e.g. your bluesky account
+					</div>
+
+					<form onsubmit={onSubmit} class="mt-2 flex w-full flex-col gap-2">
+						{#if showRecentLogins}
+							<div class="mt-2 mb-2 text-sm font-medium">Recent logins</div>
+							<div class="flex flex-col gap-2">
+								{#each Object.values(recentLogins).slice(0, 4) as recentLogin (recentLogin.did)}
+									<div class="group">
+										<div
+											class="group-hover:bg-base-300 bg-base-200 dark:bg-base-700 dark:hover:bg-base-600 dark:border-base-500/50 border-base-300 relative flex h-10 w-full items-center justify-between gap-2 rounded-full border px-2 font-semibold transition-colors duration-100"
+										>
+											<div class="flex items-center gap-2">
+												<Avatar class="size-6" src={recentLogin.avatar} />
+												{recentLogin.handle}
+											</div>
+											<button
+												class="z-20 cursor-pointer"
+												onclick={() => {
+													value = recentLogin.handle;
+													selectedActor = recentLogin;
+													if (loginOnSelect) onSubmit();
+													else focusSubmit();
+												}}
+											>
+												<div class="absolute inset-0 h-full w-full"></div>
+												<span class="sr-only">login</span>
+											</button>
+
+											<button
+												onclick={() => {
+													removeRecentLogin(recentLogin.did);
+												}}
+												class="z-30 cursor-pointer rounded-full p-0.5"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="size-3"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M6 18 18 6M6 6l12 12"
+													/>
+												</svg>
+												<span class="sr-only">sign in with other account</span>
+											</button>
+										</div>
+									</div>
+								{/each}
+							</div>
+						{:else if !selectedActor}
+							<div class="mt-4 w-full">
+								<HandleInput
+									bind:value
+									onselected={(a) => {
+										selectedActor = a;
+										value = a.handle;
+										if (loginOnSelect) onSubmit();
+										else focusSubmit();
+									}}
+									bind:ref={input}
+								/>
+							</div>
+						{:else}
+							<div
+								class="bg-base-200 dark:bg-base-700 border-base-300 dark:border-base-600 mt-4 flex h-10 w-full items-center justify-between gap-2 rounded-full border px-2 font-semibold"
+							>
+								<div class="flex items-center gap-2">
+									<Avatar class="size-6" src={selectedActor.avatar} />
+									{selectedActor.handle}
+								</div>
+
+								<button
+									onclick={() => {
+										selectedActor = undefined;
+										value = '';
+									}}
+									class="cursor-pointer rounded-full p-0.5"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-3"
+									>
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									</svg>
+									<span class="sr-only">sign in with other account</span>
+								</button>
+							</div>
+						{/if}
+
+						{#if error}
+							<p class="text-accent-500 text-sm font-semibold">{error}</p>
+						{/if}
+
+						<div class="mt-4">
+							{#if showRecentLogins}
+								<div class="mt-2 mb-4 text-sm font-medium">Or login with new handle</div>
+
+								<Button
+									onclick={() => {
+										recentLoginsView = false;
+										focusInput();
+									}}
+									class="w-full">Login with new handle</Button
+								>
+							{:else}
+								<Button bind:ref={submitButton} type="submit" disabled={loadingLogin} class="w-full"
+									>{loadingLogin ? 'Loading...' : 'Login'}</Button
+								>
+							{/if}
+						</div>
+
+						{#if signUp}
+							<div
+								class="border-base-200 dark:border-base-700 text-base-800 dark:text-base-200 mt-4 border-t pt-4 text-sm leading-7"
+							>
+								Don't have an account?
+								<div class="mt-3">
+									<SecondaryButton
+										onclick={async () => {
+											loadingSignup = true;
+											await signup();
+										}}
+										disabled={loadingSignup}
+										class="w-full">{loadingSignup ? 'Loading...' : 'Sign Up'}</SecondaryButton
+									>
+								</div>
+							</div>
+						{/if}
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/atproto/UI/SecondaryButton.svelte

···
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = HTMLButtonAttributes & {
+		children: () => any;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<button
+	class={[
+		'bg-base-300 dark:bg-base-700 dark:text-base-50 dark:hover:bg-base-600 hover:bg-base-200 focus-visible:outline-base-600 text-black transition-colors duration-100',
+		'inline-flex cursor-pointer justify-center rounded-full px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	]}
+	{...props}
+>
+	{@render children()}
+</button>

src/lib/atproto/auth.svelte.ts

···
 	WellKnownHandleResolver
 } from '@atcute/identity-resolver';
 import { Client } from '@atcute/client';
-import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
 import { dev } from '$app/environment';
 import { replaceState } from '$app/navigation';
···
 import { getDetailedProfile } from './methods';
 import { signUpPDS } from './settings';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
 export const user = $state({
 	agent: null as OAuthUserAgent | null,
···
 	}
 }
 
-async function finalizeLogin(params: URLSearchParams, did?: Did) {
+async function finalizeLogin(params: SvelteURLSearchParams, did?: Did) {
 	try {
 		const { session } = await finalizeAuthorization(params);
 		replaceState(location.pathname + location.search, {});

src/lib/atproto/image-helper.ts

···
+import { getCDNImageBlobUrl, uploadBlob } from './methods';
+
+export function compressImage(
+	file: File | Blob,
+	maxSize: number = 900 * 1024,
+	maxDimension: number = 2048
+): Promise<{
+	blob: Blob;
+	aspectRatio: {
+		width: number;
+		height: number;
+	};
+}> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			if (!e.target?.result) {
+				return reject(new Error('Failed to read file.'));
+			}
+			img.src = e.target.result as string;
+		};
+
+		reader.onerror = (err) => reject(err);
+		reader.readAsDataURL(file);
+
+		img.onload = () => {
+			let width = img.width;
+			let height = img.height;
+
+			// If image is already small enough, return original
+			if (file.size <= maxSize) {
+				console.log('skipping compression+resizing, already small enough');
+				return resolve({
+					blob: file,
+					aspectRatio: {
+						width,
+						height
+					}
+				});
+			}
+
+			if (width > maxDimension || height > maxDimension) {
+				if (width > height) {
+					height = Math.round((maxDimension / width) * height);
+					width = maxDimension;
+				} else {
+					width = Math.round((maxDimension / height) * width);
+					height = maxDimension;
+				}
+			}
+
+			// Create a canvas to draw the image
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return reject(new Error('Failed to get canvas context.'));
+			ctx.drawImage(img, 0, 0, width, height);
+
+			// Use WebP for both compression and transparency support
+			let quality = 0.9;
+
+			function attemptCompression() {
+				canvas.toBlob(
+					(blob) => {
+						if (!blob) {
+							return reject(new Error('Compression failed.'));
+						}
+						if (blob.size <= maxSize || quality < 0.3) {
+							resolve({
+								blob,
+								aspectRatio: {
+									width,
+									height
+								}
+							});
+						} else {
+							quality -= 0.1;
+							attemptCompression();
+						}
+					},
+					'image/webp',
+					quality
+				);
+			}
+
+			attemptCompression();
+		};
+
+		img.onerror = (err) => reject(err);
+	});
+}
+
+export async function checkAndUploadImage(
+	recordWithImage: Record<string, any>,
+	key: string = 'image',
+	// e.g. /api/image-proxy?url=
+	imageProxy?: string
+) {
+	if (!recordWithImage[key]) return;
+
+	// Already uploaded as blob
+	if (typeof recordWithImage[key] === 'object' && recordWithImage[key].$type === 'blob') {
+		return;
+	}
+
+	if (typeof recordWithImage[key] === 'string' && imageProxy) {
+		const proxyUrl = imageProxy + encodeURIComponent(recordWithImage[key]);
+		const response = await fetch(proxyUrl);
+		if (!response.ok) {
+			throw Error('failed to get image from image proxy');
+		}
+
+		const blob = await response.blob();
+		const compressedBlob = await compressImage(blob);
+
+		recordWithImage[key] = await uploadBlob({ blob: compressedBlob.blob });
+
+		return;
+	}
+
+	if (recordWithImage[key]?.blob) {
+		if (recordWithImage[key].objectUrl) {
+			URL.revokeObjectURL(recordWithImage[key].objectUrl);
+		}
+		const compressedBlob = await compressImage(recordWithImage[key].blob);
+		recordWithImage[key] = await uploadBlob({ blob: compressedBlob.blob });
+	}
+}
+
+export function getImageFromRecord(
+	recordWithImage: Record<string, any> | undefined,
+	did: string,
+	key: string = 'image'
+): string | undefined {
+	if (!recordWithImage?.[key]) return;
+
+	if (typeof recordWithImage[key] === 'object' && recordWithImage[key].$type === 'blob') {
+		return getCDNImageBlobUrl({ did, blob: recordWithImage[key] });
+	}
+
+	if (recordWithImage[key].objectUrl) return recordWithImage[key].objectUrl;
+
+	if (recordWithImage[key].blob) {
+		recordWithImage[key].objectUrl = URL.createObjectURL(recordWithImage[key].blob);
+		return recordWithImage[key].objectUrl;
+	}
+
+	return recordWithImage[key];
+}

src/lib/atproto/index.ts

···
 	uploadBlob,
 	describeRepo,
 	getBlobURL,
-	getImageBlobUrl,
-	searchActorsTypeahead
+	getCDNImageBlobUrl,
+	searchActorsTypeahead,
+	getAuthorFeed
 } from './methods';

src/lib/atproto/metadata.ts

···
 import { resolve } from '$app/paths';
-import { blobs, collections, rpcCalls, SITE } from './settings';
+import { permissions, SITE } from './settings';
 
 function constructScope() {
-	const repos = collections.map((collection) => 'repo:' + collection).join(' ');
+	const repos = permissions.collections.map((collection) => 'repo:' + collection).join(' ');
 
 	let rpcs = '';
-	for (const [key, value] of Object.entries(rpcCalls)) {
+	for (const [key, value] of Object.entries(permissions.rpc ?? {})) {
 		if (Array.isArray(value)) {
 			rpcs += value.map((lxm) => 'rpc?lxm=' + lxm + '&aud=' + key).join(' ');
 		} else {
 			rpcs += 'rpc?lxm=' + value + '&aud=' + key;
 		}
 	}
+
 	let blobScope: string | undefined = undefined;
-	if (Array.isArray(blobs)) {
-		blobScope = 'blob?' + blobs.map((b) => 'accept=' + b).join('&');
-	} else if (blobs) {
-		blobScope = 'blob:' + blobs;
+	if (Array.isArray(permissions.blobs)) {
+		blobScope = 'blob?' + permissions.blobs.map((b) => 'accept=' + b).join('&');
+	} else if (permissions.blobs) {
+		blobScope = 'blob:' + permissions.blobs;
 	}
 
 	const scope = ['atproto', repos, rpcs, blobScope].filter((v) => v?.trim()).join(' ');

src/lib/atproto/methods.ts

···
-import type { Did, Handle } from '@atcute/lexicons';
+import { parseResourceUri, type Did, type Handle } from '@atcute/lexicons';
 import { user } from './auth.svelte';
+import type { AllowedCollection } from './settings';
 import {
 	CompositeDidDocumentResolver,
 	CompositeHandleResolver,
···
 	WellKnownHandleResolver
 } from '@atcute/identity-resolver';
 import { Client, simpleFetchHandler } from '@atcute/client';
-import type { AppBskyActorDefs } from '@atcute/bluesky';
-import { redirect } from '@sveltejs/kit';
+import { type AppBskyActorDefs } from '@atcute/bluesky';
 
 export type Collection = `${string}.${string}.${string}`;
+import * as TID from '@atcute/tid';
 
+/**
+ * Parses an AT Protocol URI into its components.
+ * @param uri - The AT URI to parse (e.g., "at://did:plc:xyz/app.bsky.feed.post/abc123")
+ * @returns An object containing the repo, collection, and rkey or undefined if not an AT uri
+ */
 export function parseUri(uri: string) {
-	const [did, collection, rkey] = uri.replace('at://', '').split('/');
-	return { did, collection, rkey } as {
-		collection: `${string}.${string}.${string}`;
-		rkey: string;
-		did: Did;
-	};
+	const parts = parseResourceUri(uri);
+	if (!parts.ok) return;
+	return parts.value;
 }
 
+/**
+ * Resolves a handle to a DID using DNS and HTTP methods.
+ * @param handle - The handle to resolve (e.g., "alice.bsky.social")
+ * @returns The DID associated with the handle
+ */
 export async function resolveHandle({ handle }: { handle: Handle }) {
 	const handleResolver = new CompositeHandleResolver({
 		methods: {
···
 		}
 	});
 
-	try {
-		const data = await handleResolver.resolve(handle);
-		return data;
-	} catch (error) {
-		redirect(307, '/?error=handle_not_found&handle=' + handle);
-	}
+	const data = await handleResolver.resolve(handle);
+	return data;
 }
 
 const didResolver = new CompositeDidDocumentResolver({
···
 	}
 });
 
+/**
+ * Gets the PDS (Personal Data Server) URL for a given DID.
+ * @param did - The DID to look up
+ * @returns The PDS service endpoint URL
+ * @throws If no PDS is found in the DID document
+ */
 export async function getPDS(did: Did) {
-	const doc = await didResolver.resolve(did as `did:plc:${string}` | `did:web:${string}`);
+	const doc = await didResolver.resolve(did as Did<'plc'> | Did<'web'>);
 	if (!doc.service) throw new Error('No PDS found');
 	for (const service of doc.service) {
 		if (service.id === '#atproto_pds') {
···
 	}
 }
 
+/**
+ * Fetches a detailed Bluesky profile for a user.
+ * @param data - Optional object with did and client
+ * @param data.did - The DID to fetch the profile for (defaults to current user)
+ * @param data.client - The client to use (defaults to public Bluesky API)
+ * @returns The profile data or undefined if not found
+ */
 export async function getDetailedProfile(data?: { did?: Did; client?: Client }) {
 	data ??= {};
 	data.did ??= user.did;
···
 	return response.data;
 }
 
-export async function getAuthorFeed(data?: {
-	did?: Did;
-	client?: Client;
-	filter?: string;
-	limit?: number;
-}) {
-	data ??= {};
-	data.did ??= user.did;
-
-	if (!data.did) throw new Error('Error getting detailed profile: no did');
-
-	data.client ??= new Client({
-		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
-	});
-
-	const response = await data.client.get('app.bsky.feed.getAuthorFeed', {
-		params: { actor: data.did, filter: data.filter ?? 'posts_with_media', limit: data.limit || 100 }
-	});
-
-	if (!response.ok) return;
-
-	return response.data;
-}
-
+/**
+ * Creates an AT Protocol client for a user's PDS.
+ * @param did - The DID of the user
+ * @returns A client configured for the user's PDS
+ * @throws If the PDS cannot be found
+ */
 export async function getClient({ did }: { did: Did }) {
 	const pds = await getPDS(did);
 	if (!pds) throw new Error('PDS not found');
···
 	return client;
 }
 
+/**
+ * Lists records from a repository collection with pagination support.
+ * @param did - The DID of the repository (defaults to current user)
+ * @param collection - The collection to list records from
+ * @param cursor - Pagination cursor for continuing from a previous request
+ * @param limit - Maximum number of records to return (default 100, set to 0 for all records)
+ * @param client - The client to use (defaults to user's PDS client)
+ * @returns An array of records from the collection
+ */
 export async function listRecords({
 	did,
 	collection,
 	cursor,
-	limit = 0,
+	limit = 100,
 	client
 }: {
 	did?: Did;
···
 			params: {
 				repo: did,
 				collection,
-				limit: limit || 100,
+				limit: !limit || limit > 100 ? 100 : limit,
 				cursor: currentCursor
 			}
 		});
···
 	return allRecords;
 }
 
+/**
+ * Fetches a single record from a repository.
+ * @param did - The DID of the repository (defaults to current user)
+ * @param collection - The collection the record belongs to
+ * @param rkey - The record key (defaults to "self")
+ * @param client - The client to use (defaults to user's PDS client)
+ * @returns The record data
+ */
 export async function getRecord({
 	did,
 	collection,
-	rkey,
+	rkey = 'self',
 	client
 }: {
 	did?: Did;
···
 	client?: Client;
 }) {
 	did ??= user.did;
-	rkey ??= 'self';
 
 	if (!collection) {
 		throw new Error('Missing parameters for getRecord');
···
 		}
 	});
 
-	if (!record.ok) return;
-
 	return JSON.parse(JSON.stringify(record.data));
 }
 
+/**
+ * Creates or updates a record in the current user's repository.
+ * Only accepts collections that are configured in permissions.
+ * @param collection - The collection to write to (must be in permissions.collections)
+ * @param rkey - The record key (defaults to "self")
+ * @param record - The record data to write
+ * @returns The response from the PDS
+ * @throws If the user is not logged in
+ */
 export async function putRecord({
 	collection,
-	rkey,
+	rkey = 'self',
 	record
 }: {
-	collection: Collection;
-	rkey: string;
+	collection: AllowedCollection;
+	rkey?: string;
 	record: Record<string, unknown>;
 }) {
 	if (!user.client || !user.did) throw new Error('No rpc or did');
···
 	return response;
 }
 
-export async function deleteRecord({ collection, rkey }: { collection: Collection; rkey: string }) {
+/**
+ * Deletes a record from the current user's repository.
+ * Only accepts collections that are configured in permissions.
+ * @param collection - The collection the record belongs to (must be in permissions.collections)
+ * @param rkey - The record key (defaults to "self")
+ * @returns True if the deletion was successful
+ * @throws If the user is not logged in
+ */
+export async function deleteRecord({
+	collection,
+	rkey = 'self'
+}: {
+	collection: AllowedCollection;
+	rkey: string;
+}) {
 	if (!user.client || !user.did) throw new Error('No profile or rpc or did');
 
 	const response = await user.client.post('com.atproto.repo.deleteRecord', {
···
 	return response.ok;
 }
 
+/**
+ * Uploads a blob to the current user's PDS.
+ * @param blob - The blob data to upload
+ * @returns The blob metadata including ref, mimeType, and size, or undefined on failure
+ * @throws If the user is not logged in
+ */
 export async function uploadBlob({ blob }: { blob: Blob }) {
 	if (!user.did || !user.client) throw new Error("Can't upload blob: Not logged in");
 
 	const blobResponse = await user.client.post('com.atproto.repo.uploadBlob', {
-		input: blob,
-		data: {
+		params: {
 			repo: user.did
-		}
+		},
+		input: blob
 	});
 
-	if (!blobResponse?.ok) {
-		return;
-	}
+	if (!blobResponse?.ok) return;
 
 	const blobInfo = blobResponse?.data.blob as {
 		$type: 'blob';
···
 	return blobInfo;
 }
 
+/**
+ * Gets metadata about a repository.
+ * @param client - The client to use
+ * @param did - The DID of the repository (defaults to current user)
+ * @returns Repository metadata or undefined on failure
+ */
 export async function describeRepo({ client, did }: { client?: Client; did?: Did }) {
 	did ??= user.did;
 	if (!did) {
···
 	return repo.data;
 }
 
+/**
+ * Constructs a URL to fetch a blob directly from a user's PDS.
+ * @param did - The DID of the user who owns the blob
+ * @param blob - The blob reference object
+ * @returns The URL to fetch the blob
+ */
 export async function getBlobURL({
 	did,
 	blob
···
 	return `${pds}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${blob.ref.$link}`;
 }
 
-export function getImageBlobUrl({
+/**
+ * Constructs a Bluesky CDN URL for an image blob.
+ * @param did - The DID of the user who owns the blob (defaults to current user)
+ * @param blob - The blob reference object
+ * @returns The CDN URL for the image in webp format
+ */
+export function getCDNImageBlobUrl({
 	did,
 	blob
 }: {
-	did: string;
+	did?: string;
 	blob: {
 		$type: 'blob';
 		ref: {
···
 		};
 	};
 }) {
-	if (!did || !blob?.ref?.$link) return '';
+	did ??= user.did;
+
 	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@webp`;
 }
 
+/**
+ * Searches for actors with typeahead/autocomplete functionality.
+ * @param q - The search query
+ * @param limit - Maximum number of results (default 10)
+ * @param host - The API host to use (defaults to public Bluesky API)
+ * @returns An object containing matching actors and the original query
+ */
 export async function searchActorsTypeahead(
 	q: string,
 	limit: number = 10,
···
 
 	return { actors: response.data.actors, q };
 }
+
+/**
+ * Return a TID based on current time
+ *
+ * @returns TID for current time
+ */
+export function createTID() {
+	return TID.now();
+}
+
+export async function getAuthorFeed(data?: {
+	did?: Did;
+	client?: Client;
+	filter?: string;
+	limit?: number;
+}) {
+	data ??= {};
+	data.did ??= user.did;
+
+	if (!data.did) throw new Error('Error getting detailed profile: no did');
+
+	data.client ??= new Client({
+		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
+	});
+
+	const response = await data.client.get('app.bsky.feed.getAuthorFeed', {
+		params: { actor: data.did, filter: data.filter ?? 'posts_with_media', limit: data.limit || 100 }
+	});
+
+	if (!response.ok) return;
+
+	return response.data;
+}

src/lib/atproto/settings.ts

···
-export const SITE = 'https://blento.app';
+export const SITE = 'https://flo-bit.dev';
+
+type Permissions = {
+	collections: readonly string[];
+	rpc: Record<string, string | string[]>;
+	blobs: readonly string[];
+};
+
+export const permissions = {
+	// collections you can create/delete/update
+
+	// example: only allow create and delete
+	// collections: ['xyz.statusphere.status?action=create&action=update'],
+	collections: [
+		'app.blento.card',
+		'app.blento.page',
+		'app.blento.settings',
+		'app.blento.comment',
+		'app.blento.guestbook.entry',
+		'site.standard.publication',
+		'site.standard.document',
+		'xyz.statusphere.status'
+	],
+
+	// what types of authenticated proxied requests you can make to services
+
+	// example: allow authenticated proxying to bsky appview to get a users liked posts
+	//rpc: {'did:web:api.bsky.app#bsky_appview': ['app.bsky.feed.getActorLikes']}
+	rpc: {},
+
+	// what types of blobs you can upload to a users PDS
 
-export const collections: string[] = [
-	'app.blento.card',
-	'app.blento.page',
-	'app.blento.settings',
-	'app.blento.comment',
-	'app.blento.guestbook.entry',
-	'site.standard.publication',
-	'site.standard.document',
-	'xyz.statusphere.status'
-];
+	// example: allowing video and html uploads
+	// blobs: ['video/*', 'text/html']
+	// example: allowing all blob types
+	// blobs: ['*/*']
+	blobs: ['*/*']
+} as const satisfies Permissions;
 
-export const rpcCalls: Record<string, string | string[]> = {
-	//'did:web:api.bsky.app#bsky_appview': ['app.bsky.actor.getProfile']
-};
+// Extract base collection name (before any query params)
+type ExtractCollectionBase<T extends string> = T extends `${infer Base}?${string}` ? Base : T;
 
-export const blobs = ['*/*'] as string | string[] | undefined;
+export type AllowedCollection = ExtractCollectionBase<(typeof permissions.collections)[number]>;
 
-export const signUpPDS = 'https://pds.rip/';
+// which PDS to use for signup
+// ATTENTION: pds.rip is only for development, all accounts get deleted automatically after a week
+export const signUpPDS = 'https://selfhosted.social/';

src/lib/cards/EventCard/EventCard.svelte

···
 	import { parseUri } from '$lib/atproto';
 	import { browser } from '$app/environment';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+	import type { Did } from '@atcute/lexicons';
 
 	let { item }: ContentComponentProps = $props();
 
···
 	let parsedUri = $derived(item.cardData?.uri ? parseUri(item.cardData.uri) : null);
 
 	onMount(async () => {
-		if (!eventData && item.cardData?.uri) {
+		if (!eventData && item.cardData?.uri && parsedUri?.repo) {
 			const loadedData = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
-				did: parsedUri?.did ?? ('' as `did:${string}:${string}`),
+				did: parsedUri.repo as Did,
 				handle: ''
 			})) as Record<string, EventData> | undefined;
 
···
 	let eventUrl = $derived(() => {
 		if (eventData?.url) return eventData.url;
 		if (parsedUri) {
-			return `https://smokesignal.events/${parsedUri.did}/${parsedUri.rkey}`;
+			return `https://smokesignal.events/${parsedUri.repo}/${parsedUri.rkey}`;
 		}
 		return '#';
 	});
···
 		const header = eventData.media.find((m) => m.role === 'header');
 		if (!header?.content?.ref?.$link) return null;
 		return {
-			url: `https://cdn.bsky.app/img/feed_thumbnail/plain/${parsedUri.did}/${header.content.ref.$link}@jpeg`,
+			url: `https://cdn.bsky.app/img/feed_thumbnail/plain/${parsedUri.repo}/${header.content.ref.$link}@jpeg`,
 			alt: header.alt || eventData.name
 		};
 	});

src/lib/cards/EventCard/index.ts

···
 			const uri = item.cardData?.uri;
 			if (!uri) continue;
 
-			const { did, rkey } = parseUri(uri);
+			const parsedUri = parseUri(uri);
+			if (!parsedUri || !parsedUri.rkey || !parsedUri.repo) continue;
 
 			try {
 				const response = await fetch(
-					`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(did)}&record_key=${encodeURIComponent(rkey)}`
+					`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(parsedUri.repo)}&record_key=${encodeURIComponent(parsedUri.rkey)}`
 				);
 
 				if (response.ok) {

src/lib/cards/LivestreamCard/index.ts

···
-import { user, listRecords, getImageBlobUrl } from '$lib/atproto';
+import { user, listRecords, getCDNImageBlobUrl } from '$lib/atproto';
 import type { CardDefinition } from '../types';
 import LivestreamCard from './LivestreamCard.svelte';
 import LivestreamEmbedCard from './LivestreamEmbedCard.svelte';
···
 				createdAt: latest.value.createdAt,
 				title: latest.value?.title as string,
 				thumb: latest.value?.thumb?.ref?.$link
-					? getImageBlobUrl({ blob: latest.value.thumb, did })
+					? getCDNImageBlobUrl({ blob: latest.value.thumb, did })
 					: undefined,
 				href: latest.value?.canonicalUrl || latest.value.url,
 				online: undefined

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

···
 		getIsMobile
 	} from '$lib/website/context';
 	import { CardDefinitionsByType } from '..';
-	import { getImageBlobUrl, parseUri } from '$lib/atproto';
+	import { getCDNImageBlobUrl, parseUri } from '$lib/atproto';
 
 	import { ImageMasonry } from '@foxui/visual';
 
···
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
 			.map((i: PhotoItem) => {
-				const { did: photoDid } = parseUri(i.uri);
+				const item = parseUri(i.uri);
 				return {
-					src: getImageBlobUrl({ did: photoDid, blob: i.value.photo }),
+					src: getCDNImageBlobUrl({ did: item?.repo, blob: i.value.photo }),
 					name: '',
 					width: i.value.aspectRatio.width,
 					height: i.value.aspectRatio.height,

src/lib/cards/PhotoGalleryCard/index.ts

···
 import type { CardDefinition } from '../types';
 import { getRecord, listRecords, parseUri } from '$lib/atproto';
 import PhotoGalleryCard from './PhotoGalleryCard.svelte';
+import type { Did } from '@atcute/lexicons';
 
 interface GalleryItem {
 	value: {
···
 		for (const item of items) {
 			if (!item.cardData.galleryUri) continue;
 
-			const { did, collection } = parseUri(item.cardData.galleryUri);
+			const parsedUri = parseUri(item.cardData.galleryUri);
 
-			if (collection === 'social.grain.gallery') {
+			if (parsedUri?.collection === 'social.grain.gallery') {
 				const itemCollection = 'social.grain.gallery.item';
 
 				if (!galleryItems[itemCollection]) {
 					galleryItems[itemCollection] = (await listRecords({
-						did,
+						did: parsedUri.repo as Did,
 						collection: itemCollection
 					})) as unknown as GalleryItem[];
 				}
···
 					.filter((i) => i.value.gallery === item.cardData.galleryUri)
 					.map(async (i) => {
 						const itemData = parseUri(i.value.item);
-						const record = await getRecord(itemData);
+						if (!itemData) return null;
+						const record = await getRecord({
+							did: itemData.repo as Did,
+							collection: itemData.collection!,
+							rkey: itemData.rkey
+						});
 						return { ...record, value: { ...record.value, ...i.value } };
 					});
 

src/lib/cards/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte

···
 	import type { ContentComponentProps } from '$lib/cards/types';
 	import { getAdditionalUserData } from '$lib/website/context';
 	import type { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Avatar } from '@foxui/core';
 
 	let { item }: ContentComponentProps = $props();
 
···
 				class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 accent:bg-accent-200/30 accent:hover:bg-accent-200/50 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
 				target="_blank"
 			>
-				<img
-					src={profile.avatar}
-					class="bg-base-200 dark:bg-base-700 accent:bg-accent-300 aspect-square size-28 rounded-full"
-					alt=""
-					loading="lazy"
-				/>
+				<Avatar src={profile.avatar} class="size-28" alt="" />
 				<div class="text-md line-clamp-1 max-w-full text-center font-bold">
 					{profile.displayName || profile.handle}
 				</div>

src/lib/cards/StandardSiteDocumentListCard/index.ts

···
 				if (!publications[site]) {
 					const siteParts = parseUri(site);
 
-					const publicationRecord = await getRecord(siteParts);
+					if (!siteParts) continue;
+
+					const publicationRecord = await getRecord({
+						did: siteParts.repo as `did:${string}:${string}`,
+						collection: siteParts.collection!,
+						rkey: siteParts.rkey
+					});
 
 					publications[site] = publicationRecord.value.url as string;
 				}

src/lib/helper.ts

···
 import type { Item, WebsiteData } from './types';
 import { COLUMNS, margin, mobileMargin } from '$lib';
 import { CardDefinitionsByType } from './cards';
-import { deleteRecord, getImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
-import { toast } from '@foxui/core';
+import { deleteRecord, getCDNImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
 import * as TID from '@atcute/tid';
 
 export function clamp(value: number, min: number, max: number): number {
···
 	if (objectWithImage[key].objectUrl) return objectWithImage[key].objectUrl;
 
 	if (typeof objectWithImage[key] === 'object' && objectWithImage[key].$type === 'blob') {
-		return getImageBlobUrl({ did, blob: objectWithImage[key] });
+		return getCDNImageBlobUrl({ did, blob: objectWithImage[key] });
 	}
 	return objectWithImage[key];
 }

src/lib/website/Account.svelte

···
 	import { user, login, logout } from '$lib/atproto';
 	import type { WebsiteData } from '$lib/types';
 	import type { ActorIdentifier } from '@atcute/lexicons';
-	import { Button, Popover } from '@foxui/core';
+	import { Avatar, Button, Popover } from '@foxui/core';
 
 	let {
 		data
···
 		<Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
 			{#snippet child({ props })}
 				<button {...props}>
-					<img src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
+					<Avatar src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
 				</button>
 			{/snippet}
 

src/lib/website/EditableProfile.svelte

···
 	import { getImage, compressImage, getProfilePosition } from '$lib/helper';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
-	import { Button } from '@foxui/core';
+	import { Avatar, Button } from '@foxui/core';
 	import { getIsMobile } from './context';
 	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
···
 			onmouseleave={() => (isHoveringAvatar = false)}
 			onclick={handleFileInputClick}
 		>
-			{#if getAvatarUrl()}
-				<img
-					class="border-base-400 dark:border-base-800 size-full shrink-0 rounded-full border object-cover"
-					src={getAvatarUrl()}
-					alt=""
-				/>
-			{:else}
-				<div class="bg-base-300 dark:bg-base-700 size-full rounded-full"></div>
-			{/if}
+			<Avatar
+				src={getAvatarUrl()}
+				class={[
+					'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
+					profilePosition === 'side' && '@5xl/wrapper:size-44'
+				]}
+			/>
 
 			<!-- Hover overlay -->
 			<div

src/lib/website/EmptyState.svelte

···
 <script lang="ts">
-	import { login, user } from '$lib/atproto';
 	import BaseCard from '$lib/cards/BaseCard/BaseCard.svelte';
 	import Card from '$lib/cards/Card/Card.svelte';
 	import type { Item, WebsiteData } from '$lib/types';
-	import type { ActorIdentifier } from '@atcute/lexicons';
-	import { Button } from '@foxui/core';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 			mobileW: 8,
 			mobileH: 3,
 			cardType: 'text',
-			color: 'red',
+			color: 'cyan',
 			cardData: {
 				text: `## No blento yet!`,
 				textAlign: 'center',
···
 		// Bluesky social icon
 		items.push({
 			id: 'empty-bluesky',
-			x: 0,
-			y: 2,
+			x: 6,
+			y: 0,
 			w: 2,
 			h: 2,
 			mobileX: 0,

src/lib/website/FloatingEditButton.svelte

···
 	import type { WebsiteData } from '$lib/types';
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 	</div>
 {:else if showLoginOnBlento}
 	<div class="fixed bottom-6 left-6 z-49">
-		<BlueskyLogin
-			login={async (handle) => {
-				await login(handle as ActorIdentifier);
-				return true;
-			}}
-		/>
+		<Button size="lg" onclick={() => loginModalState.show()}>Login</Button>
 	</div>
 {:else if showEditBlentoButton}
 	<div class="fixed bottom-6 left-6 z-49">

src/lib/website/Profile.svelte

···
 	import { page } from '$app/state';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import { Avatar } from '@foxui/core';
 
 	let {
 		data,
···
 				}
 			}}
 		>
-			{#if data.publication?.icon || data.profile.avatar}
-				<img
-					class={[
-						'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
-						profilePosition === 'side' && '@5xl/wrapper:size-44'
-					]}
-					src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
-					alt=""
-				/>
-			{:else}
-				<div
-					class={[
-						'bg-base-300 dark:bg-base-700 size-32 shrink-0 rounded-full',
-						profilePosition === 'side' && '@5xl/wrapper:size-44'
-					]}
-				></div>
-			{/if}
+			<Avatar
+				src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
+				class={[
+					'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
+					profilePosition === 'side' && '@5xl/wrapper:size-44'
+				]}
+			/>
 		</a>
 
 		<div class="text-4xl font-bold wrap-anywhere">

src/lib/website/Website.svelte

···
 		>
 			<div></div>
 			<div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
-				{#if data.cards.length === 0}
+				{#if data.cards.length === 0 && data.page === 'blento.self'}
 					<EmptyState {data} />
 				{:else}
 					{#each data.cards.toSorted(sortItems) as item (item.id)}

src/lib/website/load.ts

···
 		result.page = 'blento.' + page;
 
 		result.publication = (result.publications as Awaited<ReturnType<typeof listRecords>>).find(
-			(v) => parseUri(v.uri).rkey === result.page
+			(v) => parseUri(v.uri)?.rkey === result.page
 		)?.value;
 		result.publication ??= {
 			name: result.profile?.displayName || result.profile?.handle,
···
 
 	parsedResult.publication = (
 		parsedResult.publications as Awaited<ReturnType<typeof listRecords>>
-	).find((v) => parseUri(v.uri).rkey === parsedResult.page)?.value;
+	).find((v) => parseUri(v.uri)?.rkey === parsedResult.page)?.value;
 	parsedResult.publication ??= {
 		name: profile?.displayName || profile?.handle,
 		description: profile?.description

src/routes/+layout.svelte

···
 	import YoutubeVideoPlayer, { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
+	import LoginModal from '$lib/atproto/UI/LoginModal.svelte';
 
 	let { children } = $props();
 
···
 {#if videoPlayer.id}
 	<YoutubeVideoPlayer />
 {/if}
+
+<LoginModal />