add kickstarter card

src/lib/cards/BigSocialCard/index.ts

···
 		'github',
 		'discord',
 		'linkedin',
-		'mastodon'
+		'mastodon',
+		'kickstarter'
 	],
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" /></svg>`
···
 	siWechat,
 	siLine,
 	siArchiveofourown,
+	siKickstarter,
 	type SimpleIcon
 } from 'simple-icons';
 
···
 
 	ao3: /(?:archiveofourown\.org)/i,
 
+	kickstarter: /(?:kickstarter\.com)/i,
+
 	germ: /(?:ger\.mx)/i,
 
 	tangled: /(?:tangled\.org)/i,
···
 	line: siLine,
 
 	ao3: siArchiveofourown,
+
+	kickstarter: siKickstarter,
 
 	tangled: {
 		slug: 'tangled',

src/lib/cards/KickstarterCard/CreateKickstarterCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let embedCode = $state('');
+	let errorMessage = $state('');
+
+	function parseInput(code: string): {
+		src: string | null;
+		widgetType: 'card' | 'video';
+	} {
+		const normalized = code.trim().replaceAll('&amp;', '&');
+
+		// Try iframe embed code first
+		const srcMatch = normalized.match(/src="(https:\/\/www\.kickstarter\.com\/[^"]+)"/);
+		if (srcMatch) {
+			const src = srcMatch[1];
+			const widgetType = src.includes('/widget/video') ? 'video' : 'card';
+			return { src, widgetType };
+		}
+
+		// Try plain project URL
+		const urlMatch = normalized.match(/kickstarter\.com\/projects\/([^/]+\/[^/?#\s]+)/i);
+		if (urlMatch) {
+			return {
+				src: `https://www.kickstarter.com/projects/${urlMatch[1]}/widget/card.html?v=2`,
+				widgetType: 'card'
+			};
+		}
+
+		return { src: null, widgetType: 'card' };
+	}
+
+	function validate(): boolean {
+		errorMessage = '';
+
+		const { src, widgetType } = parseInput(embedCode);
+
+		if (!src) {
+			errorMessage = 'Could not find a Kickstarter URL in the input';
+			return false;
+		}
+
+		item.cardData.src = src;
+		item.cardData.widgetType = widgetType;
+
+		if (widgetType === 'video') {
+			item.w = 4;
+			item.h = 2;
+			item.mobileW = 8;
+			item.mobileH = 4;
+		} else {
+			item.w = 4;
+			item.h = 4;
+			item.mobileW = 8;
+			item.mobileH = 8;
+		}
+
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Paste Kickstarter URL or Embed Code</Subheading>
+
+	<textarea
+		bind:value={embedCode}
+		placeholder="https://www.kickstarter.com/projects/..."
+		rows={5}
+		class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 w-full rounded-xl border px-3 py-2 font-mono text-sm"
+	></textarea>
+
+	{#if errorMessage}
+		<Alert type="error" title="Invalid embed code"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			onclick={() => {
+				if (validate()) oncreate();
+			}}
+		>
+			Create
+		</Button>
+	</div>
+</Modal>

src/lib/cards/KickstarterCard/KickstarterCard.svelte

···
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+
+	let { item, isEditing }: ContentComponentProps = $props();
+
+	let isVideo = $derived(item.cardData.widgetType === 'video');
+	let projectUrl = $derived(
+		(item.cardData.src || '').replace(/\/widget\/(card|video)\.html.*$/, '')
+	);
+</script>
+
+<iframe
+	src={item.cardData.src}
+	title="Kickstarter widget"
+	frameborder="0"
+	scrolling="no"
+	class={['absolute inset-0 h-full w-full', (!isVideo || isEditing) && 'pointer-events-none']}
+></iframe>
+
+{#if !isVideo && !isEditing}
+	<a href={projectUrl} target="_blank" rel="noopener noreferrer">
+		<div class="absolute inset-0 z-50"></div>
+		<span class="sr-only">Open Kickstarter project</span>
+	</a>
+{/if}

src/lib/cards/KickstarterCard/index.ts

···
+import type { CardDefinition } from '../types';
+import CreateKickstarterCardModal from './CreateKickstarterCardModal.svelte';
+import KickstarterCard from './KickstarterCard.svelte';
+
+const cardType = 'kickstarter';
+
+export const KickstarterCardDefinition = {
+	type: cardType,
+	contentComponent: KickstarterCard,
+	creationModalComponent: CreateKickstarterCardModal,
+	createNew: (item) => {
+		item.cardType = cardType;
+		item.cardData = { widgetType: 'card' };
+		item.w = 4;
+		item.h = 4;
+		item.mobileW = 8;
+		item.mobileH = 8;
+	},
+
+	onUrlHandler: (url, item) => {
+		const match = url.match(/kickstarter\.com\/projects\/([^/]+\/[^/?#]+)/i);
+		if (!match) return null;
+
+		item.cardData.src = `https://www.kickstarter.com/projects/${match[1]}/widget/card.html?v=2`;
+		item.cardData.widgetType = 'card';
+		item.w = 4;
+		item.h = 4;
+		item.mobileW = 8;
+		item.mobileH = 8;
+
+		return item;
+	},
+
+	defaultColor: 'transparent',
+	allowSetColor: false,
+
+	urlHandlerPriority: 10,
+
+	name: 'Kickstarter',
+	keywords: ['kickstarter', 'crowdfunding', 'campaign', 'funding'],
+	groups: ['Social'],
+	icon: `<svg class="size-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9257 17.2442C20.9257 16.3321 20.6731 15.4527 20.1362 14.6709L18.1153 11.7719L20.1362 8.87291C20.6731 8.12373 20.9257 7.21169 20.9257 6.29964C20.9257 3.88924 18.9994 2.03257 16.7258 2.03257C15.3996 2.03257 14.0733 2.71661 13.2523 3.88924L12.2418 5.32245C11.8629 3.40064 10.2524 2 8.19984 2C5.83151 2 4 3.95438 4 6.36479V17.2768C4 19.6872 5.86309 21.6416 8.19984 21.6416C10.2208 21.6416 11.7997 20.3386 12.2102 18.4494L13.0944 19.7523C13.9154 20.9901 15.2733 21.6416 16.5995 21.6416C18.9994 21.6741 20.9257 19.6546 20.9257 17.2442Z" stroke="currentColor" stroke-width="2"/>
+</svg>
+`
+} as CardDefinition & { type: typeof cardType };

src/lib/cards/index.ts

···
 import { FriendsCardDefinition } from './FriendsCard';
 import { GitHubContributorsCardDefinition } from './GitHubContributorsCard';
 import { ProductHuntCardDefinition } from './ProductHuntCard';
+import { KickstarterCardDefinition } from './KickstarterCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
···
 	// Model3DCardDefinition
 	FriendsCardDefinition,
 	GitHubContributorsCardDefinition,
-	ProductHuntCardDefinition
+	ProductHuntCardDefinition,
+	KickstarterCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/website/EditableWebsite.svelte

···
 	// svelte-ignore state_referenced_locally
 	let savedPublication = $state(JSON.stringify(data.publication));
 
-	let hasUnsavedChanges = $derived(
-		JSON.stringify(items) !== savedItems || JSON.stringify(data.publication) !== savedPublication
-	);
+	let hasUnsavedChanges = $state(false);
+
+	$effect(() => {
+		if (!hasUnsavedChanges) {
+			hasUnsavedChanges =
+				JSON.stringify(items) !== savedItems ||
+				JSON.stringify(data.publication) !== savedPublication;
+		}
+	});
 
 	// Warn user before closing tab if there are unsaved changes
 	$effect(() => {