entasis 0.10.2 → 0.12.0

package/dist/components/AIChat/AIChatSkeleton.svelte

@@ -1,27 +1,23 @@
 <script lang="ts" module>
+	// Assistant replies are flat prose of varying length; user turns are short bubbles.
 	const assistantRows = [
-		{ primary: 'w-4/5 max-w-lg', secondary: 'w-2/3 max-w-md', tertiary: 'w-1/2 max-w-sm' },
-		{ primary: 'w-3/4 max-w-xl', secondary: 'w-4/5 max-w-lg', tertiary: 'w-2/5 max-w-xs' },
-		{ primary: 'w-2/3 max-w-md', secondary: 'w-1/2 max-w-sm', tertiary: 'w-3/5 max-w-md' }
-	] as const;
-	const userRows = [
-		{ primary: 'w-2/5 max-w-sm', secondary: 'w-1/3 max-w-xs' },
-		{ primary: 'w-1/2 max-w-md', secondary: 'w-1/4 max-w-40' }
+		['w-full', 'w-11/12', 'w-3/5'],
+		['w-full', 'w-4/5'],
+		['w-full', 'w-full', 'w-10/12', 'w-2/5']
 	] as const;
 
 	function createSkeletonRows(messageCount: number) {
 		const finiteCount = Number.isFinite(messageCount) ? messageCount : 4;
 		const count = Math.min(8, Math.max(1, Math.trunc(finiteCount)));
-		return Array.from({ length: count }, (_, index) => {
-			if (index % 3 === 1) {
-				return { id: index, side: 'user' as const, layout: userRows[index % userRows.length]! };
-			}
-			return {
-				id: index,
-				side: 'assistant' as const,
-				layout: assistantRows[index % assistantRows.length]!
-			};
-		});
+		return Array.from({ length: count }, (_, index) =>
+			index % 2 === 0
+				? { id: index, side: 'user' as const, lines: [] as readonly string[] }
+				: {
+						id: index,
+						side: 'assistant' as const,
+						lines: assistantRows[Math.floor(index / 2) % assistantRows.length]!
+					}
+		);
 	}
 </script>
 
@@ -37,6 +33,7 @@
 		showHeader = false,
 		showComposer = true,
 		showFooter = false,
+		contentWidth = '48rem',
 		role = 'status',
 		'aria-label': label,
 		'aria-busy': ariaBusy = 'true',
@@ -47,6 +44,9 @@
 	const t = $derived(useI18n());
 	const rows = $derived(createSkeletonRows(messageCount));
 	const classes = $derived(useAIChatTheme(theme));
+	const resolvedContentWidth = $derived(
+		typeof contentWidth === 'number' ? `${contentWidth}px` : contentWidth
+	);
 </script>
 
 <div
@@ -57,6 +57,7 @@
 	aria-label={label ?? t.aiChatConnecting}
 	aria-busy={ariaBusy}
 	class={classes.root({ className })}
+	style:--ai-chat-content-width={resolvedContentWidth}
 >
 	{#if showHeader}
 		<div data-slot="ai-chat-skeleton-header" aria-hidden="true" class={classes.header()}>
@@ -74,20 +75,12 @@
 		<div class={classes.skeletonMessages()}>
 			{#each rows as row (row.id)}
 				{#if row.side === 'user'}
-					<div class="flex justify-end">
-						<div class="flex w-full max-w-[82%] flex-col items-end gap-2">
-							<Skeleton class={`h-4 ${row.layout.primary}`} />
-							<Skeleton class={`h-4 ${row.layout.secondary}`} />
-						</div>
-					</div>
+					<Skeleton data-slot="ai-chat-skeleton-user" class={classes.skeletonUser()} />
 				{:else}
-					<div class="flex gap-3">
-						<Skeleton class="size-8 shrink-0 rounded-full" />
-						<div class="flex min-w-0 flex-1 flex-col gap-2 pt-1">
-							<Skeleton class={`h-4 ${row.layout.primary}`} />
-							<Skeleton class={`h-4 ${row.layout.secondary}`} />
-							<Skeleton class={`h-4 ${row.layout.tertiary}`} />
-						</div>
+					<div data-slot="ai-chat-skeleton-assistant" class={classes.skeletonAssistant()}>
+						{#each row.lines as width, line (line)}
+							<Skeleton class={`h-4 ${width}`} />
+						{/each}
 					</div>
 				{/if}
 			{/each}
@@ -96,15 +89,14 @@
 
 	{#if showComposer}
 		<div data-slot="ai-chat-skeleton-composer" aria-hidden="true" class={classes.composer()}>
-			<div class="grid min-h-24 gap-3">
-				<Skeleton class="h-4 w-3/4" />
+			<div class={classes.skeletonComposer()}>
 				<Skeleton class="h-4 w-1/2" />
-				<div class="mt-2 flex items-center justify-between gap-3">
-					<div class="flex min-w-0 items-center gap-2">
-						<Skeleton class="size-8" />
-						<Skeleton class="h-8 w-24" />
+				<div class="flex items-center justify-between gap-3">
+					<Skeleton class="size-7 rounded-md" />
+					<div class="flex items-center gap-2">
+						<Skeleton class="h-7 w-20 rounded-md" />
+						<Skeleton class="size-7 rounded-md" />
 					</div>
-					<Skeleton class="size-8 shrink-0" />
 				</div>
 			</div>
 		</div>

package/dist/components/AIChat/AIChatSurface.svelte

@@ -26,6 +26,9 @@
 			| 'density'
 			| 'messageSize'
 			| 'messageVariant'
+			| 'messageColor'
+			| 'contentWidth'
+			| 'showFollowUps'
 			| 'messageActions'
 			| 'messageActionsVisibility'
 			| 'messageCopyable'
@@ -59,6 +62,8 @@
 			| 'onQueuedMessageEditCancel'
 			| 'onQueuedMessageReorder'
 			| 'onSteer'
+			| 'submitShortcut'
+			| 'toolbar'
 			| 'header'
 			| 'beforeThread'
 			| 'controls'
@@ -95,6 +100,9 @@
 		density,
 		messageSize,
 		messageVariant,
+		messageColor,
+		contentWidth = '48rem',
+		showFollowUps,
 		messageActions,
 		messageActionsVisibility,
 		messageCopyable,
@@ -128,6 +136,8 @@
 		onQueuedMessageEditCancel,
 		onQueuedMessageReorder,
 		onSteer,
+		submitShortcut,
+		toolbar,
 		header,
 		beforeThread,
 		controls,
@@ -153,6 +163,12 @@
 	let composerSurface = $state<{ focus: () => void }>();
 	const classes = $derived(useAIChatTheme(theme));
 	const t = $derived(useI18n());
+	const resolvedContentWidth = $derived(
+		typeof contentWidth === 'number' ? `${contentWidth}px` : contentWidth
+	);
+	// The default thread shows the error as a row where the reply failed, with a Retry button. An
+	// `errorRegion` replacement, or a replaced thread, keeps the error above the transcript.
+	const errorInThread = $derived(!errorRegion && !thread);
 
 	function displayError(value: unknown): string {
 		if (value instanceof Error && value.message) return value.message;
@@ -164,13 +180,20 @@
 {#if children}
 	<Slot render={children} payload={conversation} />
 {:else}
-	<div bind:this={ref} data-slot="ai-chat" class={classes.root({ className })} {...attachments}>
+	<div
+		bind:this={ref}
+		data-slot="ai-chat"
+		data-density={density === 'compact' || density === 'comfortable' ? density : 'normal'}
+		class={classes.root({ className })}
+		{...attachments}
+		style:--ai-chat-content-width={resolvedContentWidth}
+	>
 		{#if header}
 			<div data-slot="ai-chat-header" class={classes.header()}>
 				<Slot render={header} payload={conversation} />
 			</div>
 		{/if}
-		{#if conversation.error !== undefined}
+		{#if conversation.error !== undefined && !errorInThread}
 			<div data-slot="ai-chat-error" class={classes.error()}>
 				{#if errorRegion}
 					<Slot render={errorRegion} payload={conversation} />
@@ -203,6 +226,9 @@
 			{density}
 			{messageSize}
 			{messageVariant}
+			{messageColor}
+			{showFollowUps}
+			showError={errorInThread}
 			{messageActions}
 			{messageActionsVisibility}
 			{messageCopyable}
@@ -257,6 +283,8 @@
 			{onQueuedMessageEditCancel}
 			{onQueuedMessageReorder}
 			{onSteer}
+			{submitShortcut}
+			{toolbar}
 			{theme}
 		/>
 		{#if footer}

package/dist/components/AIChat/AIChatSurface.svelte.d.ts

@@ -2,7 +2,7 @@ import type { WithAttachments } from '../../types/props.js';
 import type { AIConversationState } from '../AIConversation/aiConversation.state.svelte.js';
 import type { AIThreadItem } from '../AIThread/aiThread.props.js';
 import type { AIChatProps } from './aiChat.props.js';
-type Props<TMessage extends AIThreadItem> = WithAttachments<Pick<AIChatProps<TMessage>, 'ref' | 'queue' | 'models' | 'modelGroups' | 'maxTokens' | 'showContext' | 'showModelSelector' | 'showToc' | 'tocSide' | 'density' | 'messageSize' | 'messageVariant' | 'messageActions' | 'messageActionsVisibility' | 'messageCopyable' | 'messageEditable' | 'messageRetryable' | 'onMessageCopy' | 'onMessageEdit' | 'onMessageRetry' | 'disabled' | 'queueWhileBusy' | 'fileDropzone' | 'fileMultiple' | 'accept' | 'maxFiles' | 'maxFileSize' | 'commands' | 'mentions' | 'references' | 'skills' | 'onSelect' | 'onFilesRejected' | 'onFileReject' | 'onAttachmentAdd' | 'onAttachmentRetry' | 'onAttachmentRemove' | 'onQueueChange' | 'onQueuedMessageAdd' | 'onQueuedMessageCancel' | 'onQueuedMessageEditStart' | 'onQueuedMessageEditCommit' | 'onQueuedMessageEditCancel' | 'onQueuedMessageReorder' | 'onSteer' | 'header' | 'beforeThread' | 'controls' | 'context' | 'modelSelector' | 'children' | 'thread' | 'afterThread' | 'errorRegion' | 'empty' | 'message' | 'tool' | 'marker' | 'suggestionsRegion' | 'toc' | 'composer' | 'footer' | 'class' | 'theme'> & {
+type Props<TMessage extends AIThreadItem> = WithAttachments<Pick<AIChatProps<TMessage>, 'ref' | 'queue' | 'models' | 'modelGroups' | 'maxTokens' | 'showContext' | 'showModelSelector' | 'showToc' | 'tocSide' | 'density' | 'messageSize' | 'messageVariant' | 'messageColor' | 'contentWidth' | 'showFollowUps' | 'messageActions' | 'messageActionsVisibility' | 'messageCopyable' | 'messageEditable' | 'messageRetryable' | 'onMessageCopy' | 'onMessageEdit' | 'onMessageRetry' | 'disabled' | 'queueWhileBusy' | 'fileDropzone' | 'fileMultiple' | 'accept' | 'maxFiles' | 'maxFileSize' | 'commands' | 'mentions' | 'references' | 'skills' | 'onSelect' | 'onFilesRejected' | 'onFileReject' | 'onAttachmentAdd' | 'onAttachmentRetry' | 'onAttachmentRemove' | 'onQueueChange' | 'onQueuedMessageAdd' | 'onQueuedMessageCancel' | 'onQueuedMessageEditStart' | 'onQueuedMessageEditCommit' | 'onQueuedMessageEditCancel' | 'onQueuedMessageReorder' | 'onSteer' | 'submitShortcut' | 'toolbar' | 'header' | 'beforeThread' | 'controls' | 'context' | 'modelSelector' | 'children' | 'thread' | 'afterThread' | 'errorRegion' | 'empty' | 'message' | 'tool' | 'marker' | 'suggestionsRegion' | 'toc' | 'composer' | 'footer' | 'class' | 'theme'> & {
     conversation: AIConversationState<TMessage>;
 }>;
 declare function $$render<TMessage extends AIThreadItem = AIThreadItem>(): {

package/dist/components/AIChat/AIChatThreadSurface.svelte

@@ -24,6 +24,8 @@
 		| 'density'
 		| 'messageSize'
 		| 'messageVariant'
+		| 'messageColor'
+		| 'showFollowUps'
 		| 'messageActions'
 		| 'messageActionsVisibility'
 		| 'messageCopyable'
@@ -37,6 +39,8 @@
 	> & {
 		conversation: AIConversationState<TMessage>;
 		onComposerFocus?: () => void;
+		/** Shows the conversation error as a transcript row. */
+		showError?: boolean;
 	};
 
 	let {
@@ -52,7 +56,10 @@
 		tocSide = 'right',
 		density = 'normal',
 		messageSize = 'normal',
-		messageVariant = 'bubble',
+		messageVariant = 'minimal',
+		messageColor,
+		showFollowUps = true,
+		showError = true,
 		messageActions,
 		messageActionsVisibility,
 		messageCopyable = true,
@@ -114,6 +121,9 @@
 		{density}
 		{messageSize}
 		{messageVariant}
+		{messageColor}
+		{showFollowUps}
+		{showError}
 		{messageActions}
 		{messageActionsVisibility}
 		{messageCopyable}

package/dist/components/AIChat/AIChatThreadSurface.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { AIConversationState } from '../AIConversation/aiConversation.state.svelte.js';
 import type { AIThreadItem } from '../AIThread/aiThread.props.js';
 import type { AIChatProps } from './aiChat.props.js';
-type Props<TMessage extends AIThreadItem> = Pick<AIChatProps<TMessage>, 'thread' | 'empty' | 'message' | 'tool' | 'marker' | 'suggestionsRegion' | 'toc' | 'showToc' | 'tocSide' | 'density' | 'messageSize' | 'messageVariant' | 'messageActions' | 'messageActionsVisibility' | 'messageCopyable' | 'messageEditable' | 'messageRetryable' | 'onMessageCopy' | 'onMessageEdit' | 'onMessageRetry' | 'onSelect' | 'theme'> & {
+type Props<TMessage extends AIThreadItem> = Pick<AIChatProps<TMessage>, 'thread' | 'empty' | 'message' | 'tool' | 'marker' | 'suggestionsRegion' | 'toc' | 'showToc' | 'tocSide' | 'density' | 'messageSize' | 'messageVariant' | 'messageColor' | 'showFollowUps' | 'messageActions' | 'messageActionsVisibility' | 'messageCopyable' | 'messageEditable' | 'messageRetryable' | 'onMessageCopy' | 'onMessageEdit' | 'onMessageRetry' | 'onSelect' | 'theme'> & {
     conversation: AIConversationState<TMessage>;
     onComposerFocus?: () => void;
+    /** Shows the conversation error as a transcript row. */
+    showError?: boolean;
 };
 declare function $$render<TMessage extends AIThreadItem = AIThreadItem>(): {
     props: Props<TMessage>;

package/dist/components/AIChat/aiChat.mcp.d.ts

@@ -1 +1 @@
-export declare const aiChatDescription = "\n# AIChat\n\nAssembled AI conversation surface built from AIConversation, AIThread, AIComposer, AIContext, AIModelSelector, and AIAskUserQuestion. It owns no transport.\n\n## Requires\n\nAIChat renders AIComposer, which is built on Lexical. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add lexical @lexical/history @lexical/link @lexical/list @lexical/markdown @lexical/rich-text @lexical/selection @lexical/utils`\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { AIChat, AIChatSkeleton, type AIChatProps } from './index.ts';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIChat\n  bind:api\n  bind:messages\n  bind:selectedModel\n  {models}\n  {contextUsage}\n  {suggestions}\n  onSubmit={({ message, meta, conversation }) => sendMessage(message, meta, conversation)}\n  onStop={(payload) => stopGeneration(payload)}\n/>\n```\n\nAIChat exposes every AIConversation bindable and event: `api` (the conversation instance handle), `status`, `error`, `messages`, `queuedMessage`, `currentInput`, `files`, `attachments`, `liveText`, `suggestions`, `contextUsage`, `selectedModel`, `streaming`, `activeAskUserQuestion`, `labels`, and all conversation mutation/lifecycle callbacks. `queue` is the bindable ordered AIComposer queue.\n\n## Regions\n\nProduct-level snippets receive the central `AIConversationState` instance directly:\n\n- `children` replaces the complete default surface while retaining the provider.\n- `header`, `beforeThread`, `thread`, `afterThread`, `composer`, and `footer` replace or insert complete surface regions.\n- `errorRegion` replaces the default error alert.\n- `context` and `modelSelector` replace their individual composer controls; `controls` replaces both together.\n- `empty` replaces the transcript empty state; `suggestionsRegion` replaces suggestions inside that empty state.\n- `message`, `tool`, and `marker` customize transcript renderers with their row payloads.\n  Message payloads include the thread-resolved `actionsVisibility` value so custom AIMessage\n  composition does not make intermediate actions permanently visible.\n- `toc` receives the complete `AIThreadTocState`.\n\n```svelte\n<AIChat {messages} {models}>\n  {#snippet beforeThread(state)}\n\t<div>{state.status}</div>\n  {/snippet}\n\n  {#snippet context(state)}\n\t<span>{state.contextUsage?.totalTokens ?? 0} tokens</span>\n  {/snippet}\n\n  {#snippet afterThread(state)}\n\t<div>{state.messages.length} messages</div>\n  {/snippet}\n</AIChat>\n```\n\n## Thread controls\n\nUse `density` for transcript spacing, `messageSize` for the default message scale, and\n`messageVariant` (`bubble` or `minimal`) for default message presentation. Use `showToc`,\n`tocSide`, and `toc` for user-turn navigation. Custom message snippets own their message\npresentation. Configure advanced virtualizer tuning on `AIThread` through direct composition.\n\nUse `messageActions`, `messageActionsVisibility` (`hover`, `always`, or `none`), `messageCopyable`, `messageEditable`, `messageRetryable`, `onMessageCopy`, `onMessageEdit`, and `onMessageRetry` for default message actions. Explicit message-action callbacks take precedence over conversation fallbacks.\nIntermediate assistant segments that continue through tools into another assistant segment omit the\naction region; actions attach to the terminal assistant response for the turn.\n\n## Context and model controls\n\n`models` and `modelGroups` populate the default selector. `maxTokens` defaults to 128000. `showContext` and `showModelSelector` default to true; the model selector renders only when at least one model exists. Custom `context` and `modelSelector` snippets render regardless of those visibility flags. `controls` has precedence over both individual regions.\n\n## Composer behavior\n\nThe default AIComposer remains connected to the central conversation state. AIChat exposes product-level source, file, and queue behavior:\n\n- Queueing: `disabled`, `queueWhileBusy`, `queue`, `onQueueChange`, `onQueuedMessageAdd`, `onQueuedMessageCancel`, `onQueuedMessageEditStart`, `onQueuedMessageEditCommit`, `onQueuedMessageEditCancel`, `onQueuedMessageReorder`, and `onSteer`.\n- Files: `fileDropzone`, `fileMultiple`, `accept`, `maxFiles`, `maxFileSize`, `onFilesRejected`, `onFileReject`, `onAttachmentAdd`, `onAttachmentRetry`, and `onAttachmentRemove`. AIChat defaults `fileDropzone` to true.\n- Suggestions in the editor: `commands`, `mentions`, `references`, and `skills`.\nUse `AIConversation` with `AIThread` and `AIComposer` directly for editor formatting, toolbar, shortcut, and other primitive-level tuning.\n\nConversation `onSubmit`, `onStop`, and `onFilesChange` remain central state events rather than bypassing or duplicating the Composer path.\n\n## Questions and suggestions\n\nAn active `activeAskUserQuestion` replaces both a custom or default composer. The complete request is rendered with every question, initial values, title, requester, context, navigation labels, submit label, and discard label. Answers are retained by request key, and completion or dismissal resolves the captured request through `AIConversationState.resolveAskUserQuestion`.\n\nPrompt `suggestions` render only inside an empty transcript. An explicit `empty` region has precedence. An explicit `onSelect` callback -- the pick event for a suggestion -- has precedence over the default behavior; without it, picking a suggestion updates `currentInput` and focuses the default composer.\n\n## Skeleton\n\nAIChatSkeleton accepts native div attributes plus `messageCount`, `showHeader`, `showComposer`, `showFooter`, `class`, and `theme`. `messageCount` defaults to 4 and is clamped from 1 to 8. Header and footer default off; composer defaults on. The root defaults to `role=\"status\"`, `aria-label=\"Connecting chat\"`, and `aria-busy=\"true\"`, all overridable with native attributes.\n\n```svelte\n<AIChatSkeleton\n  messageCount={6}\n  showHeader\n  showFooter\n  aria-label=\"Loading support conversation\"\n/>\n```\n\n## Theme\n\nUse `theme` or `setAIChatTheme` to override `root`, `header`, `error`, `beforeThread`, `thread`, `afterThread`, `suggestions`, `composer`, `controls`, `footer`, and `skeletonMessages` parts.\n";
+export declare const aiChatDescription = "\n# AIChat\n\nAssembled AI conversation surface built from AIConversation, AIThread, AIComposer, AIContext, AIModelSelector, and AIAskUserQuestion. It owns no transport.\n\n## Requires\n\nAIChat renders AIComposer, which is built on Lexical. Those packages are optional peer dependencies of entasis, so install them alongside it:\n\n`pnpm add lexical @lexical/history @lexical/link @lexical/list @lexical/markdown @lexical/rich-text @lexical/selection @lexical/utils`\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n  import { AIChat, AIChatSkeleton, type AIChatProps } from './index.ts';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIChat\n  bind:api\n  bind:messages\n  bind:selectedModel\n  {models}\n  {contextUsage}\n  {suggestions}\n  onSubmit={({ message, meta, conversation }) => sendMessage(message, meta, conversation)}\n  onStop={(payload) => stopGeneration(payload)}\n/>\n```\n\nAIChat exposes every AIConversation bindable and event: `api` (the conversation instance handle), `status`, `error`, `messages`, `queuedMessage`, `currentInput`, `files`, `attachments`, `liveText`, `suggestions`, `contextUsage`, `selectedModel`, `streaming`, `activeAskUserQuestion`, `labels`, and all conversation mutation/lifecycle callbacks. `queue` is the bindable ordered AIComposer queue.\n\n## Regions\n\nProduct-level snippets receive the central `AIConversationState` instance directly:\n\n- `children` replaces the complete default surface while retaining the provider.\n- `header`, `beforeThread`, `thread`, `afterThread`, `composer`, and `footer` replace or insert complete surface regions.\n- `errorRegion` replaces the default error. Without it, a conversation `error` shows as a row at the end of the transcript, where the reply failed, with a Retry button that calls the conversation's `retry` on the last message (so `onRetry` receives `{ target: { index } }`) and clears the error. An empty transcript shows the error instead of the greeting. A replacement `errorRegion`, or a replaced `thread`, renders above the transcript.\n- `context` and `modelSelector` replace their individual composer controls; `controls` replaces both together.\n- `empty` replaces the transcript empty state (a vertically centred greeting with wrapping suggestion chips); `suggestionsRegion` replaces suggestions inside that empty state and turns off the follow-ups.\n- `message`, `tool`, and `marker` customize transcript renderers with their row payloads.\n  Message payloads include the thread-resolved `actionsVisibility` value so custom AIMessage\n  composition does not make intermediate actions permanently visible.\n- `toc` receives the complete `AIThreadTocState`.\n\n```svelte\n<AIChat {messages} {models}>\n  {#snippet beforeThread(state)}\n\t<div>{state.status}</div>\n  {/snippet}\n\n  {#snippet context(state)}\n\t<span>{state.contextUsage?.totalTokens ?? 0} tokens</span>\n  {/snippet}\n\n  {#snippet afterThread(state)}\n\t<div>{state.messages.length} messages</div>\n  {/snippet}\n</AIChat>\n```\n\n## Layout and thread controls\n\nThe transcript rows and the composer share one centred reading column. `contentWidth` (default\n`'48rem'`; a number is pixels, `'none'` spans the chat) sets the CSS variable\n`--ai-chat-content-width` on the root, which AIThread rows and AIComposer both read.\n\nUse `density` for transcript spacing, `messageSize` for the default message scale (normal reads\nat 14px, large at 16px), `messageVariant` (`minimal`, the default: flat full-width assistant prose; or\n`bubble`: framed assistant replies) and `messageColor` (the user bubble: `neutral` grey by\ndefault, any other role paints a solid bubble \u2014 `primary` gives the previous saturated look). Use\n`showToc`, `tocSide`, and `toc` for user-turn navigation; the table of contents steps aside\nin a thread narrower than 480px. Custom message snippets own their message presentation. Configure\nadvanced virtualizer tuning on `AIThread` through direct composition.\n\nWhile a reply streams and the last item is a user turn, the transcript shows a pending assistant\nrow (\"Thinking\u2026\" or `liveText`, with the `shimmer` utility); the streaming reply shows a caret.\nAI SDK `reasoning`, tool (including approval states), `source-url`/`source-document` and\n`file` parts render in the transcript, and an answered ask-user-question leaves a compact\nquestion \u2192 answer summary.\n\nUse `messageActions`, `messageActionsVisibility` (`latest`, the default, `hover`, `always`, or `none`), `messageCopyable`, `messageEditable`, `messageRetryable`, `onMessageCopy`, `onMessageEdit`, and `onMessageRetry` for default message actions. Explicit message-action callbacks take precedence over conversation fallbacks.\nA turn is one unit: reasoning, tools and text up to the next user message share a single action bar\nat the end of the turn, whose copy takes the whole turn's text. `latest` keeps the final assistant\nturn's bar visible and reveals the others on hover or focus; touch screens always show them. The\nbar of a reply that is still streaming appears when it ends.\n\n## Context and model controls\n\n`models` and `modelGroups` populate the default selector. The default context indicator renders only when there is something to measure: `maxTokens` is set or the conversation reports `contextUsage`. With usage but no `maxTokens`, the percentage is computed against 128000. `showContext` and `showModelSelector` default to true; the model selector renders only when at least one model exists. Custom `context` and `modelSelector` snippets render regardless of those visibility flags. `controls` has precedence over both individual regions. These controls render at the end of the composer footer, next to the send button.\n\n## Composer behavior\n\nThe default AIComposer remains connected to the central conversation state. AIChat exposes product-level source, file, and queue behavior:\n\n- Queueing: `disabled`, `queueWhileBusy`, `queue`, `onQueueChange`, `onQueuedMessageAdd`, `onQueuedMessageCancel`, `onQueuedMessageEditStart`, `onQueuedMessageEditCommit`, `onQueuedMessageEditCancel`, `onQueuedMessageReorder`, and `onSteer`.\n- Files: `fileDropzone`, `fileMultiple`, `accept`, `maxFiles`, `maxFileSize`, `onFilesRejected`, `onFileReject`, `onAttachmentAdd`, `onAttachmentRetry`, and `onAttachmentRemove`. AIChat defaults `fileDropzone` to true.\n- Suggestions in the editor: `commands`, `mentions`, `references`, and `skills`.\n- Editor: `submitShortcut` (AIComposer's default `'enter'`: Enter sends, Shift+Enter adds a line) and `toolbar` (AIComposer's default `'none'`).\nUse `AIConversation` with `AIThread` and `AIComposer` directly for other primitive-level tuning.\n\nConversation `onSubmit`, `onStop`, and `onFilesChange` remain central state events rather than bypassing or duplicating the Composer path.\n\n## Questions and suggestions\n\nAn active `activeAskUserQuestion` replaces both a custom or default composer. The complete request is rendered with every question, initial values, title, requester, context, navigation labels, submit label, and discard label. Answers are retained by request key, and completion or dismissal resolves the captured request through `AIConversationState.resolveAskUserQuestion`.\n\nPrompt `suggestions` render as chips under the empty-state greeting, then as follow-ups above the composer (one row that scrolls sideways on narrow screens) once an assistant turn has finished (not while streaming, during a question, or under an error); `showFollowUps={false}` keeps them to the empty state. An explicit `empty` region has precedence. An explicit `onSelect` callback -- the pick event for a suggestion -- has precedence over the default behavior; without it, picking a suggestion updates `currentInput` and focuses the default composer.\n\n## Skeleton\n\nAIChatSkeleton mirrors the default chat \u2014 user turns as end-aligned bubbles, assistant turns as flat lines, the composer as a bordered card, all in the centred column \u2014 so nothing jumps when the chat replaces it. It accepts native div attributes plus `messageCount`, `showHeader`, `showComposer`, `showFooter`, `contentWidth` (default `'48rem'`, match the chat's), `class`, and `theme`. `messageCount` defaults to 4 and is clamped from 1 to 8. Header and footer default off; composer defaults on. The root defaults to `role=\"status\"`, `aria-label=\"Connecting chat\"`, and `aria-busy=\"true\"`, all overridable with native attributes.\n\n```svelte\n<AIChatSkeleton\n  messageCount={6}\n  showHeader\n  showFooter\n  aria-label=\"Loading support conversation\"\n/>\n```\n\n## Theme\n\nUse `theme` or `setAIChatTheme` to override `root`, `header`, `error`, `beforeThread`, `thread`, `afterThread`, `suggestions`, `composer`, `controls`, `footer`, `skeletonMessages`, `skeletonUser`, `skeletonAssistant`, and `skeletonComposer` parts.\n";

package/dist/components/AIChat/aiChat.mcp.js

@@ -40,9 +40,9 @@ Product-level snippets receive the central \`AIConversationState\` instance dire
 
 - \`children\` replaces the complete default surface while retaining the provider.
 - \`header\`, \`beforeThread\`, \`thread\`, \`afterThread\`, \`composer\`, and \`footer\` replace or insert complete surface regions.
-- \`errorRegion\` replaces the default error alert.
+- \`errorRegion\` replaces the default error. Without it, a conversation \`error\` shows as a row at the end of the transcript, where the reply failed, with a Retry button that calls the conversation's \`retry\` on the last message (so \`onRetry\` receives \`{ target: { index } }\`) and clears the error. An empty transcript shows the error instead of the greeting. A replacement \`errorRegion\`, or a replaced \`thread\`, renders above the transcript.
 - \`context\` and \`modelSelector\` replace their individual composer controls; \`controls\` replaces both together.
-- \`empty\` replaces the transcript empty state; \`suggestionsRegion\` replaces suggestions inside that empty state.
+- \`empty\` replaces the transcript empty state (a vertically centred greeting with wrapping suggestion chips); \`suggestionsRegion\` replaces suggestions inside that empty state and turns off the follow-ups.
 - \`message\`, \`tool\`, and \`marker\` customize transcript renderers with their row payloads.
   Message payloads include the thread-resolved \`actionsVisibility\` value so custom AIMessage
   composition does not make intermediate actions permanently visible.
@@ -64,20 +64,35 @@ Product-level snippets receive the central \`AIConversationState\` instance dire
 </AIChat>
 \`\`\`
 
-## Thread controls
+## Layout and thread controls
 
-Use \`density\` for transcript spacing, \`messageSize\` for the default message scale, and
-\`messageVariant\` (\`bubble\` or \`minimal\`) for default message presentation. Use \`showToc\`,
-\`tocSide\`, and \`toc\` for user-turn navigation. Custom message snippets own their message
-presentation. Configure advanced virtualizer tuning on \`AIThread\` through direct composition.
+The transcript rows and the composer share one centred reading column. \`contentWidth\` (default
+\`'48rem'\`; a number is pixels, \`'none'\` spans the chat) sets the CSS variable
+\`--ai-chat-content-width\` on the root, which AIThread rows and AIComposer both read.
 
-Use \`messageActions\`, \`messageActionsVisibility\` (\`hover\`, \`always\`, or \`none\`), \`messageCopyable\`, \`messageEditable\`, \`messageRetryable\`, \`onMessageCopy\`, \`onMessageEdit\`, and \`onMessageRetry\` for default message actions. Explicit message-action callbacks take precedence over conversation fallbacks.
-Intermediate assistant segments that continue through tools into another assistant segment omit the
-action region; actions attach to the terminal assistant response for the turn.
+Use \`density\` for transcript spacing, \`messageSize\` for the default message scale (normal reads
+at 14px, large at 16px), \`messageVariant\` (\`minimal\`, the default: flat full-width assistant prose; or
+\`bubble\`: framed assistant replies) and \`messageColor\` (the user bubble: \`neutral\` grey by
+default, any other role paints a solid bubble — \`primary\` gives the previous saturated look). Use
+\`showToc\`, \`tocSide\`, and \`toc\` for user-turn navigation; the table of contents steps aside
+in a thread narrower than 480px. Custom message snippets own their message presentation. Configure
+advanced virtualizer tuning on \`AIThread\` through direct composition.
+
+While a reply streams and the last item is a user turn, the transcript shows a pending assistant
+row ("Thinking…" or \`liveText\`, with the \`shimmer\` utility); the streaming reply shows a caret.
+AI SDK \`reasoning\`, tool (including approval states), \`source-url\`/\`source-document\` and
+\`file\` parts render in the transcript, and an answered ask-user-question leaves a compact
+question → answer summary.
+
+Use \`messageActions\`, \`messageActionsVisibility\` (\`latest\`, the default, \`hover\`, \`always\`, or \`none\`), \`messageCopyable\`, \`messageEditable\`, \`messageRetryable\`, \`onMessageCopy\`, \`onMessageEdit\`, and \`onMessageRetry\` for default message actions. Explicit message-action callbacks take precedence over conversation fallbacks.
+A turn is one unit: reasoning, tools and text up to the next user message share a single action bar
+at the end of the turn, whose copy takes the whole turn's text. \`latest\` keeps the final assistant
+turn's bar visible and reveals the others on hover or focus; touch screens always show them. The
+bar of a reply that is still streaming appears when it ends.
 
 ## Context and model controls
 
-\`models\` and \`modelGroups\` populate the default selector. \`maxTokens\` defaults to 128000. \`showContext\` and \`showModelSelector\` default to true; the model selector renders only when at least one model exists. Custom \`context\` and \`modelSelector\` snippets render regardless of those visibility flags. \`controls\` has precedence over both individual regions.
+\`models\` and \`modelGroups\` populate the default selector. The default context indicator renders only when there is something to measure: \`maxTokens\` is set or the conversation reports \`contextUsage\`. With usage but no \`maxTokens\`, the percentage is computed against 128000. \`showContext\` and \`showModelSelector\` default to true; the model selector renders only when at least one model exists. Custom \`context\` and \`modelSelector\` snippets render regardless of those visibility flags. \`controls\` has precedence over both individual regions. These controls render at the end of the composer footer, next to the send button.
 
 ## Composer behavior
 
@@ -86,7 +101,8 @@ The default AIComposer remains connected to the central conversation state. AICh
 - Queueing: \`disabled\`, \`queueWhileBusy\`, \`queue\`, \`onQueueChange\`, \`onQueuedMessageAdd\`, \`onQueuedMessageCancel\`, \`onQueuedMessageEditStart\`, \`onQueuedMessageEditCommit\`, \`onQueuedMessageEditCancel\`, \`onQueuedMessageReorder\`, and \`onSteer\`.
 - Files: \`fileDropzone\`, \`fileMultiple\`, \`accept\`, \`maxFiles\`, \`maxFileSize\`, \`onFilesRejected\`, \`onFileReject\`, \`onAttachmentAdd\`, \`onAttachmentRetry\`, and \`onAttachmentRemove\`. AIChat defaults \`fileDropzone\` to true.
 - Suggestions in the editor: \`commands\`, \`mentions\`, \`references\`, and \`skills\`.
-Use \`AIConversation\` with \`AIThread\` and \`AIComposer\` directly for editor formatting, toolbar, shortcut, and other primitive-level tuning.
+- Editor: \`submitShortcut\` (AIComposer's default \`'enter'\`: Enter sends, Shift+Enter adds a line) and \`toolbar\` (AIComposer's default \`'none'\`).
+Use \`AIConversation\` with \`AIThread\` and \`AIComposer\` directly for other primitive-level tuning.
 
 Conversation \`onSubmit\`, \`onStop\`, and \`onFilesChange\` remain central state events rather than bypassing or duplicating the Composer path.
 
@@ -94,11 +110,11 @@ Conversation \`onSubmit\`, \`onStop\`, and \`onFilesChange\` remain central stat
 
 An active \`activeAskUserQuestion\` replaces both a custom or default composer. The complete request is rendered with every question, initial values, title, requester, context, navigation labels, submit label, and discard label. Answers are retained by request key, and completion or dismissal resolves the captured request through \`AIConversationState.resolveAskUserQuestion\`.
 
-Prompt \`suggestions\` render only inside an empty transcript. An explicit \`empty\` region has precedence. An explicit \`onSelect\` callback -- the pick event for a suggestion -- has precedence over the default behavior; without it, picking a suggestion updates \`currentInput\` and focuses the default composer.
+Prompt \`suggestions\` render as chips under the empty-state greeting, then as follow-ups above the composer (one row that scrolls sideways on narrow screens) once an assistant turn has finished (not while streaming, during a question, or under an error); \`showFollowUps={false}\` keeps them to the empty state. An explicit \`empty\` region has precedence. An explicit \`onSelect\` callback -- the pick event for a suggestion -- has precedence over the default behavior; without it, picking a suggestion updates \`currentInput\` and focuses the default composer.
 
 ## Skeleton
 
-AIChatSkeleton accepts native div attributes plus \`messageCount\`, \`showHeader\`, \`showComposer\`, \`showFooter\`, \`class\`, and \`theme\`. \`messageCount\` defaults to 4 and is clamped from 1 to 8. Header and footer default off; composer defaults on. The root defaults to \`role="status"\`, \`aria-label="Connecting chat"\`, and \`aria-busy="true"\`, all overridable with native attributes.
+AIChatSkeleton mirrors the default chat — user turns as end-aligned bubbles, assistant turns as flat lines, the composer as a bordered card, all in the centred column — so nothing jumps when the chat replaces it. It accepts native div attributes plus \`messageCount\`, \`showHeader\`, \`showComposer\`, \`showFooter\`, \`contentWidth\` (default \`'48rem'\`, match the chat's), \`class\`, and \`theme\`. \`messageCount\` defaults to 4 and is clamped from 1 to 8. Header and footer default off; composer defaults on. The root defaults to \`role="status"\`, \`aria-label="Connecting chat"\`, and \`aria-busy="true"\`, all overridable with native attributes.
 
 \`\`\`svelte
 <AIChatSkeleton
@@ -111,5 +127,5 @@ AIChatSkeleton accepts native div attributes plus \`messageCount\`, \`showHeader
 
 ## Theme
 
-Use \`theme\` or \`setAIChatTheme\` to override \`root\`, \`header\`, \`error\`, \`beforeThread\`, \`thread\`, \`afterThread\`, \`suggestions\`, \`composer\`, \`controls\`, \`footer\`, and \`skeletonMessages\` parts.
+Use \`theme\` or \`setAIChatTheme\` to override \`root\`, \`header\`, \`error\`, \`beforeThread\`, \`thread\`, \`afterThread\`, \`suggestions\`, \`composer\`, \`controls\`, \`footer\`, \`skeletonMessages\`, \`skeletonUser\`, \`skeletonAssistant\`, and \`skeletonComposer\` parts.
 `;

package/dist/components/AIChat/aiChat.props.d.ts

@@ -4,9 +4,10 @@ import type { AIComposerAttachment, AIComposerProps, AIComposerQueuedMessage } f
 import type { AIContextUsage } from '../AIContext/aiContext.props.js';
 import type { AIConversationApi } from '../AIConversation/aiConversation.props.js';
 import type { AIConversationLabelOverrides, AIConversationState, AIConversationStateEvents, AIConversationStatus } from '../AIConversation/aiConversation.state.svelte.js';
-import type { AIMessageActionHandler, AIMessageActionState, AIMessageActionVisibility } from '../AIMessageActions/aiMessageActions.props.js';
+import type { AIMessageActionHandler, AIMessageActionState } from '../AIMessageActions/aiMessageActions.props.js';
 import type { AIModelSelectorGroup, AIModelSelectorModel } from '../AIModelSelector/aiModelSelector.props.js';
-import type { AIThreadDensity, AIThreadAskUserQuestion, AIThreadItem, AIThreadMessageRenderPayload, AIThreadRenderPayload, AIThreadTocSide, AIThreadTocState } from '../AIThread/aiThread.props.js';
+import type { Colors } from '../../types/theme.js';
+import type { AIThreadDensity, AIThreadAskUserQuestion, AIThreadMessageActionsVisibility, AIThreadItem, AIThreadMessageRenderPayload, AIThreadRenderPayload, AIThreadTocSide, AIThreadTocState } from '../AIThread/aiThread.props.js';
 import type { AIMessageSize, AIMessageVariant } from '../AIMessage/aiMessage.props.js';
 import type { AIToolCall } from '../AITool/aiTool.props.js';
 import type { AIChatThemeProps } from './aiChat.theme.js';
@@ -18,7 +19,7 @@ export type AIChatToolPayload<TMessage extends AIThreadItem = AIThreadItem> = {
     message: TMessage;
     index: number;
 };
-type AIChatComposerBehaviorProps = Pick<AIComposerProps, 'disabled' | 'queueWhileBusy' | 'fileDropzone' | 'fileMultiple' | 'accept' | 'maxFiles' | 'maxFileSize' | 'commands' | 'mentions' | 'references' | 'skills' | 'onFilesRejected' | 'onFileReject' | 'onAttachmentAdd' | 'onAttachmentRetry' | 'onAttachmentRemove' | 'onQueueChange' | 'onQueuedMessageAdd' | 'onQueuedMessageCancel' | 'onQueuedMessageEditStart' | 'onQueuedMessageEditCommit' | 'onQueuedMessageEditCancel' | 'onQueuedMessageReorder' | 'onSteer'>;
+type AIChatComposerBehaviorProps = Pick<AIComposerProps, 'disabled' | 'queueWhileBusy' | 'fileDropzone' | 'fileMultiple' | 'accept' | 'maxFiles' | 'maxFileSize' | 'commands' | 'mentions' | 'references' | 'skills' | 'onFilesRejected' | 'onFileReject' | 'onAttachmentAdd' | 'onAttachmentRetry' | 'onAttachmentRemove' | 'onQueueChange' | 'onQueuedMessageAdd' | 'onQueuedMessageCancel' | 'onQueuedMessageEditStart' | 'onQueuedMessageEditCommit' | 'onQueuedMessageEditCancel' | 'onQueuedMessageReorder' | 'onSteer' | 'submitShortcut' | 'toolbar'>;
 type AIChatRootAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;
 type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProps & {
     /** Bindable reference to the assembled chat root. */
@@ -43,7 +44,10 @@ type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProp
     queue?: AIComposerQueuedMessage[];
     /** Assistant text that is still streaming. */
     liveText?: string;
-    /** Prompt suggestions displayed only by the empty transcript state. */
+    /**
+     * Prompt suggestions: chips under the empty-state greeting, then follow-ups above the composer
+     * after a finished assistant turn.
+     */
     suggestions?: string[];
     /** Context-window usage displayed by `AIContext`. */
     contextUsage?: AIContextUsage;
@@ -59,7 +63,10 @@ type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProp
     models?: readonly AIModelSelectorModel[];
     /** Nested model groups shown by the default model selector. */
     modelGroups?: readonly AIModelSelectorGroup[];
-    /** Context-window limit used by the default context indicator. */
+    /**
+     * Context-window limit used by the default context indicator. The indicator renders only when
+     * this is set or the conversation reports `contextUsage` (then measured against 128000).
+     */
     maxTokens?: number;
     /** Displays the default context indicator when no `context` snippet is provided. */
     showContext?: boolean;
@@ -73,12 +80,28 @@ type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProp
     density?: AIThreadDensity;
     /** Size forwarded to default message rows. @default 'normal' */
     messageSize?: AIMessageSize;
-    /** Presentation forwarded to default message rows. @default 'bubble' */
+    /** Presentation forwarded to default message rows. @default 'minimal' */
     messageVariant?: AIMessageVariant;
+    /**
+     * User-bubble colour forwarded to default message rows. Neutral is a quiet grey bubble; any
+     * other role paints a solid bubble. Defaults to the theme's default colour.
+     */
+    messageColor?: Colors;
+    /**
+     * Maximum width of the centred column shared by the transcript and the composer, as a CSS
+     * length or pixels. Exposed as `--ai-chat-content-width`; `'none'` spans the chat.
+     * @default '48rem'
+     */
+    contentWidth?: string | number;
+    /** Shows `suggestions` as follow-ups above the composer after an assistant turn. @default true */
+    showFollowUps?: boolean;
     /** Custom action renderer shared by default message rows. */
     messageActions?: Slot<AIMessageActionState<TMessage>> | false;
-    /** Controls whether default message actions are always shown, hover-revealed, or omitted. */
-    messageActionsVisibility?: AIMessageActionVisibility;
+    /**
+     * When default message actions show. `latest` keeps the final assistant turn's bar visible and
+     * reveals the rest on hover or focus (always on touch screens). @default 'latest'
+     */
+    messageActionsVisibility?: AIThreadMessageActionsVisibility;
     /** Enables or disables default copy actions. */
     messageCopyable?: boolean;
     /** Enables or disables default edit actions. */
@@ -91,7 +114,7 @@ type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProp
     onMessageEdit?: AIMessageActionHandler<TMessage>;
     /** Handles message retry actions. */
     onMessageRetry?: AIMessageActionHandler<TMessage>;
-    /** Called instead of the default input update when an empty-state suggestion is selected. */
+    /** Called instead of the default input update when a suggestion or follow-up is selected. */
     onSelect?: (suggestion: string) => void;
     /** Replaces the complete default surface while retaining the conversation provider. */
     children?: Slot<AIChatState<TMessage>>;
@@ -105,7 +128,10 @@ type AIChatBaseProps<TMessage extends AIThreadItem> = AIChatComposerBehaviorProp
     context?: Slot<AIChatState<TMessage>>;
     /** Replaces the default model selector. */
     modelSelector?: Slot<AIChatState<TMessage>>;
-    /** Replaces the default error alert. */
+    /**
+     * Replaces the default error, which otherwise shows as a row at the end of the transcript with
+     * a Retry button wired to the conversation's `retry`. A replacement renders above the transcript.
+     */
     errorRegion?: Slot<AIChatState<TMessage>>;
     /** Replaces the complete transcript region. */
     thread?: Slot<AIChatState<TMessage>>;

package/dist/components/AIChat/aiChat.theme.d.ts

@@ -11,6 +11,9 @@ export declare const aiChatTheme: {
     controls: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     skeletonMessages: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonUser: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonAssistant: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonComposer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
 export type AIChatTheme = typeof aiChatTheme;
 export type AIChatThemeProps = InferComponentTheme<AIChatTheme>;
@@ -26,6 +29,9 @@ export declare const setAIChatTheme: (theme: InferComponentTheme<{
     controls: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     skeletonMessages: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonUser: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonAssistant: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonComposer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
 export declare const useAIChatTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -39,4 +45,7 @@ export declare const useAIChatTheme: import("../../utils/cva/theme.js").UseCompo
     controls: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     skeletonMessages: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonUser: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonAssistant: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    skeletonComposer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;

package/dist/components/AIChat/aiChat.theme.js

@@ -1,6 +1,6 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 const defaultRoot = cva({
-    base: 'flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-muted bg-surface'
+    base: 'group/ai-chat flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-lg border border-neutral-muted bg-surface'
 });
 const defaultHeader = cva({ base: 'shrink-0 border-b border-neutral-muted px-xl py-lg' });
 const defaultError = cva({ base: 'shrink-0 px-xl pt-lg' });
@@ -8,11 +8,25 @@ const defaultBeforeThread = cva({ base: 'shrink-0' });
 const defaultThread = cva({ base: 'min-h-0 flex-1' });
 const defaultAfterThread = cva({ base: 'shrink-0' });
 const defaultSuggestions = cva({ base: 'border-t border-neutral-muted px-lg py-md' });
-const defaultComposer = cva({ base: 'shrink-0 border-t border-neutral-muted p-lg' });
+// The composer is its own raised card, so its band has no rule above it: the card separates
+// itself from the transcript. Its inline inset matches the thread rows at the chat's density, so
+// the card and the transcript share their edges at every width.
+const defaultComposer = cva({
+    base: 'shrink-0 px-xl pt-xs pb-lg group-data-[density=compact]/ai-chat:px-lg group-data-[density=comfortable]/ai-chat:px-layout-sm'
+});
 const defaultControls = cva({ base: 'flex min-w-0 items-center gap-md' });
 const defaultFooter = cva({ base: 'shrink-0 border-t border-neutral-muted px-xl py-md' });
+// The skeleton mirrors the default chat: rows in the centred column, user turns as end-aligned
+// bubbles, assistant turns as flat lines of prose, and the composer as a bordered card.
 const defaultSkeletonMessages = cva({
-    base: 'grid h-full min-h-0 content-end gap-layout-sm overflow-hidden p-layout-sm'
+    base: 'mx-auto grid h-full min-h-0 w-full max-w-[var(--ai-chat-content-width,none)] content-end gap-layout-sm overflow-hidden px-xl py-layout-sm'
+});
+const defaultSkeletonUser = cva({
+    base: 'ms-auto h-control-lg w-2/5 max-w-sm rounded-lg rounded-ee-sm'
+});
+const defaultSkeletonAssistant = cva({ base: 'flex min-w-0 flex-col gap-sm' });
+const defaultSkeletonComposer = cva({
+    base: 'mx-auto grid w-full max-w-[var(--ai-chat-content-width,none)] gap-md rounded-lg border border-neutral-muted bg-surface-raised p-sm lift-2'
 });
 export const aiChatTheme = {
     root: defaultRoot,
@@ -25,7 +39,10 @@ export const aiChatTheme = {
     composer: defaultComposer,
     controls: defaultControls,
     footer: defaultFooter,
-    skeletonMessages: defaultSkeletonMessages
+    skeletonMessages: defaultSkeletonMessages,
+    skeletonUser: defaultSkeletonUser,
+    skeletonAssistant: defaultSkeletonAssistant,
+    skeletonComposer: defaultSkeletonComposer
 };
 export const setAIChatTheme = setComponentTheme('ai-chat');
 export const useAIChatTheme = useComponentTheme('ai-chat', aiChatTheme);

package/dist/components/AIChat/aiChatSkeleton.props.d.ts

@@ -13,6 +13,11 @@ export type AIChatSkeletonProps = WithAttachments<AIChatSkeletonRootAttributes &
     showComposer?: boolean;
     /** Displays a chat-footer placeholder. */
     showFooter?: boolean;
+    /**
+     * Width of the centred column, matching AIChat's `contentWidth` so the skeleton lines up with
+     * the chat that replaces it. @default '48rem'
+     */
+    contentWidth?: string | number;
     /** Class applied to the skeleton root. */
     class?: string;
     /** AI chat theme overrides reused by the skeleton layout. */

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

@@ -2,6 +2,6 @@ export { default as AIChat } from './AIChat.svelte';
 export { default as AIChatSkeleton } from './AIChatSkeleton.svelte';
 export type { AIChatProps, AIChatState, AIChatToolPayload } from './aiChat.props.js';
 export type { AIMessageSize, AIMessageVariant } from '../AIMessage/aiMessage.props.js';
-export type { AIThreadDensity } from '../AIThread/aiThread.props.js';
+export type { AIThreadDensity, AIThreadMessageActionsVisibility } from '../AIThread/aiThread.props.js';
 export type { AIChatSkeletonProps } from './aiChatSkeleton.props.js';
 export { aiChatTheme, setAIChatTheme, useAIChatTheme, type AIChatTheme, type AIChatThemeProps } from './aiChat.theme.js';