@signal9/era-ui 2.2.0 → 2.4.0

package/dist/ai/conversation/conversation-empty-state.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    description?: string;
+    icon?: Snippet;
+    children?: Snippet;
+};
+declare const ConversationEmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConversationEmptyState = ReturnType<typeof ConversationEmptyState>;
+export default ConversationEmptyState;

package/dist/ai/conversation/conversation-scroll-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+	import { Button } from '../../ui/button/index.js';
+	import { cn, eraFly } from '../../utils/index.js';
+	import { getConversationContext } from './context.js';
+
+	let { class: className }: { class?: string } = $props();
+
+	const stick = getConversationContext();
+</script>
+
+{#if !stick.pinned}
+	<div
+		class={cn('absolute bottom-(--era-pad-sm) left-1/2 z-10 -translate-x-1/2', className)}
+		transition:eraFly={{ y: 8 }}
+	>
+		<Button
+			icon
+			size="default"
+			aria-label="Scroll to bottom"
+			class="rounded-full shadow-(--era-shadow-lg)"
+			onclick={() => stick.repin()}
+		>
+			<ArrowDown class="size-(--era-h-xs)" />
+		</Button>
+	</div>
+{/if}

package/dist/ai/conversation/conversation-scroll-button.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const ConversationScrollButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConversationScrollButton = ReturnType<typeof ConversationScrollButton>;
+export default ConversationScrollButton;

package/dist/ai/conversation/conversation.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { StickToBottom } from '../stick-to-bottom.svelte.js';
+	import { setConversationContext } from './context.js';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+
+	// One stick-to-bottom engine per conversation, shared with Content (which
+	// attaches it) and ScrollButton (which reads `pinned`).
+	setConversationContext(new StickToBottom());
+</script>
+
+<div class={cn('relative flex h-full min-h-0 flex-col', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/ai/conversation/conversation.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const Conversation: import("svelte").Component<$$ComponentProps, {}, "">;
+type Conversation = ReturnType<typeof Conversation>;
+export default Conversation;

package/dist/ai/conversation/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './conversation.svelte';
+export { default as Content } from './conversation-content.svelte';
+export { default as ScrollButton } from './conversation-scroll-button.svelte';
+export { default as EmptyState } from './conversation-empty-state.svelte';
+export { setConversationContext, getConversationContext } from './context.js';

package/dist/ai/conversation/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './conversation.svelte';
+export { default as Content } from './conversation-content.svelte';
+export { default as ScrollButton } from './conversation-scroll-button.svelte';
+export { default as EmptyState } from './conversation-empty-state.svelte';
+export { setConversationContext, getConversationContext } from './context.js';

package/dist/ai/copy-button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Copy from '@lucide/svelte/icons/copy';
+	import Check from '@lucide/svelte/icons/check';
+	import X from '@lucide/svelte/icons/x';
+	import { Button } from '../ui/button/index.js';
+	import { cn } from '../utils/index.js';
+
+	let {
+		text,
+		onCopy,
+		class: className
+	}: {
+		text: string;
+		onCopy?: (status: 'success' | 'failure') => void;
+		class?: string;
+	} = $props();
+
+	let status = $state<'idle' | 'success' | 'failure'>('idle');
+	let timer: ReturnType<typeof setTimeout>;
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(text);
+			status = 'success';
+		} catch {
+			status = 'failure';
+		}
+		onCopy?.(status as 'success' | 'failure');
+		clearTimeout(timer);
+		timer = setTimeout(() => (status = 'idle'), 1500);
+	}
+</script>
+
+<Button icon size="icon" aria-label="Copy" class={cn(className)} onclick={copy}>
+	{#if status === 'success'}
+		<Check class="size-(--era-h-xs) text-success" />
+	{:else if status === 'failure'}
+		<X class="size-(--era-h-xs) text-destructive" />
+	{:else}
+		<Copy class="size-(--era-h-xs)" />
+	{/if}
+</Button>

package/dist/ai/copy-button.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    text: string;
+    onCopy?: (status: 'success' | 'failure') => void;
+    class?: string;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/ai/image.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { cn } from '../utils/index.js';
+
+	let {
+		base64,
+		mediaType = 'image/png',
+		alt = '',
+		class: className,
+		...restProps
+	}: HTMLImgAttributes & { base64: string; mediaType?: string } = $props();
+</script>
+
+<img
+	src="data:{mediaType};base64,{base64}"
+	{alt}
+	class={cn('max-w-full rounded-(--era-rd-md) shadow-(--era-shadow)', className)}
+	{...restProps}
+/>

package/dist/ai/image.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLImgAttributes & {
+    base64: string;
+    mediaType?: string;
+};
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/ai/index.d.ts

@@ -0,0 +1,29 @@
+export * as Conversation from './conversation/index.js';
+export * as Message from './message/index.js';
+export * as PromptInput from './prompt-input/index.js';
+export * as Tool from './tool/index.js';
+export * as Reasoning from './reasoning/index.js';
+export * as Task from './task/index.js';
+export * as Sources from './sources/index.js';
+export * as Suggestions from './suggestion/index.js';
+export * as Actions from './actions/index.js';
+export * as Artifact from './artifact/index.js';
+export * as Plan from './plan/index.js';
+export * as Queue from './queue/index.js';
+export * as Confirmation from './confirmation/index.js';
+export * as InlineCitation from './inline-citation/index.js';
+export { Response, repairStreamingMarkdown } from './response/index.js';
+export { default as ContextGauge } from './context/context.svelte';
+export { default as ModelSelector } from './model-selector/model-selector.svelte';
+export { default as OpenInChat, providers as openInProviders } from './open-in-chat/open-in-chat.svelte';
+export { default as WebPreview } from './web-preview/web-preview.svelte';
+export * as ChainOfThought from './chain-of-thought/index.js';
+export { default as Checkpoint } from './checkpoint.svelte';
+export { default as Loader } from './loader.svelte';
+export { default as Shimmer } from './shimmer.svelte';
+export { default as AIImage } from './image.svelte';
+export { default as CopyButton } from './copy-button.svelte';
+export { StickToBottom } from './stick-to-bottom.svelte.js';
+export type { PromptAttachment, PromptMessage, ChatStatus } from './prompt-input/index.js';
+export type { MessageRole, MessageVersion } from './message/index.js';
+export type { ToolState } from './tool/index.js';

package/dist/ai/index.js

@@ -0,0 +1,31 @@
+// The AI layer — chat and agent-UI composites over the ui/ primitives, an
+// era-ui take on Vercel's AI Elements (via the Svelte port). Namespaced parts
+// for the families, flat exports for the singles. `workflow/` is deliberately
+// NOT exported here: it depends on @xyflow/svelte and lives on its own
+// subpath (`@sig-nine/era-ui/ai/workflow`) so the dependency stays opt-in.
+export * as Conversation from './conversation/index.js';
+export * as Message from './message/index.js';
+export * as PromptInput from './prompt-input/index.js';
+export * as Tool from './tool/index.js';
+export * as Reasoning from './reasoning/index.js';
+export * as Task from './task/index.js';
+export * as Sources from './sources/index.js';
+export * as Suggestions from './suggestion/index.js';
+export * as Actions from './actions/index.js';
+export * as Artifact from './artifact/index.js';
+export * as Plan from './plan/index.js';
+export * as Queue from './queue/index.js';
+export * as Confirmation from './confirmation/index.js';
+export * as InlineCitation from './inline-citation/index.js';
+export { Response, repairStreamingMarkdown } from './response/index.js';
+export { default as ContextGauge } from './context/context.svelte';
+export { default as ModelSelector } from './model-selector/model-selector.svelte';
+export { default as OpenInChat, providers as openInProviders } from './open-in-chat/open-in-chat.svelte';
+export { default as WebPreview } from './web-preview/web-preview.svelte';
+export * as ChainOfThought from './chain-of-thought/index.js';
+export { default as Checkpoint } from './checkpoint.svelte';
+export { default as Loader } from './loader.svelte';
+export { default as Shimmer } from './shimmer.svelte';
+export { default as AIImage } from './image.svelte';
+export { default as CopyButton } from './copy-button.svelte';
+export { StickToBottom } from './stick-to-bottom.svelte.js';

package/dist/ai/inline-citation/index.d.ts

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

package/dist/ai/inline-citation/index.js

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

package/dist/ai/inline-citation/inline-citation.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import * as LinkPreview from '../../ui/link-preview/index.js';
+	import { Badge } from '../../ui/badge/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		sources,
+		class: className
+	}: {
+		sources: { href: string; title?: string; quote?: string }[];
+		class?: string;
+	} = $props();
+
+	let index = $state(0);
+	const active = $derived(sources[Math.min(index, sources.length - 1)]);
+	const host = (href: string) => {
+		try {
+			return new URL(href).hostname;
+		} catch {
+			return href;
+		}
+	};
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -- external citation URLs -->
+
+<!-- A citation badge inline with prose; hovering opens the source card with a
+     simple index stepper (no carousel physics — count, prev, next). -->
+<LinkPreview.Root openDelay={100} closeDelay={100}>
+	<LinkPreview.Trigger
+		class={cn('align-baseline', className)}
+		href={active?.href}
+		target="_blank"
+		rel="noreferrer"
+	>
+		<Badge class="ml-1">{host(sources[0]?.href ?? '')}{sources.length > 1 ? ` +${sources.length - 1}` : ''}</Badge>
+	</LinkPreview.Trigger>
+	<LinkPreview.Content class="flex w-72 flex-col gap-(--era-gap)">
+		{#if sources.length > 1}
+			<div class="flex items-center justify-between">
+				<span class="text-body text-muted tabular-nums">{index + 1} of {sources.length}</span>
+				<div class="flex gap-(--era-gap)">
+					<Button icon size="icon" aria-label="Previous source" onclick={() => (index = (index - 1 + sources.length) % sources.length)}>
+						<ChevronLeft class="size-(--era-h-xs)" />
+					</Button>
+					<Button icon size="icon" aria-label="Next source" onclick={() => (index = (index + 1) % sources.length)}>
+						<ChevronRight class="size-(--era-h-xs)" />
+					</Button>
+				</div>
+			</div>
+		{/if}
+		{#if active}
+			<a href={active.href} target="_blank" rel="noreferrer" class="truncate text-body text-primary hover:underline">
+				{active.title ?? active.href}
+			</a>
+			{#if active.quote}
+				<blockquote class="border-s-2 border-divider-faded ps-(--era-gap) text-body text-muted">
+					{active.quote}
+				</blockquote>
+			{/if}
+		{/if}
+	</LinkPreview.Content>
+</LinkPreview.Root>

package/dist/ai/inline-citation/inline-citation.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    sources: {
+        href: string;
+        title?: string;
+        quote?: string;
+    }[];
+    class?: string;
+};
+declare const InlineCitation: import("svelte").Component<$$ComponentProps, {}, "">;
+type InlineCitation = ReturnType<typeof InlineCitation>;
+export default InlineCitation;

package/dist/ai/loader.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { cn } from '../utils/index.js';
+
+	let { class: className }: { class?: string } = $props();
+</script>
+
+<LoaderCircle class={cn('size-(--era-h-xs) animate-spin text-muted', className)} aria-label="Loading" />

package/dist/ai/loader.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const Loader: import("svelte").Component<$$ComponentProps, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/ai/message/branch.svelte.d.ts

@@ -0,0 +1,10 @@
+/** Wrap-around cursor over a message's alternative versions. */
+export declare class BranchController {
+    current: number;
+    total: number;
+    set(index: number): void;
+    previous(): void;
+    next(): void;
+}
+export declare function setBranchContext(ctrl: BranchController): BranchController;
+export declare function getBranchContext(): BranchController;

package/dist/ai/message/branch.svelte.js

@@ -0,0 +1,28 @@
+import { getContext, setContext } from 'svelte';
+/** Wrap-around cursor over a message's alternative versions. */
+export class BranchController {
+    current = $state(0);
+    total = $state(0);
+    set(index) {
+        this.current = Math.min(Math.max(index, 0), Math.max(this.total - 1, 0));
+    }
+    previous() {
+        if (this.total)
+            this.current = (this.current - 1 + this.total) % this.total;
+    }
+    next() {
+        if (this.total)
+            this.current = (this.current + 1) % this.total;
+    }
+}
+const KEY = Symbol('era-ai-branch');
+export function setBranchContext(ctrl) {
+    setContext(KEY, ctrl);
+    return ctrl;
+}
+export function getBranchContext() {
+    const ctx = getContext(KEY);
+    if (!ctx)
+        throw new Error('Branch parts must be used inside <Message.Branch>.');
+    return ctx;
+}

package/dist/ai/message/context.d.ts

@@ -0,0 +1,6 @@
+export type MessageRole = 'user' | 'assistant' | 'system' | 'tool';
+/** One alternative rendering of the same turn (regenerations). */
+export interface MessageVersion {
+    id: string;
+    content: string;
+}

package/dist/ai/message/context.js

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

package/dist/ai/message/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './message.svelte';
+export { default as Content } from './message-content.svelte';
+export { default as Toolbar } from './message-toolbar.svelte';
+export { default as Branch } from './message-branch.svelte';
+export { default as BranchContent } from './message-branch-content.svelte';
+export { default as BranchSelector } from './message-branch-selector.svelte';
+export { BranchController, setBranchContext, getBranchContext } from './branch.svelte.js';
+export type { MessageRole, MessageVersion } from './context.js';

package/dist/ai/message/index.js

@@ -0,0 +1,7 @@
+export { default as Root } from './message.svelte';
+export { default as Content } from './message-content.svelte';
+export { default as Toolbar } from './message-toolbar.svelte';
+export { default as Branch } from './message-branch.svelte';
+export { default as BranchContent } from './message-branch-content.svelte';
+export { default as BranchSelector } from './message-branch-selector.svelte';
+export { BranchController, setBranchContext, getBranchContext } from './branch.svelte.js';

package/dist/ai/message/message-branch-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getBranchContext } from './branch.svelte.js';
+	import type { MessageVersion } from './context.js';
+
+	let {
+		versions,
+		children
+	}: {
+		versions: MessageVersion[];
+		/** Renders the ACTIVE version. */
+		children: Snippet<[MessageVersion]>;
+	} = $props();
+
+	const ctrl = getBranchContext();
+	$effect(() => {
+		ctrl.total = versions.length;
+	});
+	const active = $derived(versions[Math.min(ctrl.current, versions.length - 1)]);
+</script>
+
+{#if active}
+	{@render children(active)}
+{/if}

package/dist/ai/message/message-branch-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { MessageVersion } from './context.js';
+type $$ComponentProps = {
+    versions: MessageVersion[];
+    /** Renders the ACTIVE version. */
+    children: Snippet<[MessageVersion]>;
+};
+declare const MessageBranchContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageBranchContent = ReturnType<typeof MessageBranchContent>;
+export default MessageBranchContent;

package/dist/ai/message/message-branch-selector.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { Button } from '../../ui/button/index.js';
+	import { ButtonGroup } from '../../ui/button-group/index.js';
+	import { cn } from '../../utils/index.js';
+	import { getBranchContext } from './branch.svelte.js';
+
+	let { class: className }: { class?: string } = $props();
+	const ctrl = getBranchContext();
+</script>
+
+{#if ctrl.total > 1}
+	<ButtonGroup class={cn(className)}>
+		<Button icon size="sm" aria-label="Previous version" onclick={() => ctrl.previous()}>
+			<ChevronLeft class="size-(--era-h-xs)" />
+		</Button>
+		<span class="flex items-center px-(--era-inset-sm) text-body text-muted tabular-nums">
+			{ctrl.current + 1} of {ctrl.total}
+		</span>
+		<Button icon size="sm" aria-label="Next version" onclick={() => ctrl.next()}>
+			<ChevronRight class="size-(--era-h-xs)" />
+		</Button>
+	</ButtonGroup>
+{/if}

package/dist/ai/message/message-branch-selector.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const MessageBranchSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageBranchSelector = ReturnType<typeof MessageBranchSelector>;
+export default MessageBranchSelector;

package/dist/ai/message/message-branch.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { BranchController, setBranchContext } from './branch.svelte.js';
+
+	let {
+		onBranchChange,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		onBranchChange?: (index: number) => void;
+		children?: Snippet;
+	} = $props();
+
+	const ctrl = setBranchContext(new BranchController());
+	$effect(() => {
+		onBranchChange?.(ctrl.current);
+	});
+</script>
+
+<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/ai/message/message-branch.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    onBranchChange?: (index: number) => void;
+    children?: Snippet;
+};
+declare const MessageBranch: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageBranch = ReturnType<typeof MessageBranch>;
+export default MessageBranch;

package/dist/ai/message/message-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<!-- Styles itself by the parent Message's role: bubble for the user
+     (whitespace preserved, no markdown), plain full-width prose otherwise. -->
+<div
+	class={cn(
+		'min-w-0 text-body leading-relaxed text-fg',
+		'group-data-[role=user]:max-w-[80%] group-data-[role=user]:rounded-(--era-rd-lg) group-data-[role=user]:bg-(--era-surface-bg-elevated) group-data-[role=user]:p-(--era-pad-sm) group-data-[role=user]:whitespace-pre-wrap group-data-[role=user]:shadow-(--era-shadow)',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/message/message-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const MessageContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageContent = ReturnType<typeof MessageContent>;
+export default MessageContent;

package/dist/ai/message/message-toolbar.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<!-- Ghost action row under an assistant message — hidden until the message is
+     hovered (the convention), always reachable by keyboard focus. -->
+<div
+	class={cn(
+		'flex items-center gap-(--era-gap) opacity-0 transition-opacity duration-(--era-duration) ease-(--era-ease) group-hover:opacity-100 focus-within:opacity-100',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/message/message-toolbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const MessageToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageToolbar = ReturnType<typeof MessageToolbar>;
+export default MessageToolbar;

package/dist/ai/message/message.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import type { MessageRole } from './context.js';
+
+	let {
+		from,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { from: MessageRole; children?: Snippet } = $props();
+</script>
+
+<!-- The modern chat convention: user turns are right-aligned bubbles,
+     assistant turns are full-width prose. No avatars, no timestamps. -->
+<div
+	data-role={from}
+	class={cn(
+		'group flex w-full min-w-0 flex-col gap-(--era-gap)',
+		from === 'user' && 'items-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/ai/message/message.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MessageRole } from './context.js';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+    children?: Snippet;
+};
+declare const Message: import("svelte").Component<$$ComponentProps, {}, "">;
+type Message = ReturnType<typeof Message>;
+export default Message;

package/dist/ai/model-selector/index.d.ts

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

package/dist/ai/model-selector/index.js

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