From 0e929d793b9eb01710a4c9c212f556d1ad1d9864 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Fri, 22 May 2026 11:12:01 -0700
Subject: [PATCH] add ButtondownCard

---
 src/lib/cards/index.ts                        |   4 +-
 .../ButtondownCard/ButtondownCard.svelte      | 118 ++++++++++++++++++
 .../ButtondownCardSettings.svelte             |  53 ++++++++
 src/lib/cards/social/ButtondownCard/index.ts  |  36 ++++++
 4 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/cards/social/ButtondownCard/ButtondownCard.svelte
 create mode 100644 src/lib/cards/social/ButtondownCard/ButtondownCardSettings.svelte
 create mode 100644 src/lib/cards/social/ButtondownCard/index.ts

diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 6be995c..defa917 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -64,6 +64,7 @@ import { KichRecipeCollectionCardDefinition } from './social/KichRecipeCollectio
 import { KichCookingLogCardDefinition } from './social/KichCookingLogCard';
 import { SecretImageCardDefinition } from './media/SecretImageCard';
 import { RPGActorCardDefinition } from './social/RPGActorCard';
+import { ButtondownCardDefinition } from './social/ButtondownCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
@@ -133,7 +134,8 @@ export const AllCardDefinitions = [
 	KichRecipeCollectionCardDefinition,
 	KichCookingLogCardDefinition,
 	SecretImageCardDefinition,
-	RPGActorCardDefinition
+	RPGActorCardDefinition,
+	ButtondownCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(
diff --git a/src/lib/cards/social/ButtondownCard/ButtondownCard.svelte b/src/lib/cards/social/ButtondownCard/ButtondownCard.svelte
new file mode 100644
index 0000000..5f4edaa
--- /dev/null
+++ b/src/lib/cards/social/ButtondownCard/ButtondownCard.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../../types';
+
+	let { item }: ContentComponentProps = $props();
+
+	let email = $state('');
+	let status = $state<'idle' | 'submitting' | 'success' | 'error'>('idle');
+
+	const username = $derived((item.cardData.username as string | undefined)?.trim() ?? '');
+	const title = $derived((item.cardData.title as string | undefined) || 'Subscribe');
+	const description = $derived(item.cardData.description as string | undefined);
+	const buttonText = $derived((item.cardData.buttonText as string | undefined) || 'Subscribe');
+	const placeholder = $derived(
+		(item.cardData.placeholder as string | undefined) || 'you@example.com'
+	);
+	const successMessage = $derived(
+		(item.cardData.successMessage as string | undefined) || 'Thanks! Check your inbox to confirm.'
+	);
+
+	const action = $derived(
+		username
+			? `https://buttondown.com/api/emails/embed-subscribe/${encodeURIComponent(username)}`
+			: ''
+	);
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (!username || !email.trim() || status === 'submitting') return;
+
+		status = 'submitting';
+		try {
+			const body = new FormData();
+			body.append('email', email.trim());
+			body.append('embed', '1');
+			await fetch(action, { method: 'POST', mode: 'no-cors', body });
+			status = 'success';
+			email = '';
+		} catch {
+			status = 'error';
+		}
+	}
+</script>
+
+<div class="flex h-full w-full flex-col justify-center gap-2 p-4">
+	{#if status === 'success'}
+		<div class="flex h-full flex-col items-center justify-center gap-2 text-center">
+			<div
+				class="bg-accent-100 text-accent-700 dark:bg-accent-900/40 dark:text-accent-200 accent:bg-white/20 accent:text-white flex size-10 items-center justify-center rounded-full"
+				aria-hidden="true"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2.5"
+					stroke="currentColor"
+					class="size-5"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+				</svg>
+			</div>
+			<p class="text-base-900 dark:text-base-100 accent:text-base-900 text-sm font-medium">
+				{successMessage}
+			</p>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-1">
+			<h3
+				class="text-base-900 dark:text-base-100 accent:text-base-900 text-xl leading-tight font-semibold @sm:text-2xl"
+			>
+				{title}
+			</h3>
+			{#if description}
+				<p class="text-base-600 dark:text-base-400 accent:text-base-800 text-sm leading-snug">
+					{description}
+				</p>
+			{/if}
+		</div>
+
+		{#if username}
+			<form
+				onsubmit={handleSubmit}
+				action={action || undefined}
+				method="post"
+				target="_blank"
+				class="mt-2 flex flex-col gap-2 @sm:flex-row"
+			>
+				<input
+					type="email"
+					name="email"
+					required
+					autocomplete="email"
+					bind:value={email}
+					{placeholder}
+					disabled={status === 'submitting'}
+					class="bg-base-50 dark:bg-base-900/60 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-500 accent:bg-white/90 accent:border-white/40 accent:text-base-900 accent:placeholder:text-base-500 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-accent-500/30 w-full flex-1 rounded-lg border px-3 py-2 text-sm transition focus:ring-2 focus:outline-none"
+				/>
+				<button
+					type="submit"
+					disabled={status === 'submitting' || !email.trim()}
+					class="bg-accent-500 hover:bg-accent-600 dark:bg-accent-400 dark:hover:bg-accent-300 dark:text-base-950 accent:bg-base-900 accent:hover:bg-base-800 accent:text-white inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold text-white transition disabled:cursor-not-allowed disabled:opacity-60"
+				>
+					{status === 'submitting' ? 'Subscribing…' : buttonText}
+				</button>
+			</form>
+
+			{#if status === 'error'}
+				<p class="accent:text-red-900 text-xs text-red-500 dark:text-red-400">
+					Something went wrong. Please try again.
+				</p>
+			{/if}
+		{:else}
+			<p class="text-base-500 dark:text-base-400 accent:text-base-700 mt-2 text-xs italic">
+				Set your Buttondown username in card settings to enable signups.
+			</p>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/cards/social/ButtondownCard/ButtondownCardSettings.svelte b/src/lib/cards/social/ButtondownCard/ButtondownCardSettings.svelte
new file mode 100644
index 0000000..2c8ac0f
--- /dev/null
+++ b/src/lib/cards/social/ButtondownCard/ButtondownCardSettings.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { SettingsComponentProps } from '../../types';
+	import { Input } from '@foxui/core';
+	import { SettingsSection, SettingsField } from '../../_settings';
+
+	let { item = $bindable() }: SettingsComponentProps = $props();
+</script>
+
+<div class="flex flex-col gap-6">
+	<SettingsSection title="Buttondown">
+		<SettingsField
+			label="Username"
+			description="Your Buttondown username, found in your Buttondown account URL."
+		>
+			<Input
+				bind:value={item.cardData.username}
+				placeholder="your-newsletter"
+				spellcheck={false}
+				autocapitalize="off"
+			/>
+		</SettingsField>
+	</SettingsSection>
+
+	<SettingsSection title="Content">
+		<SettingsField label="Title">
+			<Input bind:value={item.cardData.title} placeholder="Subscribe" />
+		</SettingsField>
+		<SettingsField label="Description">
+			<Input
+				bind:value={item.cardData.description}
+				placeholder="Get updates straight to your inbox."
+			/>
+		</SettingsField>
+	</SettingsSection>
+
+	<SettingsSection title="Form">
+		<SettingsField label="Email placeholder">
+			<Input bind:value={item.cardData.placeholder} placeholder="you@example.com" />
+		</SettingsField>
+		<SettingsField label="Button text">
+			<Input bind:value={item.cardData.buttonText} placeholder="Subscribe" />
+		</SettingsField>
+		<SettingsField
+			label="Success message"
+			description="Shown to visitors after they submit the form."
+		>
+			<Input
+				bind:value={item.cardData.successMessage}
+				placeholder="Thanks! Check your inbox to confirm."
+			/>
+		</SettingsField>
+	</SettingsSection>
+</div>
diff --git a/src/lib/cards/social/ButtondownCard/index.ts b/src/lib/cards/social/ButtondownCard/index.ts
new file mode 100644
index 0000000..e2fceca
--- /dev/null
+++ b/src/lib/cards/social/ButtondownCard/index.ts
@@ -0,0 +1,36 @@
+import type { CardDefinition } from '../../types';
+import ButtondownCard from './ButtondownCard.svelte';
+import ButtondownCardSettings from './ButtondownCardSettings.svelte';
+
+export const ButtondownCardDefinition: CardDefinition = {
+	type: 'buttondown',
+	contentComponent: ButtondownCard,
+	settingsComponent: ButtondownCardSettings,
+	createNew: (card) => {
+		card.cardData = {
+			title: 'Subscribe',
+			description: 'Get updates straight to your inbox.',
+			buttonText: 'Subscribe',
+			placeholder: 'you@example.com',
+			successMessage: 'Thanks! Check your inbox to confirm.'
+		};
+		card.w = 4;
+		card.h = 2;
+		card.mobileW = 8;
+		card.mobileH = 3;
+	},
+
+	defaultColor: 'base',
+	allowSetColor: true,
+	canHaveLabel: false,
+
+	minW: 3,
+	minH: 2,
+	maxW: 8,
+	maxH: 4,
+
+	name: 'Buttondown',
+	keywords: ['buttondown', 'newsletter', 'subscribe', 'mailing list', 'email', 'signup'],
+	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="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>`
+};
-- 
2.51.2