improve youtube card

.claude/settings.local.json

···
   "permissions": {
     "allow": [
       "Bash(pnpm check:*)",
-      "mcp__ide__getDiagnostics"
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer"
     ]
   }
 }

src/lib/cards/VideoCard/index.ts

···
 	},
 	settingsComponent: VideoCardSettings,
 
-	canChange: (item) => Boolean(item.cardData.video),
-
-	change: (item) => {
-		return item;
-	},
-	name: 'Video Card',
-	sidebarButtonText: 'Video'
+	name: 'Video Card'
 } as CardDefinition & { type: 'video' };

src/lib/cards/YoutubeVideo/YoutubeCard.svelte

···
-<script lang="ts">
-	import { videoPlayer } from '../utils/YoutubeVideoPlayer.svelte';
-	import type { ContentComponentProps } from '../types';
-
-	let { item }: ContentComponentProps = $props();
-</script>
-
-<img
-	class={[
-		'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
-		item.cardData.href ? 'group-hover:scale-102' : ''
-	]}
-	src={item.cardData.poster}
-	alt=""
-/>
-<button
-	onclick={() => {
-		videoPlayer.show(item.cardData.youtubeId);
-	}}
-	class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center"
->
-	<span class="sr-only">
-		{item.cardData.hrefText ?? 'Learn more'}
-	</span>
-
-	<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 w-14" viewBox="0 0 256 180"
-		><path
-			fill="currentColor"
-			d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
-		/><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
-	>
-</button>

src/lib/cards/YoutubeVideo/index.ts src/lib/cards/YoutubeVideoCard/index.ts

···
 import type { CardDefinition } from '../types';
 import YoutubeCard from './YoutubeCard.svelte';
+import YoutubeCardSettings from './YoutubeCardSettings.svelte';
 
 export const YoutubeCardDefinition = {
 	type: 'youtubeVideo',
 	contentComponent: YoutubeCard,
+	settingsComponent: YoutubeCardSettings,
 	createNew: (card) => {
 		card.cardType = 'youtubeVideo';
 		card.cardData = {};

src/lib/cards/YoutubeVideoCard/YoutubeCard.svelte

···
+<script lang="ts">
+	import { videoPlayer } from '../utils/YoutubeVideoPlayer.svelte';
+	import type { ContentComponentProps } from '../types';
+
+	let { item }: ContentComponentProps = $props();
+
+	let isPlaying = $state(false);
+</script>
+
+{#if isPlaying && item.cardData.showInline}
+	<iframe
+		class="absolute inset-0 h-full w-full"
+		src="https://www.youtube.com/embed/{item.cardData.youtubeId}?autoplay=1"
+		title="YouTube video player"
+		frameborder="0"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+		allowfullscreen
+	></iframe>
+{:else}
+	<img
+		class={[
+			'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
+			item.cardData.href ? 'group-hover:scale-102' : ''
+		]}
+		src={item.cardData.poster}
+		alt=""
+	/>
+	<button
+		onclick={() => {
+			if (item.cardData.showInline) isPlaying = true;
+			else videoPlayer.show(item.cardData.youtubeId);
+		}}
+		class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center"
+	>
+		<span class="sr-only">
+			{item.cardData.hrefText ?? 'Learn more'}
+		</span>
+
+		<svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 w-14" viewBox="0 0 256 180"
+			><path
+				fill="currentColor"
+				d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+			/><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
+		>
+	</button>
+{/if}

src/lib/cards/YoutubeVideoCard/YoutubeCardSettings.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { Checkbox, Label } from '@foxui/core';
+
+	let { item }: { item: Item; onclose: () => void } = $props();
+</script>
+
+<div class="flex items-center space-x-2">
+	<Checkbox
+		bind:checked={
+			() => Boolean(item.cardData.showInline), (val) => (item.cardData.showInline = val)
+		}
+		id="show-inline"
+		aria-labelledby="show-inline-label"
+		variant="secondary"
+	/>
+	<Label
+		id="show-inline-label"
+		for="show-inline"
+		class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	>
+		Show video in card
+	</Label>
+</div>

src/lib/cards/index.ts

···
 import { TextCardDefinition } from './TextCard';
 import type { CardDefinition } from './types';
 import { VideoCardDefinition } from './VideoCard';
-import { YoutubeCardDefinition } from './YoutubeVideo';
+import { YoutubeCardDefinition } from './YoutubeVideoCard';
 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard';
 
 export const AllCardDefinitions = [

src/lib/cards/utils/YoutubeVideoPlayer.svelte

···
 
 <script lang="ts">
 	import { cn } from '@foxui/core';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	const { class: className }: { class?: string } = $props();
 
 	let Plyr = $state();
+
+	let player = $state();
+
 
 	onMount(async () => {
 		if (!Plyr) Plyr = (await import('plyr')).default;
···
 			player.play();
 			//player.fullscreen.enter();
 		});
-
-		return () => {
-			player.destroy();
-		};
 	});
+
+	onDestroy(() => {
+		player?.destroy();
+	})
 
 	let glow = 50;
 </script>
···
 
 <svg width="0" height="0">
 	<filter id="blur" y="-50%" x="-50%" width="300%" height="300%">
-		<feGaussianBlur in="SourceGraphic" stdDeviation={50} result="blurred" />
+		<feGaussianBlur in="SourceGraphic" stdDeviation={glow} result="blurred" />
 		<feColorMatrix type="saturate" in="blurred" values="3" />
 		<feComposite in="SourceGraphic" operator="over" />
 	</filter>

src/lib/website/EditableWebsite.svelte

···
 					</svg>
 				</Button>
 
+				{#if dev}
 				<Button
 					size="iconLg"
 					variant="ghost"
···
 						/>
 					</svg>
 				</Button>
+				{/if}
 
 				<Button
 					size="iconLg"