@aureuma/svelta 0.0.1

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

@@ -0,0 +1,23 @@
+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 ShareButtons: $$__sveltets_2_IsomorphicComponent<{
+    title: string;
+    url: string;
+    label?: string;
+    testId?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ShareButtons = InstanceType<typeof ShareButtons>;
+export default ShareButtons;

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let summary: string;
+</script>
+
+<section
+	class="rounded-2xl border border-border-soft/10 bg-background-soft p-4"
+	data-testid="blog-summary"
+>
+	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">AI SUMMARY</p>
+	<p class="mt-2 text-sm leading-6 text-text-sub">{summary}</p>
+</section>

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

@@ -0,0 +1,20 @@
+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 SummaryCard: $$__sveltets_2_IsomorphicComponent<{
+    summary: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SummaryCard = InstanceType<typeof SummaryCard>;
+export default SummaryCard;

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { BlogCategory } from '../../types/blog';
+
+	export let categories: BlogCategory[];
+	export let selected: string; // "" means all
+	export let onSelect: (slug: string) => void;
+	$: items = [{ label: 'All articles', slug: '' }, ...categories];
+</script>
+
+<div class="relative" data-testid="blog-tags">
+	<div
+		class="fade-mask-x no-scrollbar flex gap-2 overflow-x-auto py-2 md:flex-wrap md:overflow-visible md:[-webkit-mask-image:none] md:[mask-image:none]"
+		role="tablist"
+		aria-label="Blog categories"
+	>
+		{#each items as item (item.slug)}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={selected === item.slug}
+				class="h-[31px] whitespace-nowrap rounded-full border px-3 text-xs font-mono uppercase tracking-[0.6px] transition
+					hover:bg-background-main/60
+					{selected === item.slug
+						? 'border-border-soft/15 bg-background-main text-text-main'
+						: 'border-border-soft/10 bg-background-soft text-text-sub'}"
+				on:click={() => onSelect(item.slug)}
+			>
+				{item.label}
+			</button>
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+import type { BlogCategory } 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 TagTabs: $$__sveltets_2_IsomorphicComponent<{
+    categories: BlogCategory[];
+    selected: string;
+    onSelect: (slug: string) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TagTabs = InstanceType<typeof TagTabs>;
+export default TagTabs;

package/packages/blogkit/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Avatar } from './components/blog/Avatar.svelte';
+export { default as BackLink } from './components/blog/BackLink.svelte';
+export { default as BlogCard } from './components/blog/BlogCard.svelte';
+export { default as BlogHeroCard } from './components/blog/BlogHeroCard.svelte';
+export { default as Container } from './components/blog/Container.svelte';
+export { default as ImageLightbox } from './components/blog/ImageLightbox.svelte';
+export { default as MorePosts } from './components/blog/MorePosts.svelte';
+export { default as ShareButtons } from './components/blog/ShareButtons.svelte';
+export { default as SummaryCard } from './components/blog/SummaryCard.svelte';
+export { default as TagTabs } from './components/blog/TagTabs.svelte';
+export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from './types/blog';

package/packages/blogkit/dist/index.js

@@ -0,0 +1,11 @@
+// Components
+export { default as Avatar } from './components/blog/Avatar.svelte';
+export { default as BackLink } from './components/blog/BackLink.svelte';
+export { default as BlogCard } from './components/blog/BlogCard.svelte';
+export { default as BlogHeroCard } from './components/blog/BlogHeroCard.svelte';
+export { default as Container } from './components/blog/Container.svelte';
+export { default as ImageLightbox } from './components/blog/ImageLightbox.svelte';
+export { default as MorePosts } from './components/blog/MorePosts.svelte';
+export { default as ShareButtons } from './components/blog/ShareButtons.svelte';
+export { default as SummaryCard } from './components/blog/SummaryCard.svelte';
+export { default as TagTabs } from './components/blog/TagTabs.svelte';

package/packages/blogkit/dist/server/blog.d.ts

@@ -0,0 +1,39 @@
+import type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '../types/blog';
+import { z } from 'zod';
+declare const frontmatterSchema: z.ZodObject<{
+    title: z.ZodString;
+    date: z.ZodString;
+    category: z.ZodString;
+    author: z.ZodString;
+    cover: z.ZodString;
+    excerpt: z.ZodOptional<z.ZodString>;
+    summaryAI: z.ZodOptional<z.ZodString>;
+    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    featured: z.ZodOptional<z.ZodBoolean>;
+    draft: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+export type BlogFrontmatter = z.infer<typeof frontmatterSchema>;
+export type BlogFrontmatterAdapter = (args: {
+    data: unknown;
+    content: string;
+    slug: string;
+    path: string;
+}) => BlogFrontmatter;
+type CompiledModule = {
+    default: BlogPostFull['component'];
+};
+export type BlogCreateConfig = {
+    compiledModules: Record<string, () => Promise<CompiledModule>>;
+    rawModules: Record<string, () => Promise<string>>;
+    getAuthor: (id: string) => BlogAuthor;
+    categoryOrder?: string[];
+    mapFrontmatter?: BlogFrontmatterAdapter;
+};
+export declare function createBlog(config: BlogCreateConfig): {
+    getAllPosts: () => Promise<BlogPost[]>;
+    getAllPostsFull: () => Promise<BlogPostFull[]>;
+    getPostBySlug: (slug: string) => Promise<BlogPostFull | null>;
+    getCategories: () => Promise<BlogCategory[]>;
+    pickHero: (posts?: BlogPost[]) => Promise<BlogPost>;
+};
+export {};

package/packages/blogkit/dist/server/blog.js

@@ -0,0 +1,222 @@
+import { DEV } from 'esm-env';
+import matter from 'gray-matter';
+import readingTime from 'reading-time';
+import { z } from 'zod';
+const frontmatterSchema = z.object({
+    title: z.string(),
+    date: z.string(),
+    category: z.string(),
+    author: z.string(),
+    cover: z.string(),
+    excerpt: z.string().optional(),
+    summaryAI: z.string().optional(),
+    tags: z.array(z.string()).optional(),
+    featured: z.boolean().optional(),
+    draft: z.boolean().optional()
+});
+const DEFAULT_CATEGORY_ORDER = [
+    'all',
+    'ai-trends',
+    'announcements',
+    'for-founders',
+    'engineering',
+    'design',
+    'best-practices'
+];
+function slugify(input) {
+    return input
+        .toLowerCase()
+        .trim()
+        .replace(/['"]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function normalizeCategory(label) {
+    const slug = slugify(label);
+    return { label, slug };
+}
+function parseISODate(date) {
+    // Prefer stable UTC parsing for YYYY-MM-DD.
+    if (/^\\d{4}-\\d{2}-\\d{2}$/.test(date)) {
+        const d = new Date(`${date}T00:00:00Z`);
+        if (!Number.isNaN(d.getTime()))
+            return d;
+    }
+    const d = new Date(date);
+    if (Number.isNaN(d.getTime()))
+        throw new Error(`Invalid date: ${date}`);
+    return d;
+}
+const fmtLong = new Intl.DateTimeFormat('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC'
+});
+const fmtShort = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    timeZone: 'UTC'
+});
+function stripForExcerpt(markdown) {
+    return (markdown
+        // remove fenced code blocks
+        .replace(/```[\s\S]*?```/g, '')
+        // remove images
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+        // remove links but keep text
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        // remove headings markers
+        .replace(/^#{1,6}\s+/gm, '')
+        // remove blockquote markers
+        .replace(/^>\s+/gm, '')
+        // remove emphasis markers
+        .replace(/[*_`]/g, '')
+        // collapse whitespace
+        .replace(/\s+/g, ' ')
+        .trim());
+}
+function excerptFromContent(content) {
+    const text = stripForExcerpt(content);
+    if (!text)
+        return '';
+    return text.length > 180 ? `${text.slice(0, 177).trimEnd()}...` : text;
+}
+function minutesToLabels(minutes) {
+    const m = Math.max(1, Math.round(minutes));
+    const unit = m === 1 ? 'minute' : 'minutes';
+    return {
+        minutes: m,
+        short: `${m} min read`,
+        long: `${m} ${unit} read`
+    };
+}
+export function createBlog(config) {
+    const categoryOrder = config.categoryOrder ?? DEFAULT_CATEGORY_ORDER;
+    let cachedMetaIndex = null;
+    let cachedFullIndex = null;
+    let cachedSlugToPath = null;
+    function getSlugToPath() {
+        if (!DEV && cachedSlugToPath)
+            return cachedSlugToPath;
+        const m = new Map();
+        const paths = Object.keys(config.rawModules).sort();
+        for (const path of paths) {
+            const file = path.split('/').pop();
+            const slug = file?.replace(/\.md(?:\?.*)?$/, '');
+            if (!slug)
+                continue;
+            m.set(slug, path);
+        }
+        if (!DEV)
+            cachedSlugToPath = m;
+        return m;
+    }
+    async function buildMetaIndex() {
+        if (!DEV && cachedMetaIndex)
+            return cachedMetaIndex;
+        const posts = [];
+        const paths = Object.keys(config.rawModules).sort();
+        for (const path of paths) {
+            const file = path.split('/').pop();
+            // Glob keys can include query strings depending on bundler usage; normalize aggressively.
+            const slug = file?.replace(/\.md(?:\?.*)?$/, '');
+            if (!slug)
+                continue;
+            const rawFn = config.rawModules[path];
+            if (!rawFn)
+                continue;
+            const raw = await rawFn();
+            const { data, content } = matter(raw);
+            const metadata = config.mapFrontmatter
+                ? config.mapFrontmatter({ data, content, slug, path })
+                : frontmatterSchema.parse(data);
+            if (metadata.draft)
+                continue;
+            const dateObj = parseISODate(metadata.date);
+            const rt = minutesToLabels(readingTime(content).minutes);
+            const category = normalizeCategory(metadata.category);
+            const excerpt = metadata.excerpt?.trim() || excerptFromContent(content);
+            posts.push({
+                slug,
+                title: metadata.title.trim(),
+                excerpt,
+                category,
+                tags: metadata.tags ?? [],
+                author: config.getAuthor(metadata.author),
+                date: metadata.date,
+                dateLong: fmtLong.format(dateObj),
+                dateShort: fmtShort.format(dateObj),
+                readingMinutes: rt.minutes,
+                readingTimeShort: rt.short,
+                readingTimeLong: rt.long,
+                cover: metadata.cover,
+                summaryAI: metadata.summaryAI,
+                featured: Boolean(metadata.featured)
+            });
+        }
+        posts.sort((a, b) => parseISODate(b.date).getTime() - parseISODate(a.date).getTime());
+        if (!DEV)
+            cachedMetaIndex = posts;
+        return posts;
+    }
+    async function getAllPosts() {
+        return buildMetaIndex();
+    }
+    async function getAllPostsFull() {
+        if (!DEV && cachedFullIndex)
+            return cachedFullIndex;
+        const meta = await buildMetaIndex();
+        const slugToPath = getSlugToPath();
+        const full = [];
+        for (const post of meta) {
+            const path = slugToPath.get(post.slug);
+            const compiledFn = path ? config.compiledModules[path] : undefined;
+            if (!compiledFn)
+                continue;
+            const compiled = await compiledFn();
+            full.push({ ...post, component: compiled.default });
+        }
+        if (!DEV)
+            cachedFullIndex = full;
+        return full;
+    }
+    async function getPostBySlug(slug) {
+        const meta = await buildMetaIndex();
+        const post = meta.find((p) => p.slug === slug) ?? null;
+        if (!post)
+            return null;
+        const path = getSlugToPath().get(slug);
+        const compiledFn = path ? config.compiledModules[path] : undefined;
+        if (!compiledFn)
+            return null;
+        const compiled = await compiledFn();
+        return { ...post, component: compiled.default };
+    }
+    async function getCategories() {
+        const posts = await getAllPosts();
+        const map = new Map();
+        for (const p of posts)
+            map.set(p.category.slug, p.category.label);
+        return Array.from(map.entries())
+            .map(([slug, label]) => ({ slug, label }))
+            .sort((a, b) => {
+            const ai = categoryOrder.indexOf(a.slug);
+            const bi = categoryOrder.indexOf(b.slug);
+            if (ai === -1 && bi === -1)
+                return a.label.localeCompare(b.label);
+            if (ai === -1)
+                return 1;
+            if (bi === -1)
+                return -1;
+            return ai - bi;
+        });
+    }
+    async function pickHero(posts) {
+        const list = posts ?? (await getAllPosts());
+        const featured = list.filter((p) => p.featured);
+        return (featured[0] ?? list[0]);
+    }
+    return { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero };
+}

package/packages/blogkit/dist/server/index.d.ts

@@ -0,0 +1 @@
+export { createBlog, type BlogCreateConfig } from './blog';

package/packages/blogkit/dist/server/index.js

@@ -0,0 +1 @@
+export { createBlog } from './blog';

package/packages/blogkit/dist/theme/ThemeSwitcher.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { ThemeController, ThemeMode } from './store';
+
+	export let controller: ThemeController;
+
+	const options: { id: ThemeMode; label: string }[] = [
+		{ id: 'system', label: 'System' },
+		{ id: 'light', label: 'Light' },
+		{ id: 'dark', label: 'Dark' }
+	];
+
+	// Store auto-subscriptions only work on identifiers, so alias it.
+	const themeMode = controller.themeMode;
+	$: currentMode = $themeMode;
+</script>
+
+<div class="flex items-center gap-2">
+	<span class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Theme</span>
+	<div class="inline-flex rounded-full border border-border-soft/10 bg-background-soft p-1">
+		{#each options as opt (opt.id)}
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-mono uppercase tracking-[0.6px] transition
+					hover:bg-background-main/60
+					{(currentMode === opt.id && 'bg-background-main shadow-sm') || 'text-text-sub'}"
+				onclick={() => controller.setThemeMode(opt.id)}
+				aria-pressed={currentMode === opt.id}
+			>
+				{opt.label}
+			</button>
+		{/each}
+	</div>
+</div>
+

package/packages/blogkit/dist/theme/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ThemeController } from './store';
+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 ThemeSwitcher: $$__sveltets_2_IsomorphicComponent<{
+    controller: ThemeController;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeSwitcher = InstanceType<typeof ThemeSwitcher>;
+export default ThemeSwitcher;

package/packages/blogkit/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { createThemeController, type ThemeController, type ThemeMode } from './store';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/packages/blogkit/dist/theme/index.js

@@ -0,0 +1,2 @@
+export { createThemeController } from './store';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/packages/blogkit/dist/theme/store.d.ts

@@ -0,0 +1,12 @@
+import { type Writable } from 'svelte/store';
+export type ThemeMode = 'system' | 'light' | 'dark';
+export type ThemeController = {
+    storageKey: string;
+    themeMode: Writable<ThemeMode>;
+    initTheme: () => void | (() => void);
+    setThemeMode: (mode: ThemeMode) => void;
+};
+export declare function createThemeController(opts?: {
+    storageKey?: string;
+    defaultMode?: ThemeMode;
+}): ThemeController;

package/packages/blogkit/dist/theme/store.js

@@ -0,0 +1,50 @@
+import { BROWSER } from 'esm-env';
+import { writable } from 'svelte/store';
+function resolve(mode) {
+    if (mode === 'light' || mode === 'dark')
+        return mode;
+    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+    return prefersDark ? 'dark' : 'light';
+}
+function apply(mode) {
+    const resolved = resolve(mode);
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(resolved);
+    document.documentElement.dataset.theme = mode;
+}
+export function createThemeController(opts) {
+    const storageKey = opts?.storageKey ?? 'blogkit-theme';
+    const defaultMode = opts?.defaultMode ?? 'system';
+    const themeMode = writable(defaultMode);
+    function readStored() {
+        const v = localStorage.getItem(storageKey);
+        if (v === 'light' || v === 'dark' || v === 'system')
+            return v;
+        return defaultMode;
+    }
+    function initTheme() {
+        if (!BROWSER)
+            return;
+        const mode = readStored();
+        themeMode.set(mode);
+        apply(mode);
+        const mq = window.matchMedia?.('(prefers-color-scheme: dark)');
+        const onChange = () => {
+            let current = mode;
+            const unsub = themeMode.subscribe((v) => (current = v));
+            unsub();
+            if (current === 'system')
+                apply('system');
+        };
+        mq?.addEventListener?.('change', onChange);
+        return () => mq?.removeEventListener?.('change', onChange);
+    }
+    function setThemeMode(mode) {
+        themeMode.set(mode);
+        if (!BROWSER)
+            return;
+        localStorage.setItem(storageKey, mode);
+        apply(mode);
+    }
+    return { storageKey, themeMode, initTheme, setThemeMode };
+}

package/packages/blogkit/dist/types/blog.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType } from 'svelte';
+export type BlogCategory = {
+    label: string;
+    slug: string;
+};
+export type BlogAuthor = {
+    id: string;
+    name: string;
+    title: string;
+    avatar: string;
+};
+export type BlogPost = {
+    slug: string;
+    title: string;
+    excerpt: string;
+    category: BlogCategory;
+    tags: string[];
+    author: BlogAuthor;
+    date: string;
+    dateLong: string;
+    dateShort: string;
+    readingMinutes: number;
+    readingTimeShort: string;
+    readingTimeLong: string;
+    cover: string;
+    summaryAI?: string;
+    featured: boolean;
+};
+export type BlogPostFull = BlogPost & {
+    component: ComponentType;
+};

package/packages/blogkit/dist/types/blog.js

@@ -0,0 +1 @@
+export {};

package/packages/blogkit/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@aureuma/blogkit",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "svelte": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Aureuma/svelta.git",
+    "directory": "packages/blogkit"
+  },
+  "bugs": {
+    "url": "https://github.com/Aureuma/svelta/issues"
+  },
+  "homepage": "https://github.com/Aureuma/svelta/tree/main/packages/blogkit#readme",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "blog",
+    "markdown",
+    "mdsvex",
+    "shiki",
+    "tailwind"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package --tsconfig ./tsconfig.json",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "dependencies": {
+    "esm-env": "^1.2.2",
+    "gray-matter": "^4.0.3",
+    "reading-time": "^1.5.0",
+    "zod": "^4.3.6"
+  }
+}

package/packages/blogkit/src/lib/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"
+/>