@ewanc26/ui 0.1.0

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+	import InternalCard from '../../../ui/InternalCard.svelte';
+
+	interface Badge { text: string; color?: 'mint' | 'sage'; }
+	interface Props {
+		url: string;
+		title: string;
+		emoji?: string;
+		description?: string;
+		badges?: Badge[];
+		meta?: string;
+		variant?: 'default' | 'button';
+	}
+
+	let { url, title, emoji, description, badges, meta, variant = 'default' }: Props = $props();
+
+	function getDomain(url: string): string {
+		try { return new URL(url).hostname.replace('www.', ''); } catch { return ''; }
+	}
+
+	let displayDescription = $derived(description || getDomain(url));
+</script>
+
+{#if variant === 'button'}
+	<InternalCard href={url} class="flex-row! items-center! justify-center! gap-2!">
+		{#snippet children()}
+			<span class="font-medium">{title}</span>
+			<ExternalLink class="h-4 w-4 shrink-0" aria-hidden="true" />
+		{/snippet}
+	</InternalCard>
+{:else}
+	<InternalCard href={url}>
+		{#snippet children()}
+			<div class="min-w-0 flex-1 space-y-2">
+				{#if emoji || (badges && badges.length > 0)}
+					<div class="flex flex-wrap items-center gap-2">
+						{#if emoji}<span class="text-lg leading-none">{emoji}</span>{/if}
+						{#if badges && badges.length > 0}
+							{#each badges as badge}
+								{#if badge.color === 'mint'}
+									<span class="rounded bg-secondary-100 px-2 py-0.5 text-xs font-medium text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200">{badge.text}</span>
+								{:else if badge.color === 'sage'}
+									<span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-800 dark:bg-primary-900 dark:text-primary-200">{badge.text}</span>
+								{:else}
+									<span class="text-xs font-semibold text-ink-800 uppercase dark:text-ink-100">{badge.text}</span>
+								{/if}
+							{/each}
+						{/if}
+					</div>
+				{/if}
+				<h3 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">{title}</h3>
+				{#if displayDescription}
+					<p class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200">{displayDescription}</p>
+				{/if}
+				{#if meta}
+					<p class="text-xs font-medium text-ink-800 dark:text-ink-100">{meta}</p>
+				{/if}
+			</div>
+			<ExternalLink class="h-4 w-4 shrink-0 text-ink-700 transition-colors dark:text-ink-200" aria-hidden="true" />
+		{/snippet}
+	</InternalCard>
+{/if}

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

@@ -0,0 +1,17 @@
+interface Badge {
+    text: string;
+    color?: 'mint' | 'sage';
+}
+interface Props {
+    url: string;
+    title: string;
+    emoji?: string;
+    description?: string;
+    badges?: Badge[];
+    meta?: string;
+    variant?: 'default' | 'button';
+}
+declare const LinkCard: import("svelte").Component<Props, {}, "">;
+type LinkCard = ReturnType<typeof LinkCard>;
+export default LinkCard;
+//# sourceMappingURL=LinkCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/LinkCard.svelte.ts"],"names":[],"mappings":"AAOC,UAAU,KAAK;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAAE;AAC1D,UAAU,KAAK;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC/B;AA0DF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/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/dist/components/layout/main/card/MusicStatusCard.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MusicStatusCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/MusicStatusCard.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;AAwG1D,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/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/dist/components/layout/main/card/PostCard.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PostCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/PostCard.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,UAAU,KAAK;IAAG,SAAS,CAAC,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;CAAE;AAiD/D,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/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/dist/components/layout/main/card/ProfileCard.svelte.d.ts

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

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

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

package/dist/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/dist/components/layout/main/card/TangledRepoCard.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TangledReposData, ProfileData } from '@ewanc26/atproto';
+interface Props {
+    repos?: TangledReposData | null;
+    profile?: ProfileData | null;
+    /** Fallback DID if profile handle is unavailable */
+    did?: string;
+}
+declare const TangledRepoCard: import("svelte").Component<Props, {}, "">;
+type TangledRepoCard = ReturnType<typeof TangledRepoCard>;
+export default TangledRepoCard;
+//# sourceMappingURL=TangledRepoCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TangledRepoCard.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/TangledRepoCard.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGrE,UAAU,KAAK;IACd,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AA8EF,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/index.d.ts

@@ -0,0 +1,8 @@
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/layout/main/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/layout/main/card/index.js

@@ -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/dist/components/layout/main/index.d.ts

@@ -0,0 +1,4 @@
+export { default as DynamicLinks } from './DynamicLinks.svelte';
+export { default as ScrollToTop } from './ScrollToTop.svelte';
+export { default as TangledRepos } from './card/TangledRepoCard.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/main/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/components/layout/main/index.js

@@ -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/dist/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/dist/components/seo/MetaTags.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SiteMetadata } from '../../types/index.js';
+interface Props {
+    meta: SiteMetadata;
+    siteMeta: SiteMetadata;
+}
+declare const MetaTags: import("svelte").Component<Props, {}, "">;
+type MetaTags = ReturnType<typeof MetaTags>;
+export default MetaTags;
+//# sourceMappingURL=MetaTags.svelte.d.ts.map

package/dist/components/seo/MetaTags.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaTags.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/seo/MetaTags.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,KAAK;IAAG,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAC;CAAE;AA0ChE,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as MetaTags } from './MetaTags.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/seo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/seo/index.js

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

package/dist/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/dist/components/ui/BlogPostCard.svelte.d.ts

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

package/dist/components/ui/BlogPostCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogPostCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ui/BlogPostCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMhD,UAAU,KAAK;IAAG,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAAE;AA+CrD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}