refactor pt8

.claude/settings.local.json

···
 {
-  "permissions": {
-    "allow": [
-      "Bash(pnpm check:*)",
-      "mcp__ide__getDiagnostics",
-      "mcp__plugin_svelte_svelte__svelte-autofixer",
-      "mcp__plugin_svelte_svelte__list-sections",
-      "Bash(pkill:*)",
-      "Bash(timeout 8 pnpm dev:*)",
-      "Bash(git checkout:*)",
-      "Bash(npx svelte-kit:*)",
-      "Bash(ls:*)"
-    ]
-  }
+	"permissions": {
+		"allow": [
+			"Bash(pnpm check:*)",
+			"mcp__ide__getDiagnostics",
+			"mcp__plugin_svelte_svelte__svelte-autofixer",
+			"mcp__plugin_svelte_svelte__list-sections",
+			"Bash(pkill:*)",
+			"Bash(timeout 8 pnpm dev:*)",
+			"Bash(git checkout:*)",
+			"Bash(npx svelte-kit:*)",
+			"Bash(ls:*)",
+			"Bash(pnpm format:*)"
+		]
+	}
 }

AGENTS.md

···
 
 ## Testing Guidelines
 
-- There is no dedicated test runner yet. Use `pnpm check` and `pnpm lint` before submitting changes.
+- There is no dedicated test runner yet.
+- **Before submitting changes, you must:**
+  1. Run `pnpm check` - Must complete with **0 errors and 0 warnings**
+  2. Run `pnpm format` - Format all code with Prettier
+  3. Run `pnpm lint` - Ensure no linting errors
 - For UI changes, verify key flows manually (login, card editing, save/load, and route navigation across `[handle]` pages).
 
 ## Commit & Pull Request Guidelines

CLAUDE.md

···
 - `pnpm format` - Format code with Prettier
 - `pnpm deploy` - Build and deploy to Cloudflare Workers
 
+## Code Quality Requirements
+
+Before submitting changes:
+
+1. **Run `pnpm check`** - Must complete with 0 errors and 0 warnings
+2. **Run `pnpm format`** - Format all code with Prettier
+
 ## Architecture
 
 ### Tech Stack

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 		item: Item;
 		ondelete: () => void;
 		onsetsize: (newW: number, newH: number) => void;
-		onshowsettings?: () => void;
 	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
 	let {
···
 		children,
 		ref = $bindable(null),
 		onsetsize,
-		onshowsettings,
 		ondelete,
 		...rest
 	}: BaseEditingCardProps = $props();
···
 				]}
 			>
 				<div
-					class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 z-[100] inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
+					class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 z-100 inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
 				>
 					{#if cardDef.allowSetColor !== false}
 						<Popover bind:open={colorPopoverOpen}>

src/lib/cards/BigSocialCard/CreateBigSocialCardModal.svelte

···
 <script lang="ts">
 	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
 	import type { CreationModalComponentProps } from '../types';
-	import { detectPlatform, platformPatterns, platformsData } from '.';
+	import { detectPlatform, platformsData } from '.';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
 

src/lib/cards/BlueskyMediaCard/BlueskyMediaCard.svelte

···
 <script lang="ts">
 	import { getDidContext } from '$lib/website/context';
-	import { getImageBlobUrl } from '$lib/atproto';
 	import type { ContentComponentProps } from '../types';
 	import Video from './Video.svelte';
 
-	let { item = $bindable(), ...rest }: ContentComponentProps = $props();
+	let { item = $bindable() }: ContentComponentProps = $props();
 
 	const did = getDidContext();
-
-	function getSrc() {
-		if (item.cardData.objectUrl) return item.cardData.objectUrl;
-
-		if (item.cardData.image && typeof item.cardData.image === 'object') {
-			return getImageBlobUrl({ did, blob: item.cardData.image });
-		}
-		return item.cardData.image;
-	}
 </script>
 
 {#if item.cardData.image}

src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte

···
 
 	let did = getDidContext();
 
-	let mediaList: { fullsize: string; isVideo?: boolean; playlist?: string, thumbnail?: string }[] = $state([]);
+	let mediaList: { fullsize: string; isVideo?: boolean; playlist?: string; thumbnail?: string }[] =
+		$state([]);
 
 	let isLoading = $state(true);
 
···
 		const authorFeed = await getAuthorFeed({ did });
 
 		for (let post of authorFeed?.feed ?? []) {
-			let images = post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined
+			let images =
+				post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined;
 
 			for (let image of images?.images ?? []) {
 				mediaList.push(image);
 			}
 
-			if (post.post.embed?.$type === 'app.bsky.embed.video#view' && post.post.embed.thumbnail && post.post.embed.playlist) {
+			if (
+				post.post.embed?.$type === 'app.bsky.embed.video#view' &&
+				post.post.embed.thumbnail &&
+				post.post.embed.playlist
+			) {
 				mediaList.push({
 					...post.post.embed,
 					isVideo: true,

src/lib/cards/BlueskyMediaCard/Video.svelte

···
 </script>
 
 <img src={video.thumbnail} class="absolute inset-0 -z-10 h-full w-full object-cover" alt="" />
-<!-- svelte-ignore a11y_media_has_caption -->
 <video
 	bind:this={element}
 	muted

src/lib/cards/BlueskyMediaCard/index.ts

···
 export const BlueskyMediaCardDefinition = {
 	type: 'blueskyMedia',
 	contentComponent: BlueskyMediaCard,
-	createNew: (card) => {},
+	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
 	sidebarButtonText: 'Bluesky Media',
 	sidebarComponent: SidebarItemBlueskyMediaCard

src/lib/cards/BlueskyProfileCard/index.ts

···
 export const BlueskyProfileCardDefinition = {
 	type: 'blueskyProfile',
 	contentComponent: BlueskyProfileCard,
-	createNew: (card) => {
-		// card.w = 4;
-		// card.mobileW = 8;
-		// card.h = 4;
-		// card.mobileH = 8;
-	}
+	createNew: () => {}
 } as CardDefinition & { type: 'blueskyProfile' };

src/lib/cards/EmbedCard/CreateEmbedCardModal.svelte

···
 	async function checkUrl() {
 		errorMessage = '';
 		try {
-			const domain = new URL(item.cardData.href);
-		} catch (error) {
+			new URL(item.cardData.href);
+		} catch {
 			errorMessage = 'Invalid URL!';
 			return false;
 		}

src/lib/cards/FluidTextCard/FluidTextCard.svelte

···
 		let sunrays: FBO;
 		let sunraysTemp: FBO;
 
-		const blurProgram = new Program(gl, blurVertexShader, blurShader, createWebGLProgram, getUniforms);
-		const copyProgram = new Program(gl, baseVertexShader, copyShader, createWebGLProgram, getUniforms);
-		const clearProgram = new Program(gl, baseVertexShader, clearShader, createWebGLProgram, getUniforms);
-		const colorProgram = new Program(gl, baseVertexShader, colorShader, createWebGLProgram, getUniforms);
-		const splatProgram = new Program(gl, baseVertexShader, splatShader, createWebGLProgram, getUniforms);
-		const advectionProgram = new Program(gl, baseVertexShader, advectionShader, createWebGLProgram, getUniforms);
-		const divergenceProgram = new Program(gl, baseVertexShader, divergenceShader, createWebGLProgram, getUniforms);
-		const curlProgram = new Program(gl, baseVertexShader, curlShader, createWebGLProgram, getUniforms);
-		const vorticityProgram = new Program(gl, baseVertexShader, vorticityShader, createWebGLProgram, getUniforms);
-		const pressureProgram = new Program(gl, baseVertexShader, pressureShader, createWebGLProgram, getUniforms);
-		const gradienSubtractProgram = new Program(gl, baseVertexShader, gradientSubtractShader, createWebGLProgram, getUniforms);
-		const sunraysMaskProgram = new Program(gl, baseVertexShader, sunraysMaskShader, createWebGLProgram, getUniforms);
-		const sunraysProgram = new Program(gl, baseVertexShader, sunraysShader, createWebGLProgram, getUniforms);
+		const blurProgram = new Program(
+			gl,
+			blurVertexShader,
+			blurShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const copyProgram = new Program(
+			gl,
+			baseVertexShader,
+			copyShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const clearProgram = new Program(
+			gl,
+			baseVertexShader,
+			clearShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const colorProgram = new Program(
+			gl,
+			baseVertexShader,
+			colorShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const splatProgram = new Program(
+			gl,
+			baseVertexShader,
+			splatShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const advectionProgram = new Program(
+			gl,
+			baseVertexShader,
+			advectionShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const divergenceProgram = new Program(
+			gl,
+			baseVertexShader,
+			divergenceShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const curlProgram = new Program(
+			gl,
+			baseVertexShader,
+			curlShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const vorticityProgram = new Program(
+			gl,
+			baseVertexShader,
+			vorticityShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const pressureProgram = new Program(
+			gl,
+			baseVertexShader,
+			pressureShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const gradienSubtractProgram = new Program(
+			gl,
+			baseVertexShader,
+			gradientSubtractShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const sunraysMaskProgram = new Program(
+			gl,
+			baseVertexShader,
+			sunraysMaskShader,
+			createWebGLProgram,
+			getUniforms
+		);
+		const sunraysProgram = new Program(
+			gl,
+			baseVertexShader,
+			sunraysShader,
+			createWebGLProgram,
+			getUniforms
+		);
 
-		const displayMaterial = new Material(gl, baseVertexShader, displayShaderSource, compileShader, createWebGLProgram, getUniforms);
+		const displayMaterial = new Material(
+			gl,
+			baseVertexShader,
+			displayShaderSource,
+			compileShader,
+			createWebGLProgram,
+			getUniforms
+		);
 
 		function getResolution(resolution: number) {
 			let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight;

src/lib/cards/GIFCard/GiphySearchModal.svelte

···
 
 	<div class="mt-4 flex-1 overflow-y-auto">
 		{#if isLoading && displayResults.length === 0}
-			<div class="flex h-[300px] items-center justify-center">
+			<div class="flex h-75 items-center justify-center">
 				<p class="text-base-500">Loading...</p>
 			</div>
 		{:else if displayResults.length > 0}

src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte

···
 	import type { ContentComponentProps } from '../../types';
 	import { onMount, onDestroy } from 'svelte';
 
-	let { item }: ContentComponentProps = $props();
-
 	let canvas: HTMLCanvasElement;
 	let container: HTMLDivElement;
 	let ctx: CanvasRenderingContext2D | null = null;

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

···
-import type { CardDefinition } from '$lib/cards/types';
+import type { CardDefinition, ContentComponentProps } from '$lib/cards/types';
+import type { Component } from 'svelte';
 import DinoGameCard from './DinoGameCard.svelte';
 import SidebarItemDinoGameCard from './SidebarItemDinoGameCard.svelte';
 
 export const DinoGameCardDefinition = {
 	type: 'dino-game',
-	contentComponent: DinoGameCard,
+	contentComponent: DinoGameCard as unknown as Component<ContentComponentProps>,
 	sidebarComponent: SidebarItemDinoGameCard,
 	allowSetColor: true,
 	createNew: (card) => {

src/lib/cards/GameCards/TetrisCard/TetrisCard.svelte

···
 <script lang="ts">
-	import type { ContentComponentProps } from '../../types';
 	import { onMount, onDestroy } from 'svelte';
 	import Tetris8BitMusic from './Tetris8Bit.mp3';
-
-	let { item }: ContentComponentProps = $props();
 
 	let canvas: HTMLCanvasElement;
 	let container: HTMLDivElement;
···
 
 			oscillator.start(audioCtx.currentTime);
 			oscillator.stop(audioCtx.currentTime + duration);
-		} catch (e) {
+		} catch {
 			// Audio not supported
 		}
 	}

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

···
 //Music by DJARTMUSIC - The Return Of The 8-bit Era
 //https://pixabay.com/de/music/videospiele-the-return-of-the-8-bit-era-301292/
 
-import type { CardDefinition } from '../../types';
+import type { CardDefinition, ContentComponentProps } from '../../types';
 import TetrisCard from './TetrisCard.svelte';
 import SidebarItemTetrisCard from './SidebarItemTetrisCard.svelte';
+import type { Component } from 'svelte';
 
 export const TetrisCardDefinition = {
 	type: 'tetris',
-	contentComponent: TetrisCard,
+	contentComponent: TetrisCard as unknown as Component<ContentComponentProps>,
 	sidebarComponent: SidebarItemTetrisCard,
 	allowSetColor: true,
 	defaultColor: 'accent',

src/lib/cards/GitHubProfileCard/GitHubProfileCard.svelte

···
 	import GithubContributionsGraph from './GithubContributionsGraph.svelte';
 	import { Button } from '@foxui/core';
 	import { browser } from '$app/environment';
-	import { fade } from 'svelte/transition';
 
 	let { item }: ContentComponentProps = $props();
 
 	const data = getAdditionalUserData();
 
-	let isLoaded = $state(false);
 	// svelte-ignore state_referenced_locally
 	let contributionsData = $state(
 		(data[item.cardType] as GithubProfileLoadedData)?.[item.cardData.user]
···
 				if (response.ok) {
 					contributionsData = await response.json();
 					data[item.cardType] ??= {};
-					data[item.cardType][item.cardData.user] = contributionsData;
+					(data[item.cardType] as GithubProfileLoadedData)[item.cardData.user] = contributionsData;
 				}
 			} catch (error) {
 				console.error('Failed to fetch GitHub contributions:', error);
 			}
 		}
-		isLoaded = true;
 	});
 
 	let isMobile = getIsMobile();

src/lib/cards/ImageCard/ImageCard.svelte

···
 	import { getImageBlobUrl } from '$lib/atproto';
 	import type { ContentComponentProps } from '../types';
 
-	let { item = $bindable(), ...rest }: ContentComponentProps = $props();
+	let { item = $bindable() }: ContentComponentProps = $props();
 
 	const did = getDidContext();
 

src/lib/cards/LinkCard/EditingLinkCard.svelte

···
 	import { getIsMobile } from '$lib/website/context';
 	import type { ContentComponentProps } from '../types';
 	import PlainTextEditor from '../utils/PlainTextEditor.svelte';
-	import { onMount } from 'svelte';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
···
 		let domain: string;
 		try {
 			domain = new URL(item.cardData.href).hostname;
-		} catch (error) {
+		} catch {
 			return;
 		}
 		item.cardData.domain = domain;
···
 			item.cardData.title = data.title || '';
 			item.cardData.image = data.images?.[0] || '';
 			item.cardData.favicon = data.favicons?.[0] || undefined;
-		} catch (error) {
+		} catch {
 			return;
 		}
 	}
-
-	$inspect(hasFetched);
 
 	$effect(() => {
 		if (hasFetched !== false || isFetchingMetadata) {
···
 					placeholder="Title here"
 				/>
 			{:else}
-				<span class={'text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold'}>
+				<span class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold">
 					Loading data...
 				</span>
 			{/if}

src/lib/cards/LivestreamCard/LivestreamCard.svelte

···
 	let isLoaded = $state(false);
 
 	const data = getAdditionalUserData();
-	// svelte-ignore state_referenced_locally
+
 	let latestLivestream = $state(
 		data[item.cardType] as
 			| {

src/lib/cards/MapCard/CreateMapCardModal.svelte

···
 			} else {
 				throw new Error('response not ok');
 			}
-		} catch (error) {
+		} catch {
 			errorMessage = "Couldn't find that location!";
 			return false;
 		} finally {

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

···
 
 	import { ImageMasonry } from '@foxui/visual';
 
+	interface PhotoItem {
+		uri: string;
+		value: {
+			photo: { $type: 'blob'; ref: { $link: string } };
+			aspectRatio: { width: number; height: number };
+			position?: number;
+		};
+	}
+
 	let { item }: { item: Item } = $props();
 
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
-	let feed = $state((data[item.cardType] as any)?.[item.cardData.galleryUri]);
+	let feed = $state(
+		(data[item.cardType] as Record<string, PhotoItem[]> | undefined)?.[item.cardData.galleryUri]
+	);
 
 	let did = getDidContext();
 	let handle = getHandleContext();
···
 				(await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
 					did,
 					handle
-				})) as any
+				})) as Record<string, PhotoItem[]> | undefined
 			)?.[item.cardData.galleryUri];
 
 			console.log(feed);
···
 
 	let images = $derived(
 		feed
-			?.toSorted((a, b) => {
+			?.toSorted((a: PhotoItem, b: PhotoItem) => {
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
-			.map((i) => {
-				const { did } = parseUri(i.uri);
+			.map((i: PhotoItem) => {
+				const { did: photoDid } = parseUri(i.uri);
 				return {
-					src: getImageBlobUrl({ did, blob: i.value.photo }),
+					src: getImageBlobUrl({ did: photoDid, blob: i.value.photo }),
+					name: '',
 					width: i.value.aspectRatio.width,
 					height: i.value.aspectRatio.height,
 					position: i.value.position ?? 0
 				};
 			})
 	);
-	$inspect(images);
+
 	let isMobile = getIsMobile();
 </script>
 
 <div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
-	{#each (feed ?? []).slice(0, 20) as photo}{/each}
-
 	<ImageMasonry
 		images={images ?? []}
 		showNames={false}

src/lib/cards/PhotoGalleryCard/index.ts

···
 import { getRecord, listRecords, parseUri } from '$lib/atproto';
 import PhotoGalleryCard from './PhotoGalleryCard.svelte';
 
+interface GalleryItem {
+	value: {
+		gallery: string;
+		item: string;
+		position?: number;
+	};
+}
+
 export const PhotoGalleryCardDefinition = {
 	type: 'photoGallery',
 	contentComponent: PhotoGalleryCard,
···
 	loadData: async (items) => {
 		const itemsData: Record<string, unknown[]> = {};
 
-		const galleryItems: Record<string, unknown[] | undefined> = {
+		const galleryItems: Record<string, GalleryItem[] | undefined> = {
 			'social.grain.gallery.item': undefined
 		};
 
···
 				const itemCollection = 'social.grain.gallery.item';
 
 				if (!galleryItems[itemCollection]) {
-					galleryItems[itemCollection] = await listRecords({
+					galleryItems[itemCollection] = (await listRecords({
 						did,
 						collection: itemCollection
-					});
+					})) as unknown as GalleryItem[];
 				}
 
-				const images = galleryItems['social.grain.gallery.item']
-					?.filter((i) => i.value.gallery === item.cardData.galleryUri)
+				const galleryItemsList = galleryItems['social.grain.gallery.item'];
+				if (!galleryItemsList) continue;
+
+				const images = galleryItemsList
+					.filter((i) => i.value.gallery === item.cardData.galleryUri)
 					.map(async (i) => {
-						const itemData = parseUri(i.value.item as string);
+						const itemData = parseUri(i.value.item);
 						const record = await getRecord(itemData);
 						return { ...record, value: { ...record.value, ...i.value } };
 					});

src/lib/cards/PopfeedReviews/Rating.svelte

···
 {/snippet}
 
 <div class={cn('text-accent-500 flex', className)}>
-	{#each Array(fullStars) as _}
+	{#each Array(fullStars)}
 		{@render star('text-accent-500')}
 	{/each}
 	{#if hasHalfStar}
 		{@render halfStar()}
 	{/if}
-	{#each Array(emptyStars) as _}
+	{#each Array(emptyStars)}
 		{@render star('text-base-400')}
 	{/each}
 </div>

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

···
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
 	const profiles = data[item.cardType] as AppBskyActorDefs.ProfileViewDetailed[];
-
-	$inspect(profiles);
 </script>
 
 <div class="flex h-full flex-col">

src/lib/cards/StandardSiteDocumentListCard/BlogEntry.svelte

···
 <script lang="ts">
-	import { RelativeTime } from '@foxui/time';
 	import DateTime from './DateTime.svelte';
 
 	let {

src/lib/cards/StatusphereCard/SettingsStatusphereCard.svelte

···
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
 	let record = $state(data[item.cardType] as any);
-
-	let animated = $derived(emojiToNotoAnimatedWebp(record.value.status));
 </script>
 
 <EmojiPicker

src/lib/cards/StatusphereCard/StatusphereCard.svelte

···
 	import { getAdditionalUserData } from '$lib/website/context';
 	import { emojiToNotoAnimatedWebp } from '.';
 
-	import icons from './icons.json';
-
 	let { item }: { item: Item } = $props();
 
 	const data = getAdditionalUserData();

src/lib/cards/TealFMPlaysCard/AlbumArt.svelte

···
 <script lang="ts">
-	let { releaseMbId, alt }: { releaseMbId: string; alt: string } = $props();
+	let { releaseMbId, alt }: { releaseMbId?: string; alt: string } = $props();
 
 	let isLoading = $state(true);
 	let hasError = $state(false);

src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte

···
 	import AlbumArt from './AlbumArt.svelte';
 	import { RelativeTime } from '@foxui/time';
 
+	interface Artist {
+		artistName: string;
+	}
+
+	interface PlayValue {
+		releaseMbId?: string;
+		trackName: string;
+		playedTime?: string;
+		artists?: Artist[];
+		originUrl?: string;
+	}
+
+	interface Play {
+		value: PlayValue;
+	}
+
 	let { item }: { item: Item } = $props();
 
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
-	let feed = $state(data[item.cardType] as any);
+	let feed = $state(data[item.cardType] as Play[] | undefined);
 
 	let did = getDidContext();
 	let handle = getHandleContext();
···
 		feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
 			did,
 			handle
-		})) as any;
+		})) as Play[] | undefined;
 
 		data[item.cardType] = feed;
 	});
 
 	function isNumeric(str: string) {
 		if (typeof str != 'string') return false;
-		return !isNaN(str) && !isNaN(parseFloat(str));
+		return !isNaN(Number(str)) && !isNaN(parseFloat(str));
 	}
 </script>
 
-{#snippet musicItem(play)}
+{#snippet musicItem(play: Play)}
 	<div class="flex w-full items-center gap-3">
 		<div class="size-10 shrink-0">
 			<AlbumArt releaseMbId={play.value.releaseMbId} alt="" />

src/lib/cards/VideoCard/VideoCard.svelte

···
 </script>
 
 {#key item.cardData.video || item.cardData.objectUrl}
-	<!-- svelte-ignore a11y_media_has_caption -->
 	<video
 		bind:this={element}
 		muted

src/lib/cards/utils/MarkdownTextEditor.svelte

···
 	import TurndownService from 'turndown';
 	import { RichTextLink } from './extensions/RichTextLink';
 	import type { Item } from '$lib/types';
-	import { textAlignClasses, verticalAlignClasses } from '../TextCard';
 
 	let element: HTMLElement | undefined = $state();
-
-	let loaded = $state(false);
 
 	let {
 		editor = $bindable(),
···
 				handleDOMEvents: { drop: () => false }
 			}
 		});
-
-		loaded = true;
 	});
 
 	onDestroy(() => {

src/lib/cards/utils/extensions/RichTextLink.ts

···
  */
 const RichTextLink = Link.extend<RichTextLinkOptions>({
 	inclusive: false,
-	addOptions() {
+	addOptions(): LinkOptions {
 		return {
 			...this.parent?.(),
 			openOnClick: 'whenNotEditable'
-		};
+		} as LinkOptions;
 	},
 	addAttributes() {
 		return {

src/lib/components/bluesky-post/index.ts

···
 		embed: post.embed
 			? ({
 					type: blueskyEmbedTypeToEmbedType(post.embed?.$type),
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					images: post.embed?.images?.map((image: any) => ({
+					// Cast to any to handle union type - properties are conditionally accessed
+					images: (post.embed as any)?.images?.map((image: any) => ({
 						alt: image.alt,
 						thumb: image.thumb,
 						aspectRatio: image.aspectRatio,
 						fullsize: image.fullsize
 					})),
-					external: post.embed?.external
+					external: (post.embed as any)?.external
 						? {
-								href: post.embed.external.uri,
-								title: post.embed.external.title,
-								description: post.embed.external.description,
-								thumb: post.embed.external.thumb
+								href: (post.embed as any).external.uri,
+								title: (post.embed as any).external.title,
+								description: (post.embed as any).external.description,
+								thumb: (post.embed as any).external.thumb
 							}
 						: undefined,
-					video: post.embed
+					video: (post.embed as any)?.playlist
 						? {
-								playlist: post.embed.playlist,
-								thumb: post.embed.thumbnail,
-								alt: post.embed.alt,
-								aspectRatio: post.embed.aspectRatio
+								playlist: (post.embed as any).playlist,
+								thumb: (post.embed as any).thumbnail,
+								alt: (post.embed as any).alt,
+								aspectRatio: (post.embed as any).aspectRatio
 							}
 						: undefined
 				} as PostEmbed)
···
 	};
 }
 
+interface MentionFeature {
+	$type: 'app.bsky.richtext.facet#mention';
+	did: string;
+}
+
+interface LinkFeature {
+	$type: 'app.bsky.richtext.facet#link';
+	uri: string;
+}
+
+interface TagFeature {
+	$type: 'app.bsky.richtext.facet#tag';
+	tag: string;
+}
+
+type Feature = MentionFeature | LinkFeature | TagFeature;
+
 const renderSegment = (segment: RichtextSegment, baseUrl: string) => {
 	const { text, features } = segment;
 
···
 	}
 
 	// segments can have multiple features, use the first one
-	const feature = features[0];
+	const feature = features[0] as Feature;
 
 	const createLink = (href: string, text: string) => {
 		return `<a target="_blank" rel="noopener noreferrer nofollow" href="${encodeURI(href)}">${text}</a>`;
···
 
 	switch (feature.$type) {
 		case 'app.bsky.richtext.facet#mention':
-			return createLink(`${baseUrl}/profile/${segment.handle}`, segment.text);
+			return createLink(`${baseUrl}/profile/${feature.did}`, segment.text);
 		case 'app.bsky.richtext.facet#link':
 			return createLink(feature.uri, segment.text);
 		case 'app.bsky.richtext.facet#tag':
-			return createLink(`${baseUrl}/hashtag/${segment.tag}`, segment.text);
+			return createLink(`${baseUrl}/hashtag/${feature.tag}`, segment.text);
 		default:
 			return `<span>${text}</span>`;
 	}

src/lib/components/post/Post.svelte

···
 <script lang="ts">
 	import Embed from './embeds/Embed.svelte';
-	import { cn, Avatar, Prose } from '@foxui/core';
+	import { cn, Prose } from '@foxui/core';
 	import type { WithChildren, WithElementRef } from 'bits-ui';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { PostData } from '.';

src/lib/components/post/embeds/Video.svelte

···
 		: 'aspect-ratio: 16 / 9'}
 	class="border-base-300 dark:border-base-400/40 w-full max-w-full overflow-hidden rounded-2xl border"
 >
-	<!-- svelte-ignore a11y_media_has_caption -->
 	<video bind:this={element} class="h-full w-full" aria-label={data.video.alt}></video>
 </div>
 

src/lib/website/EditableWebsite.svelte

···
 	} = $props();
 
 	let imageDragOver = $state(false);
-	let imageDragPosition: { x: number; y: number } | null = $state(null);
 
 	// svelte-ignore state_referenced_locally
 	let items: Item[] = $state(data.cards);
···
 			await savePage(data, items, publication);
 
 			publication = JSON.stringify(data.publication);
-		} catch (error) {
+		} catch {
 			toast.error('Error saving page!');
 		} finally {
 			isSaving = false;
···
 	let showSettings = $state(false);
 
 	let debugPoint = $state({ x: 0, y: 0 });
-
-	let linkPopoverOpen = $state(false);
 
 	function getDragXY(
 		e: DragEvent & {
···
 
 		if (linkValue === url) {
 			linkValue = '';
-			linkPopoverOpen = false;
 		}
 	}
 
···
 			event.stopPropagation();
 
 			imageDragOver = true;
-			imageDragPosition = { x: event.clientX, y: event.clientY };
 		}
 	}
 
···
 		event.preventDefault();
 		event.stopPropagation();
 		imageDragOver = false;
-		imageDragPosition = null;
 	}
 
 	async function handleImageDrop(event: DragEvent) {
···
 		const dropX = event.clientX;
 		const dropY = event.clientY;
 		imageDragOver = false;
-		imageDragPosition = null;
 
 		if (!event.dataTransfer?.files?.length) return;
 

src/routes/all/+page.svelte

···
 <script lang="ts">
-	import { createEmptyCard, refreshData } from '$lib/helper.js';
+	import { createEmptyCard } from '$lib/helper.js';
 	import Website from '$lib/website/Website.svelte';
 
 	let { data } = $props();
-
-	$inspect(data.profiles);
 </script>
 
 <Website