entasis 0.11.0 → 0.12.0

package/dist/components/AIMarker/AIMarker.svelte

@@ -6,6 +6,7 @@
 
 	let {
 		ref = $bindable(),
+		size = 'normal',
 		variant = 'default',
 		icon,
 		content,
@@ -22,6 +23,7 @@
 	bind:this={ref}
 	data-slot="ai-marker"
 	data-variant={variant}
+	data-size={size}
 	class={classes.root({ variant, className })}
 	{...attachments}
 >

package/dist/components/AIMarker/aiMarker.mcp.d.ts

@@ -1 +1 @@
-export declare const aiMarkerDescription = "\n# AIMarker\n\nTranscript marker with default, separator, and bottom-border variants.\n\n```svelte\n<script>\n  import { AIMarker } from './index.ts';\n  import { fileTextIcon } from 'entasis/icons/fileText';\n</script>\n\n{#snippet icon()}{@render fileTextIcon({ size: 16 })}{/snippet}\n{#snippet content()}<span>Imported <strong>3 files</strong></span>{/snippet}\n\n<AIMarker variant=\"separator\" {icon} {content} aria-label=\"Imported files\" />\n```\n";
+export declare const aiMarkerDescription = "\n# AIMarker\n\nTranscript marker with default, separator, and bottom-border variants.\n\n```svelte\n<script>\n  import { AIMarker } from './index.ts';\n  import { fileTextIcon } from 'entasis/icons/fileText';\n</script>\n\n{#snippet icon()}{@render fileTextIcon({ size: 16 })}{/snippet}\n{#snippet content()}<span>Imported <strong>3 files</strong></span>{/snippet}\n\n<AIMarker variant=\"separator\" {icon} {content} aria-label=\"Imported files\" />\n```\n\n`size` (`small`, `normal` or `large`, default `normal`) scales the marker text and icon with the AIMessage size scale; AIThread passes its `messageSize`.\n";

package/dist/components/AIMarker/aiMarker.mcp.js

@@ -14,4 +14,6 @@ Transcript marker with default, separator, and bottom-border variants.
 
 <AIMarker variant="separator" {icon} {content} aria-label="Imported files" />
 \`\`\`
+
+\`size\` (\`small\`, \`normal\` or \`large\`, default \`normal\`) scales the marker text and icon with the AIMessage size scale; AIThread passes its \`messageSize\`.
 `;

package/dist/components/AIMarker/aiMarker.props.d.ts

@@ -1,3 +1,4 @@
+import type { Sizes } from '../../types/theme.js';
 import type { Slot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -6,6 +7,8 @@ export type AIMarkerVariant = 'default' | 'separator' | 'border';
 export type AIMarkerProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'content'> & {
     /** Bindable reference to the marker root. */
     ref?: HTMLDivElement | null;
+    /** Type and icon scale: `small`, `normal` (default) or `large`, matching AIMessage sizes. AIThread passes its `messageSize`. */
+    size?: Sizes;
     /** Marker layout and separator treatment. */
     variant?: AIMarkerVariant;
     /** Fallback marker label used when `content` is omitted. */

package/dist/components/AIMarker/aiMarker.theme.js

@@ -1,6 +1,6 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 const defaultRoot = cva({
-    base: 'group/ai-marker relative flex min-h-4 w-full items-center gap-md text-left text-sm text-neutral/70 [&_svg:not([class*=size-])]:size-4',
+    base: 'group/ai-marker-size group/ai-marker relative flex min-h-4 w-full items-center gap-md text-left text-sm data-[size=small]:text-xs data-[size=large]:text-base text-neutral/70 [&_svg:not([class*=size-])]:size-4',
     variants: {
         variant: {
             default: null,
@@ -12,7 +12,7 @@ const defaultRoot = cva({
 });
 const defaultRule = cva({ base: 'h-px min-w-0 flex-1 bg-neutral-muted' });
 const defaultIcon = cva({
-    base: 'flex size-4 shrink-0 items-center justify-center [&_svg:not([class*=size-])]:size-4'
+    base: 'flex size-4 group-data-[size=small]/ai-marker-size:size-3.5 group-data-[size=large]/ai-marker-size:size-4.5 shrink-0 items-center justify-center [&_svg:not([class*=size-])]:size-4'
 });
 const defaultContent = cva({
     base: 'min-w-0 break-words [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-neutral',

package/dist/components/AIMessage/AIMessage.svelte

@@ -3,6 +3,7 @@
 	import Markdown from '../Markdown/Markdown.svelte';
 	import type { MarkdownSize } from '../Markdown/markdown.props.js';
 	import Slot from '../Slot/Slot.svelte';
+	import { useDefaultColor } from '../Theme/theme.state.svelte.js';
 	import AIMessageActions from '../AIMessageActions/AIMessageActions.svelte';
 	import type { AIThreadItem, AIThreadRole } from '../AIThread/aiThread.props.js';
 	import type { AIMessageProps, AIMessageRenderPayload, AIMessageSize } from './aiMessage.props.js';
@@ -24,7 +25,10 @@
 		content,
 		files,
 		size = 'normal',
-		variant = 'bubble',
+		density = 'normal',
+		variant = 'minimal',
+		color,
+		streaming = false,
 		markdown = true,
 		streamdown,
 		markdownProps,
@@ -59,6 +63,7 @@
 		resolvedMarkdownProps?.allowedImagePrefixes ?? ['https://']
 	);
 	const resolvedActionVisibility = $derived(actionsVisibility ?? actionVisibility ?? 'always');
+	const resolvedColor = $derived(useDefaultColor(color));
 	const resolvedCopyable = $derived(copyable ?? copyAction);
 	const resolvedEditable = $derived(editable ?? editAction ?? resolvedRole === 'user');
 	const resolvedRetryable = $derived(retryable ?? retryAction ?? resolvedRole === 'assistant');
@@ -88,6 +93,10 @@
 	const markdownSize = $derived(resolveMarkdownSize(size));
 	const roleLayout = $derived(resolveRoleLayout(resolvedRole));
 	const fileAlignment = $derived(resolveFileAlignment(roleLayout));
+	// A message that only carries files (an upload with no prompt) shows no empty bubble.
+	const showBubble = $derived(
+		children !== undefined || streaming || resolvedContent !== '' || resolvedFiles.length === 0
+	);
 
 	function resolveRoleLayout(value: AIThreadRole): 'user' | 'assistant' | 'system' | 'tool' {
 		if (value === 'user') return 'user';
@@ -104,9 +113,12 @@
 		return 'start';
 	}
 
+	// The Markdown scale supplies block spacing and code size; AIMessage's own `markdown` theme part
+	// sets the prose type size and the heading steps on top of it.
+	// Messages sit one step below the Markdown scale: a `normal` message reads at 14px, so it takes
+	// Markdown's `small` block spacing and code size, and `large` takes Markdown's `normal`.
 	function resolveMarkdownSize(value: AIMessageSize): MarkdownSize {
-		if (value === 'large') return 'large';
-		return 'small';
+		return value === 'large' ? 'normal' : 'small';
 	}
 </script>
 
@@ -116,7 +128,10 @@
 	data-from={resolvedRole}
 	data-role={resolvedRole}
 	data-size={size}
+	data-density={density}
 	data-variant={variant}
+	data-color={resolvedColor}
+	data-streaming={streaming ? 'true' : undefined}
 	data-actions-visibility={resolvedActionVisibility}
 	class={classes.root({
 		role: roleLayout,
@@ -130,19 +145,26 @@
 				{resolvedName}
 			</div>{/if}
 		<AIMessageFiles files={resolvedFiles} align={fileAlignment} {size} class={classes.files()} />
-		<div data-slot="ai-message-content" class={classes.bubble({ role: roleLayout, size, variant })}>
-			{#if children !== undefined}<Slot render={children} {payload} />{:else if markdown}<Markdown
-					content={markdownContent}
-					{...resolvedMarkdownProps}
-					size={markdownSize}
-					class={classes.markdown({ size, className: resolvedMarkdownProps?.class })}
-					{allowedLinkPrefixes}
-					{allowedImagePrefixes}
-					renderHtml={false}
-					{extensions}
-					{mdxComponents}
-				/>{:else}<span class="whitespace-pre-wrap">{resolvedContent}</span>{/if}
-		</div>
+		{#if showBubble}
+			<div
+				data-slot="ai-message-content"
+				class={classes.bubble({ role: roleLayout, size, variant, color: resolvedColor })}
+			>
+				{#if children !== undefined}<Slot render={children} {payload} />{:else if markdown}<Markdown
+						content={markdownContent}
+						{...resolvedMarkdownProps}
+						size={markdownSize}
+						class={classes.markdown({ size, density, className: resolvedMarkdownProps?.class })}
+						{allowedLinkPrefixes}
+						{allowedImagePrefixes}
+						renderHtml={false}
+						{extensions}
+						{mdxComponents}
+					/>{:else}<span class="whitespace-pre-wrap">{resolvedContent}</span>{/if}
+				{#if streaming}<span data-slot="ai-message-caret" aria-hidden="true" class={classes.caret()}
+					></span>{/if}
+			</div>
+		{/if}
 		<AIMessageActions
 			{message}
 			messageIndex={resolvedIndex}

package/dist/components/AIMessage/aiMessage.mcp.d.ts

@@ -1 +1 @@
-export declare const aiMessageDescription = "\n# AIMessage\n\nRole-aware chat message with Markdown, inline AI tokens, files, and copy/edit/retry actions.\n\n## Content and precedence\n\n`message` supplies role, name, content, and files. Direct `from`, `name`, `content`, and\n`files` props take precedence. `messageIndex` is canonical and `index` is its Entasis alias.\n\n`markdown` defaults to true. `streamdown` forwards shared Markdown options and wins over the\n`markdownProps` alias. Raw HTML is always disabled. HTTPS images and HTTPS, email, and telephone\nlinks are the safe defaults; callers may narrow or extend those prefix lists through Markdown\noptions. File, Reference, Mention, Skill, and Command tokens are parsed inside prose, and\ncaller-provided `mdxComponents` may replace their default renderers.\n\n`variant` accepts `bubble` or `minimal`. Bubble preserves the framed role surfaces. Minimal\nkeeps user and system semantics visible with a neutral user surface while rendering assistant and\ntool content without a background container. `size` accepts `small`, `normal`, or `large`\nand scales typography, content padding, file previews, and the default action controls together.\n\n```svelte\n<script>\n  import { AIMessage } from './index.ts';\n</script>\n\n<AIMessage\n  from=\"assistant\"\n  content={'Review <File id=\"brief\" label=\"launch-brief.md\" /> before launch.'}\n  files={[{ name: 'launch-brief.md', size: 18420, type: 'text/markdown' }]}\n  variant=\"minimal\"\n  size=\"normal\"\n  actionsVisibility=\"always\"\n/>\n```\n\n## Actions and composition\n\n`actionsVisibility` wins over the `actionVisibility` alias. `copyable`, `editable`, and\n`retryable` win over `copyAction`, `editAction`, and `retryAction`. User messages enable\nedit by default; assistant messages enable retry by default. `actions={false}` removes the action\nregion, while a custom actions slot receives `AIMessageActionState`.\n\nDefault edit and retry actions use the nearest `AIConversation`. A direct `conversation` wins,\nand `conversation={null}` explicitly disables context lookup. Direct `onCopy`, `onEdit`, and\n`onRetry` handlers take precedence over conversation behavior.\n\n`children` replaces the body only and receives the resolved message, index, role, content, size,\nand variant;\nthe role layout, files, and action region remain owned by AIMessage. Native article attributes,\nattachments, bindable `ref`, `class`, and `theme` are forwarded. Theme parts are `root`,\n`body`, `header`, `files`, `bubble`, `markdown`, and `actions`.\n";
+export declare const aiMessageDescription = "\n# AIMessage\n\nRole-aware chat message with Markdown, inline AI tokens, files, and copy/edit/retry actions.\n\n## Content and precedence\n\n`message` supplies role, name, content, and files. Direct `from`, `name`, `content`, and\n`files` props take precedence. `messageIndex` is canonical and `index` is its Entasis alias.\n\n`markdown` defaults to true. `streamdown` forwards shared Markdown options and wins over the\n`markdownProps` alias. Raw HTML is always disabled. HTTPS images and HTTPS, email, and telephone\nlinks are the safe defaults; callers may narrow or extend those prefix lists through Markdown\noptions. File, Reference, Mention, Skill, and Command tokens are parsed inside prose, and\ncaller-provided `mdxComponents` may replace their default renderers.\n\n`variant` accepts `minimal` (the default) or `bubble`. Minimal renders assistant and tool\ncontent as flat, full-width prose and keeps the user bubble; bubble frames assistant replies too.\n`color` sets the user bubble: `neutral` (the theme's default colour) is a quiet grey bubble and\nany other role paints a solid bubble in that role (`primary` gives the saturated look). Bubble\ntails sit on logical corners, so they follow the writing direction. Bubbles keep a 38rem / 82% cap\nonly once the message is at least 24rem wide; a narrower message gives them its full width.\n\n`size` accepts `small`, `normal`, or `large` and scales typography, content padding, file\npreviews, and the default action controls together. Normal prose reads at 14px (large 16px, small\n12px) with a 1.625 line height; headings stay close to the body (h2 about 1.25x), lists hang-indent, inline code is a muted\nchip at 0.9em, and tables read at body size and scroll with an edge fade when they overflow.\n`streaming` shows a pulsing caret after the content while a reply is still being written. A\nmessage that carries only files shows no empty bubble. Tables, lists, quotes and alerts read at the message size; fenced code at 0.9\u00D7 of it, like inline code, so it grows with every size. `density` (`compact`, `normal`, `comfortable`) sets table-cell and code-block padding and the space between paragraphs, lists and quotes; AIThread and AIChat pass theirs.\n\n```svelte\n<script>\n  import { AIMessage } from './index.ts';\n</script>\n\n<AIMessage\n  from=\"assistant\"\n  content={'Review <File id=\"brief\" label=\"launch-brief.md\" /> before launch.'}\n  files={[{ name: 'launch-brief.md', size: 18420, type: 'text/markdown' }]}\n  variant=\"minimal\"\n  color=\"neutral\"\n  size=\"normal\"\n  actionsVisibility=\"always\"\n/>\n```\n\n## Actions and composition\n\n`actionsVisibility` wins over the `actionVisibility` alias. `copyable`, `editable`, and\n`retryable` win over `copyAction`, `editAction`, and `retryAction`. User messages enable\nedit by default; assistant messages enable retry by default. `actions={false}` removes the action\nregion, while a custom actions slot receives `AIMessageActionState`. The action row sits in the\nlayout flow under the content (it keeps its height while hover-hidden), and its first icon lines\nup with the text or bubble edge.\n\nDefault edit and retry actions use the nearest `AIConversation`. A direct `conversation` wins,\nand `conversation={null}` explicitly disables context lookup. Direct `onCopy`, `onEdit`, and\n`onRetry` handlers take precedence over conversation behavior.\n\n`children` replaces the body only and receives the resolved message, index, role, content, size,\nand variant;\nthe role layout, files, and action region remain owned by AIMessage. Native article attributes,\nattachments, bindable `ref`, `class`, and `theme` are forwarded. Theme parts are `root`,\n`body`, `header`, `files`, `bubble` (with a `color` variant), `markdown`, `caret`, and `actions`.\nThe root carries `data-from`, `data-variant`, `data-color`, `data-size`, `data-actions-visibility`\nand, while streaming, `data-streaming`.\n";

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

@@ -14,10 +14,19 @@ links are the safe defaults; callers may narrow or extend those prefix lists thr
 options. File, Reference, Mention, Skill, and Command tokens are parsed inside prose, and
 caller-provided \`mdxComponents\` may replace their default renderers.
 
-\`variant\` accepts \`bubble\` or \`minimal\`. Bubble preserves the framed role surfaces. Minimal
-keeps user and system semantics visible with a neutral user surface while rendering assistant and
-tool content without a background container. \`size\` accepts \`small\`, \`normal\`, or \`large\`
-and scales typography, content padding, file previews, and the default action controls together.
+\`variant\` accepts \`minimal\` (the default) or \`bubble\`. Minimal renders assistant and tool
+content as flat, full-width prose and keeps the user bubble; bubble frames assistant replies too.
+\`color\` sets the user bubble: \`neutral\` (the theme's default colour) is a quiet grey bubble and
+any other role paints a solid bubble in that role (\`primary\` gives the saturated look). Bubble
+tails sit on logical corners, so they follow the writing direction. Bubbles keep a 38rem / 82% cap
+only once the message is at least 24rem wide; a narrower message gives them its full width.
+
+\`size\` accepts \`small\`, \`normal\`, or \`large\` and scales typography, content padding, file
+previews, and the default action controls together. Normal prose reads at 14px (large 16px, small
+12px) with a 1.625 line height; headings stay close to the body (h2 about 1.25x), lists hang-indent, inline code is a muted
+chip at 0.9em, and tables read at body size and scroll with an edge fade when they overflow.
+\`streaming\` shows a pulsing caret after the content while a reply is still being written. A
+message that carries only files shows no empty bubble. Tables, lists, quotes and alerts read at the message size; fenced code at 0.9× of it, like inline code, so it grows with every size. \`density\` (\`compact\`, \`normal\`, \`comfortable\`) sets table-cell and code-block padding and the space between paragraphs, lists and quotes; AIThread and AIChat pass theirs.
 
 \`\`\`svelte
 <script>
@@ -29,6 +38,7 @@ and scales typography, content padding, file previews, and the default action co
   content={'Review <File id="brief" label="launch-brief.md" /> before launch.'}
   files={[{ name: 'launch-brief.md', size: 18420, type: 'text/markdown' }]}
   variant="minimal"
+  color="neutral"
   size="normal"
   actionsVisibility="always"
 />
@@ -39,7 +49,9 @@ and scales typography, content padding, file previews, and the default action co
 \`actionsVisibility\` wins over the \`actionVisibility\` alias. \`copyable\`, \`editable\`, and
 \`retryable\` win over \`copyAction\`, \`editAction\`, and \`retryAction\`. User messages enable
 edit by default; assistant messages enable retry by default. \`actions={false}\` removes the action
-region, while a custom actions slot receives \`AIMessageActionState\`.
+region, while a custom actions slot receives \`AIMessageActionState\`. The action row sits in the
+layout flow under the content (it keeps its height while hover-hidden), and its first icon lines
+up with the text or bubble edge.
 
 Default edit and retry actions use the nearest \`AIConversation\`. A direct \`conversation\` wins,
 and \`conversation={null}\` explicitly disables context lookup. Direct \`onCopy\`, \`onEdit\`, and
@@ -49,5 +61,7 @@ and \`conversation={null}\` explicitly disables context lookup. Direct \`onCopy\
 and variant;
 the role layout, files, and action region remain owned by AIMessage. Native article attributes,
 attachments, bindable \`ref\`, \`class\`, and \`theme\` are forwarded. Theme parts are \`root\`,
-\`body\`, \`header\`, \`files\`, \`bubble\`, \`markdown\`, and \`actions\`.
+\`body\`, \`header\`, \`files\`, \`bubble\` (with a \`color\` variant), \`markdown\`, \`caret\`, and \`actions\`.
+The root carries \`data-from\`, \`data-variant\`, \`data-color\`, \`data-size\`, \`data-actions-visibility\`
+and, while streaming, \`data-streaming\`.
 `;

package/dist/components/AIMessage/aiMessage.props.d.ts

@@ -1,6 +1,6 @@
 import type { Slot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
-import type { Sizes } from '../../types/theme.js';
+import type { Colors, Density, Sizes } from '../../types/theme.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { MarkdownProps } from '../Markdown/markdown.props.js';
 import type { AIMessageActionHandler, AIMessageActionState, AIMessageActionVisibility } from '../AIMessageActions/aiMessageActions.props.js';
@@ -42,8 +42,24 @@ export type AIMessageProps<TMessage extends AIThreadItem = AIThreadItem> = WithA
     files?: readonly AIFileSource[];
     /** Type and control scale. @default 'normal' */
     size?: AIMessageSize;
-    /** Message presentation. Minimal keeps user bubbles but unframes assistant and tool content. @default 'bubble' */
+    /**
+     * Spacing inside rich content: table cell and code block padding and the space between
+     * paragraphs, lists, quotes, tables and code. AIThread and AIChat pass their `density`.
+     * @default 'normal'
+     */
+    density?: Density;
+    /**
+     * Message presentation. Minimal keeps the user bubble and renders assistant and tool content
+     * as flat, full-width prose; bubble frames assistant replies too. @default 'minimal'
+     */
     variant?: AIMessageVariant;
+    /**
+     * User-bubble colour. `neutral` is a quiet grey bubble; any other role paints a solid bubble
+     * in that role (`primary` gives the saturated look). Defaults to the theme's default colour.
+     */
+    color?: Colors;
+    /** The reply is still streaming: shows a pulsing caret after the content. */
+    streaming?: boolean;
     /** Renders content with the shared Markdown component. */
     markdown?: boolean;
     /** Props forwarded to Markdown except for its owned safety boundary. */

package/dist/components/AIMessage/aiMessage.theme.d.ts

@@ -53,6 +53,15 @@ export declare const aiMessageTheme: {
             bubble: null;
             minimal: null;
         };
+        color: {
+            primary: null;
+            secondary: null;
+            neutral: null;
+            danger: null;
+            success: null;
+            warning: null;
+            info: null;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     markdown: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -60,12 +69,18 @@ export declare const aiMessageTheme: {
             normal: string;
             large: string;
         };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     files: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    caret: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         visibility: {
-            hover: string;
-            always: string;
+            hover: null;
+            always: null;
             none: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
@@ -126,6 +141,15 @@ export declare const setAIMessageTheme: (theme: InferComponentTheme<{
             bubble: null;
             minimal: null;
         };
+        color: {
+            primary: null;
+            secondary: null;
+            neutral: null;
+            danger: null;
+            success: null;
+            warning: null;
+            info: null;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     markdown: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -133,12 +157,18 @@ export declare const setAIMessageTheme: (theme: InferComponentTheme<{
             normal: string;
             large: string;
         };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     files: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    caret: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         visibility: {
-            hover: string;
-            always: string;
+            hover: null;
+            always: null;
             none: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
@@ -197,6 +227,15 @@ export declare const useAIMessageTheme: import("../../utils/cva/theme.js").UseCo
             bubble: null;
             minimal: null;
         };
+        color: {
+            primary: null;
+            secondary: null;
+            neutral: null;
+            danger: null;
+            success: null;
+            warning: null;
+            info: null;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     markdown: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -204,12 +243,18 @@ export declare const useAIMessageTheme: import("../../utils/cva/theme.js").UseCo
             normal: string;
             large: string;
         };
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     files: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    caret: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         visibility: {
-            hover: string;
-            always: string;
+            hover: null;
+            always: null;
             none: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;

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');