From 5045d70bf7be280d92467f1fbe79d4140f44af04 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Tue, 25 Nov 2025 00:36:12 +0100
Subject: [PATCH] feat: add form and layout components to shared-ui (Tier 6b)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New molecules:
- ModalFooter: Standardized modal footer with button layout
- DataCard: Generic card for displaying data items (memos, decks, etc.)
- PageHeader: Standardized page header with title, description, actions

New organisms:
- FormModal: Modal with built-in form handling, validation, loading states

All components use Svelte 5 snippets for flexible slot patterns.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/shared-ui/src/index.ts               |   5 +-
 .../shared-ui/src/molecules/DataCard.svelte   | 154 ++++++++++++++++++
 .../src/molecules/ModalFooter.svelte          |  85 ++++++++++
 .../shared-ui/src/molecules/PageHeader.svelte | 139 ++++++++++++++++
 packages/shared-ui/src/molecules/index.ts     |   5 +
 .../shared-ui/src/organisms/FormModal.svelte  | 117 +++++++++++++
 packages/shared-ui/src/organisms/index.ts     |   1 +
 7 files changed, 505 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared-ui/src/molecules/DataCard.svelte
 create mode 100644 packages/shared-ui/src/molecules/ModalFooter.svelte
 create mode 100644 packages/shared-ui/src/molecules/PageHeader.svelte
 create mode 100644 packages/shared-ui/src/organisms/FormModal.svelte

diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts
index 4f08f1e03..1eacc976c 100644
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@@ -20,8 +20,11 @@ export { SkeletonBox, SkeletonText } from './molecules';
 // Feedback
 export { EmptyState } from './molecules';
 
+// Layout
+export { ModalFooter, DataCard, PageHeader } from './molecules';
+
 // Organisms
-export { Modal, ConfirmationModal, AppSlider } from './organisms';
+export { Modal, ConfirmationModal, FormModal, AppSlider } from './organisms';
 export type { AppItem } from './organisms';
 
 // Navigation
diff --git a/packages/shared-ui/src/molecules/DataCard.svelte b/packages/shared-ui/src/molecules/DataCard.svelte
new file mode 100644
index 000000000..0555951ab
--- /dev/null
+++ b/packages/shared-ui/src/molecules/DataCard.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	/**
+	 * DataCard - Generic card for displaying data items
+	 *
+	 * Used for displaying items like memos, decks, blueprints, etc.
+	 * Provides consistent layout with title, description, metadata, and actions.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <DataCard
+	 *   title="My Deck"
+	 *   description="A collection of flashcards"
+	 *   onclick={() => openDeck(deck.id)}
+	 * />
+	 * ```
+	 *
+	 * @example With metadata and actions
+	 * ```svelte
+	 * <DataCard title={memo.title} description={memo.summary}>
+	 *   {#snippet metadata()}
+	 *     <span>5 min ago</span>
+	 *     <Badge>Audio</Badge>
+	 *   {/snippet}
+	 *   {#snippet actions()}
+	 *     <Button variant="ghost" size="sm" onclick={edit}>Edit</Button>
+	 *     <Button variant="ghost" size="sm" onclick={del}>Delete</Button>
+	 *   {/snippet}
+	 * </DataCard>
+	 * ```
+	 */
+
+	import type { Snippet } from 'svelte';
+	import { Text } from '../atoms';
+
+	type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost';
+
+	interface Props {
+		/** Card title */
+		title: string;
+		/** Card description/subtitle */
+		description?: string;
+		/** Card variant */
+		variant?: CardVariant;
+		/** Whether card is interactive (clickable) */
+		interactive?: boolean;
+		/** Click handler */
+		onclick?: () => void;
+		/** Icon/thumbnail snippet (left side) */
+		icon?: Snippet;
+		/** Metadata snippet (below description) */
+		metadata?: Snippet;
+		/** Actions snippet (right side or bottom) */
+		actions?: Snippet;
+		/** Badge/status snippet (top right) */
+		badge?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		variant = 'default',
+		interactive = false,
+		onclick,
+		icon,
+		metadata,
+		actions,
+		badge,
+		class: className = ''
+	}: Props = $props();
+
+	const variantClasses: Record<CardVariant, string> = {
+		default: 'bg-menu border border-theme',
+		elevated: 'bg-menu border border-theme shadow-md',
+		outlined: 'bg-transparent border-2 border-theme',
+		ghost: 'bg-transparent border-transparent hover:bg-menu-hover'
+	};
+
+	const isClickable = $derived(interactive || !!onclick);
+</script>
+
+<div
+	class="data-card rounded-xl p-4 transition-colors {variantClasses[variant]} {isClickable
+		? 'cursor-pointer hover:bg-menu-hover'
+		: ''} {className}"
+	onclick={onclick}
+	onkeydown={(e) => {
+		if (isClickable && onclick && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			onclick();
+		}
+	}}
+	role={isClickable ? 'button' : undefined}
+	tabindex={isClickable ? 0 : undefined}
+>
+	<div class="flex items-start gap-3">
+		<!-- Icon/Thumbnail -->
+		{#if icon}
+			<div class="data-card__icon flex-shrink-0">
+				{@render icon()}
+			</div>
+		{/if}
+
+		<!-- Content -->
+		<div class="data-card__content flex-1 min-w-0">
+			<div class="flex items-start justify-between gap-2">
+				<div class="min-w-0">
+					<!-- Title -->
+					<Text variant="body" weight="semibold" class="truncate">
+						{title}
+					</Text>
+
+					<!-- Description -->
+					{#if description}
+						<Text variant="muted" class="mt-1 line-clamp-2">
+							{description}
+						</Text>
+					{/if}
+				</div>
+
+				<!-- Badge -->
+				{#if badge}
+					<div class="data-card__badge flex-shrink-0">
+						{@render badge()}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Metadata -->
+			{#if metadata}
+				<div class="data-card__metadata mt-2 flex items-center gap-2 text-sm text-theme-secondary">
+					{@render metadata()}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Actions -->
+		{#if actions}
+			<div class="data-card__actions flex-shrink-0 flex items-center gap-1" onclick={(e) => e.stopPropagation()}>
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.line-clamp-2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+</style>
diff --git a/packages/shared-ui/src/molecules/ModalFooter.svelte b/packages/shared-ui/src/molecules/ModalFooter.svelte
new file mode 100644
index 000000000..2d7a96d96
--- /dev/null
+++ b/packages/shared-ui/src/molecules/ModalFooter.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	/**
+	 * ModalFooter - Standardized modal footer with button layout
+	 *
+	 * Provides consistent button arrangement for modal dialogs.
+	 *
+	 * @example Basic cancel/confirm
+	 * ```svelte
+	 * <ModalFooter
+	 *   cancelLabel="Cancel"
+	 *   confirmLabel="Save"
+	 *   onCancel={() => close()}
+	 *   onConfirm={() => save()}
+	 * />
+	 * ```
+	 *
+	 * @example With loading state
+	 * ```svelte
+	 * <ModalFooter
+	 *   confirmLabel="Deleting..."
+	 *   confirmVariant="danger"
+	 *   loading={isDeleting}
+	 *   onCancel={close}
+	 *   onConfirm={handleDelete}
+	 * />
+	 * ```
+	 */
+
+	import { Button } from '../atoms';
+
+	type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'outline';
+
+	interface Props {
+		/** Cancel button label (omit to hide) */
+		cancelLabel?: string;
+		/** Confirm button label */
+		confirmLabel?: string;
+		/** Cancel button callback */
+		onCancel?: () => void;
+		/** Confirm button callback */
+		onConfirm?: () => void | Promise<void>;
+		/** Confirm button variant */
+		confirmVariant?: ButtonVariant;
+		/** Whether confirm action is loading */
+		loading?: boolean;
+		/** Disable all buttons */
+		disabled?: boolean;
+		/** Alignment of buttons */
+		align?: 'start' | 'center' | 'end' | 'between';
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		cancelLabel = 'Cancel',
+		confirmLabel = 'Confirm',
+		onCancel,
+		onConfirm,
+		confirmVariant = 'primary',
+		loading = false,
+		disabled = false,
+		align = 'end',
+		class: className = ''
+	}: Props = $props();
+
+	const alignClasses: Record<string, string> = {
+		start: 'justify-start',
+		center: 'justify-center',
+		end: 'justify-end',
+		between: 'justify-between'
+	};
+</script>
+
+<div class="modal-footer flex gap-3 {alignClasses[align]} {className}">
+	{#if cancelLabel && onCancel}
+		<Button variant="ghost" onclick={onCancel} disabled={disabled || loading}>
+			{cancelLabel}
+		</Button>
+	{/if}
+	{#if confirmLabel && onConfirm}
+		<Button variant={confirmVariant} onclick={onConfirm} {loading} disabled={disabled}>
+			{confirmLabel}
+		</Button>
+	{/if}
+</div>
diff --git a/packages/shared-ui/src/molecules/PageHeader.svelte b/packages/shared-ui/src/molecules/PageHeader.svelte
new file mode 100644
index 000000000..e2bb74f1b
--- /dev/null
+++ b/packages/shared-ui/src/molecules/PageHeader.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+	/**
+	 * PageHeader - Standardized page header layout
+	 *
+	 * Provides consistent page title, description, and action buttons layout.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <PageHeader title="My Memos" />
+	 * ```
+	 *
+	 * @example With description and actions
+	 * ```svelte
+	 * <PageHeader
+	 *   title="Flashcard Decks"
+	 *   description="Manage your study decks"
+	 * >
+	 *   {#snippet actions()}
+	 *     <Button onclick={createDeck}>New Deck</Button>
+	 *   {/snippet}
+	 * </PageHeader>
+	 * ```
+	 *
+	 * @example With breadcrumb and icon
+	 * ```svelte
+	 * <PageHeader title="Edit Profile">
+	 *   {#snippet breadcrumb()}
+	 *     <a href="/settings">Settings</a> / Profile
+	 *   {/snippet}
+	 *   {#snippet icon()}
+	 *     <UserIcon />
+	 *   {/snippet}
+	 * </PageHeader>
+	 * ```
+	 */
+
+	import type { Snippet } from 'svelte';
+	import { Text } from '../atoms';
+
+	type HeaderSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		/** Page title */
+		title: string;
+		/** Page description/subtitle */
+		description?: string;
+		/** Header size variant */
+		size?: HeaderSize;
+		/** Whether to show bottom border */
+		bordered?: boolean;
+		/** Icon snippet (before title) */
+		icon?: Snippet;
+		/** Breadcrumb snippet (above title) */
+		breadcrumb?: Snippet;
+		/** Actions snippet (right side) */
+		actions?: Snippet;
+		/** Tabs or navigation snippet (below header) */
+		tabs?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		size = 'md',
+		bordered = false,
+		icon,
+		breadcrumb,
+		actions,
+		tabs,
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClasses: Record<HeaderSize, { container: string; title: string }> = {
+		sm: {
+			container: 'py-3',
+			title: 'text-lg'
+		},
+		md: {
+			container: 'py-4',
+			title: 'text-xl'
+		},
+		lg: {
+			container: 'py-6',
+			title: 'text-2xl'
+		}
+	};
+</script>
+
+<header
+	class="page-header {sizeClasses[size].container} {bordered
+		? 'border-b border-theme'
+		: ''} {className}"
+>
+	<!-- Breadcrumb -->
+	{#if breadcrumb}
+		<div class="page-header__breadcrumb mb-2 text-sm text-theme-secondary">
+			{@render breadcrumb()}
+		</div>
+	{/if}
+
+	<div class="flex items-center justify-between gap-4">
+		<div class="flex items-center gap-3 min-w-0">
+			<!-- Icon -->
+			{#if icon}
+				<div class="page-header__icon flex-shrink-0 text-theme-secondary">
+					{@render icon()}
+				</div>
+			{/if}
+
+			<!-- Title & Description -->
+			<div class="min-w-0">
+				<h1 class="font-semibold text-theme {sizeClasses[size].title} truncate">
+					{title}
+				</h1>
+				{#if description}
+					<Text variant="muted" class="mt-1">
+						{description}
+					</Text>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Actions -->
+		{#if actions}
+			<div class="page-header__actions flex-shrink-0 flex items-center gap-2">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Tabs/Navigation -->
+	{#if tabs}
+		<div class="page-header__tabs mt-4">
+			{@render tabs()}
+		</div>
+	{/if}
+</header>
diff --git a/packages/shared-ui/src/molecules/index.ts b/packages/shared-ui/src/molecules/index.ts
index dd03d9b1a..0c10faf53 100644
--- a/packages/shared-ui/src/molecules/index.ts
+++ b/packages/shared-ui/src/molecules/index.ts
@@ -19,3 +19,8 @@ export { SkeletonBox, SkeletonText } from './loaders';
 
 // Feedback components
 export { EmptyState } from './feedback';
+
+// Layout components
+export { default as ModalFooter } from './ModalFooter.svelte';
+export { default as DataCard } from './DataCard.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
diff --git a/packages/shared-ui/src/organisms/FormModal.svelte b/packages/shared-ui/src/organisms/FormModal.svelte
new file mode 100644
index 000000000..e472394c9
--- /dev/null
+++ b/packages/shared-ui/src/organisms/FormModal.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	/**
+	 * FormModal - Modal with built-in form handling
+	 *
+	 * Extends Modal with form submission, validation error display,
+	 * and standardized footer buttons.
+	 *
+	 * @example Basic form modal
+	 * ```svelte
+	 * <FormModal
+	 *   visible={showModal}
+	 *   onClose={() => showModal = false}
+	 *   onSubmit={handleSubmit}
+	 *   title="Create Item"
+	 *   submitLabel="Create"
+	 * >
+	 *   <Input label="Name" bind:value={name} />
+	 *   <Textarea label="Description" bind:value={description} />
+	 * </FormModal>
+	 * ```
+	 */
+
+	import type { Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+	import { Button, Text } from '../atoms';
+
+	type SubmitVariant = 'primary' | 'danger' | 'success';
+
+	interface Props {
+		/** Whether the modal is visible */
+		visible: boolean;
+		/** Called when modal is closed */
+		onClose: () => void;
+		/** Called when form is submitted */
+		onSubmit: () => void | Promise<void>;
+		/** Modal title */
+		title: string;
+		/** Form content */
+		children: Snippet;
+		/** Icon snippet for header */
+		icon?: Snippet;
+		/** Submit button label */
+		submitLabel?: string;
+		/** Cancel button label */
+		cancelLabel?: string;
+		/** Submit button variant */
+		submitVariant?: SubmitVariant;
+		/** Whether submission is in progress */
+		loading?: boolean;
+		/** Error message to display */
+		error?: string | null;
+		/** Max width of modal */
+		maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
+		/** Whether submit button is disabled */
+		submitDisabled?: boolean;
+	}
+
+	let {
+		visible,
+		onClose,
+		onSubmit,
+		title,
+		children,
+		icon,
+		submitLabel = 'Submit',
+		cancelLabel = 'Cancel',
+		submitVariant = 'primary',
+		loading = false,
+		error = null,
+		maxWidth = 'md',
+		submitDisabled = false
+	}: Props = $props();
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		await onSubmit();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && e.ctrlKey && !loading && !submitDisabled) {
+			handleSubmit(e);
+		}
+	}
+</script>
+
+<Modal {visible} {onClose} {title} {icon} {maxWidth}>
+	<form onsubmit={handleSubmit} onkeydown={handleKeydown} class="space-y-4">
+		<!-- Error message -->
+		{#if error}
+			<div class="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
+				<Text variant="small" class="text-red-600 dark:text-red-400">
+					{error}
+				</Text>
+			</div>
+		{/if}
+
+		<!-- Form content -->
+		{@render children()}
+	</form>
+
+	{#snippet footer()}
+		<div class="flex gap-3 justify-end">
+			<Button variant="ghost" onclick={onClose} disabled={loading}>
+				{cancelLabel}
+			</Button>
+			<Button
+				variant={submitVariant}
+				type="submit"
+				onclick={handleSubmit}
+				{loading}
+				disabled={submitDisabled}
+			>
+				{submitLabel}
+			</Button>
+		</div>
+	{/snippet}
+</Modal>
diff --git a/packages/shared-ui/src/organisms/index.ts b/packages/shared-ui/src/organisms/index.ts
index 2dc96f6c6..893900c0e 100644
--- a/packages/shared-ui/src/organisms/index.ts
+++ b/packages/shared-ui/src/organisms/index.ts
@@ -1,4 +1,5 @@
 export { default as Modal } from './Modal.svelte';
 export { default as ConfirmationModal } from './ConfirmationModal.svelte';
+export { default as FormModal } from './FormModal.svelte';
 export { default as AppSlider } from './AppSlider.svelte';
 export type { AppItem } from './AppSlider.types';