@aureuma/svelta 0.0.1

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@aureuma/svelta",
+	"private": false,
+	"version": "0.0.1",
+	"type": "module",
+	"workspaces": [
+		"packages/*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"postinstall": "npm -w @aureuma/blogkit run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:e2e": "playwright test",
+		"test": "npm run check && npm run test:e2e",
+		"changeset": "changeset",
+		"version-packages": "changeset version",
+		"release": "changeset publish"
+	},
+	"devDependencies": {
+		"@changesets/changelog-github": "^0.5.2",
+		"@changesets/cli": "^2.29.8",
+		"@playwright/test": "^1.58.2",
+		"@shikijs/rehype": "^3.22.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/postcss": "^4.1.18",
+		"@tailwindcss/typography": "^0.5.19",
+		"@types/node": "^25.2.2",
+		"autoprefixer": "^10.4.24",
+		"mdsvex": "^0.12.6",
+		"postcss": "^8.5.6",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-slug": "^6.0.0",
+		"remark-gfm": "^4.0.1",
+		"shiki": "^3.22.0",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"svelte2tsx": "^0.7.47",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@fontsource/geist-mono": "^5.2.7",
+		"@fontsource/inter": "^5.2.8",
+		"gray-matter": "^4.0.3",
+		"reading-time": "^1.5.0",
+		"zod": "^4.3.6"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/packages/blogkit/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @aureuma/blogkit Changelog
+
+All notable changes to this package will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+

package/packages/blogkit/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Aureuma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/packages/blogkit/README.md

@@ -0,0 +1,93 @@
+# @aureuma/blogkit
+
+A Mintlify-inspired blog UI + content pipeline helpers for SvelteKit + mdsvex.
+
+This repo keeps `svelta` as a demo app, and exposes the reusable parts as a local workspace package under `packages/blogkit`.
+
+## What you get
+
+- Blog UI components: hero card, post cards, tag tabs, share buttons, summary card, more-posts grid, image lightbox.
+- Server helpers: `createBlog()` to load Markdown posts (frontmatter, excerpt, reading-time, categories, hero).
+- Theme helper: `createThemeController()` and a simple theme switcher component.
+
+### Compatibility
+
+- Component source is compatible with Svelte 4 and Svelte 5 (no runes required).
+- If you already have an existing frontmatter schema, use `mapFrontmatter` to adapt it to BlogKit's expected fields.
+
+## Use In Another Repo
+
+### Install from npm
+
+```sh
+npm i @aureuma/blogkit
+```
+
+### Option A: mono-repo / workspaces (recommended)
+
+1. Add this repo as a submodule (or subtree) inside your project:
+
+```sh
+git submodule add git@github.com:Aureuma/svelta.git packages/svelta
+```
+
+2. Point your workspace config at the package:
+
+```json
+{
+  "workspaces": ["packages/*", "packages/svelta/packages/*"]
+}
+```
+
+3. Import and use:
+
+```ts
+import { BlogCard } from '@aureuma/blogkit';
+import { createBlog } from '@aureuma/blogkit/server';
+```
+
+### Option B: publish to npm
+
+1. Set `"private": false` in `packages/blogkit/package.json`.
+2. From `packages/blogkit`, run `npm publish`.
+
+## Integration Steps (SvelteKit)
+
+1. mdsvex: configure Markdown compilation (`.md`) and Shiki/anchors (see this repo's `svelte.config.js`).
+2. Content:
+   - posts: `src/content/blog/*.md` with YAML frontmatter
+   - assets: `static/blog/covers/*` and `static/blog/authors/*`
+3. Blog loader glue:
+
+```ts
+// src/lib/server/blog.ts
+import { createBlog } from '@aureuma/blogkit/server';
+import { getAuthor } from '$lib/content/authors';
+import type { BlogPostFull } from '@aureuma/blogkit';
+
+type CompiledModule = { default: BlogPostFull['component'] };
+
+const compiledModules = import.meta.glob('/src/content/blog/*.md') as Record<
+  string,
+  () => Promise<CompiledModule>
+>;
+const rawModules = import.meta.glob('/src/content/blog/*.md', {
+  query: '?raw',
+  import: 'default'
+}) as Record<string, () => Promise<string>>;
+
+export const blog = createBlog({ compiledModules, rawModules, getAuthor });
+export const { getAllPosts, getPostBySlug, getCategories, pickHero } = blog;
+```
+
+4. Tailwind: ensure your `content` globs include the package so class names are not purged.
+   - If installed from npm: include `./node_modules/@aureuma/blogkit/dist/**/*`.
+
+5. Routes: copy the blog routes from this repo:
+   - `src/routes/blog/*`
+   - `src/routes/feed.xml/*`
+
+## Notes
+
+- `createBlog()` builds the index from raw Markdown only (fast), and imports the compiled mdsvex component only for individual post pages.
+- This package is intended for SvelteKit. UI uses Tailwind utility classes and expects your app to provide the CSS variables/tokens.

package/packages/blogkit/dist/components/blog/Avatar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let src: string;
+	export let alt: string;
+	export let size: number = 48;
+</script>
+
+<img
+	src={src}
+	alt={alt}
+	width={size}
+	height={size}
+	class="shrink-0 rounded-full border border-border-soft/10 bg-background-soft object-cover"
+	style="width: {size}px; height: {size}px;"
+	loading="lazy"
+/>

package/packages/blogkit/dist/components/blog/Avatar.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    src: string;
+    alt: string;
+    size?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/packages/blogkit/dist/components/blog/BackLink.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let href: string = '/blog';
+	export let label: string = 'Back to blog';
+</script>
+
+<a
+	href={href}
+	class="inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-sub transition hover:text-text-main"
+>
+	<svg
+		class="size-4"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d="M15 18l-6-6 6-6" />
+	</svg>
+	<span>{label}</span>
+</a>

package/packages/blogkit/dist/components/blog/BackLink.svelte.d.ts

@@ -0,0 +1,21 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BackLink: $$__sveltets_2_IsomorphicComponent<{
+    href?: string;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BackLink = InstanceType<typeof BackLink>;
+export default BackLink;

package/packages/blogkit/dist/components/blog/BlogCard.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+	import Avatar from './Avatar.svelte';
+
+	export let post: BlogPost;
+	export let variant: 'default' | 'suggestion' = 'default';
+	$: thumbHeight = variant === 'suggestion' ? 'h-[190px]' : 'h-[280px]';
+</script>
+
+<a href={`/blog/${post.slug}`} class="group block" data-testid="blog-card">
+	<div class="relative overflow-hidden rounded-2xl border border-border-soft/10 bg-background-soft {thumbHeight}">
+		<img
+			src={post.cover}
+			alt={post.title}
+			class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
+			loading="lazy"
+		/>
+	</div>
+
+	<div class="mt-4">
+		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
+		<h3
+			class="mt-1 text-xl font-medium leading-[30px] tracking-tight underline-offset-[6px] decoration-border-soft/30 group-hover:underline"
+		>
+			{post.title}
+		</h3>
+		<p class="mt-2 text-sm leading-6 text-text-sub">{post.excerpt}</p>
+
+		<div class="mt-4 flex items-center gap-3">
+			<Avatar src={post.author.avatar} alt={post.author.name} size={24} />
+			<div class="leading-tight">
+				<div class="text-sm font-medium tracking-tight text-text-main">{post.author.name}</div>
+				<div class="text-xs text-text-muted">{post.author.title}</div>
+			</div>
+		</div>
+	</div>
+</a>

package/packages/blogkit/dist/components/blog/BlogCard.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { BlogPost } from '../../types/blog';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BlogCard: $$__sveltets_2_IsomorphicComponent<{
+    post: BlogPost;
+    variant?: "default" | "suggestion";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BlogCard = InstanceType<typeof BlogCard>;
+export default BlogCard;

package/packages/blogkit/dist/components/blog/BlogHeroCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+
+	export let post: BlogPost;
+</script>
+
+<a
+	href={`/blog/${post.slug}`}
+	data-testid="blog-hero"
+	class="group relative my-12 block h-[480px] overflow-hidden rounded-3xl shadow-drop-md"
+>
+	<img
+		src={post.cover}
+		alt={post.title}
+		class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+		loading="eager"
+	/>
+
+	<div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/25 to-black/0"></div>
+
+	<div class="relative flex h-full flex-col justify-end p-8">
+		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
+		<h2
+			class="mt-2 max-w-3xl text-3xl font-semibold leading-tight tracking-[-0.8px] text-white md:text-4xl"
+		>
+			{post.title}
+		</h2>
+		<p class="mt-3 max-w-2xl text-base leading-6 text-white/80">{post.excerpt}</p>
+
+		<div class="mt-6 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-white/70">
+			<span>{post.dateShort}</span>
+			<span class="text-white/35" aria-hidden="true">•</span>
+			<span>{post.readingTimeShort}</span>
+		</div>
+	</div>
+</a>

package/packages/blogkit/dist/components/blog/BlogHeroCard.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { BlogPost } from '../../types/blog';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BlogHeroCard: $$__sveltets_2_IsomorphicComponent<{
+    post: BlogPost;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BlogHeroCard = InstanceType<typeof BlogHeroCard>;
+export default BlogHeroCard;

package/packages/blogkit/dist/components/blog/Container.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let size: '4xl' | '5xl' = '5xl';
+	$: max = size === '4xl' ? 'max-w-4xl' : 'max-w-5xl';
+</script>
+
+<div class="mx-auto w-full {max} px-6">
+	<slot />
+</div>

package/packages/blogkit/dist/components/blog/Container.svelte.d.ts

@@ -0,0 +1,29 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Container: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    size?: "4xl" | "5xl";
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Container = InstanceType<typeof Container>;
+export default Container;

package/packages/blogkit/dist/components/blog/ImageLightbox.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onDestroy, onMount, tick } from 'svelte';
+
+	export let image: { src: string; alt: string } | null;
+	export let onClose: () => void;
+
+	let dialogEl: HTMLDivElement | null = null;
+
+	$: if (BROWSER) {
+		// Prevent background scroll while open.
+		document.body.style.overflow = image ? 'hidden' : '';
+	}
+
+	$: if (BROWSER && image) {
+		// Ensure the dialog is focusable for Escape-to-close and accessibility.
+		void (async () => {
+			await tick();
+			dialogEl?.focus();
+		})();
+	}
+
+	onMount(() => {
+		if (!BROWSER) return;
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose();
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	});
+
+	onDestroy(() => {
+		if (!BROWSER) return;
+		document.body.style.overflow = '';
+	});
+</script>
+
+{#if image}
+	<div
+		bind:this={dialogEl}
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-6"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+	>
+		<button
+			type="button"
+			class="absolute inset-0 cursor-zoom-out"
+			on:click={onClose}
+			aria-label="Close image"
+		></button>
+		<img
+			src={image.src}
+			alt={image.alt}
+			class="relative max-h-[90vh] max-w-[92vw] rounded-2xl border border-white/10 bg-black/10 object-contain"
+		/>
+	</div>
+{/if}

package/packages/blogkit/dist/components/blog/ImageLightbox.svelte.d.ts

@@ -0,0 +1,24 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImageLightbox: $$__sveltets_2_IsomorphicComponent<{
+    image: {
+        src: string;
+        alt: string;
+    } | null;
+    onClose: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageLightbox = InstanceType<typeof ImageLightbox>;
+export default ImageLightbox;

package/packages/blogkit/dist/components/blog/MorePosts.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+	import BlogCard from './BlogCard.svelte';
+
+	export let posts: BlogPost[];
+</script>
+
+<section class="mt-16" data-testid="blog-more-posts">
+	<h2 class="text-lg font-medium tracking-tight text-text-main">More blog posts to read</h2>
+	<div class="mt-8 grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
+		{#each posts as post (post.slug)}
+			<BlogCard post={post} variant="suggestion" />
+		{/each}
+	</div>
+</section>

package/packages/blogkit/dist/components/blog/MorePosts.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { BlogPost } from '../../types/blog';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MorePosts: $$__sveltets_2_IsomorphicComponent<{
+    posts: BlogPost[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MorePosts = InstanceType<typeof MorePosts>;
+export default MorePosts;

package/packages/blogkit/dist/components/blog/ShareButtons.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+
+	export let title: string;
+	export let url: string;
+	export let label: string = 'Share this article';
+	export let testId: string | undefined = undefined;
+
+	let copied = false;
+
+	function openShare(href: string) {
+		if (!BROWSER) return;
+		window.open(href, '_blank', 'noopener,noreferrer');
+	}
+
+	async function copyLink() {
+		if (!BROWSER) return;
+		try {
+			await navigator.clipboard.writeText(url);
+			copied = true;
+			window.setTimeout(() => (copied = false), 1200);
+		} catch {
+			// Fallback for older browsers.
+			const ta = document.createElement('textarea');
+			ta.value = url;
+			ta.style.position = 'fixed';
+			ta.style.opacity = '0';
+			document.body.appendChild(ta);
+			ta.select();
+			document.execCommand('copy');
+			document.body.removeChild(ta);
+			copied = true;
+			window.setTimeout(() => (copied = false), 1200);
+		}
+	}
+
+	$: encodedUrl = encodeURIComponent(url);
+	$: encodedTitle = encodeURIComponent(title);
+</script>
+
+<div data-testid={testId}>
+	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{label}</p>
+	<div class="mt-3 flex flex-wrap gap-2">
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() =>
+				openShare(`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`)}
+			aria-label="Share on X"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() =>
+				openShare(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`)}
+			aria-label="Share on LinkedIn"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() => openShare(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)}
+			aria-label="Share on Facebook"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={copyLink}
+			aria-label="Copy link"
+		>
+			<svg
+				viewBox="0 0 24 24"
+				class="size-4"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1" />
+				<path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1" />
+			</svg>
+		</button>
+	</div>
+
+	{#if copied}
+		<p class="mt-2 text-xs font-mono uppercase tracking-[0.6px] text-brand">Copied</p>
+	{/if}
+</div>