@ewanc26/ui 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# @ewanc26/ui
+
+Svelte UI component library extracted from [ewancroft.uk](https://ewancroft.uk). Provides layout and card components, UI primitives, SEO helpers, Svelte stores, post utilities, and a multi-theme configuration system.
+
+## Installation
+
+```bash
+pnpm add @ewanc26/ui
+```
+
+Peer dependencies: `svelte >= 5`, `@sveltejs/kit >= 2`, `tailwindcss >= 4`. Optional: `@ewanc26/atproto` (for AT Protocol card components).
+
+## What's Exported
+
+### Components
+
+| Group | Components |
+|-------|------------|
+| Layout toggles | `ThemeToggle`, `WolfToggle` |
+| Layout main | `DynamicLinks`, `ScrollToTop` |
+| Cards | `ProfileCard`, `PostCard`, `BlueskyPostCard`, `LinkCard`, `MusicStatusCard`, `KibunStatusCard`, `TangledRepoCard` |
+| UI primitives | `Card`, `InternalCard`, `Dropdown`, `Pagination`, `SearchBar`, `Tabs`, `PostsGroupedView`, `DocumentCard`, `BlogPostCard` |
+| SEO | `MetaTags` |
+
+### Stores
+
+| Store | Type | Description |
+|-------|------|-------------|
+| `wolfMode` | `Writable<boolean>` | Wolf mode text transformation |
+| `colorTheme` | `Writable<ColorTheme>` | Active colour theme |
+| `colorThemeDropdownOpen` | `Writable<boolean>` | Theme picker open state |
+| `happyMacStore` | `Writable<boolean>` | Happy Mac easter egg |
+
+### Theme Configuration
+
+12 themes across four categories (neutral, warm, cool, vibrant) using OKLCH colour values. Default: `slate`.
+
+```typescript
+import { THEMES, DEFAULT_THEME, getTheme, getThemesByCategory, CATEGORY_LABELS } from '@ewanc26/ui';
+```
+
+### Helpers
+
+```typescript
+import { getPostBadges, getBadgeClasses } from '@ewanc26/ui';
+import { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllTags } from '@ewanc26/ui';
+```
+
+### Types
+
+```typescript
+import type { SiteMetadata, NavItem, ColorTheme, ThemeDefinition, PostBadge, MonthData, GroupedPosts } from '@ewanc26/ui';
+```
+
+## Build
+
+```bash
+pnpm build   # svelte-package
+pnpm dev     # svelte-package --watch
+pnpm check   # svelte-check
+```
+
+## Licence
+
+See the root [LICENSE](../../LICENSE).

package/dist/components/layout/ThemeToggle.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Sun, Moon } from '@lucide/svelte';
+
+	let isDark = $state(false);
+	let mounted = $state(false);
+
+	onMount(() => {
+		const stored = localStorage.getItem('theme');
+		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		isDark = stored === 'light' || (!stored && !prefersDark);
+		updateTheme();
+		mounted = true;
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handleChange = (e: MediaQueryListEvent) => {
+			if (!localStorage.getItem('theme')) { isDark = e.matches; updateTheme(); }
+		};
+		mediaQuery.addEventListener('change', handleChange);
+		return () => mediaQuery.removeEventListener('change', handleChange);
+	});
+
+	function updateTheme() {
+		const html = document.documentElement;
+		if (isDark) { html.classList.remove('dark'); html.style.colorScheme = 'light'; }
+		else { html.classList.add('dark'); html.style.colorScheme = 'dark'; }
+	}
+
+	function toggleTheme() {
+		isDark = !isDark;
+		localStorage.setItem('theme', isDark ? 'light' : 'dark');
+		updateTheme();
+	}
+</script>
+
+<button
+	onclick={toggleTheme}
+	class="relative flex h-10 w-10 items-center justify-center rounded-lg bg-canvas-200 text-ink-900 transition-all hover:bg-canvas-300 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700"
+	aria-label={isDark ? 'Switch to dark mode' : 'Switch to light mode'}
+	type="button"
+>
+	{#if mounted}
+		<div class="relative h-5 w-5">
+			<Moon class="absolute inset-0 h-5 w-5 transition-all duration-300 {isDark ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}" aria-hidden="true" />
+			<Sun class="absolute inset-0 h-5 w-5 transition-all duration-300 {isDark ? 'scale-0 -rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'}" aria-hidden="true" />
+		</div>
+	{:else}
+		<div class="h-5 w-5 animate-pulse rounded bg-canvas-300 dark:bg-canvas-700"></div>
+	{/if}
+</button>

package/dist/components/layout/ThemeToggle.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;
+//# sourceMappingURL=ThemeToggle.svelte.d.ts.map

package/dist/components/layout/ThemeToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/ThemeToggle.svelte.ts"],"names":[],"mappings":"AAsDA,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/layout/WolfToggle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { wolfMode } from '../../stores/wolfMode.js';
+
+	let isWolfMode = $state(false);
+	$effect(() => {
+		const unsubscribe = wolfMode.subscribe((value) => { isWolfMode = value; });
+		return unsubscribe;
+	});
+</script>
+
+<button
+	onclick={() => wolfMode.toggle()}
+	class="relative flex h-10 w-10 items-center justify-center rounded-lg bg-canvas-200 text-ink-900 transition-all hover:bg-canvas-300 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700"
+	aria-label={isWolfMode ? 'Disable wolf mode' : 'Enable wolf mode'}
+	type="button"
+	title={isWolfMode ? 'Return to normal text' : 'Transform to wolf speak - awoo!'}
+>
+	<span class="text-2xl transition-transform duration-300 {isWolfMode ? 'scale-125' : 'scale-100'}" aria-hidden="true">🐺</span>
+</button>

package/dist/components/layout/WolfToggle.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const WolfToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type WolfToggle = ReturnType<typeof WolfToggle>;
+export default WolfToggle;
+//# sourceMappingURL=WolfToggle.svelte.d.ts.map

package/dist/components/layout/WolfToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WolfToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/WolfToggle.svelte.ts"],"names":[],"mappings":"AAqBA,QAAA,MAAM,UAAU,2DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/layout/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as WolfToggle } from './WolfToggle.svelte';
+export { DynamicLinks, ScrollToTop, TangledRepos } from './main/index.js';
+export { LinkCard, ProfileCard, PostCard, BlueskyPostCard, TangledRepoCard, MusicStatusCard, KibunStatusCard } from './main/card/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/layout/index.js

@@ -0,0 +1,4 @@
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as WolfToggle } from './WolfToggle.svelte';
+export { DynamicLinks, ScrollToTop, TangledRepos } from './main/index.js';
+export { LinkCard, ProfileCard, PostCard, BlueskyPostCard, TangledRepoCard, MusicStatusCard, KibunStatusCard } from './main/card/index.js';

package/dist/components/layout/main/DynamicLinks.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Card from '../../ui/Card.svelte';
+	import LinkCard from './card/LinkCard.svelte';
+	import { fetchLinks, type LinkData } from '@ewanc26/atproto';
+
+	interface Props { did: string; }
+	let { did }: Props = $props();
+
+	let links = $state<LinkData | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	onMount(async () => {
+		try {
+			links = await fetchLinks(did);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load links';
+		} finally {
+			loading = false;
+		}
+	});
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if loading}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-4 h-6 w-20 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				<div class="grid gap-3 sm:grid-cols-2">
+					{#each Array(4) as _}
+						<div class="rounded-lg bg-canvas-200 p-4 dark:bg-canvas-800">
+							<div class="h-5 w-3/4 rounded bg-canvas-300 dark:bg-canvas-700 mb-2"></div>
+							<div class="h-4 w-1/2 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						</div>
+					{/each}
+				</div>
+			{/snippet}
+		</Card>
+	{:else if error}
+		<Card error={true} errorMessage={error} />
+	{:else if links && links.cards.length > 0}
+		{@const safeLinks = links}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<h2 class="mb-4 text-2xl font-bold text-ink-900 dark:text-ink-50">Links</h2>
+				<div class="grid gap-3 sm:grid-cols-2">
+					{#each safeLinks.cards as link}
+						<LinkCard url={link.url} title={link.text} emoji={link.emoji} />
+					{/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 links available. Create a <code class="rounded bg-canvas-200 px-1 dark:bg-canvas-800">blue.linkat.board</code> record at <a href="https://linkat.blue/" class="text-primary-600 hover:underline dark:text-primary-400" target="_blank" rel="noopener noreferrer">https://linkat.blue/</a></p>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/dist/components/layout/main/DynamicLinks.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    did: string;
+}
+declare const DynamicLinks: import("svelte").Component<Props, {}, "">;
+type DynamicLinks = ReturnType<typeof DynamicLinks>;
+export default DynamicLinks;
+//# sourceMappingURL=DynamicLinks.svelte.d.ts.map

package/dist/components/layout/main/DynamicLinks.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicLinks.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/main/DynamicLinks.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IAAG,GAAG,EAAE,MAAM,CAAC;CAAE;AAkEjC,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/layout/main/ScrollToTop.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { ChevronUp } from '@lucide/svelte';
+
+	let scrollY = $state(0);
+	let isVisible = $derived(scrollY > 300);
+
+	function scrollToTop() {
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	}
+
+	onMount(() => {
+		const updateScrollY = () => (scrollY = window.scrollY);
+		window.addEventListener('scroll', updateScrollY, { passive: true });
+		return () => window.removeEventListener('scroll', updateScrollY);
+	});
+</script>
+
+<svelte:window bind:scrollY />
+
+<div
+	class="fixed bottom-8 left-8 z-50 transition-opacity duration-300 motion-reduce:transition-none sm:bottom-6 sm:left-6"
+	class:opacity-100={isVisible}
+	class:opacity-0={!isVisible}
+>
+	<button
+		onclick={scrollToTop}
+		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); scrollToTop(); } }}
+		aria-label="Scroll to top"
+		title="Scroll to top"
+		type="button"
+		class="flex h-12 w-12 items-center justify-center rounded-full border border-primary-200 bg-canvas-100 text-ink-900 shadow-lg transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-primary-500 hover:text-ink-50 hover:shadow-xl focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none motion-reduce:transition-none motion-reduce:hover:translate-y-0 sm:h-11 sm:w-11 dark:border-primary-800 dark:bg-canvas-900 dark:text-ink-50 dark:hover:bg-primary-600"
+	>
+		<ChevronUp width="20" height="20" aria-hidden="true" />
+	</button>
+</div>

package/dist/components/layout/main/ScrollToTop.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const ScrollToTop: import("svelte").Component<Record<string, never>, {}, "">;
+type ScrollToTop = ReturnType<typeof ScrollToTop>;
+export default ScrollToTop;
+//# sourceMappingURL=ScrollToTop.svelte.d.ts.map

package/dist/components/layout/main/ScrollToTop.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/main/ScrollToTop.svelte.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/layout/main/card/BlueskyPostCard.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+	import Card from '../../../ui/Card.svelte';
+	import { fetchLatestBlueskyPost, type BlueskyPost } from '@ewanc26/atproto';
+	import { formatRelativeTime } from '../../../../utils/locale.js';
+	import { formatCompactNumber } from '../../../../utils/formatNumber.js';
+	import { Heart, Repeat2, MessageCircle, ExternalLink, X } from '@lucide/svelte';
+	import Hls from 'hls.js';
+
+	interface Props {
+		did: string;
+		post?: BlueskyPost | null;
+	}
+
+	let { did, post: initialPost = null }: Props = $props();
+
+	let post = $state<BlueskyPost | null>(null);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let lightboxImage = $state<{ url: string; alt: string } | null>(null);
+	let videoElements = new Map<string, { element: HTMLVideoElement; hls: Hls | null }>();
+
+	const locale = typeof navigator !== 'undefined' ? navigator.language || 'en-GB' : 'en-GB';
+	const POLL_INTERVAL = 2 * 60 * 1000;
+
+	async function loadPost() {
+		try {
+			const newPost = await fetchLatestBlueskyPost(did);
+			if (newPost && (!post || newPost.uri !== post.uri)) post = newPost;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load latest post';
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		if (initialPost && !post) post = initialPost;
+		if (!post) { loading = true; loadPost(); }
+		const pollInterval = setInterval(() => loadPost(), POLL_INTERVAL);
+		return () => {
+			clearInterval(pollInterval);
+			videoElements.forEach(({ hls }) => { if (hls) hls.destroy(); });
+			videoElements.clear();
+		};
+	});
+
+	function getPostUrl(uri: string): string {
+		const parts = uri.split('/');
+		return `https://witchsky.app/profile/${parts[2]}/post/${parts[4]}`;
+	}
+
+	function getProfileUrl(handle: string): string {
+		return `https://witchsky.app/profile/${handle}`;
+	}
+
+	function openLightbox(url: string, alt: string) {
+		lightboxImage = { url, alt };
+		document.body.style.overflow = 'hidden';
+	}
+
+	function closeLightbox() {
+		lightboxImage = null;
+		document.body.style.overflow = '';
+	}
+
+	function escapeHtml(text: string): string {
+		const div = document.createElement('div');
+		div.textContent = text;
+		return div.innerHTML;
+	}
+
+	function renderRichText(text: string, facets?: any[]): string {
+		if (!facets?.length) return escapeHtml(text);
+		const sortedFacets = [...facets].sort((a, b) => a.index.byteStart - b.index.byteStart);
+		const encoder = new TextEncoder();
+		const decoder = new TextDecoder();
+		const bytes = encoder.encode(text);
+		let result = '';
+		let lastByteIndex = 0;
+		for (const facet of sortedFacets) {
+			const { byteStart, byteEnd } = facet.index;
+			if (lastByteIndex < byteStart) result += escapeHtml(decoder.decode(bytes.slice(lastByteIndex, byteStart)));
+			const facetText = decoder.decode(bytes.slice(byteStart, byteEnd));
+			const feature = facet.features?.[0];
+			if (feature) {
+				if (feature.$type === 'app.bsky.richtext.facet#link') {
+					result += `<a href="${escapeHtml(feature.uri)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline">${escapeHtml(facetText)}</a>`;
+				} else if (feature.$type === 'app.bsky.richtext.facet#mention') {
+					result += `<a href="https://witchsky.app/profile/${escapeHtml(feature.did)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium">${escapeHtml(facetText)}</a>`;
+				} else if (feature.$type === 'app.bsky.richtext.facet#tag') {
+					result += `<a href="https://witchsky.app/hashtag/${escapeHtml(feature.tag)}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium">${escapeHtml(facetText)}</a>`;
+				} else { result += escapeHtml(facetText); }
+			} else { result += escapeHtml(facetText); }
+			lastByteIndex = byteEnd;
+		}
+		if (lastByteIndex < bytes.length) result += escapeHtml(new TextDecoder().decode(bytes.slice(lastByteIndex)));
+		return result;
+	}
+
+	function setupVideo(videoElement: HTMLVideoElement, videoUrl: string) {
+		if (!videoElement || !videoUrl) return;
+		const existing = videoElements.get(videoUrl);
+		if (existing?.hls) existing.hls.destroy();
+		let hls: Hls | null = null;
+		if (videoUrl.includes('.m3u8')) {
+			if (Hls.isSupported()) {
+				hls = new Hls({ enableSoftwareAES: true, maxBufferLength: 30, maxMaxBufferLength: 600 });
+				hls.loadSource(videoUrl);
+				hls.attachMedia(videoElement);
+				videoElements.set(videoUrl, { element: videoElement, hls });
+			} else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+				videoElement.src = videoUrl;
+				videoElements.set(videoUrl, { element: videoElement, hls: null });
+			}
+		} else {
+			videoElement.src = videoUrl;
+			videoElements.set(videoUrl, { element: videoElement, hls: null });
+		}
+		return { destroy() { if (hls) hls.destroy(); videoElements.delete(videoUrl); } };
+	}
+</script>
+
+{#snippet postContent(postData: BlueskyPost, depth: number = 0, isReplyParent: boolean = false)}
+	<div>
+		<div class="relative flex gap-3">
+			<a href={getProfileUrl(postData.author.handle)} target="_blank" rel="noopener noreferrer" class="shrink-0 transition-opacity hover:opacity-80">
+				{#if postData.author.avatar}
+					<img src={postData.author.avatar} alt={postData.author.displayName || postData.author.handle} class="h-{isReplyParent ? '8' : '10'} w-{isReplyParent ? '8' : '10'} rounded-full object-cover sm:h-{isReplyParent ? '10' : '12'} sm:w-{isReplyParent ? '10' : '12'}" loading="lazy" />
+				{:else}
+					<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-200 dark:bg-primary-800">
+						<span class="text-base font-semibold text-primary-700 dark:text-primary-300">{(postData.author.displayName || postData.author.handle).charAt(0).toUpperCase()}</span>
+					</div>
+				{/if}
+			</a>
+			<div class="min-w-0 flex-1">
+				<a href={getProfileUrl(postData.author.handle)} target="_blank" rel="noopener noreferrer" class="mb-2 inline-block transition-opacity hover:opacity-80">
+					<div class="flex flex-col">
+						<span class="text-base leading-tight font-semibold text-ink-900 dark:text-ink-50">{postData.author.displayName || postData.author.handle}</span>
+						<span class="text-xs leading-tight text-ink-600 dark:text-ink-400">@{postData.author.handle}</span>
+					</div>
+				</a>
+				<div class="overflow-wrap-anywhere mb-3 text-base leading-relaxed wrap-break-word whitespace-pre-wrap text-ink-900 dark:text-ink-50">
+					{@html renderRichText(postData.text, postData.facets)}
+				</div>
+				{#if postData.hasVideo && postData.videoUrl}
+					<div class="mb-3 max-w-full overflow-hidden rounded-xl border border-canvas-300 bg-black dark:border-canvas-700">
+						<video use:setupVideo={postData.videoUrl} controls class="w-full max-w-full" preload="metadata" poster={postData.videoThumbnail} playsinline>
+							<track kind="captions" />
+						</video>
+					</div>
+				{/if}
+				{#if postData.hasImages && postData.imageUrls?.length}
+					<div class="mb-3 grid max-w-full gap-1 {postData.imageUrls.length === 1 ? 'grid-cols-1' : postData.imageUrls.length === 2 ? 'grid-cols-2' : postData.imageUrls.length === 3 ? 'grid-cols-3' : 'grid-cols-2'}">
+						{#each postData.imageUrls as imageUrl, index}
+							<button type="button" onclick={() => openLightbox(imageUrl, postData.imageAlts?.[index] || `Post attachment ${index + 1}`)} class="h-auto w-full max-w-full overflow-hidden rounded-lg border border-canvas-300 transition-opacity hover:opacity-90 dark:border-canvas-700">
+								<img src={imageUrl} alt={postData.imageAlts?.[index] || `Post attachment ${index + 1}`} class="h-auto w-full max-w-full object-cover {postData.imageUrls!.length > 1 ? 'aspect-video' : 'max-h-96'}" loading="lazy" />
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if postData.externalLink}
+					<a href={postData.externalLink.uri} target="_blank" rel="noopener noreferrer" class="mb-3 flex max-w-full flex-col overflow-hidden rounded-xl border border-canvas-300 bg-canvas-200 transition-colors hover:bg-canvas-300 dark:border-canvas-700 dark:bg-canvas-800 dark:hover:bg-canvas-700">
+						{#if postData.externalLink.thumb}<img src={postData.externalLink.thumb} alt={postData.externalLink.title} class="h-48 w-full max-w-full object-cover" loading="lazy" />{/if}
+						<div class="p-3">
+							<h3 class="overflow-wrap-anywhere mb-1 line-clamp-2 text-sm font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{postData.externalLink.title}</h3>
+							{#if postData.externalLink.description}<p class="overflow-wrap-anywhere mb-2 line-clamp-2 text-xs wrap-break-word text-ink-700 dark:text-ink-300">{postData.externalLink.description}</p>{/if}
+							<p class="overflow-wrap-anywhere text-xs wrap-break-word text-ink-600 dark:text-ink-400">{new URL(postData.externalLink.uri).hostname}</p>
+						</div>
+					</a>
+				{/if}
+				{#if postData.quotedPost && depth < 3}
+					<div class="mb-3 rounded-xl border border-canvas-300 bg-canvas-200 p-3 dark:border-canvas-700 dark:bg-canvas-800">
+						{@render postContent(postData.quotedPost, depth + 1, depth === 0)}
+					</div>
+				{/if}
+				{#if !isReplyParent}
+					<div class="flex flex-wrap items-center gap-3 pt-1 text-xs sm:gap-6 sm:text-sm">
+						{#if postData.replyCount !== undefined}<div class="flex items-center gap-1 text-ink-600 dark:text-ink-400"><MessageCircle class="h-3.5 w-3.5" aria-hidden="true" /><span class="font-medium">{formatCompactNumber(postData.replyCount, locale)}</span></div>{/if}
+						{#if postData.repostCount !== undefined}<div class="flex items-center gap-1 text-ink-600 dark:text-ink-400"><Repeat2 class="h-3.5 w-3.5" aria-hidden="true" /><span class="font-medium">{formatCompactNumber(postData.repostCount, locale)}</span></div>{/if}
+						{#if postData.likeCount !== undefined}<div class="flex items-center gap-1 text-ink-600 dark:text-ink-400"><Heart class="h-3.5 w-3.5" aria-hidden="true" /><span class="font-medium">{formatCompactNumber(postData.likeCount, locale)}</span></div>{/if}
+						<time datetime={postData.createdAt} class="ml-auto text-xs font-medium text-ink-700 dark:text-ink-300">{formatRelativeTime(postData.createdAt)}</time>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if loading}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-3 flex items-center gap-3">
+					<div class="h-12 w-12 rounded-full bg-canvas-300 dark:bg-canvas-700"></div>
+					<div class="flex-1 space-y-2">
+						<div class="h-4 w-32 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>
+				</div>
+				<div class="mb-3 space-y-2">
+					<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>
+			{/snippet}
+		</Card>
+	{:else if error}
+		<Card error={true} errorMessage={error} />
+	{:else if post}
+		<article class="rounded-xl bg-canvas-100 p-6 shadow-lg transition-all duration-300 hover:shadow-xl dark:bg-canvas-900">
+			<div class="mb-4 flex items-start justify-between gap-2 sm:items-center">
+				<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
+					<span class="text-xs font-semibold tracking-wide whitespace-nowrap text-ink-700 uppercase dark:text-ink-300">Latest Bluesky Post</span>
+					{#if post.isRepost && post.repostAuthor}
+						<div class="flex items-center gap-1.5 text-xs text-ink-600 dark:text-ink-400">
+							<Repeat2 class="h-3 w-3 shrink-0" aria-hidden="true" />
+							<a href={getProfileUrl(post.repostAuthor.handle)} target="_blank" rel="noopener noreferrer" class="truncate font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400">
+								{post.repostAuthor.displayName || post.repostAuthor.handle}
+							</a>
+							<span class="whitespace-nowrap">reposted</span>
+						</div>
+					{:else if post.replyParent}
+						<div class="flex items-center gap-1.5 text-xs text-ink-600 dark:text-ink-400">
+							<MessageCircle class="h-3 w-3 shrink-0" aria-hidden="true" />
+							<span class="whitespace-nowrap">Replying to</span>
+							<a href={getProfileUrl(post.replyParent.author.handle)} target="_blank" rel="noopener noreferrer" class="truncate font-medium text-primary-600 dark:text-primary-400">@{post.replyParent.author.handle}</a>
+						</div>
+					{/if}
+				</div>
+				<a href={getPostUrl(post.uri)} target="_blank" rel="noopener noreferrer" class="shrink-0 text-ink-600 transition-colors hover:text-primary-600 dark:text-ink-400 dark:hover:text-primary-400" aria-label="View post on Bluesky">
+					<ExternalLink class="h-4 w-4" aria-hidden="true" />
+				</a>
+			</div>
+			{#if post.replyParent}
+				<div class="mb-4 rounded-xl border border-canvas-300 bg-canvas-200 p-3 dark:border-canvas-700 dark:bg-canvas-800">
+					{@render postContent(post.replyParent, 0, true)}
+				</div>
+			{/if}
+			{@render postContent(post, 0, false)}
+		</article>
+	{:else}
+		<Card variant="flat" padding="lg">
+			{#snippet children()}
+				<div class="text-center"><p class="text-ink-700 dark:text-ink-300">No posts found</p></div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>
+
+{#if lightboxImage}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4" onclick={closeLightbox} onkeydown={(e) => e.key === 'Escape' && closeLightbox()} role="button" tabindex="0" aria-label="Close image lightbox">
+		<button type="button" onclick={closeLightbox} class="absolute top-4 right-4 z-10 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70" aria-label="Close">
+			<X class="h-6 w-6" />
+		</button>
+		<div class="relative flex max-h-[90vh] w-full max-w-[90vw] flex-col items-center">
+			<img src={lightboxImage.url} alt={lightboxImage.alt} class="max-h-[80vh] w-full object-contain" loading="lazy" />
+			{#if lightboxImage.alt}
+				<div class="mt-4 w-full rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white">{lightboxImage.alt}</div>
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/components/layout/main/card/BlueskyPostCard.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type BlueskyPost } from '@ewanc26/atproto';
+interface Props {
+    did: string;
+    post?: BlueskyPost | null;
+}
+declare const BlueskyPostCard: import("svelte").Component<Props, {}, "">;
+type BlueskyPostCard = ReturnType<typeof BlueskyPostCard>;
+export default BlueskyPostCard;
+//# sourceMappingURL=BlueskyPostCard.svelte.d.ts.map

package/dist/components/layout/main/card/BlueskyPostCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlueskyPostCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/BlueskyPostCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO3E,UAAU,KAAK;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC1B;AAqQF,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/layout/main/card/KibunStatusCard.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import Card from '../../../ui/Card.svelte';
+	import type { KibunStatusData } from '@ewanc26/atproto';
+	import { formatRelativeTime } from '../../../../utils/locale.js';
+	import { Heart } from '@lucide/svelte';
+
+	interface Props { kibunStatus?: KibunStatusData | null; }
+	let { kibunStatus = null }: Props = $props();
+</script>
+
+<div class="mx-auto w-full max-w-2xl">
+	{#if !kibunStatus}
+		<Card loading={true} variant="elevated" padding="md">
+			{#snippet skeleton()}
+				<div class="mb-3">
+					<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-24 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					</div>
+					<div class="mb-2 flex items-center gap-3">
+						<div class="h-12 w-12 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+						<div class="h-6 w-48 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+					</div>
+					<div class="h-3 w-32 rounded bg-canvas-300 dark:bg-canvas-700"></div>
+				</div>
+			{/snippet}
+		</Card>
+	{:else}
+		{@const s = kibunStatus}
+		<Card variant="elevated" padding="md">
+			{#snippet children()}
+				<div>
+					<div class="mb-4 flex items-center gap-2">
+						<Heart 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">Current Mood</span>
+					</div>
+					<div class="mb-4 flex items-center gap-3">
+						<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-canvas-100 text-3xl dark:bg-canvas-800">{s.emoji}</div>
+						<p class="flex-1 text-lg font-medium wrap-break-word whitespace-normal text-ink-900 dark:text-ink-50">{s.text}</p>
+					</div>
+					<div class="text-xs text-ink-700 dark:text-ink-200">
+						<time datetime={s.createdAt}>{formatRelativeTime(s.createdAt)}</time>
+					</div>
+				</div>
+			{/snippet}
+		</Card>
+	{/if}
+</div>

package/dist/components/layout/main/card/KibunStatusCard.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { KibunStatusData } from '@ewanc26/atproto';
+interface Props {
+    kibunStatus?: KibunStatusData | null;
+}
+declare const KibunStatusCard: import("svelte").Component<Props, {}, "">;
+type KibunStatusCard = ReturnType<typeof KibunStatusCard>;
+export default KibunStatusCard;
+//# sourceMappingURL=KibunStatusCard.svelte.d.ts.map

package/dist/components/layout/main/card/KibunStatusCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KibunStatusCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/KibunStatusCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKvD,UAAU,KAAK;IAAG,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAAE;AAmD1D,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}