@ewanc26/ui 0.1.0

package/src/lib/components/layout/main/card/MusicStatusCard.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import Card from '../../../ui/Card.svelte';
+	import type { MusicStatusData } from '@ewanc26/atproto';
+	import { formatRelativeTime } from '../../../../utils/locale.js';
+	import { Music, Disc3, Users, Album, Clock, Radio } from '@lucide/svelte';
+
+	interface Props { musicStatus?: MusicStatusData | null; }
+	let { musicStatus = null }: Props = $props();
+
+	let artworkError = $state(false);
+
+	function formatArtists(artists: { artistName: string }[]): string {
+		if (!artists?.length) return 'Unknown Artist';
+		return artists.map((a) => a.artistName).join(', ');
+	}
+
+	function formatDuration(seconds?: number): string {
+		if (!seconds) return '';
+		const minutes = Math.floor(seconds / 60);
+		const remainingSeconds = seconds % 60;
+		return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+	}
+
+	function formatServiceName(domain?: string): string {
+		if (!domain) return '';
+		return domain.replace('lastfm', 'Last.fm').replace('last.fm', 'Last.fm');
+	}
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if !musicStatus}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-3 flex items-start gap-4">
+					<div class="h-20 w-20 shrink-0 rounded-lg bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="flex-1">
+						<div class="mb-2 flex items-center gap-2">
+							<div class="h-4 w-4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+							<div class="h-3 w-32 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						</div>
+						<div class="mb-1 h-5 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						<div class="mb-2 h-4 w-1/2 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						<div class="h-3 w-40 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{:else}
+		{@const s = musicStatus}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<div>
+					<div class="mb-4 flex items-center gap-2">
+						<Music class="h-4 w-4 text-primary-600 dark:text-primary-400" aria-hidden="true" />
+						<span class="text-xs font-semibold tracking-wide text-ink-800 uppercase dark:text-ink-100">
+							{s.$type === 'fm.teal.alpha.actor.status' ? 'Now Listening' : 'Last Played'}
+						</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<div class="shrink-0">
+							{#if s.artworkUrl && !artworkError}
+								<img src={s.artworkUrl} alt="Album artwork for {s.releaseName || s.trackName}" class="h-20 w-20 rounded-lg object-cover shadow-md" loading="lazy" onerror={() => (artworkError = true)} />
+							{:else}
+								<div class="flex h-20 w-20 items-center justify-center rounded-lg bg-canvas-200 shadow-md dark:bg-canvas-700">
+									<Disc3 class="h-10 w-10 text-ink-500 dark:text-ink-400" aria-hidden="true" />
+								</div>
+							{/if}
+						</div>
+						<div class="min-w-0 flex-1">
+							<div class="mb-4">
+								<a href={s.originUrl || '#'} target="_blank" rel="noopener noreferrer" class="block max-w-full text-lg font-semibold wrap-break-word whitespace-normal text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300" class:pointer-events-none={!s.originUrl} class:cursor-default={!s.originUrl}>
+									{s.trackName}
+								</a>
+								<p class="mt-1 flex max-w-full items-start gap-1.5 text-base wrap-break-word whitespace-normal text-ink-800 dark:text-ink-100">
+									<Users class="mt-0.5 h-4 w-4 shrink-0 text-ink-600 dark:text-ink-300" />
+									{formatArtists(s.artists)}
+								</p>
+								{#if s.releaseName}
+									<p class="mt-1 flex max-w-full items-start gap-1.5 text-sm wrap-break-word whitespace-normal text-ink-700 dark:text-ink-200">
+										<Album class="mt-0.5 h-4 w-4 shrink-0 text-ink-500 dark:text-ink-400" />
+										<span>{s.releaseName}{#if s.duration}<span class="ml-1 inline-flex items-center gap-1 text-ink-600 dark:text-ink-300">· <Clock class="h-3 w-3" />{formatDuration(s.duration)}</span>{/if}</span>
+									</p>
+								{/if}
+							</div>
+							<div class="flex items-center gap-2 text-xs text-ink-700 dark:text-ink-200">
+								<time datetime={s.playedTime}>{formatRelativeTime(s.playedTime)}</time>
+								{#if s.musicServiceBaseDomain}
+									<span class="text-ink-600 dark:text-ink-300">·</span>
+									<a href="https://teal.fm" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 transition-colors hover:text-primary-600 dark:hover:text-primary-400" title="Powered by teal.fm">
+										<Radio class="h-3 w-3" />
+										{formatServiceName(s.musicServiceBaseDomain)} via {s.submissionClientAgent}
+									</a>
+								{/if}
+							</div>
+						</div>
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/src/lib/components/layout/main/card/PostCard.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Card from '../../../ui/Card.svelte';
+	import DocumentCard from '../../../ui/DocumentCard.svelte';
+	import type { StandardSiteDocument } from '@ewanc26/atproto';
+
+	interface Props { documents?: StandardSiteDocument[] | null; }
+	let { documents = null }: Props = $props();
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if !documents}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-4 h-6 w-32 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="space-y-3">
+					{#each Array(3) as _}
+						<div class="rounded-lg bg-canvas-200 p-4 dark:bg-canvas-800">
+							<div class="mb-2 h-5 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+							<div class="mb-2 h-4 w-full rounded bg-canvas-300 dark:bg-canvas-700"></div>
+							<div class="h-3 w-24 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						</div>
+					{/each}
+				</div>
+			{/snippet}
+		</Card>
+	{:else if documents.length > 0}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<h2 class="mb-4 text-2xl font-bold text-ink-900 dark:text-ink-50">Recent Posts</h2>
+				<div class="space-y-3">
+					{#each documents as document}
+						<DocumentCard {document} />
+					{/each}
+				</div>
+			{/snippet}
+		</Card>
+	{:else}
+		<Card variant="flat" padding="lg">
+			{#snippet children()}
+				<div class="text-center">
+					<p class="text-ink-700 dark:text-ink-300">No documents available. Start writing on <a href="https://standard.site/" class="text-primary-600 hover:underline dark:text-primary-400" target="_blank" rel="noopener noreferrer">Standard.site</a> to get started!</p>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/src/lib/components/layout/main/card/ProfileCard.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Card from '../../../ui/Card.svelte';
+	import type { ProfileData } from '@ewanc26/atproto';
+	import LinkCard from './LinkCard.svelte';
+	import { formatCompactNumber } from '../../../../utils/formatNumber.js';
+
+	interface Props { profile?: ProfileData | null; }
+	let { profile = null }: Props = $props();
+
+	let imageLoaded = $state(false);
+	let bannerLoaded = $state(false);
+	const locale = typeof navigator !== 'undefined' ? navigator.language || 'en-GB' : 'en-GB';
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if !profile}
+		<Card loading={true} variant="elevated" padding="none" class="overflow-hidden">
+			{#snippet skeleton()}
+				<div class="h-32 w-full rounded-t-xl bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="relative -mt-16 flex justify-center sm:ml-6 sm:justify-start">
+					<div class="h-32 w-32 rounded-full border-4 border-white bg-canvas-300 dark:border-canvas-900 dark:bg-canvas-700"></div>
+				</div>
+				<div class="space-y-2 p-6 pt-2 sm:pt-4">
+					<div class="h-6 w-1/2 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="h-4 w-1/3 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="h-4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="h-4 w-5/6 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				</div>
+			{/snippet}
+		</Card>
+	{:else}
+		{@const p = profile}
+		<Card variant="elevated" padding="none" ariaLabel="Profile information">
+			{#snippet children()}
+				<div class="relative h-32 w-full overflow-hidden rounded-t-xl">
+					{#if p.banner}
+						<img src={p.banner} alt="" class="h-full w-full object-cover opacity-0 transition-opacity duration-300" class:opacity-100={bannerLoaded} onload={() => (bannerLoaded = true)} loading="lazy" role="presentation" />
+					{:else}
+						<div class="h-full w-full bg-linear-to-r from-primary-400 to-secondary-400" role="presentation"></div>
+					{/if}
+				</div>
+				<div class="relative -mt-16 flex justify-center sm:ml-6 sm:justify-start">
+					<div class="h-32 w-32 overflow-hidden rounded-full border-4 border-white bg-canvas-200 dark:border-canvas-900">
+						{#if p.avatar}
+							<img src={p.avatar} alt="{p.displayName || p.handle}'s profile picture" class="h-full w-full object-cover opacity-0 transition-opacity duration-300" class:opacity-100={imageLoaded} onload={() => (imageLoaded = true)} loading="lazy" />
+						{:else}
+							<div class="flex h-full w-full items-center justify-center bg-primary-200 text-3xl font-bold text-primary-800 dark:bg-primary-800 dark:text-primary-200" role="img" aria-label="{p.displayName || p.handle}'s avatar initials">
+								{(p.displayName || p.handle).charAt(0).toUpperCase()}
+							</div>
+						{/if}
+					</div>
+				</div>
+				<div class="p-6">
+					<h2 class="text-2xl font-bold text-ink-900 dark:text-ink-50">{p.displayName || p.handle}</h2>
+					<p class="font-medium text-ink-700 dark:text-ink-200">@{p.handle}</p>
+					{#if p.pronouns}<p class="text-sm text-ink-600 italic dark:text-ink-300">{p.pronouns}</p>{/if}
+					{#if p.description}<p class="wrap-break-words mb-4 break-all whitespace-pre-wrap text-ink-700 dark:text-ink-200">{p.description}</p>{/if}
+					<div class="flex gap-6 text-sm font-medium" role="list" aria-label="Profile statistics">
+						<div class="flex items-center gap-1" role="listitem"><span class="font-bold text-ink-900 dark:text-ink-50">{formatCompactNumber(p.postsCount, locale)}</span><span class="text-ink-700 dark:text-ink-200">Posts</span></div>
+						<div class="flex items-center gap-1" role="listitem"><span class="font-bold text-ink-900 dark:text-ink-50">{formatCompactNumber(p.followersCount, locale)}</span><span class="text-ink-700 dark:text-ink-200">Followers</span></div>
+						<div class="flex items-center gap-1" role="listitem"><span class="font-bold text-ink-900 dark:text-ink-50">{formatCompactNumber(p.followsCount, locale)}</span><span class="text-ink-700 dark:text-ink-200">Following</span></div>
+					</div>
+					<div class="mt-4">
+						<LinkCard url="https://witchsky.app/profile/{p.did}" title="View on Bluesky" variant="button" />
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/src/lib/components/layout/main/card/TangledRepoCard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { ExternalLink, GitBranch, Server, User } from '@lucide/svelte';
+	import Card from '../../../ui/Card.svelte';
+	import InternalCard from '../../../ui/InternalCard.svelte';
+	import type { TangledReposData, ProfileData } from '@ewanc26/atproto';
+
+	interface Props {
+		repos?: TangledReposData | null;
+		profile?: ProfileData | null;
+		/** Fallback DID if profile handle is unavailable */
+		did?: string;
+	}
+
+	let { repos = null, profile = null, did = '' }: Props = $props();
+	let handle = $derived(profile?.handle || null);
+
+	function buildRepoUrl(repoName: string): string {
+		const identifier = handle || did;
+		return `https://tangled.org/${identifier}/${repoName}`;
+	}
+
+	function getKnotServerName(knot: string): string {
+		if (knot.startsWith('http')) {
+			try { return new URL(knot).hostname; } catch { return knot; }
+		}
+		return knot;
+	}
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if !repos}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-4 h-6 w-32 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="space-y-3">
+					{#each Array(3) as _}
+						<div class="h-24 rounded-lg bg-canvas-300 dark:bg-canvas-700"></div>
+					{/each}
+				</div>
+			{/snippet}
+		</Card>
+	{:else if repos.repos.length > 0}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<h2 class="mb-4 text-2xl font-bold text-ink-900 dark:text-ink-50">Tangled Repositories</h2>
+				<div class="space-y-3">
+					{#each repos.repos as repo}
+						<InternalCard href={buildRepoUrl(repo.name)}>
+							{#snippet children()}
+								<GitBranch class="h-5 w-5 shrink-0 text-primary-600 dark:text-primary-400" aria-hidden="true" />
+								<div class="min-w-0 flex-1 space-y-2">
+									<h3 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{repo.name}</h3>
+									<div class="flex flex-wrap items-center gap-3 text-xs text-ink-700 dark:text-ink-200">
+										<div class="flex min-w-0 items-center gap-1">
+											<Server class="h-3 w-3 shrink-0" aria-hidden="true" />
+											<span class="truncate">{getKnotServerName(repo.knot)}</span>
+										</div>
+										<div class="flex min-w-0 items-center gap-1">
+											<User class="h-3 w-3 shrink-0" aria-hidden="true" />
+											<span class="truncate">{handle || did}</span>
+										</div>
+									</div>
+								</div>
+								<ExternalLink class="h-4 w-4 shrink-0 text-ink-700 transition-colors dark:text-ink-200" aria-hidden="true" />
+							{/snippet}
+						</InternalCard>
+					{/each}
+				</div>
+			{/snippet}
+		</Card>
+	{:else}
+		<Card variant="flat" padding="lg">
+			{#snippet children()}
+				<div class="text-center">
+					<p class="text-ink-700 dark:text-ink-300">No Tangled repositories found.</p>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/src/lib/components/layout/main/card/index.ts

@@ -0,0 +1,7 @@
+export { default as LinkCard } from './LinkCard.svelte';
+export { default as ProfileCard } from './ProfileCard.svelte';
+export { default as PostCard } from './PostCard.svelte';
+export { default as BlueskyPostCard } from './BlueskyPostCard.svelte';
+export { default as TangledRepoCard } from './TangledRepoCard.svelte';
+export { default as MusicStatusCard } from './MusicStatusCard.svelte';
+export { default as KibunStatusCard } from './KibunStatusCard.svelte';

package/src/lib/components/layout/main/index.ts

@@ -0,0 +1,3 @@
+export { default as DynamicLinks } from './DynamicLinks.svelte';
+export { default as ScrollToTop } from './ScrollToTop.svelte';
+export { default as TangledRepos } from './card/TangledRepoCard.svelte';

package/src/lib/components/seo/MetaTags.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { SiteMetadata } from '../../types/index.js';
+
+	interface Props { meta: SiteMetadata; siteMeta: SiteMetadata; }
+	let { meta, siteMeta }: Props = $props();
+
+	const finalMeta = $derived({
+		title: meta.title || siteMeta.title,
+		description: meta.description || siteMeta.description,
+		keywords: meta.keywords || siteMeta.keywords,
+		url: meta.url || siteMeta.url,
+		image: meta.image || siteMeta.image,
+		imageWidth: meta.imageWidth || siteMeta.imageWidth,
+		imageHeight: meta.imageHeight || siteMeta.imageHeight
+	});
+</script>
+
+<svelte:head>
+	<title>{finalMeta.title}</title>
+	<meta name="description" content={finalMeta.description} />
+	<meta name="keywords" content={finalMeta.keywords} />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={finalMeta.url} />
+	<meta property="og:title" content={finalMeta.title} />
+	<meta property="og:description" content={finalMeta.description} />
+	<meta property="og:site_name" content={siteMeta.title} />
+	<meta property="og:image" content={finalMeta.image} />
+	{#if finalMeta.imageWidth}
+		<meta property="og:image:width" content={finalMeta.imageWidth.toString()} />
+	{/if}
+	{#if finalMeta.imageHeight}
+		<meta property="og:image:height" content={finalMeta.imageHeight.toString()} />
+	{/if}
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:url" content={finalMeta.url} />
+	<meta name="twitter:title" content={finalMeta.title} />
+	<meta name="twitter:description" content={finalMeta.description} />
+	<meta name="twitter:image" content={finalMeta.image} />
+</svelte:head>

package/src/lib/components/seo/index.ts

@@ -0,0 +1 @@
+export { default as MetaTags } from './MetaTags.svelte';

package/src/lib/components/ui/BlogPostCard.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { ExternalLink, Tag } from '@lucide/svelte';
+	import type { BlogPost } from '@ewanc26/atproto';
+	import InternalCard from './InternalCard.svelte';
+	import { getPostBadges, getBadgeClasses } from '../../helper/badges.js';
+	import { formatLocalizedDate } from '../../utils/locale.js';
+
+	interface Props { post: BlogPost; locale?: string; }
+	let { post, locale }: Props = $props();
+	const badges = $derived(getPostBadges(post));
+</script>
+
+<InternalCard href={post.url}>
+	{#snippet children()}
+		{#if post.coverImage}
+			<div class="mb-3 overflow-hidden rounded-lg">
+				<img src={post.coverImage} alt={post.title} class="h-48 w-full object-cover transition-transform duration-300 hover:scale-105" />
+			</div>
+		{/if}
+		<div class="relative min-w-0 flex-1 space-y-2">
+			{#if badges.length > 0}
+				<div class="flex flex-wrap items-center gap-2">
+					{#each badges as badge}<span class={getBadgeClasses(badge)}>{badge.text}</span>{/each}
+				</div>
+			{/if}
+			<h4 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{post.title}</h4>
+			{#if post.description}
+				<p class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200">{post.description}</p>
+			{/if}
+			<div class="pt-1">
+				<p class="text-xs font-medium text-ink-800 dark:text-ink-100">{formatLocalizedDate(post.createdAt, locale)}</p>
+			</div>
+		</div>
+		<div class="flex shrink-0 flex-col items-end justify-between gap-2 self-stretch">
+			<ExternalLink class="h-4 w-4 text-ink-700 transition-colors dark:text-ink-200" aria-hidden="true" />
+			{#if post.tags && post.tags.length > 0}
+				<div class="flex items-center gap-1.5 rounded bg-ink-100 px-2 py-0.5 dark:bg-ink-800">
+					<Tag class="h-3 w-3 text-ink-700 dark:text-ink-200" aria-hidden="true" />
+					<span class="text-xs font-medium text-ink-800 dark:text-ink-100">{post.tags.length}</span>
+				</div>
+			{/if}
+		</div>
+	{/snippet}
+</InternalCard>

package/src/lib/components/ui/Card.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+
+	export interface Badge {
+		text: string;
+		color?: 'mint' | 'sage' | 'jade' | 'ink';
+		variant?: 'solid' | 'soft';
+	}
+
+	interface Props {
+		variant?: 'default' | 'elevated' | 'flat' | 'button' | 'outline';
+		padding?: 'sm' | 'md' | 'lg' | 'none';
+		interactive?: boolean;
+		href?: string;
+		target?: string;
+		rel?: string;
+		showExternalIcon?: boolean;
+		badges?: Badge[];
+		loading?: boolean;
+		error?: boolean;
+		errorMessage?: string;
+		class?: string;
+		ariaLabel?: string;
+		children?: Snippet;
+		skeleton?: Snippet;
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		interactive = false,
+		href,
+		target = '_blank',
+		rel = 'noopener noreferrer',
+		showExternalIcon = false,
+		badges = [],
+		loading = false,
+		error = false,
+		errorMessage = 'Something went wrong',
+		class: customClass = '',
+		ariaLabel,
+		children,
+		skeleton
+	}: Props = $props();
+
+	let isLink = $derived(!!href);
+	const baseClasses = 'rounded-xl transition-all duration-300';
+	const variantClasses = {
+		default: 'bg-canvas-100 dark:bg-canvas-900 shadow-md',
+		elevated: 'bg-canvas-100 dark:bg-canvas-900 shadow-lg hover:shadow-xl',
+		flat: 'bg-canvas-200 dark:bg-canvas-800',
+		button:
+			'bg-canvas-200 dark:bg-canvas-800 hover:bg-canvas-300 dark:hover:bg-canvas-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
+		outline:
+			'bg-transparent border-2 border-canvas-300 dark:border-canvas-700 hover:border-primary-400 dark:hover:border-primary-600'
+	};
+	const paddingClasses = { none: '', sm: 'p-4', md: 'p-6', lg: 'p-8' };
+	let interactiveClasses = $derived(interactive || isLink ? 'cursor-pointer' : '');
+	let cardClasses = $derived(
+		`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${interactiveClasses} ${customClass}`
+	);
+
+	function getBadgeClasses(badge: Badge): string {
+		const baseStyle =
+			badge.variant === 'soft'
+				? 'px-2 py-0.5 text-xs font-medium rounded'
+				: 'px-2 py-0.5 text-xs font-semibold uppercase rounded';
+		const colorClasses = {
+			mint:
+				badge.variant === 'soft'
+					? 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200'
+					: 'bg-secondary-500 text-white dark:bg-secondary-600',
+			sage:
+				badge.variant === 'soft'
+					? 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'
+					: 'bg-primary-500 text-white dark:bg-primary-600',
+			jade:
+				badge.variant === 'soft'
+					? 'bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200'
+					: 'bg-accent-500 text-white dark:bg-accent-600',
+			ink:
+				badge.variant === 'soft'
+					? 'bg-ink-100 text-ink-800 dark:bg-ink-800 dark:text-ink-100'
+					: 'bg-ink-700 text-white dark:bg-ink-300 dark:text-ink-900'
+		};
+		return `${baseStyle} ${colorClasses[badge.color || 'ink']}`;
+	}
+</script>
+
+{#if loading}
+	<div class="{cardClasses} animate-pulse" aria-label="Loading content" role="status">
+		{#if skeleton}
+			{@render skeleton()}
+		{:else}
+			<div class="space-y-3">
+				<div class="h-4 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="h-4 w-full rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="h-4 w-5/6 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+			</div>
+		{/if}
+		<span class="sr-only">Loading...</span>
+	</div>
+{:else if error}
+	<div
+		class="{cardClasses} border-2 border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900/20"
+		role="alert"
+		aria-live="polite"
+	>
+		<p class="text-red-600 dark:text-red-400">{errorMessage}</p>
+	</div>
+{:else if isLink}
+	<a {href} {target} {rel} class={cardClasses} aria-label={ariaLabel || `Link to ${href}`}>
+		{#if badges.length > 0}
+			<div class="mb-3 flex flex-wrap items-center gap-2">
+				{#each badges as badge}
+					<span class={getBadgeClasses(badge)}>{badge.text}</span>
+				{/each}
+			</div>
+		{/if}
+		<div class="flex items-start justify-between gap-3">
+			<div class="flex-1">
+				{#if children}{@render children()}{/if}
+			</div>
+			{#if showExternalIcon}
+				<ExternalLink
+					class="h-4 w-4 shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
+					aria-hidden="true"
+				/>
+			{/if}
+		</div>
+	</a>
+{:else}
+	<div class={cardClasses} role={ariaLabel ? 'region' : undefined} aria-label={ariaLabel}>
+		{#if badges.length > 0}
+			<div class="mb-3 flex flex-wrap items-center gap-2">
+				{#each badges as badge}
+					<span class={getBadgeClasses(badge)}>{badge.text}</span>
+				{/each}
+			</div>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/src/lib/components/ui/DocumentCard.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { ExternalLink, Tag } from '@lucide/svelte';
+	import type { StandardSiteDocument } from '@ewanc26/atproto';
+	import InternalCard from './InternalCard.svelte';
+	import { formatLocalizedDate } from '../../utils/locale.js';
+
+	interface Props { document: StandardSiteDocument; locale?: string; }
+	let { document, locale }: Props = $props();
+</script>
+
+<InternalCard href={document.url}>
+	{#snippet children()}
+		{#if document.coverImage}
+			<div class="mb-3 overflow-hidden rounded-lg">
+				<img src={document.coverImage} alt={document.title} class="h-48 w-full object-cover transition-transform duration-300 hover:scale-105" />
+			</div>
+		{/if}
+		<div class="relative min-w-0 flex-1 space-y-2">
+			{#if document.publicationName}
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="rounded bg-accent-500 px-2 py-0.5 text-xs font-semibold text-white uppercase dark:bg-accent-600">{document.publicationName}</span>
+				</div>
+			{/if}
+			<h4 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{document.title}</h4>
+			{#if document.description}
+				<p class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200">{document.description}</p>
+			{/if}
+			<div class="pt-1">
+				<p class="text-xs font-medium text-ink-800 dark:text-ink-100">{formatLocalizedDate(document.publishedAt, locale)}</p>
+			</div>
+		</div>
+		<div class="flex shrink-0 flex-col items-end justify-between gap-2 self-stretch">
+			<ExternalLink class="h-4 w-4 text-ink-700 transition-colors dark:text-ink-200" aria-hidden="true" />
+			{#if document.tags && document.tags.length > 0}
+				<div class="flex items-center gap-1.5 rounded bg-ink-100 px-2 py-0.5 dark:bg-ink-800">
+					<Tag class="h-3 w-3 text-ink-700 dark:text-ink-200" aria-hidden="true" />
+					<span class="text-xs font-medium text-ink-800 dark:text-ink-100">{document.tags.length}</span>
+				</div>
+			{/if}
+		</div>
+	{/snippet}
+</InternalCard>

package/src/lib/components/ui/Dropdown.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+
+	interface Option { value: string; label: string; }
+	interface Props {
+		options: Option[];
+		value: string;
+		label?: string;
+		placeholder?: string;
+		id?: string;
+	}
+
+	let { options, value = $bindable(), label, placeholder = 'Select...', id = 'dropdown' }: Props = $props();
+</script>
+
+<div class="relative">
+	{#if label}
+		<label for={id} class="mb-2 block text-sm font-medium text-ink-700 dark:text-ink-200">{label}</label>
+	{/if}
+	<div class="relative">
+		<select
+			{id}
+			bind:value
+			class="w-full appearance-none rounded-lg border-2 border-canvas-300 bg-canvas-100 py-2 pr-10 pl-3 text-ink-900 transition-colors focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none dark:border-canvas-700 dark:bg-canvas-900 dark:text-ink-50 dark:focus:border-primary-400"
+			aria-label={label || 'Select an option'}
+		>
+			<option value="" disabled>{placeholder}</option>
+			{#each options as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+		<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-ink-500 dark:text-ink-400" aria-hidden="true">
+			<ChevronDown class="h-5 w-5" />
+		</div>
+	</div>
+</div>