entasis 0.11.0 → 0.13.0

package/dist/components/AIMessage/aiMessage.theme.js

@@ -1,6 +1,8 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+// The root is an inline-size container: a message lays out from the width it is given (a narrow
+// thread on a phone, a wide one beside a table of contents), not from the viewport.
 const defaultRoot = cva({
-    base: 'group/message flex w-full min-w-0 gap-lg',
+    base: 'group/message @container/message flex w-full min-w-0 gap-lg',
     variants: {
         role: {
             user: 'justify-end',
@@ -9,26 +11,28 @@ const defaultRoot = cva({
             tool: 'justify-start'
         },
         size: {
-            small: 'py-sm',
-            normal: 'py-md',
+            small: 'py-xs',
+            normal: 'py-sm',
             large: 'py-md'
         }
     },
     defaultVariants: { role: 'assistant', size: 'normal' }
 });
+// Bubbles keep a reading cap of 38rem / 82% of the message, but only once the message is at
+// least 24rem wide: a narrow column gives a bubble its full width instead of squeezing it.
 const defaultBody = cva({
-    base: 'relative flex min-w-0 max-w-[min(38rem,82%)] flex-col',
+    base: 'relative flex max-w-full min-w-0 flex-col @sm/message:max-w-[min(38rem,82%)]',
     variants: {
         role: {
             user: 'items-end',
             assistant: 'items-start',
-            system: 'max-w-full items-center',
-            tool: 'w-full max-w-full items-start'
+            system: 'max-w-full items-center @sm/message:max-w-full',
+            tool: 'w-full max-w-full items-start @sm/message:max-w-full'
         },
         size: {
             small: 'gap-micro',
-            normal: 'gap-xs',
-            large: 'gap-sm'
+            normal: 'gap-micro',
+            large: 'gap-xs'
         },
         variant: {
             bubble: null,
@@ -39,10 +43,10 @@ const defaultBody = cva({
         {
             role: 'assistant',
             variant: 'minimal',
-            class: 'max-w-[min(44rem,100%)]'
+            class: 'w-full @sm/message:max-w-full'
         }
     ],
-    defaultVariants: { role: 'assistant', size: 'normal', variant: 'bubble' }
+    defaultVariants: { role: 'assistant', size: 'normal', variant: 'minimal' }
 });
 const defaultHeader = cva({
     base: 'px-xs font-medium text-neutral/70',
@@ -50,70 +54,124 @@ const defaultHeader = cva({
         size: {
             small: 'text-xs',
             normal: 'text-xs',
-            large: 'text-sm'
+            large: 'text-xs'
         }
     },
     defaultVariants: { size: 'normal' }
 });
+// Chat prose is a reading surface: `normal` sets 14px with a 1.625 line height (`large` 16px,
+// `small` 12px). Bubble tails sit on logical corners so they follow the writing direction.
 const defaultBubble = cva({
     base: 'min-w-0 max-w-full break-words [&_*:first-child]:mt-0 [&_*:last-child]:mb-0',
     variants: {
         role: {
-            user: 'rounded-lg rounded-br-sm',
-            assistant: 'rounded-lg rounded-bl-sm bg-neutral-muted text-neutral',
+            user: 'rounded-lg rounded-ee-sm',
+            assistant: 'rounded-lg rounded-es-sm bg-neutral-muted text-neutral',
             system: 'rounded-sm border border-neutral-muted bg-surface text-neutral/70 [&_*]:!text-neutral/70',
-            tool: 'w-full max-w-none rounded-lg rounded-bl-sm bg-neutral-muted text-neutral'
+            tool: 'w-full max-w-none rounded-lg rounded-es-sm bg-neutral-muted text-neutral'
         },
         size: {
-            small: 'px-lg py-md text-xs leading-normal',
-            normal: 'px-xl py-md text-sm leading-relaxed',
-            large: 'px-layout-sm py-lg text-base leading-relaxed'
+            small: 'px-md py-xs text-xs leading-relaxed',
+            normal: 'px-lg py-sm text-sm leading-relaxed',
+            large: 'px-xl py-md text-base leading-relaxed'
         },
         variant: {
             bubble: null,
             minimal: null
+        },
+        // The user bubble's colour. Neutral is a quiet grey bubble; every other role is solid.
+        color: {
+            primary: null,
+            secondary: null,
+            neutral: null,
+            danger: null,
+            success: null,
+            warning: null,
+            info: null
         }
     },
     compoundVariants: [
         {
             role: 'user',
-            variant: 'bubble',
+            color: 'neutral',
+            class: 'bg-neutral-muted text-neutral [&_*]:!text-neutral [&_code]:!bg-neutral/10'
+        },
+        {
+            role: 'user',
+            color: 'primary',
             class: 'bg-primary text-primary-contrast [&_*]:!text-primary-contrast [&_code]:!bg-primary-contrast/15'
         },
         {
             role: 'user',
-            variant: 'minimal',
-            class: 'bg-neutral-muted text-neutral [&_*]:!text-neutral [&_code]:!bg-neutral/10'
+            color: 'secondary',
+            class: 'bg-secondary text-secondary-contrast [&_*]:!text-secondary-contrast [&_code]:!bg-secondary-contrast/15'
+        },
+        {
+            role: 'user',
+            color: 'danger',
+            class: 'bg-danger text-danger-contrast [&_*]:!text-danger-contrast [&_code]:!bg-danger-contrast/15'
+        },
+        {
+            role: 'user',
+            color: 'success',
+            class: 'bg-success text-success-contrast [&_*]:!text-success-contrast [&_code]:!bg-success-contrast/15'
+        },
+        {
+            role: 'user',
+            color: 'warning',
+            class: 'bg-warning text-warning-contrast [&_*]:!text-warning-contrast [&_code]:!bg-warning-contrast/15'
         },
-        { role: 'system', size: 'small', class: 'px-md py-xs !text-xs' },
-        { role: 'system', size: 'normal', class: 'px-lg py-sm !text-xs' },
-        { role: 'system', size: 'large', class: 'px-xl py-md !text-sm' },
+        {
+            role: 'user',
+            color: 'info',
+            class: 'bg-info text-info-contrast [&_*]:!text-info-contrast [&_code]:!bg-info-contrast/15'
+        },
+        { role: 'system', size: 'small', class: 'px-sm py-micro !text-xs' },
+        { role: 'system', size: 'normal', class: 'px-md py-xs !text-xs' },
+        { role: 'system', size: 'large', class: 'px-lg py-sm !text-xs' },
         {
             role: ['assistant', 'tool'],
             variant: 'minimal',
             class: 'rounded-none bg-transparent p-0'
         }
     ],
-    defaultVariants: { role: 'assistant', size: 'normal', variant: 'bubble' }
+    defaultVariants: { role: 'assistant', size: 'normal', variant: 'minimal', color: 'neutral' }
 });
+// Markdown inherits the bubble's type size and leading, and headings stay close to the body
+// (h2 about 1.25x) instead of the Markdown component's document scale.
+// Rich content reads on one scale: tables, lists, quotes and alerts at the message size; code
+// blocks at 0.9em of it, like inline code, so code grows with every size step. Density owns
+// table-cell and code padding and the space between blocks.
 const defaultMarkdown = cva({
-    base: 'min-w-0',
+    base: 'min-w-0 !text-[length:inherit] !leading-[inherit] [&_:is(td,th,blockquote,li)]:!text-[length:inherit] [&_[data-slot=code]]:!text-[0.9em] [&_[data-slot=code]_*]:!text-[length:inherit]',
     variants: {
         size: {
-            small: '!text-xs !leading-normal',
-            normal: '!text-sm',
-            large: '!text-base'
+            small: '[&_h1]:!text-base [&_h2]:!text-sm [&_:is(h3,h4,h5,h6)]:!text-xs',
+            normal: '[&_h1]:!text-lg [&_h2]:!text-base [&_:is(h3,h4,h5,h6)]:!text-sm',
+            large: '[&_h1]:!text-xl [&_h2]:!text-lg [&_:is(h3,h4,h5,h6)]:!text-base'
+        },
+        density: {
+            compact: '[&_:is(td,th)]:!px-md [&_:is(td,th)]:!py-xs [&_[data-slot=code]_pre]:!px-md [&_[data-slot=code]_pre]:!py-sm [&_:is(p,ul,ol,blockquote)]:!my-sm',
+            normal: '[&_:is(td,th)]:!px-lg [&_:is(td,th)]:!py-md [&_[data-slot=code]_pre]:!px-lg [&_[data-slot=code]_pre]:!py-md',
+            comfortable: '[&_:is(td,th)]:!px-xl [&_:is(td,th)]:!py-lg [&_[data-slot=code]_pre]:!px-xl [&_[data-slot=code]_pre]:!py-lg [&_:is(p,ul,ol,blockquote)]:!my-lg'
         }
     },
-    defaultVariants: { size: 'normal' }
+    defaultVariants: { size: 'normal', density: 'normal' }
 });
 const defaultFiles = cva({ base: 'max-w-full min-w-0' });
+// The streaming caret: a small pulsing dot after the content, like Claude.ai and ChatGPT.
+const defaultCaret = cva({
+    base: 'mt-xs inline-block size-2.5 shrink-0 rounded-full bg-current opacity-70 motion-safe:animate-pulse'
+});
+// Actions sit in the flow under the content and keep their row's height when hover-hidden, so
+// the next row never draws under them. The row sizes to its buttons (AIMessageActions), never to
+// the bubble, so it does not wrap under a one-word message.
 const defaultActions = cva({
-    base: 'absolute left-0 top-full z-10 w-full transition-opacity motion-reduce:transition-none',
+    base: '',
     variants: {
         visibility: {
-            hover: 'pointer-events-none opacity-0 group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100',
-            always: 'opacity-100',
+            hover: null,
+            always: null,
             none: 'hidden'
         }
     },
@@ -126,6 +184,7 @@ export const aiMessageTheme = {
     bubble: defaultBubble,
     markdown: defaultMarkdown,
     files: defaultFiles,
+    caret: defaultCaret,
     actions: defaultActions
 };
 export const setAIMessageTheme = setComponentTheme('ai-message');

package/dist/components/AIMessageActions/AIMessageActions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="TMessage extends AIThreadItem = AIThreadItem">
+	import { getContext } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import { useClipboard } from '../../utils/useClipboard.svelte.js';
 	import Alert from '../Alert/Alert.svelte';
 	import Button from '../Button/Button.svelte';
@@ -7,6 +9,7 @@
 	import { copyIcon } from '../Icons/copy.js';
 	import { pencilSimpleIcon } from '../Icons/pencilSimple.js';
 	import Slot from '../Slot/Slot.svelte';
+	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
 	import type { AIThreadItem } from '../AIThread/aiThread.props.js';
 	import { getAIConversation } from '../AIConversation/aiConversation.state.svelte.js';
 	import type { AIMessageActionState, AIMessageActionsProps } from './aiMessageActions.props.js';
@@ -84,6 +87,12 @@
 			Boolean(customActions || actionState.canCopy || actionState.canEdit || actionState.canRetry)
 	);
 	const buttonSize = $derived(size === 'large' ? 'normal' : 'small');
+	// Icon-only buttons name themselves for assistive technology through `label`; the tooltip shows
+	// the same name to sighted pointer and keyboard users. Tooltips need a Theme (it hosts the
+	// shared surface), so outside one the buttons keep their accessible name only.
+	const hasTooltipHost = Boolean(getContext('entasisTheme'));
+	const withTooltip = (content: string): Attachment<HTMLElement> | undefined =>
+		hasTooltipHost ? tooltip({ content, position: 'bottom' }) : undefined;
 
 	function resolveRoleLayout(
 		value: AIThreadItem['role']
@@ -120,13 +129,11 @@
 		errorMessage = undefined;
 		try {
 			const didCopy = await copyMessage();
-			if (!didCopy) errorMessage = 'Unable to copy this message.';
+			if (!didCopy) errorMessage = t.aiMessageCopyFailed;
 		} catch (error) {
 			setActionError(
 				error,
-				clipboard.copied
-					? 'The message was copied, but the copy action failed.'
-					: 'Unable to copy this message.'
+				clipboard.copied ? t.aiMessageCopyCallbackFailed : t.aiMessageCopyFailed
 			);
 		}
 	}
@@ -136,7 +143,7 @@
 		try {
 			await editMessage();
 		} catch (error) {
-			setActionError(error, 'Unable to edit this message.');
+			setActionError(error, t.aiMessageEditFailed);
 		}
 	}
 
@@ -145,7 +152,7 @@
 		try {
 			await retryMessage();
 		} catch (error) {
-			setActionError(error, 'Unable to retry this message.');
+			setActionError(error, t.aiMessageRetryFailed);
 		}
 	}
 
@@ -170,6 +177,7 @@
 					variant="ghost"
 					label={actionState.copied ? t.copied : t.copy}
 					onclick={() => void handleCopy()}
+					{@attach withTooltip(actionState.copied ? t.copied : t.copy)}
 					class={classes.button({ size })}
 					>{@render (actionState.copied ? checkIcon : copyIcon)({ size: 14 })}</Button
 				>{/if}
@@ -180,6 +188,7 @@
 					variant="ghost"
 					label={t.aiMessageEdit}
 					onclick={() => void handleEdit()}
+					{@attach withTooltip(t.aiMessageEdit)}
 					class={classes.button({ size })}>{@render pencilSimpleIcon({ size: 14 })}</Button
 				>{/if}
 			{#if actionState.canRetry}<Button
@@ -189,11 +198,12 @@
 					variant="ghost"
 					label={t.aiMessageRetry}
 					onclick={() => void handleRetry()}
+					{@attach withTooltip(t.aiMessageRetry)}
 					class={classes.button({ size })}>{@render arrowsClockwiseIcon({ size: 14 })}</Button
 				>{/if}
 		{/if}
-		{#if errorMessage}<div data-slot="ai-message-actions-error" class={classes.error()}>
-				<Alert color="danger" variant="soft" description={errorMessage} />
-			</div>{/if}
 	</div>
+	{#if errorMessage}<div data-slot="ai-message-actions-error" class={classes.error()}>
+			<Alert {size} color="danger" variant="soft" description={errorMessage} />
+		</div>{/if}
 {/if}

package/dist/components/AIMessageActions/aiMessageActions.mcp.d.ts

@@ -1 +1 @@
-export declare const aiMessageActionsDescription = "\n# AIMessageActions\n\nCopy, edit, and retry actions for an AI message. Defaults integrate with the nearest AIConversation.\n\n## Resolution and availability\n\n`message` supplies role and content. Direct `role` and `content` win, while `messageIndex`\nwins over the `index` alias. `copyable`, `editable`, and `retryable` win over the\ncompatibility `copy`, `edit`, and `retry` aliases.\n\nCopy requires non-empty content. Edit additionally requires a user role and either `onEdit` or a\nconversation. Retry requires an assistant role and either `onRetry` or a conversation plus a\nmessage index. Direct callbacks take precedence. Otherwise edit writes the content into the\nconversation input and retry targets the indexed message. Pass `conversation={null}` to disable\nscoped conversation lookup.\n\n`visibility` accepts `always`, `hover`, or `none`. `actions={false}` suppresses the\ncomplete surface. A supplied `actions` slot wins over the equivalent `children` slot. Both\nreceive complete `AIMessageActionState`, including the resolved size, capability flags, and\nawaitable copy, edit, and retry methods. `size` accepts `small`, `normal`, or `large` and\nscales the default controls. The copy callback runs only after clipboard success. Failures raised by\nthe default buttons render through the semantic error region.\n\n```svelte\n<script>\n  import { AIMessageActions } from './index.ts';\n</script>\n\n{#snippet actions({ copied, copy })}\n  <button type=\"button\" onclick={() => void copy()}>\n    {copied ? 'Copied' : 'Copy answer'}\n  </button>\n{/snippet}\n\n<AIMessageActions content=\"Answer\" {actions} />\n```\n\nThe root forwards native div attributes and attachments when actions are available, plus bindable\n`ref`, `class`, and `theme`. Theme parts cover `root`, `button`, and `error`, with role,\nvisibility, and size variants on the root and size variants on the button.\n";
+export declare const aiMessageActionsDescription = "\n# AIMessageActions\n\nCopy, edit, and retry actions for an AI message. Defaults integrate with the nearest AIConversation.\n\n## Resolution and availability\n\n`message` supplies role and content. Direct `role` and `content` win, while `messageIndex`\nwins over the `index` alias. `copyable`, `editable`, and `retryable` win over the\ncompatibility `copy`, `edit`, and `retry` aliases.\n\nCopy requires non-empty content. Edit additionally requires a user role and either `onEdit` or a\nconversation. Retry requires an assistant role and either `onRetry` or a conversation plus a\nmessage index. Direct callbacks take precedence. Otherwise edit writes the content into the\nconversation input and retry targets the indexed message. Pass `conversation={null}` to disable\nscoped conversation lookup.\n\n`visibility` accepts `always`, `hover`, or `none`. `hover` reveals the row when its message\n(`group/message`) or the row itself is hovered or focused, and always shows it on touch screens,\nwhich cannot hover. The row takes layout space in every mode but `none`, and its buttons are\npulled out by their own inset so the first icon lines up with the text edge (the end edge for\nuser rows). The row is as wide as its buttons and never wraps, so a one-word message keeps its\nicons on one line. Each icon button keeps its accessible name and, inside a `Theme`, shows it as a\ntooltip. `actions={false}` suppresses the\ncomplete surface. A supplied `actions` slot wins over the equivalent `children` slot. Both\nreceive complete `AIMessageActionState`, including the resolved size, capability flags, and\nawaitable copy, edit, and retry methods. `size` accepts `small`, `normal`, or `large` and\nscales the default controls. The copy callback runs only after clipboard success. Failures raised by\nthe default buttons render through the semantic error region, placed after the button row (not\ninside it) and visible whatever the row's visibility.\n\n```svelte\n<script>\n  import { AIMessageActions } from './index.ts';\n</script>\n\n{#snippet actions({ copied, copy })}\n  <button type=\"button\" onclick={() => void copy()}>\n    {copied ? 'Copied' : 'Copy answer'}\n  </button>\n{/snippet}\n\n<AIMessageActions content=\"Answer\" {actions} />\n```\n\nThe root forwards native div attributes and attachments when actions are available, plus bindable\n`ref`, `class`, and `theme`. `setAIMessageActionsTheme` and `<Theme components>` overrides\napply under the `ai-message-actions` key. Theme parts cover `root`, `button`, and `error`, with role,\nvisibility, and size variants on the root and size variants on the button.\n";

package/dist/components/AIMessageActions/aiMessageActions.mcp.js

@@ -15,12 +15,19 @@ message index. Direct callbacks take precedence. Otherwise edit writes the conte
 conversation input and retry targets the indexed message. Pass \`conversation={null}\` to disable
 scoped conversation lookup.
 
-\`visibility\` accepts \`always\`, \`hover\`, or \`none\`. \`actions={false}\` suppresses the
+\`visibility\` accepts \`always\`, \`hover\`, or \`none\`. \`hover\` reveals the row when its message
+(\`group/message\`) or the row itself is hovered or focused, and always shows it on touch screens,
+which cannot hover. The row takes layout space in every mode but \`none\`, and its buttons are
+pulled out by their own inset so the first icon lines up with the text edge (the end edge for
+user rows). The row is as wide as its buttons and never wraps, so a one-word message keeps its
+icons on one line. Each icon button keeps its accessible name and, inside a \`Theme\`, shows it as a
+tooltip. \`actions={false}\` suppresses the
 complete surface. A supplied \`actions\` slot wins over the equivalent \`children\` slot. Both
 receive complete \`AIMessageActionState\`, including the resolved size, capability flags, and
 awaitable copy, edit, and retry methods. \`size\` accepts \`small\`, \`normal\`, or \`large\` and
 scales the default controls. The copy callback runs only after clipboard success. Failures raised by
-the default buttons render through the semantic error region.
+the default buttons render through the semantic error region, placed after the button row (not
+inside it) and visible whatever the row's visibility.
 
 \`\`\`svelte
 <script>
@@ -37,6 +44,7 @@ the default buttons render through the semantic error region.
 \`\`\`
 
 The root forwards native div attributes and attachments when actions are available, plus bindable
-\`ref\`, \`class\`, and \`theme\`. Theme parts cover \`root\`, \`button\`, and \`error\`, with role,
+\`ref\`, \`class\`, and \`theme\`. \`setAIMessageActionsTheme\` and \`<Theme components>\` overrides
+apply under the \`ai-message-actions\` key. Theme parts cover \`root\`, \`button\`, and \`error\`, with role,
 visibility, and size variants on the root and size variants on the button.
 `;

package/dist/components/AIMessageActions/aiMessageActions.theme.d.ts

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const aiMessageActionsTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         role: {
             user: string;
             assistant: string;
@@ -17,20 +17,20 @@ export declare const aiMessageActionsTheme: {
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    button: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    button: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type AIMessageActionsTheme = typeof aiMessageActionsTheme;
 export type AIMessageActionsThemeProps = InferComponentTheme<AIMessageActionsTheme>;
 export declare const setAIMessageActionsTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         role: {
             user: string;
             assistant: string;
@@ -47,18 +47,18 @@ export declare const setAIMessageActionsTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    button: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    button: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useAIMessageActionsTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useAIMessageActionsTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         role: {
             user: string;
             assistant: string;
@@ -75,13 +75,13 @@ export declare const useAIMessageActionsTheme: import("../../utils/cva/theme.js"
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    button: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    button: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;

package/dist/components/AIMessageActions/aiMessageActions.theme.js

@@ -1,24 +1,50 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+// The action row takes layout space (it is never positioned over the next row) and its ghost
+// buttons are pulled out by their own inset, so the first icon lines up with the edge of the text
+// or bubble above: the start edge for assistant rows, the end edge for user rows. The row is as wide
+// as its buttons and never wraps, whatever the width of a short bubble above it.
 const defaultRoot = cva({
-    base: 'flex min-h-[var(--control-height-sm)] w-full flex-wrap items-center gap-xs px-xs transition-opacity motion-reduce:transition-none',
+    base: 'flex min-h-[var(--control-height-sm)] w-max max-w-none shrink-0 flex-nowrap items-center gap-xs transition-opacity motion-reduce:transition-none',
     variants: {
         role: {
-            user: 'justify-end',
+            user: 'ms-auto justify-end',
             assistant: 'justify-start',
-            system: 'justify-center',
+            system: 'mx-auto justify-center',
             tool: 'justify-start'
         },
         visibility: {
-            hover: 'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 hover:opacity-100 focus-within:opacity-100',
+            // Revealed by hovering or focusing the row or its message; a touch screen cannot hover,
+            // so there the row always shows.
+            hover: 'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100',
             always: 'opacity-100',
             none: 'hidden'
         },
         size: {
-            small: 'min-h-6 gap-micro px-micro',
-            normal: 'min-h-[var(--control-height-sm)] gap-xs px-xs',
-            large: 'min-h-[var(--control-height-md)] gap-sm px-xs'
+            small: 'min-h-6 gap-micro',
+            normal: 'min-h-[var(--control-height-sm)] gap-xs',
+            large: 'min-h-[var(--control-height-md)] gap-sm'
         }
     },
+    compoundVariants: [
+        {
+            role: ['assistant', 'tool'],
+            size: 'small',
+            class: '-ms-[calc((var(--spacing)*6-0.75rem)/2)]'
+        },
+        {
+            role: ['assistant', 'tool'],
+            size: 'normal',
+            class: '-ms-[calc((var(--control-height-sm)-0.875rem)/2)]'
+        },
+        {
+            role: ['assistant', 'tool'],
+            size: 'large',
+            class: '-ms-[calc((var(--control-height-md)-1.125rem)/2)]'
+        },
+        { role: 'user', size: 'small', class: '-me-[calc((var(--spacing)*6-0.75rem)/2)]' },
+        { role: 'user', size: 'normal', class: '-me-[calc((var(--control-height-sm)-0.875rem)/2)]' },
+        { role: 'user', size: 'large', class: '-me-[calc((var(--control-height-md)-1.125rem)/2)]' }
+    ],
     defaultVariants: { role: 'assistant', visibility: 'always', size: 'normal' }
 });
 const defaultButton = cva({
@@ -32,11 +58,12 @@ const defaultButton = cva({
     },
     defaultVariants: { size: 'normal' }
 });
-const defaultError = cva({ base: 'w-full basis-full pt-xs' });
+// Rendered after the row, not inside it, so a message never widens or wraps the button row.
+const defaultError = cva({ base: 'w-full min-w-0 pt-xs' });
 export const aiMessageActionsTheme = {
     root: defaultRoot,
     button: defaultButton,
     error: defaultError
 };
 export const setAIMessageActionsTheme = setComponentTheme('ai-message-actions');
-export const useAIMessageActionsTheme = useComponentTheme('aiMessageActions', aiMessageActionsTheme);
+export const useAIMessageActionsTheme = useComponentTheme('ai-message-actions', aiMessageActionsTheme);

package/dist/components/AIModelSelector/AIModelSelector.svelte

@@ -3,10 +3,9 @@
 	import { checkIcon } from '../Icons/check.js';
 	import Button from '../Button/Button.svelte';
 	import type { MenuItem } from '../Menu/menu.props.js';
-	import type { PopoverState } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
 	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
 	import Slot from '../Slot/Slot.svelte';
-	import TextInput from '../Form/TextInput/TextInput.svelte';
 	import { getAIConversation } from '../AIConversation/aiConversation.state.svelte.js';
 	import { SvelteMap } from 'svelte/reactivity';
 	import type {
@@ -138,13 +137,18 @@
 		if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K`;
 		return `${tokens}`;
 	}
-	function modelItem(model: AIModelSelectorModel): MenuItem {
+	/**
+	 * `showProvider` is off where a provider heading already names the provider (or every model
+	 * shares one), so a row never repeats it as its description. The selected row keeps its
+	 * context-window badge next to the check.
+	 */
+	function modelItem(model: AIModelSelectorModel, showProvider = true): MenuItem {
 		return {
 			type: 'option',
 			title: model.label,
-			description: model.description ?? model.provider,
+			description: model.description ?? (showProvider ? model.provider : undefined),
 			prefix: model.icon,
-			suffix: selectedValue === model.id ? checkIcon : contextLabel(model.contextWindow),
+			suffix: selectedValue === model.id ? selectedSuffix : contextLabel(model.contextWindow),
 			disabled: disabled || model.disabled,
 			active: selectedValue === model.id,
 			class: classes.option({ selected: selectedValue === model.id }),
@@ -157,7 +161,7 @@
 		};
 	}
 	function groupItem(group: AIModelSelectorGroup): MenuItem {
-		const modelItems = (group.models ?? []).map(modelItem);
+		const modelItems = (group.models ?? []).map((model) => modelItem(model));
 		const groupItems = (group.groups ?? []).map(groupItem);
 		const menu = [
 			...modelItems,
@@ -210,8 +214,8 @@
 			const provider = model.provider ?? resolvedLabels.providerFallback;
 			providers.set(provider, [...(providers.get(provider) ?? []), model]);
 		}
-		if (providers.size === 1 && providers.has(resolvedLabels.providerFallback))
-			return source.map(modelItem);
+		// One provider needs no heading: it would only repeat what every row shares.
+		if (providers.size <= 1) return source.map((model) => modelItem(model, false));
 		return [...providers.entries()].flatMap(([provider, providerModels], index) => [
 			...(index > 0 ? [{ type: 'separator' } satisfies MenuItem] : []),
 			{
@@ -222,7 +226,7 @@
 				fullWidth: true,
 				class: classes.provider()
 			} satisfies MenuItem,
-			...providerModels.map(modelItem)
+			...providerModels.map((model) => modelItem(model, false))
 		]);
 	}
 	function resolveSupplementalItems(source: readonly AIModelSelectorMenuItem[]): MenuItem[] {
@@ -280,6 +284,14 @@
 	]);
 </script>
 
+{#snippet selectedSuffix()}
+	{@const context = contextLabel(selectedModel?.contextWindow)}
+	<span data-slot="ai-model-selector-selected" class={classes.optionMeta()}>
+		{#if context}<span>{context}</span>{/if}
+		{@render checkIcon({ size: 14 })}
+	</span>
+{/snippet}
+
 {#snippet emptyContent()}
 	<span data-slot="ai-model-selector-empty">
 		<Slot render={empty ?? resolvedLabels.empty} payload={selectorState} />
@@ -288,18 +300,11 @@
 
 {#snippet searchHeader()}
 	<div data-slot="ai-model-selector-search" class={classes.search()}>
-		{#if search}<Slot render={search} payload={selectorState} />{:else}<TextInput
-				value={query}
-				size="small"
-				placeholder={resolvedLabels.searchPlaceholder}
-				label={resolvedLabels.searchPlaceholder}
-				theme={{ label: { base: 'sr-only' } }}
-				onValueChange={(nextValue: string | null) => setQuery(nextValue ?? '')}
-			/>{/if}
+		{#if search}<Slot render={search} payload={selectorState} />{/if}
 	</div>
 {/snippet}
 
-{#snippet selectorTrigger(popover: PopoverState)}
+{#snippet selectorTrigger(popover: PopoverApi)}
 	{#if children}
 		<button
 			type="button"
@@ -318,7 +323,8 @@
 		<Button
 			type="button"
 			data-slot="ai-model-selector-trigger"
-			variant="soft"
+			variant="ghost"
+			color="neutral"
 			size="small"
 			{disabled}
 			haspopup="menu"
@@ -363,7 +369,21 @@
 		menu={{
 			items: menuItems,
 			class: classes.menu(),
-			header: searchable && hasModelSources ? searchHeader : undefined
+			// The menu's own search field (focus stays in it while the arrow keys walk the rows and
+			// Enter picks one). The selector keeps matching models itself (label, provider,
+			// description…), so every row the menu receives already matches. A custom `search`
+			// snippet keeps its place in the header instead.
+			header: searchable && hasModelSources && search ? searchHeader : undefined,
+			filter:
+				searchable && hasModelSources && !search
+					? {
+							placeholder: resolvedLabels.searchPlaceholder,
+							label: resolvedLabels.searchPlaceholder,
+							match: () => true
+						}
+					: undefined,
+			search: query,
+			onSearchChange: setQuery
 		}}
 	/>
 </div>

package/dist/components/AIModelSelector/AIModelSelector.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AIModelSelectorProps } from './aiModelSelector.props.js';
-declare const AIModelSelector: import("svelte").Component<AIModelSelectorProps, {}, "value" | "ref" | "open" | "query">;
+declare const AIModelSelector: import("svelte").Component<AIModelSelectorProps, {}, "ref" | "value" | "open" | "query">;
 type AIModelSelector = ReturnType<typeof AIModelSelector>;
 export default AIModelSelector;