entasis 0.11.0 → 0.12.0

package/dist/components/AIReasoning/aiReasoning.mcp.d.ts

@@ -1 +1 @@
-export declare const aiReasoningDescription = "\n# AIReasoning\n\nAIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive. It opens when a stream starts, measures elapsed time in seconds, and closes shortly after the first streamed completion.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { AIReasoning } from 'entasis/ai-reasoning';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\t{streaming}\n\tthinkingMessages={['Planning', 'Checking constraints', 'Preparing response']}\n/>\n```\n\nThe default trigger displays a brain icon and a shimmer-only `SpinnerText` label while streaming. A supplied `thinkingMessages` list replaces the resolved `labels.thinking` value and advances every two seconds when it contains more than one message. The compact `labels` object also overrides the unknown-duration sentence and completed-duration formatter.\n\n## Streaming lifecycle\n\n- `open` starts from `defaultOpen ?? streaming`.\n- At the start of a streaming session, the component auto-opens once unless `defaultOpen={false}`.\n- Closing the panel manually during that stream keeps it closed; streaming does not force it open again.\n- When streaming ends, the measured duration is rounded up to whole seconds.\n- After the first observed stream completes, an open panel closes after `1000` ms by default. A trace that never streamed is not auto-closed.\n- An explicit `duration` is expressed in seconds and takes precedence over the measured duration.\n\nUse `defaultOpen={false}` to opt out of streaming auto-open without disabling manual toggling:\n\n```svelte\n<AIReasoning content={reasoningText} streaming defaultOpen={false} />\n```\n\n## Controlled state\n\n`open` is bindable. `onOpenChange` runs once for user toggles and automatic stream-driven open or close changes. Initialization and parent assignments do not invoke it.\n\n```svelte\n<script lang=\"ts\">\n\tlet open = $state(true);\n\tlet lastUserState = $state(open);\n\n\tfunction handleOpenChange(nextOpen: boolean) {\n\t\tlastUserState = nextOpen;\n\t}\n</script>\n\n<AIReasoning\n\tcontent={reasoningText}\n\tduration={8}\n\tbind:open\n\tonOpenChange={handleOpenChange}\n/>\n<p>Last user-selected state: {lastUserState ? 'open' : 'closed'}</p>\n```\n\n## Custom trigger and body\n\nA custom `trigger` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is `{ open, streaming, duration, message }`, where `message` is the currently displayed thinking label.\n\n```svelte\n<AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>\n\t{#snippet trigger({ open, streaming, duration, message })}\n\t\t<span class=\"flex w-full items-center justify-between\">\n\t\t\t{#if streaming}\n\t\t\t\t<span>{message}</span>\n\t\t\t{:else if duration !== undefined}\n\t\t\t\t<span>Thought for {duration}s</span>\n\t\t\t{/if}\n\t\t\t<span>{open ? 'Hide' : 'Show'}</span>\n\t\t</span>\n\t{/snippet}\n\n\t{#snippet children({ message })}\n\t\t<p>Current step: {message}</p>\n\t{/snippet}\n</AIReasoning>\n```\n\n`content` is optional. When it is non-null, it is rendered as Markdown and takes precedence over `children`:\n\n```svelte\n<AIReasoning content=\"**This Markdown is rendered.**\" defaultOpen>\n\t<p>This custom body is ignored because content was supplied.</p>\n</AIReasoning>\n```\n\n## Markdown safety\n\nPass Markdown options through `markdown`. AIReasoning owns `content` and always forces `renderHtml={false}`, even if renderer options are spread into Markdown.\n\n```svelte\n<AIReasoning content={reasoningText} markdown={markdownOptions} />\n```\n\n## Theme slots\n\nThe AIReasoning `trigger` and `content` theme slots are composed into the actual Collapsible trigger button and content panel. `root` styles the Collapsible root; `icon`, `status`, and `duration` style the default trigger regions.\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\tdefaultOpen\n\ttheme={{\n\t\troot: { base: 'w-full' },\n\t\ttrigger: { base: 'rounded-md px-2' },\n\t\tcontent: { base: 'mt-3 pl-5' }\n\t}}\n/>\n```\n\nGlobal overrides use `setAIReasoningTheme` from the same package entry.\n\n## Props\n\n- `content?: string`: Markdown trace. Takes precedence over custom children.\n- `streaming?: boolean`: Drives status labels, auto-open, duration measurement, and completion close.\n- `thinkingMessages?: readonly string[]`: Optional labels cycled every two seconds while streaming; takes precedence over `labels.thinking`.\n- `labels?: Partial<AIReasoningLabels>`: Default thinking text, unknown-duration text, and duration formatter.\n- `open?: boolean`: Bindable open state.\n- `defaultOpen?: boolean`: Initial state; false also opts out of streaming auto-open.\n- `onOpenChange?: (open: boolean) => void`: Component-owned open-state callback.\n- `duration?: number`: Controlled duration in seconds.\n- `autoCloseDelay?: number`: First-completion close delay in milliseconds; defaults to 1000.\n- `trigger?: Slot<AIReasoningState>`: Complete trigger replacement.\n- `children?: Slot<AIReasoningState>`: Custom body used only when content is omitted.\n- `markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>`: Markdown renderer options.\n- `class?: string`: Class merged onto the Collapsible root.\n- `theme?: AIReasoningThemeProps`: Root, trigger, and content theme overrides.\n- Additional attachments and DOM attributes are forwarded to the Collapsible root.\n";
+export declare const aiReasoningDescription = "\n# AIReasoning\n\nAIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive. It opens when a stream starts, measures elapsed time in seconds, and closes shortly after the first streamed completion.\n\n## Import\n\n```svelte\n<script lang=\"ts\">\n\timport { AIReasoning } from 'entasis/ai-reasoning';\n</script>\n```\n\n## Basic usage\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\t{streaming}\n\tthinkingMessages={['Planning', 'Checking constraints', 'Preparing response']}\n/>\n```\n\nThe default trigger is a compact, muted row about 28px tall with no filled background. It displays a brain icon and a shimmering label while streaming, followed by a live elapsed time once a second has passed (\"Thinking\u2026 \u00B7 6s\"). A supplied `thinkingMessages` list replaces the resolved `labels.thinking` value and advances every two seconds when it contains more than one message. Every message sits in the same grid cell, so the trigger keeps the widest message's width (the caret never shifts) and only the current message is visible and part of the button's accessible name; the elapsed time is hidden from assistive technology and reserves the width of its unit's widest reading (59s, then 59m 59s), so the caret holds still as the count gains a digit and steps only when the unit changes. The compact `labels` object also overrides the unknown-duration sentence and completed-duration formatter.\n\nCompleted durations read \"Thought for less than a second\" for `0`, \"Thought for 6 seconds\" under a minute, and \"Thought for 1m 12s\" from a minute on.\n\nWhile streaming, the body is a bounded window (`max-h-40`) that follows the newest lines; once earlier lines leave the window its top edge fades. The full body returns when streaming ends. The body renders small Markdown (12px, tight paragraph spacing; one step larger at `size=\"large\"`) in a muted colour that Markdown paragraphs and lists inherit, so reasoning reads quieter than the answer. The root has no outer margin: the surrounding thread or message owns the spacing.\n\n`size` (`small`, `normal` or `large`, default `normal`) scales the trigger text, icon and body with the AIMessage size scale; AIThread and AIChat pass their `messageSize`.\n\n## Streaming lifecycle\n\n- `open` starts from `defaultOpen ?? streaming`.\n- At the start of a streaming session, the component auto-opens once unless `defaultOpen={false}`.\n- Closing the panel manually during that stream keeps it closed; streaming does not force it open again.\n- When streaming ends, the measured duration is rounded to whole seconds (under half a second becomes `0`).\n- After the first observed stream completes, an open panel closes after `1000` ms by default. A trace that never streamed is not auto-closed.\n- An explicit `duration` is expressed in seconds and takes precedence over the measured duration.\n\nUse `defaultOpen={false}` to opt out of streaming auto-open without disabling manual toggling:\n\n```svelte\n<AIReasoning content={reasoningText} streaming defaultOpen={false} />\n```\n\n## Controlled state\n\n`open` is bindable. `onOpenChange` runs once for user toggles and automatic stream-driven open or close changes. Initialization and parent assignments do not invoke it.\n\n```svelte\n<script lang=\"ts\">\n\tlet open = $state(true);\n\tlet lastUserState = $state(open);\n\n\tfunction handleOpenChange(nextOpen: boolean) {\n\t\tlastUserState = nextOpen;\n\t}\n</script>\n\n<AIReasoning\n\tcontent={reasoningText}\n\tduration={8}\n\tbind:open\n\tonOpenChange={handleOpenChange}\n/>\n<p>Last user-selected state: {lastUserState ? 'open' : 'closed'}</p>\n```\n\n## Custom trigger and body\n\nA custom `trigger` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is `{ open, streaming, duration, elapsed, message, labels }`, where `message` is the currently displayed thinking label and `elapsed` the whole seconds of the current stream.\n\n```svelte\n<AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>\n\t{#snippet trigger({ open, streaming, duration, message })}\n\t\t<span class=\"flex w-full items-center justify-between\">\n\t\t\t{#if streaming}\n\t\t\t\t<span>{message}</span>\n\t\t\t{:else if duration !== undefined}\n\t\t\t\t<span>Thought for {duration}s</span>\n\t\t\t{/if}\n\t\t\t<span>{open ? 'Hide' : 'Show'}</span>\n\t\t</span>\n\t{/snippet}\n\n\t{#snippet children({ message })}\n\t\t<p>Current step: {message}</p>\n\t{/snippet}\n</AIReasoning>\n```\n\n`content` is optional. When it is non-null, it is rendered as Markdown and takes precedence over `children`:\n\n```svelte\n<AIReasoning content=\"**This Markdown is rendered.**\" defaultOpen>\n\t<p>This custom body is ignored because content was supplied.</p>\n</AIReasoning>\n```\n\n## Markdown safety\n\nPass Markdown options through `markdown`. AIReasoning owns `content` and always forces `renderHtml={false}`, even if renderer options are spread into Markdown.\n\n```svelte\n<AIReasoning content={reasoningText} markdown={markdownOptions} />\n```\n\n## Theme slots\n\nThe AIReasoning `trigger` and `content` theme slots are composed into the actual Collapsible trigger button and content panel. `root` styles the Collapsible root; `icon`, `status` (the stacked label cell), `message` (each cycled label, `current` variant), `elapsed` (with `elapsedReserve`, its invisible widest reading), and `duration` style the default trigger regions; `stream` and `streamBody` style the streaming window.\n\n```svelte\n<AIReasoning\n\tcontent={reasoningText}\n\tdefaultOpen\n\ttheme={{\n\t\troot: { base: 'w-full' },\n\t\ttrigger: { base: 'rounded-md px-2' },\n\t\tcontent: { base: 'mt-3 pl-5' }\n\t}}\n/>\n```\n\nGlobal overrides use `setAIReasoningTheme` from the same package entry.\n\n## Props\n\n- `content?: string`: Markdown trace. Takes precedence over custom children.\n- `streaming?: boolean`: Drives status labels, the live elapsed time, the following window, auto-open, duration measurement, and completion close.\n- `thinkingMessages?: readonly string[]`: Optional labels cycled every two seconds while streaming; takes precedence over `labels.thinking`.\n- `labels?: Partial<AIReasoningLabels>`: Default thinking text, unknown-duration text, and duration formatter.\n- `open?: boolean`: Bindable open state.\n- `defaultOpen?: boolean`: Initial state; false also opts out of streaming auto-open.\n- `onOpenChange?: (open: boolean) => void`: Component-owned open-state callback.\n- `duration?: number`: Controlled duration in seconds.\n- `autoCloseDelay?: number`: First-completion close delay in milliseconds; defaults to 1000.\n- `trigger?: Slot<AIReasoningState>`: Complete trigger replacement.\n- `children?: Slot<AIReasoningState>`: Custom body used only when content is omitted.\n- `markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>`: Markdown renderer options.\n- `class?: string`: Class merged onto the Collapsible root.\n- `theme?: AIReasoningThemeProps`: Root, trigger, and content theme overrides.\n- Additional attachments and DOM attributes are forwarded to the Collapsible root.\n";

package/dist/components/AIReasoning/aiReasoning.mcp.js

@@ -21,14 +21,20 @@ AIReasoning renders an AI reasoning trace in the Entasis Collapsible primitive.
 />
 \`\`\`
 
-The default trigger displays a brain icon and a shimmer-only \`SpinnerText\` label while streaming. A supplied \`thinkingMessages\` list replaces the resolved \`labels.thinking\` value and advances every two seconds when it contains more than one message. The compact \`labels\` object also overrides the unknown-duration sentence and completed-duration formatter.
+The default trigger is a compact, muted row about 28px tall with no filled background. It displays a brain icon and a shimmering label while streaming, followed by a live elapsed time once a second has passed ("Thinking… · 6s"). A supplied \`thinkingMessages\` list replaces the resolved \`labels.thinking\` value and advances every two seconds when it contains more than one message. Every message sits in the same grid cell, so the trigger keeps the widest message's width (the caret never shifts) and only the current message is visible and part of the button's accessible name; the elapsed time is hidden from assistive technology and reserves the width of its unit's widest reading (59s, then 59m 59s), so the caret holds still as the count gains a digit and steps only when the unit changes. The compact \`labels\` object also overrides the unknown-duration sentence and completed-duration formatter.
+
+Completed durations read "Thought for less than a second" for \`0\`, "Thought for 6 seconds" under a minute, and "Thought for 1m 12s" from a minute on.
+
+While streaming, the body is a bounded window (\`max-h-40\`) that follows the newest lines; once earlier lines leave the window its top edge fades. The full body returns when streaming ends. The body renders small Markdown (12px, tight paragraph spacing; one step larger at \`size="large"\`) in a muted colour that Markdown paragraphs and lists inherit, so reasoning reads quieter than the answer. The root has no outer margin: the surrounding thread or message owns the spacing.
+
+\`size\` (\`small\`, \`normal\` or \`large\`, default \`normal\`) scales the trigger text, icon and body with the AIMessage size scale; AIThread and AIChat pass their \`messageSize\`.
 
 ## Streaming lifecycle
 
 - \`open\` starts from \`defaultOpen ?? streaming\`.
 - At the start of a streaming session, the component auto-opens once unless \`defaultOpen={false}\`.
 - Closing the panel manually during that stream keeps it closed; streaming does not force it open again.
-- When streaming ends, the measured duration is rounded up to whole seconds.
+- When streaming ends, the measured duration is rounded to whole seconds (under half a second becomes \`0\`).
 - After the first observed stream completes, an open panel closes after \`1000\` ms by default. A trace that never streamed is not auto-closed.
 - An explicit \`duration\` is expressed in seconds and takes precedence over the measured duration.
 
@@ -63,7 +69,7 @@ Use \`defaultOpen={false}\` to opt out of streaming auto-open without disabling
 
 ## Custom trigger and body
 
-A custom \`trigger\` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is \`{ open, streaming, duration, message }\`, where \`message\` is the currently displayed thinking label.
+A custom \`trigger\` replaces the complete default row, including its default label and caret. The Collapsible button remains the interactive and accessible owner. The trigger payload is \`{ open, streaming, duration, elapsed, message, labels }\`, where \`message\` is the currently displayed thinking label and \`elapsed\` the whole seconds of the current stream.
 
 \`\`\`svelte
 <AIReasoning streaming thinkingMessages={['Planning', 'Checking']}>
@@ -102,7 +108,7 @@ Pass Markdown options through \`markdown\`. AIReasoning owns \`content\` and alw
 
 ## Theme slots
 
-The AIReasoning \`trigger\` and \`content\` theme slots are composed into the actual Collapsible trigger button and content panel. \`root\` styles the Collapsible root; \`icon\`, \`status\`, and \`duration\` style the default trigger regions.
+The AIReasoning \`trigger\` and \`content\` theme slots are composed into the actual Collapsible trigger button and content panel. \`root\` styles the Collapsible root; \`icon\`, \`status\` (the stacked label cell), \`message\` (each cycled label, \`current\` variant), \`elapsed\` (with \`elapsedReserve\`, its invisible widest reading), and \`duration\` style the default trigger regions; \`stream\` and \`streamBody\` style the streaming window.
 
 \`\`\`svelte
 <AIReasoning
@@ -121,7 +127,7 @@ Global overrides use \`setAIReasoningTheme\` from the same package entry.
 ## Props
 
 - \`content?: string\`: Markdown trace. Takes precedence over custom children.
-- \`streaming?: boolean\`: Drives status labels, auto-open, duration measurement, and completion close.
+- \`streaming?: boolean\`: Drives status labels, the live elapsed time, the following window, auto-open, duration measurement, and completion close.
 - \`thinkingMessages?: readonly string[]\`: Optional labels cycled every two seconds while streaming; takes precedence over \`labels.thinking\`.
 - \`labels?: Partial<AIReasoningLabels>\`: Default thinking text, unknown-duration text, and duration formatter.
 - \`open?: boolean\`: Bindable open state.

package/dist/components/AIReasoning/aiReasoning.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 { MarkdownProps } from '../Markdown/markdown.props.js';
@@ -8,19 +9,26 @@ export type AIReasoningLabels = {
     thinking: string;
     /** Completed status when no measured or explicit duration is available. */
     thoughtForFewSeconds: string;
-    /** Formats the completed status from a duration in seconds. */
+    /**
+     * Formats the completed status from a duration in seconds. The default reads "Thought for less
+     * than a second" for 0, "Thought for 6 seconds" under a minute, then "Thought for 1m 12s".
+     */
     duration: (seconds: number) => string;
 };
 export type AIReasoningState = {
     open: boolean;
     streaming: boolean;
     duration: number | undefined;
+    /** Whole seconds elapsed in the current stream; `undefined` when not streaming. */
+    elapsed: number | undefined;
     message: string;
     labels: AIReasoningLabels;
 };
 export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'content'> & {
     /** Bindable reference to the collapsible root. */
     ref?: HTMLElement | null;
+    /** Type and icon scale: `small`, `normal` (default) or `large`, matching AIMessage sizes. AIThread passes its `messageSize`. */
+    size?: Sizes;
     /** Markdown reasoning content. Takes precedence over custom children when provided. */
     content?: string;
     /** Bindable controlled open state. */
@@ -29,9 +37,12 @@ export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElemen
     defaultOpen?: boolean;
     /** Called once after a user or stream lifecycle change updates `open`. */
     onOpenChange?: (open: boolean) => void;
-    /** Keeps reasoning open and displays cycling progress labels. */
+    /**
+     * Keeps reasoning open, displays cycling progress labels with a live elapsed time
+     * ("Thinking… · 6s"), and shows the body as a bounded window that follows the latest lines.
+     */
     streaming?: boolean;
-    /** Elapsed reasoning duration in seconds; measured automatically when omitted. */
+    /** Elapsed reasoning duration in seconds; measured automatically when omitted. `0` reads "less than a second". */
     duration?: number;
     /** Delay before the first streamed completion closes, in milliseconds. @default 1000 */
     autoCloseDelay?: number;
@@ -43,7 +54,7 @@ export type AIReasoningProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElemen
     trigger?: Slot<AIReasoningState>;
     /** Custom body used only when `content` is omitted. */
     children?: Slot<AIReasoningState>;
-    /** Props forwarded to Markdown except for its owned content. */
+    /** Props forwarded to Markdown except for its owned content. Markdown renders at `size="normal"` (text-sm) by default. */
     markdown?: Omit<MarkdownProps, 'content' | 'renderHtml'>;
     /** Class applied to the collapsible root. */
     class?: string;

package/dist/components/AIReasoning/aiReasoning.theme.d.ts

@@ -4,8 +4,23 @@ export declare const aiReasoningTheme: {
     trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     icon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     status: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
 export type AIReasoningTheme = typeof aiReasoningTheme;
 export type AIReasoningThemeProps = InferComponentTheme<AIReasoningTheme>;
@@ -14,14 +29,44 @@ export declare const setAIReasoningTheme: (theme: InferComponentTheme<{
     trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     icon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     status: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
 export declare const useAIReasoningTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     icon: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     status: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;

package/dist/components/AIReasoning/aiReasoning.theme.js

@@ -1,21 +1,61 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
-const defaultRoot = cva({ base: 'not-prose mb-xl min-w-0' });
+// No outer margin: the thread or message owns the spacing between reasoning and the answer.
+const defaultRoot = cva({ base: 'group/ai-reasoning-size not-prose min-w-0' });
+// Compact like a chat app's "Thought for…" line: py-xs keeps it about 28px tall.
 const defaultTrigger = cva({
-    base: 'flex w-fit max-w-full min-w-0 items-center justify-start gap-md text-sm text-neutral/70 transition-colors hover:text-neutral'
+    base: 'flex w-fit max-w-full min-w-0 items-center justify-start gap-md py-xs text-sm group-data-[size=small]/ai-reasoning-size:text-xs group-data-[size=large]/ai-reasoning-size:text-base text-neutral/70 transition-colors hover:text-neutral'
 });
-const defaultIcon = cva({ base: 'size-4 shrink-0' });
-const defaultStatus = cva({ base: 'min-w-0' });
+const defaultIcon = cva({
+    base: 'size-4 group-data-[size=small]/ai-reasoning-size:size-3.5 group-data-[size=large]/ai-reasoning-size:size-4.5 shrink-0'
+});
+// One grid cell for every cycled label, so the trigger width follows the widest one.
+const defaultStatus = cva({ base: 'grid min-w-0 [&>*]:[grid-area:1/1]' });
+const defaultMessage = cva({
+    base: 'min-w-0 truncate',
+    variants: {
+        current: {
+            true: 'shimmer',
+            false: 'invisible'
+        }
+    },
+    defaultVariants: { current: true }
+});
+// The live count and its widest same-unit reading share one grid cell (see `elapsedReserve`).
+const defaultElapsed = cva({
+    base: 'grid shrink-0 whitespace-nowrap tabular-nums text-neutral/70 [&>*]:[grid-area:1/1]'
+});
+const defaultElapsedReserve = cva({ base: 'invisible' });
 const defaultDuration = cva({ base: 'min-w-0' });
+// Reasoning reads quieter than the answer: muted, text-sm, and Markdown's own body colour yields.
+// Compact: a small gap under the trigger, tight paragraph spacing, and the small Markdown scale
+// (12px, normal leading), so reasoning reads one step quieter than the answer it precedes.
 const defaultContent = cva({
-    base: 'mt-xl min-w-0 border-l border-neutral-muted pl-xl text-sm text-neutral/70'
+    base: 'mt-xs min-w-0 border-s border-neutral-muted ps-xl text-neutral/70 [&_:is(p,li,ul,ol,blockquote,strong,em,h1,h2,h3,h4,h5,h6)]:text-inherit [&_:is(p,ul,ol,blockquote,pre)]:!my-sm'
+});
+// While streaming: a bounded window that follows the newest lines, fading out at the top.
+const defaultStream = cva({
+    base: 'flex max-h-40 min-w-0 flex-col justify-end overflow-hidden',
+    variants: {
+        overflowing: {
+            true: '[mask-image:linear-gradient(to_bottom,transparent,black_3rem)]',
+            false: ''
+        }
+    },
+    defaultVariants: { overflowing: false }
 });
+const defaultStreamBody = cva({ base: 'min-w-0 shrink-0' });
 export const aiReasoningTheme = {
     root: defaultRoot,
     trigger: defaultTrigger,
     icon: defaultIcon,
     status: defaultStatus,
+    message: defaultMessage,
+    elapsed: defaultElapsed,
+    elapsedReserve: defaultElapsedReserve,
     duration: defaultDuration,
-    content: defaultContent
+    content: defaultContent,
+    stream: defaultStream,
+    streamBody: defaultStreamBody
 };
 export const setAIReasoningTheme = setComponentTheme('ai-reasoning');
-export const useAIReasoningTheme = useComponentTheme('aiReasoning', aiReasoningTheme);
+export const useAIReasoningTheme = useComponentTheme('ai-reasoning', aiReasoningTheme);

package/dist/components/AISuggestion/AISuggestion.svelte

@@ -7,7 +7,7 @@
 	let {
 		ref = $bindable(),
 		suggestion,
-		selected = false,
+		selected,
 		disabled = false,
 		variant = 'soft',
 		size = 'small',
@@ -19,6 +19,7 @@
 		...buttonProps
 	}: AISuggestionProps = $props();
 	const classes = $derived(useAISuggestionTheme(theme));
+	// Without `selected` the chip is a one-shot action, a plain button; with it, a toggle button.
 	const forwardedButtonProps = $derived({ ...buttonProps, 'data-slot': 'ai-suggestion' });
 
 	function select() {

package/dist/components/AISuggestion/AISuggestions.svelte

@@ -19,6 +19,7 @@
 		onValueChange,
 		disabled = false,
 		variant = 'soft',
+		persistSelection = false,
 		scrollFade = true,
 		suggestion,
 		onSelect,
@@ -76,7 +77,7 @@
 			{:else}
 				<AISuggestion
 					suggestion={item}
-					selected={valueState.value === item}
+					selected={persistSelection ? valueState.value === item : undefined}
 					{disabled}
 					{variant}
 					onSelect={select}

package/dist/components/AISuggestion/aiSuggestion.mcp.d.ts

@@ -1 +1 @@
-export declare const aiSuggestionDescription = "\n# AISuggestion and AISuggestions\n\nPrompt suggestions rendered as a horizontal, scroll-faded button row.\n\n- `AISuggestion` is the theme-aware button primitive, defaults to the soft variant, accepts regular Button size, color, and variant props, and reports semantic selection through `onSelect`.\n- `AISuggestions` owns horizontal scrolling, optional `scrollFade`, bindable `value`, `defaultValue`, disabled state, shared built-in item `variant`, and `onSelect`.\n- `defaultValue` initializes the selected suggestion when `value` is omitted. `onValueChange(value)` fires once when a user changes that selection; parent updates and selecting the same value stay silent. `onSelect(value)` reports every suggestion activation, including repeated selection.\n- Callback-naming decision: the selected suggestion is a value state, so it keeps the `value`/`defaultValue`/`onValueChange` trio, and `onSelect` stays the pick event on both components. `AIThread` and `AIChat` forward the same `onSelect` name for their empty-state suggestions.\n- Its `suggestion` snippet receives `{ suggestion, selected, disabled, select }` for composed item rendering.\n\n```svelte\n<script>import { AISuggestions } from './index.ts';</script>\n<AISuggestions suggestions={['Summarize', 'Explain', 'Compare']} bind:value />\n```\n\nUse conversation-owned suggestions through `AIThread` or `AIChat` when they are the empty transcript state. An explicit selection callback takes precedence over the default conversation input update.\n";
+export declare const aiSuggestionDescription = "\n# AISuggestion and AISuggestions\n\nPrompt suggestions rendered as a horizontal, scroll-faded button row.\n\n- `AISuggestion` is the theme-aware button primitive, defaults to the soft variant, accepts regular Button size, color, and variant props, and reports semantic selection through `onSelect`.\n- `AISuggestions` owns horizontal scrolling, optional `scrollFade`, bindable `value`, `defaultValue`, disabled state, shared built-in item `variant`, and `onSelect`.\n- `defaultValue` initializes the selected suggestion when `value` is omitted. `onValueChange(value)` fires once when a user changes that selection; parent updates and selecting the same value stay silent. `onSelect(value)` reports every suggestion activation, including repeated selection.\n- Callback-naming decision: the selected suggestion is a value state, so it keeps the `value`/`defaultValue`/`onValueChange` trio, and `onSelect` stays the pick event on both components. `AIThread` and `AIChat` forward the same `onSelect` name for their empty-state suggestions.\n- Suggestions are one-shot prompts by default: a pick reports `onSelect` and updates `value`, and each chip is a plain button (no `aria-pressed`). Set `persistSelection` to make the chips toggle buttons that keep the picked suggestion pressed. A standalone `AISuggestion` is a toggle button only when `selected` is set.\n- Its `suggestion` snippet receives `{ suggestion, selected, disabled, select }` for composed item rendering; `selected` is the real selection whatever `persistSelection` says.\n- With an `AIComposer`, fill the draft and call the composer's `focus()`, or send right away with its `submit(suggestion)` handle method (submit on select).\n\n```svelte\n<script>import { AISuggestions } from './index.ts';</script>\n<AISuggestions suggestions={['Summarize', 'Explain', 'Compare']} bind:value />\n```\n\n```svelte\n<AISuggestions {suggestions} onSelect={(suggestion) => composer.submit(suggestion)} />\n<AIComposer bind:this={composer} />\n```\n\nUse conversation-owned suggestions through `AIThread` or `AIChat` when they are the empty transcript state. An explicit selection callback takes precedence over the default conversation input update.\n";

package/dist/components/AISuggestion/aiSuggestion.mcp.js

@@ -7,12 +7,19 @@ Prompt suggestions rendered as a horizontal, scroll-faded button row.
 - \`AISuggestions\` owns horizontal scrolling, optional \`scrollFade\`, bindable \`value\`, \`defaultValue\`, disabled state, shared built-in item \`variant\`, and \`onSelect\`.
 - \`defaultValue\` initializes the selected suggestion when \`value\` is omitted. \`onValueChange(value)\` fires once when a user changes that selection; parent updates and selecting the same value stay silent. \`onSelect(value)\` reports every suggestion activation, including repeated selection.
 - Callback-naming decision: the selected suggestion is a value state, so it keeps the \`value\`/\`defaultValue\`/\`onValueChange\` trio, and \`onSelect\` stays the pick event on both components. \`AIThread\` and \`AIChat\` forward the same \`onSelect\` name for their empty-state suggestions.
-- Its \`suggestion\` snippet receives \`{ suggestion, selected, disabled, select }\` for composed item rendering.
+- Suggestions are one-shot prompts by default: a pick reports \`onSelect\` and updates \`value\`, and each chip is a plain button (no \`aria-pressed\`). Set \`persistSelection\` to make the chips toggle buttons that keep the picked suggestion pressed. A standalone \`AISuggestion\` is a toggle button only when \`selected\` is set.
+- Its \`suggestion\` snippet receives \`{ suggestion, selected, disabled, select }\` for composed item rendering; \`selected\` is the real selection whatever \`persistSelection\` says.
+- With an \`AIComposer\`, fill the draft and call the composer's \`focus()\`, or send right away with its \`submit(suggestion)\` handle method (submit on select).
 
 \`\`\`svelte
 <script>import { AISuggestions } from './index.ts';</script>
 <AISuggestions suggestions={['Summarize', 'Explain', 'Compare']} bind:value />
 \`\`\`
 
+\`\`\`svelte
+<AISuggestions {suggestions} onSelect={(suggestion) => composer.submit(suggestion)} />
+<AIComposer bind:this={composer} />
+\`\`\`
+
 Use conversation-owned suggestions through \`AIThread\` or \`AIChat\` when they are the empty transcript state. An explicit selection callback takes precedence over the default conversation input update.
 `;

package/dist/components/AISuggestion/aiSuggestion.props.d.ts

@@ -8,7 +8,10 @@ export type AISuggestionProps = Omit<ButtonProps, 'ref' | 'children' | 'onclick'
     ref?: HTMLButtonElement | null;
     /** Suggestion value passed to `onSelect`. */
     suggestion: string;
-    /** Marks the suggestion as selected. */
+    /**
+     * Marks the suggestion as selected and makes it a toggle button (`aria-pressed`). Leave it
+     * unset for a one-shot suggestion, which renders a plain button.
+     */
     selected?: boolean;
     /** Replaces the default suggestion label. */
     children?: Slot;

package/dist/components/AISuggestion/aiSuggestion.theme.js

@@ -8,4 +8,4 @@ export const aiSuggestionTheme = {
     suggestion: defaultSuggestion
 };
 export const setAISuggestionTheme = setComponentTheme('ai-suggestion');
-export const useAISuggestionTheme = useComponentTheme('aiSuggestion', aiSuggestionTheme);
+export const useAISuggestionTheme = useComponentTheme('ai-suggestion', aiSuggestionTheme);

package/dist/components/AISuggestion/aiSuggestions.props.d.ts

@@ -23,6 +23,13 @@ export type AISuggestionsProps = Omit<ScrollAreaProps, 'ref' | 'viewportRef' | '
     disabled?: boolean;
     /** Button treatment applied to the built-in suggestion items. */
     variant?: AISuggestionProps['variant'];
+    /**
+     * Keeps the last picked suggestion pressed. Off by default: suggestions are one-shot prompts,
+     * so a pick reports `onSelect` (and updates `value`) without leaving a sticky pressed chip.
+     * Custom `suggestion` snippets still receive the real `selected` state.
+     * @default false
+     */
+    persistSelection?: boolean;
     /** Enables the shared scroll-fade utility on horizontal overflow. */
     scrollFade?: boolean;
     /** Custom suggestion renderer with selection state and action. */