@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/mail/MailListItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Message } from './schemas/message.ts';
+type $$ComponentProps = {
+    message: Message;
+    selected?: boolean;
+    onSelect?: (m: Message) => void;
+};
+declare const MailListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MailListItem = ReturnType<typeof MailListItem>;
+export default MailListItem;

package/dist/lib/components/mail/MailView.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar/index.js";
+import { Badge } from "../ui/badge/index.js";
+import { Separator } from "../ui/separator/index.js";
+import { ScrollArea } from "../ui/scroll-area/index.js";
+import { toneBadgeVariant } from "./group-messages.js";
+let { message = null, emptyLabel = "Select a message to read", actions } = $props();
+const toneVariant = $derived(toneBadgeVariant(message?.tone));
+const TONE_LABEL = {
+	destructive: "Error",
+	warning: "Warning",
+	info: "Info",
+	success: "Success"
+};
+const initials = $derived((message?.from.name ?? "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "?");
+function fmt(iso) {
+	if (!iso) return "";
+	const d = new Date(iso);
+	return Number.isNaN(d.getTime()) ? "" : d.toLocaleString();
+}
+</script>
+
+{#if !message}
+	<div class="flex h-full items-center justify-center p-6">
+		<p class="text-center text-sm text-muted-foreground">{emptyLabel}</p>
+	</div>
+{:else}
+	<div class="flex h-full flex-col">
+		<div class="flex items-start gap-3 p-4">
+			<Avatar class="size-10 shrink-0">
+				{#if message.from.avatar}
+					<AvatarImage src={message.from.avatar} alt={message.from.name} />
+				{/if}
+				<AvatarFallback>{initials}</AvatarFallback>
+			</Avatar>
+			<div class="flex min-w-0 flex-1 flex-col gap-1">
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="text-sm font-medium">{message.from.name}</span>
+					{#if message.from.email}
+						<span class="text-xs text-muted-foreground">&lt;{message.from.email}&gt;</span>
+					{/if}
+					{#if toneVariant}
+						<Badge variant={toneVariant} class="text-[0.65rem]">{TONE_LABEL[toneVariant]}</Badge>
+					{/if}
+					{#if message.source}
+						<Badge variant="secondary" class="text-[0.65rem]">{message.source}</Badge>
+					{/if}
+				</div>
+				<h2 class="text-base font-semibold">{message.subject}</h2>
+				<span class="text-xs text-muted-foreground">{fmt(message.receivedAt)}</span>
+			</div>
+		</div>
+		{#if actions}
+			<div class="flex flex-wrap items-center gap-2 border-t px-4 py-2">
+				{@render actions(message)}
+			</div>
+		{/if}
+		<Separator />
+		<ScrollArea class="min-h-0 flex-1">
+			<div class="p-4 text-sm whitespace-pre-wrap text-foreground/90">{message.body}</div>
+		</ScrollArea>
+	</div>
+{/if}

package/dist/lib/components/mail/MailView.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * The reading pane of MailLayout: the selected message's header (sender,
+     * subject, received time, source badge, tone badge), an optional `actions`
+     * snippet row (e.g. Dismiss, View agent →), a separator, then the body in a
+     * scroll area. A muted empty state when nothing is selected. Data-agnostic —
+     * `actions` receives the selected `Message` and renders whatever the
+     * consumer needs; the kit never hardcodes domain actions.
+     *
+     * Threading is a documented follow-on — a future "Message · Thread" Tabs split
+     * over `groupMessagesByThread` will live here; not wired in the rough draft.
+     */
+import type { Snippet } from 'svelte';
+import type { Message } from './schemas/message.ts';
+type $$ComponentProps = {
+    message?: Message | null;
+    emptyLabel?: string;
+    /** Optional action row rendered under the header (e.g. Dismiss, View agent →). */
+    actions?: Snippet<[Message]>;
+};
+declare const MailView: import("svelte").Component<$$ComponentProps, {}, "">;
+type MailView = ReturnType<typeof MailView>;
+export default MailView;

package/dist/lib/components/mail/group-messages.d.ts

@@ -0,0 +1,29 @@
+import type { Message, MessageTone } from './schemas/message.ts';
+/**
+ * Newest-first by `receivedAt` (descending ISO compare), with same-calendar-day
+ * messages further ordered errors → warnings → info → success → (no tone) so
+ * urgent items surface first without breaking the overall recency order across
+ * days. Non-mutating (returns a new array) and stable for exact ties
+ * (preserves input order).
+ */
+export declare function sortMessages(messages: Message[]): Message[];
+/**
+ * Case-insensitive substring match over `from.name`, `from.email`, `subject`,
+ * and `preview`. An empty/whitespace query returns the input order unchanged.
+ */
+export declare function searchMessages(messages: Message[], query: string): Message[];
+/**
+ * Bucket messages by `threadId`. Messages without a `threadId` bucket under
+ * their own `id` (so each is its own thread). Insertion order is preserved
+ * within each bucket (mirrors the defensive Map shape of `groupScheduleItemsByDay`).
+ */
+export declare function groupMessagesByThread(messages: Message[]): Map<string, Message[]>;
+/** Number of unread messages (drives a Tabs badge / unread filter). */
+export declare function unreadCount(messages: Message[]): number;
+/**
+ * Map a message `tone` to the token-based `Badge`/dot variant name
+ * (`destructive` for `error` — the kit's existing severity-red variant; the
+ * others share their name with the badge variant). Centralized so
+ * MailListItem's dot and MailView's badge never drift from each other.
+ */
+export declare function toneBadgeVariant(tone: MessageTone | undefined): 'destructive' | 'warning' | 'info' | 'success' | undefined;

package/dist/lib/components/mail/group-messages.js

@@ -0,0 +1,84 @@
+/** Higher = more urgent; drives the same-day tone sort in `sortMessages`. */
+const TONE_RANK = {
+    error: 0,
+    warning: 1,
+    info: 2,
+    success: 3
+};
+/** `undefined` tone (no severity mapped) sorts after all toned messages. */
+function toneRank(tone) {
+    return tone ? TONE_RANK[tone] : 4;
+}
+/**
+ * Newest-first by `receivedAt` (descending ISO compare), with same-calendar-day
+ * messages further ordered errors → warnings → info → success → (no tone) so
+ * urgent items surface first without breaking the overall recency order across
+ * days. Non-mutating (returns a new array) and stable for exact ties
+ * (preserves input order).
+ */
+export function sortMessages(messages) {
+    return messages
+        .map((m, i) => ({ m, i }))
+        .sort((a, b) => {
+        const dayA = a.m.receivedAt.slice(0, 10);
+        const dayB = b.m.receivedAt.slice(0, 10);
+        if (dayA === dayB) {
+            const toneDiff = toneRank(a.m.tone) - toneRank(b.m.tone);
+            if (toneDiff !== 0)
+                return toneDiff;
+        }
+        if (a.m.receivedAt < b.m.receivedAt)
+            return 1;
+        if (a.m.receivedAt > b.m.receivedAt)
+            return -1;
+        return a.i - b.i; // stable: keep input order for equal timestamps
+    })
+        .map(({ m }) => m);
+}
+/**
+ * Case-insensitive substring match over `from.name`, `from.email`, `subject`,
+ * and `preview`. An empty/whitespace query returns the input order unchanged.
+ */
+export function searchMessages(messages, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return messages;
+    return messages.filter((m) => {
+        const haystack = [m.from.name, m.from.email ?? '', m.subject, m.preview]
+            .join('\n')
+            .toLowerCase();
+        return haystack.includes(q);
+    });
+}
+/**
+ * Bucket messages by `threadId`. Messages without a `threadId` bucket under
+ * their own `id` (so each is its own thread). Insertion order is preserved
+ * within each bucket (mirrors the defensive Map shape of `groupScheduleItemsByDay`).
+ */
+export function groupMessagesByThread(messages) {
+    const groups = new Map();
+    for (const message of messages) {
+        const key = message.threadId ?? message.id;
+        const bucket = groups.get(key);
+        if (bucket)
+            bucket.push(message);
+        else
+            groups.set(key, [message]);
+    }
+    return groups;
+}
+/** Number of unread messages (drives a Tabs badge / unread filter). */
+export function unreadCount(messages) {
+    return messages.filter((m) => !m.read).length;
+}
+/**
+ * Map a message `tone` to the token-based `Badge`/dot variant name
+ * (`destructive` for `error` — the kit's existing severity-red variant; the
+ * others share their name with the badge variant). Centralized so
+ * MailListItem's dot and MailView's badge never drift from each other.
+ */
+export function toneBadgeVariant(tone) {
+    if (!tone)
+        return undefined;
+    return tone === 'error' ? 'destructive' : tone;
+}

package/dist/lib/components/mail/index.d.ts

@@ -0,0 +1,7 @@
+export { default as MailLayout } from './MailLayout.svelte';
+export { default as MailList } from './MailList.svelte';
+export { default as MailListItem } from './MailListItem.svelte';
+export { default as MailView } from './MailView.svelte';
+export { sortMessages, searchMessages, groupMessagesByThread, unreadCount, toneBadgeVariant } from './group-messages.ts';
+export { messageSchema, messageSenderSchema, messageToneSchema, threadSchema } from './schemas/message.ts';
+export type { Message, MessageSender, MessageTone, Thread } from './schemas/message.ts';

package/dist/lib/components/mail/index.js

@@ -0,0 +1,6 @@
+export { default as MailLayout } from './MailLayout.svelte';
+export { default as MailList } from './MailList.svelte';
+export { default as MailListItem } from './MailListItem.svelte';
+export { default as MailView } from './MailView.svelte';
+export { sortMessages, searchMessages, groupMessagesByThread, unreadCount, toneBadgeVariant } from "./group-messages.js";
+export { messageSchema, messageSenderSchema, messageToneSchema, threadSchema } from "./schemas/message.js";

package/dist/lib/components/mail/schemas/message.d.ts

@@ -0,0 +1,79 @@
+import * as z from 'zod/v4';
+/**
+ * The sender of a message. Data-agnostic: the consumer maps its domain row's
+ * author/source into this shape. `email` is a free-form string (NOT `.email()`)
+ * because a sender may be a system/source label, not an address.
+ */
+export declare const messageSenderSchema: z.ZodObject<{
+    name: z.ZodString;
+    email: z.ZodOptional<z.ZodString>;
+    avatar: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+/** Severity-style visual tone; additive/optional so existing consumers are unaffected. */
+export declare const messageToneSchema: z.ZodEnum<{
+    error: "error";
+    success: "success";
+    info: "info";
+    warning: "warning";
+}>;
+/**
+ * A single message in a Mail view. Data-agnostic: the consumer
+ * ({feature}-svelte / app) maps its domain rows into this shape — the Mail kit
+ * pattern never knows about workboard / agents / hq. Reused by HQ (agent
+ * inbox over workboard notifications), and intended for any message surface
+ * (forge issues/PRs, forum-style chat, email).
+ */
+export declare const messageSchema: z.ZodObject<{
+    id: z.ZodString;
+    from: z.ZodObject<{
+        name: z.ZodString;
+        email: z.ZodOptional<z.ZodString>;
+        avatar: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    subject: z.ZodString;
+    preview: z.ZodDefault<z.ZodString>;
+    body: z.ZodDefault<z.ZodString>;
+    receivedAt: z.ZodString;
+    read: z.ZodDefault<z.ZodBoolean>;
+    source: z.ZodOptional<z.ZodString>;
+    threadId: z.ZodOptional<z.ZodString>;
+    tone: z.ZodOptional<z.ZodEnum<{
+        error: "error";
+        success: "success";
+        info: "info";
+        warning: "warning";
+    }>>;
+}, z.core.$strip>;
+/**
+ * Optional thread wrapper (model only — full thread UI is a follow-on).
+ */
+export declare const threadSchema: z.ZodObject<{
+    id: z.ZodString;
+    subject: z.ZodString;
+    messages: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        from: z.ZodObject<{
+            name: z.ZodString;
+            email: z.ZodOptional<z.ZodString>;
+            avatar: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        subject: z.ZodString;
+        preview: z.ZodDefault<z.ZodString>;
+        body: z.ZodDefault<z.ZodString>;
+        receivedAt: z.ZodString;
+        read: z.ZodDefault<z.ZodBoolean>;
+        source: z.ZodOptional<z.ZodString>;
+        threadId: z.ZodOptional<z.ZodString>;
+        tone: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            success: "success";
+            info: "info";
+            warning: "warning";
+        }>>;
+    }, z.core.$strip>>;
+    lastReceivedAt: z.ZodString;
+}, z.core.$strip>;
+export type MessageSender = z.infer<typeof messageSenderSchema>;
+export type MessageTone = z.infer<typeof messageToneSchema>;
+export type Message = z.infer<typeof messageSchema>;
+export type Thread = z.infer<typeof threadSchema>;

package/dist/lib/components/mail/schemas/message.js

@@ -0,0 +1,56 @@
+import * as z from 'zod/v4';
+/**
+ * The sender of a message. Data-agnostic: the consumer maps its domain row's
+ * author/source into this shape. `email` is a free-form string (NOT `.email()`)
+ * because a sender may be a system/source label, not an address.
+ */
+export const messageSenderSchema = z.object({
+    name: z.string().min(1),
+    /** Free-form — a sender may be a system/source, not an address (so NOT `.email()`). */
+    email: z.string().optional(),
+    /** Avatar image URL; the Avatar falls back to initials when absent. */
+    avatar: z.string().optional()
+});
+/** Severity-style visual tone; additive/optional so existing consumers are unaffected. */
+export const messageToneSchema = z.enum(['info', 'warning', 'error', 'success']);
+/**
+ * A single message in a Mail view. Data-agnostic: the consumer
+ * ({feature}-svelte / app) maps its domain rows into this shape — the Mail kit
+ * pattern never knows about workboard / agents / hq. Reused by HQ (agent
+ * inbox over workboard notifications), and intended for any message surface
+ * (forge issues/PRs, forum-style chat, email).
+ */
+export const messageSchema = z.object({
+    id: z.string().min(1),
+    from: messageSenderSchema,
+    /** The list/reading-pane title (a.k.a. title). */
+    subject: z.string().min(1),
+    /** One-line snippet for the list row. */
+    preview: z.string().default(''),
+    /** Reading-pane body (plain text in the rough draft). */
+    body: z.string().default(''),
+    /** ISO-8601; drives sort + relative time. */
+    receivedAt: z.string().datetime(),
+    /** Unread dot when false. */
+    read: z.boolean().default(false),
+    /** Free-form label/badge text — 'workboard', 'email', 'slack' (NOT an enum — data-agnostic). */
+    source: z.string().optional(),
+    /** Optional grouping key (threading is a follow-on; the model carries it now). */
+    threadId: z.string().optional(),
+    /**
+     * Optional visual severity tone — a colored dot in the list row and a badge
+     * in the reading pane header. Data-agnostic (not a workboard-specific enum);
+     * a consumer maps its own severity/priority field onto this. Absent → no
+     * tone indicator rendered (fully backward compatible).
+     */
+    tone: messageToneSchema.optional()
+});
+/**
+ * Optional thread wrapper (model only — full thread UI is a follow-on).
+ */
+export const threadSchema = z.object({
+    id: z.string().min(1),
+    subject: z.string().min(1),
+    messages: z.array(messageSchema).min(1),
+    lastReceivedAt: z.string().datetime()
+});

package/dist/lib/components/markdown/CodeRenderer.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">import { onDestroy } from "svelte";
+import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+import CodeViewer from "../code/CodeViewer.svelte";
+import { Icon } from "../icon";
+import { Button } from "../ui/button";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger("vibeskit-markdown");
+let { text, lang, code, language, appearance = "system", maxHeight = "560px", minHeight = "44px", framed = false } = $props();
+const source = $derived(text ?? code ?? "");
+const sourceLanguage = $derived(lang ?? language ?? "text");
+const viewerLanguage = $derived(resolveMarkdownCodeLanguage(sourceLanguage));
+let copied = $state(false);
+// One pending reset at a time: a second copy restarts the window, and teardown clears it.
+let copiedReset;
+onDestroy(() => clearTimeout(copiedReset));
+function resolveMarkdownCodeLanguage(value) {
+	return value.trim().split(/\s+/)[0]?.toLowerCase() || "text";
+}
+async function copyToClipboard() {
+	const written = await settle(() => navigator.clipboard.writeText(source));
+	if (!written.ok) {
+		logger.error("Failed to copy code", { reason: failureClass(written.error) });
+		return;
+	}
+	copied = true;
+	clearTimeout(copiedReset);
+	copiedReset = setTimeout(() => {
+		copied = false;
+	}, 2e3);
+}
+</script>
+
+<div class="code-block code-block--{appearance}">
+	<div class="code-header">
+		<span class="language">{sourceLanguage}</span>
+		<Button
+			variant="ghost"
+			size="icon"
+			class="copy-button"
+			aria-label={copied ? 'Copied code' : 'Copy code'}
+			title={copied ? 'Copied!' : 'Copy code'}
+			onclick={copyToClipboard}
+		>
+			{#if copied}
+				<Icon icon="lucide:check" size={16} />
+			{:else}
+				<Icon icon="lucide:copy" size={16} />
+			{/if}
+		</Button>
+	</div>
+	<div class="markdown-code-viewer">
+		<CodeViewer
+			code={source}
+			language={viewerLanguage}
+			{appearance}
+			{maxHeight}
+			{minHeight}
+			{framed}
+		/>
+	</div>
+</div>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	.code-block {
+		position: relative;
+		margin: 0.75rem 0;
+		border-radius: 0.5rem;
+		overflow: hidden;
+		border: 1px solid var(--color-border, var(--border, #3e3e3e));
+		background-color: var(--color-background, var(--background, #fff));
+	}
+
+	.code-block--dark,
+	:global(.dark) .code-block--system {
+		background-color: var(--color-background, var(--background, #000));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-block--system {
+			background-color: var(--color-background, var(--background, #000));
+		}
+	}
+
+	.code-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.375rem 0.75rem;
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground, var(--foreground, #111)) 7%,
+			transparent
+		);
+		border-bottom: 1px solid var(--color-border, var(--border, #3e3e3e));
+	}
+
+	.code-block--dark .code-header,
+	:global(.dark) .code-block--system .code-header {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground, var(--foreground, #fff)) 8%,
+			var(--background, #000)
+		);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-block--system .code-header {
+			background-color: color-mix(
+				in srgb,
+				var(--color-foreground, var(--foreground, #fff)) 8%,
+				var(--background, #000)
+			);
+		}
+	}
+
+	.language {
+		max-width: calc(100% - 3rem);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(
+			--color-muted-foreground,
+			var(--muted-foreground, color-mix(in srgb, var(--foreground, #111) 60%, transparent))
+		);
+		text-transform: uppercase;
+	}
+
+	.code-block--dark .language,
+	:global(.dark) .code-block--system .language {
+		color: color-mix(in srgb, var(--color-foreground, var(--foreground, #fff)) 56%, transparent);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-block--system .language {
+			color: color-mix(in srgb, var(--color-foreground, var(--foreground, #fff)) 56%, transparent);
+		}
+	}
+
+	:global(.copy-button) {
+		width: 2rem;
+		height: 2rem;
+		color: var(
+			--color-muted-foreground,
+			var(--muted-foreground, color-mix(in srgb, var(--foreground, #111) 60%, transparent))
+		);
+		transition:
+			color 0.2s,
+			background-color 0.2s;
+	}
+
+	:global(.copy-button:hover) {
+		color: var(--foreground, #111);
+		background-color: color-mix(in srgb, var(--foreground, #fff) 10%, transparent);
+	}
+
+	.code-block--dark :global(.copy-button),
+	:global(.dark) .code-block--system :global(.copy-button) {
+		color: color-mix(in srgb, var(--color-foreground, var(--foreground, #fff)) 56%, transparent);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-block--system :global(.copy-button) {
+			color: color-mix(in srgb, var(--color-foreground, var(--foreground, #fff)) 56%, transparent);
+		}
+	}
+
+	.code-block--dark :global(.copy-button:hover),
+	:global(.dark) .code-block--system :global(.copy-button:hover) {
+		color: var(--color-foreground, var(--foreground, #fff));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.code-block--system :global(.copy-button:hover) {
+			color: var(--color-foreground, var(--foreground, #fff));
+		}
+	}
+
+	.markdown-code-viewer {
+		overflow: hidden;
+	}
+</style>

package/dist/lib/components/markdown/CodeRenderer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /**
+     * @humanspeak/svelte-markdown spreads the marked token into custom components:
+     * fenced-code tokens arrive as `{ type: 'code', lang, text }`. Keep accepting
+     * the legacy direct-call names so external consumers are not forced to care.
+     */
+    text?: string;
+    lang?: string;
+    code?: string;
+    language?: string;
+    appearance?: 'light' | 'dark' | 'system';
+    maxHeight?: string;
+    minHeight?: string;
+    framed?: boolean;
+}
+declare const CodeRenderer: import("svelte").Component<Props, {}, "">;
+type CodeRenderer = ReturnType<typeof CodeRenderer>;
+export default CodeRenderer;

package/dist/lib/components/markdown/ImageRenderer.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+import { Icon } from "../icon";
+const logger = kitLogger("vibeskit-markdown-image");
+let { href, text, src, alt, title } = $props();
+const imageSrc = $derived(href ?? src ?? "");
+const imageAlt = $derived(text ?? alt ?? "");
+let failed = $state(false);
+let imageElement = $state(null);
+/** Rejects with the image's error event; never resolves. Aborting `signal` removes the listener. */
+function imageLoadFailure(element, signal) {
+	return new Promise((_resolve, reject) => {
+		element.addEventListener("error", (event) => reject(event), {
+			once: true,
+			signal
+		});
+	});
+}
+// Use proper event binding instead of inline onerror attribute
+$effect(() => {
+	const element = imageElement;
+	if (!element || failed) return;
+	const watching = new AbortController();
+	void settle(() => imageLoadFailure(element, watching.signal)).then((loaded) => {
+		if (loaded.ok || watching.signal.aborted) return;
+		logger.warn("Markdown image failed to load", { reason: failureClass(loaded.error) });
+		failed = true;
+	});
+	return () => watching.abort();
+});
+</script>
+
+<div class="message-image-wrapper">
+	{#if !failed}
+		<img
+			bind:this={imageElement}
+			src={imageSrc}
+			alt={imageAlt}
+			{title}
+			loading="lazy"
+			class="message-image"
+		/>
+	{:else}
+		<div class="image-error">
+			<Icon icon="lucide:alert-circle" size={20} />
+			<span>Failed to load image</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+	.message-image-wrapper {
+		margin: 1rem 0;
+		position: relative;
+	}
+
+	.message-image {
+		max-width: 100%;
+		height: auto;
+		border-radius: 0.5rem;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+
+	.image-error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 2rem;
+		background-color: var(--color-surface-secondary, #f3f4f6);
+		border-radius: 0.5rem;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.image-error {
+			background-color: var(--color-surface-secondary-dark, #374151);
+		}
+	}
+</style>

package/dist/lib/components/markdown/ImageRenderer.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    href?: string;
+    text?: string;
+    src?: string;
+    alt?: string;
+    title?: string;
+}
+declare const ImageRenderer: import("svelte").Component<Props, {}, "">;
+type ImageRenderer = ReturnType<typeof ImageRenderer>;
+export default ImageRenderer;