entasis 0.11.0 → 0.13.0

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

@@ -1,27 +1,72 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const aiReasoningTheme: {
-    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;
-    duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    icon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    status: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    duration: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type AIReasoningTheme = typeof aiReasoningTheme;
 export type AIReasoningThemeProps = InferComponentTheme<AIReasoningTheme>;
 export declare const setAIReasoningTheme: (theme: InferComponentTheme<{
-    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;
-    duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    icon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    status: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    duration: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.ts").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;
-    duration: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+export declare const useAIReasoningTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    trigger: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    icon: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    status: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    message: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        current: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    elapsed: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    elapsedReserve: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    duration: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    content: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    stream: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        overflowing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    streamBody: (props?: import("../../utils/cva/types.ts").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/AISuggestions.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AISuggestionsProps } from './aiSuggestions.props.js';
-declare const AISuggestions: import("svelte").Component<AISuggestionsProps, {}, "value" | "ref" | "viewportRef" | "listRef">;
+declare const AISuggestions: import("svelte").Component<AISuggestionsProps, {}, "ref" | "value" | "viewportRef" | "listRef">;
 type AISuggestions = ReturnType<typeof AISuggestions>;
 export default AISuggestions;

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.d.ts

@@ -1,18 +1,18 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const aiSuggestionTheme: {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    list: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    suggestion: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    list: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    suggestion: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type AISuggestionTheme = typeof aiSuggestionTheme;
 export type AISuggestionThemeProps = InferComponentTheme<AISuggestionTheme>;
 export declare const setAISuggestionTheme: (theme: InferComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    list: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    suggestion: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    list: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    suggestion: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useAISuggestionTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    list: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    suggestion: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+export declare const useAISuggestionTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    list: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    suggestion: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;

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

@@ -1,11 +1,15 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
-const defaultRoot = cva({ base: 'min-w-0 w-full' });
-const defaultList = cva({ base: 'flex w-max min-w-full flex-nowrap items-center gap-md py-xs' });
-const defaultSuggestion = cva({ base: 'shrink-0 rounded-full px-xl' });
+// The row is a container: in a narrow one (under 28rem, a phone or a side panel) the chips keep
+// their height but trim their side padding and gaps, so more of them fit before the scroll fade.
+const defaultRoot = cva({ base: '@container min-w-0 w-full' });
+const defaultList = cva({
+    base: 'flex w-max min-w-full flex-nowrap items-center gap-md @max-md:gap-sm py-xs'
+});
+const defaultSuggestion = cva({ base: 'shrink-0 rounded-full px-xl @max-md:px-md' });
 export const aiSuggestionTheme = {
     root: defaultRoot,
     list: defaultList,
     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. */