feat: add layout components to shared-ui (Tier 6)

Button enhancements:
- Add 'outline' and 'success' variants
- Add 'xl' size option

New skeleton/loading components:
- SkeletonBox: Base skeleton with shimmer animation (theme-aware)
- SkeletonText: Multi-line text skeleton

New feedback components:
- EmptyState: Standardized empty state display with icon, title,
  message, and optional action buttons

New confirmation components:
- ConfirmationModal: Pre-styled confirmation dialog for delete/warning
  actions with 'danger', 'warning', and 'info' variants

These components reduce duplication across apps and provide
consistent UX patterns.

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

Co-Authored-By: Claude <noreply@anthropic.com>

packages/shared-ui/src/molecules/feedback/EmptyState.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	/**
+	 * EmptyState - Standardized empty state display
+	 *
+	 * Used when a list, search, or section has no content to display.
+	 * Provides consistent visual feedback with optional action button.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <EmptyState
+	 *   title="No memos yet"
+	 *   message="Start recording to create your first memo"
+	 * />
+	 * ```
+	 *
+	 * @example With action and icon
+	 * ```svelte
+	 * <EmptyState
+	 *   title="No results found"
+	 *   message="Try adjusting your search or filters"
+	 *   actionLabel="Clear filters"
+	 *   onAction={() => clearFilters()}
+	 * >
+	 *   {#snippet icon()}
+	 *     <SearchIcon class="w-12 h-12" />
+	 *   {/snippet}
+	 * </EmptyState>
+	 * ```
+	 */
+
+	import type { Snippet } from 'svelte';
+	import { Text, Button } from '../../atoms';
+
+	type EmptyStateVariant = 'default' | 'compact' | 'centered';
+
+	interface Props {
+		/** Title text */
+		title: string;
+		/** Description message */
+		message?: string;
+		/** Action button label */
+		actionLabel?: string;
+		/** Action button callback */
+		onAction?: () => void;
+		/** Secondary action label */
+		secondaryActionLabel?: string;
+		/** Secondary action callback */
+		onSecondaryAction?: () => void;
+		/** Layout variant */
+		variant?: EmptyStateVariant;
+		/** Custom icon snippet */
+		icon?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		title,
+		message,
+		actionLabel,
+		onAction,
+		secondaryActionLabel,
+		onSecondaryAction,
+		variant = 'default',
+		icon,
+		class: className = ''
+	}: Props = $props();
+
+	const variantClasses: Record<EmptyStateVariant, string> = {
+		default: 'py-12 px-6',
+		compact: 'py-6 px-4',
+		centered: 'py-16 px-8'
+	};
+</script>
+
+<div
+	class="empty-state flex flex-col items-center justify-center text-center {variantClasses[variant]} {className}"
+>
+	<!-- Icon -->
+	{#if icon}
+		<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
+			{@render icon()}
+		</div>
+	{:else}
+		<!-- Default icon -->
+		<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
+			<svg
+				class="w-12 h-12"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+				/>
+			</svg>
+		</div>
+	{/if}
+
+	<!-- Title -->
+	<Text variant="body" weight="semibold" class="mb-2">
+		{title}
+	</Text>
+
+	<!-- Message -->
+	{#if message}
+		<Text variant="muted" class="max-w-sm mb-4">
+			{message}
+		</Text>
+	{/if}
+
+	<!-- Actions -->
+	{#if actionLabel || secondaryActionLabel}
+		<div class="empty-state__actions flex gap-3 mt-2">
+			{#if secondaryActionLabel && onSecondaryAction}
+				<Button variant="ghost" onclick={onSecondaryAction}>
+					{secondaryActionLabel}
+				</Button>
+			{/if}
+			{#if actionLabel && onAction}
+				<Button variant="primary" onclick={onAction}>
+					{actionLabel}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</div>

packages/shared-ui/src/molecules/feedback/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Feedback components for user states
+ */
+export { default as EmptyState } from './EmptyState.svelte';

packages/shared-ui/src/molecules/index.ts

@@ -3,7 +3,7 @@ export { default as Input } from './Input.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
-export type { SelectOption } from './Select.svelte';
+export type { SelectOption } from './Select.types';
 
 // Stats components
 export { GlassCard, StatRow } from './stats';
@@ -13,3 +13,9 @@ export { TagBadge } from './tags';
 
 // Media components
 export { AudioPlayer } from './media';
+
+// Loading components
+export { SkeletonBox, SkeletonText } from './loaders';
+
+// Feedback components
+export { EmptyState } from './feedback';

packages/shared-ui/src/molecules/loaders/SkeletonBox.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	/**
+	 * SkeletonBox - Base component for skeleton loading states
+	 *
+	 * Reusable box with shimmer animation for loading states.
+	 * Theme-aware (light/dark mode) and fully customizable.
+	 *
+	 * @example
+	 * ```svelte
+	 * <SkeletonBox width="200px" height="24px" />
+	 * <SkeletonBox width="100%" height="100px" borderRadius="12px" />
+	 * ```
+	 */
+
+	interface Props {
+		/** Width of the skeleton (CSS value) */
+		width?: string;
+		/** Height of the skeleton (CSS value) */
+		height?: string;
+		/** Border radius (CSS value) */
+		borderRadius?: string;
+		/** Make it circular (overrides borderRadius) */
+		circle?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		width = '100%',
+		height = '20px',
+		borderRadius = '4px',
+		circle = false,
+		class: className = ''
+	}: Props = $props();
+
+	const computedRadius = $derived(circle ? '50%' : borderRadius);
+	const computedHeight = $derived(circle ? width : height);
+</script>
+
+<div
+	class="skeleton-box {className}"
+	style="width: {width}; height: {computedHeight}; border-radius: {computedRadius};"
+	role="status"
+	aria-label="Loading"
+></div>
+
+<style>
+	.skeleton-box {
+		background: linear-gradient(
+			90deg,
+			var(--skeleton-base, #e5e7eb) 0%,
+			var(--skeleton-highlight, #f3f4f6) 50%,
+			var(--skeleton-base, #e5e7eb) 100%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-shimmer 1.5s ease-in-out infinite;
+	}
+
+	@keyframes skeleton-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	/* Light Mode - Default */
+	:global(:root) {
+		--skeleton-base: #e5e7eb;
+		--skeleton-highlight: #f3f4f6;
+	}
+
+	/* Dark Mode */
+	:global(.dark) {
+		--skeleton-base: #2a2a2a;
+		--skeleton-highlight: #3a3a3a;
+	}
+</style>

packages/shared-ui/src/molecules/loaders/SkeletonText.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	/**
+	 * SkeletonText - Multi-line text skeleton
+	 *
+	 * Creates multiple skeleton lines for text content loading states.
+	 *
+	 * @example
+	 * ```svelte
+	 * <SkeletonText lines={3} />
+	 * <SkeletonText lines={2} lastLineWidth="60%" />
+	 * ```
+	 */
+
+	import SkeletonBox from './SkeletonBox.svelte';
+
+	interface Props {
+		/** Number of lines to show */
+		lines?: number;
+		/** Height of each line */
+		lineHeight?: string;
+		/** Gap between lines */
+		gap?: string;
+		/** Width of the last line (to simulate natural text) */
+		lastLineWidth?: string;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		lines = 3,
+		lineHeight = '16px',
+		gap = '8px',
+		lastLineWidth = '70%',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div class="skeleton-text {className}" style="display: flex; flex-direction: column; gap: {gap};">
+	{#each Array(lines) as _, i}
+		<SkeletonBox
+			width={i === lines - 1 ? lastLineWidth : '100%'}
+			height={lineHeight}
+		/>
+	{/each}
+</div>

packages/shared-ui/src/molecules/loaders/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Loading state components
+ */
+export { default as SkeletonBox } from './SkeletonBox.svelte';
+export { default as SkeletonText } from './SkeletonText.svelte';