entasis 0.10.2 → 0.12.0

package/dist/components/AIComposer/aiComposer.theme.d.ts

@@ -29,6 +29,12 @@ export declare const aiComposerTheme: {
     toolbar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     file: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    notice: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        empty: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         side: {
@@ -45,7 +51,14 @@ export declare const aiComposerTheme: {
     queue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueEditing: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    queueItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueItem: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        steered: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    queueBadge: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
 export type AIComposerTheme = typeof aiComposerTheme;
@@ -80,6 +93,12 @@ export declare const setAIComposerTheme: (theme: InferComponentTheme<{
     toolbar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     file: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    notice: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        empty: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         side: {
@@ -96,7 +115,14 @@ export declare const setAIComposerTheme: (theme: InferComponentTheme<{
     queue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueEditing: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    queueItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueItem: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        steered: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    queueBadge: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
 export declare const useAIComposerTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
@@ -129,6 +155,12 @@ export declare const useAIComposerTheme: import("../../utils/cva/theme.js").UseC
     toolbar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     file: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    notice: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        empty: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     actions: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         side: {
@@ -145,6 +177,13 @@ export declare const useAIComposerTheme: import("../../utils/cva/theme.js").UseC
     queue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueEditing: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    queueItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueItem: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        steered: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    queueBadge: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    queueFiles: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     queueText: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;

package/dist/components/AIComposer/aiComposer.theme.js

@@ -1,6 +1,11 @@
 import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+// The composer is a raised card so it separates from whatever chat surface hosts it: its own
+// raised fill, a hairline and a soft lift. It caps itself at `--ai-chat-content-width` when a host
+// (AIChat) publishes one and centres in the remaining room; without the variable it spans its
+// host. `@container` lets the editor and footer switch to touch ergonomics on a narrow composer.
+// The focus ring follows the editor only, so focusing a footer control does not ring the card.
 const defaultRoot = cva({
-    base: 'relative grid min-w-0 grid-cols-[minmax(0,1fr)] gap-xs rounded-md border border-neutral-muted bg-surface p-sm transition-colors focus-within:ring-2 focus-within:ring-focus/50',
+    base: '@container relative mx-auto grid w-full max-w-[var(--ai-chat-content-width,none)] min-w-0 grid-cols-[minmax(0,1fr)] gap-xs rounded-lg border border-neutral-muted bg-surface-raised p-sm lift-2 transition-colors has-[[data-slot=ai-composer-editor]:focus-within]:ring-2 has-[[data-slot=ai-composer-editor]:focus-within]:ring-focus/50',
     variants: {
         dragState: {
             idle: '',
@@ -37,12 +42,26 @@ const defaultEditor = cva({
 const defaultToolbar = cva({ base: 'min-w-0' });
 const defaultFile = cva({ base: 'shrink-0' });
 const defaultError = cva({ base: 'min-w-0' });
-const defaultFooter = cva({ base: 'flex min-w-0 items-center gap-md' });
+// Rejected files are reported as a quiet inline note that dismisses itself, not as an alert. The
+// note's live region stays mounted; while empty it is visually hidden and takes no grid row.
+const defaultNotice = cva({
+    base: 'flex min-w-0 items-center justify-between gap-md px-sm text-xs text-danger-readable',
+    variants: { empty: { true: 'sr-only', false: '' } },
+    defaultVariants: { empty: false }
+});
+// On a narrow composer or a touch screen the footer controls grow to the 36px control height, so
+// the targets are reachable with a thumb. VoiceInput's buttons are excluded here: the footer gives
+// the VoiceInput its 36px `normal` size under the same conditions instead.
+const defaultFooter = cva({
+    base: 'flex min-w-0 items-center gap-md @max-md:[&_button:not([data-slot=ai-composer-voice-input]_button)]:h-control-lg pointer-coarse:[&_button:not([data-slot=ai-composer-voice-input]_button)]:h-control-lg'
+});
+// The start group (attach, footerStart) may shrink; the end group (model, voice, queue,
+// stop/send) keeps priority so the send position never leaves the composer.
 const defaultActions = cva({
     base: 'flex items-center gap-xs',
     variants: {
         side: {
-            start: 'shrink-0',
+            start: 'min-w-0 shrink',
             end: 'ml-auto min-w-0 flex-1 justify-end'
         }
     },
@@ -62,8 +81,18 @@ const defaultQueue = cva({ base: 'grid gap-xs border-b border-neutral-muted pb-m
 const defaultQueueEditing = cva({
     base: 'flex min-w-0 items-center justify-between gap-md rounded-sm bg-neutral-muted/50 px-md py-xs text-sm text-neutral/70'
 });
-const defaultQueueList = cva({ base: 'grid gap-xs' });
-const defaultQueueItem = cva({ base: 'flex min-w-0 flex-1 items-center gap-md' });
+// One `minmax(0, 1fr)` track: an `auto` track grows to a long message's width and pushes the row
+// actions past the composer edge instead of truncating the preview.
+const defaultQueueList = cva({ base: 'grid grid-cols-[minmax(0,1fr)] gap-xs [&>*]:min-w-0' });
+const defaultQueueItem = cva({
+    base: 'flex min-w-0 flex-1 items-center gap-md',
+    variants: { steered: { true: '', false: '' } },
+    defaultVariants: { steered: false }
+});
+const defaultQueueBadge = cva({
+    base: 'shrink-0 rounded-sm bg-primary-muted px-sm text-xs font-medium text-primary-muted-readable'
+});
+const defaultQueueFiles = cva({ base: 'shrink-0 text-xs text-neutral/70' });
 const defaultQueueText = cva({ base: 'min-w-0 flex-1 truncate text-sm text-neutral/70' });
 export const aiComposerTheme = {
     root: defaultRoot,
@@ -76,6 +105,7 @@ export const aiComposerTheme = {
     toolbar: defaultToolbar,
     file: defaultFile,
     error: defaultError,
+    notice: defaultNotice,
     footer: defaultFooter,
     actions: defaultActions,
     voiceInput: defaultVoiceInput,
@@ -83,6 +113,8 @@ export const aiComposerTheme = {
     queueEditing: defaultQueueEditing,
     queueList: defaultQueueList,
     queueItem: defaultQueueItem,
+    queueBadge: defaultQueueBadge,
+    queueFiles: defaultQueueFiles,
     queueText: defaultQueueText
 };
 export const setAIComposerTheme = setComponentTheme('ai-composer');

package/dist/components/AIComposer/aiComposerFileController.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Messages } from '../../i18n/en.js';
 import type { FileRejection } from '../Form/File/fileAcceptance.js';
 import { FileDropzone } from '../Form/File/fileDropzone.svelte.js';
 import type { AIComposerAttachment, AIComposerQueuedMessage } from './aiComposer.props.js';
@@ -20,21 +21,28 @@ type AIComposerFileControllerOptions = {
     onAttachmentAdd?: (payload: AIComposerAttachment) => void;
     onAttachmentRetry?: (payload: AIComposerAttachment) => void | Promise<void>;
     onAttachmentRemove?: (payload: AIComposerAttachment) => void;
+    messages: Messages;
 };
 export declare class AIComposerFileController {
     private optionsSource;
     readonly dropzone: FileDropzone;
     error: string | undefined;
+    /** Plain-language note about files that were just rejected; the composer dismisses it. */
+    notice: string | undefined;
+    /** Counts rejection notes, so a repeated identical note still re-announces and restarts its timer. */
+    noticeId: number;
     constructor(optionsSource: () => AIComposerFileControllerOptions);
     get files(): File[];
     get attachments(): AIComposerAttachment[];
     get accept(): readonly string[];
+    /** The effective file limit: a single-file composer holds one file whatever `maxFiles` says. */
     get maxFiles(): number;
     get isDisabled(): boolean;
     addFiles(files: readonly File[]): void;
     removeFile(file: File): void;
     retryAttachment(attachmentId: string): Promise<void>;
     clear(): void;
+    dismissNotice(): void;
     restore(message: AIComposerQueuedMessage): void;
     handlePaste(event: ClipboardEvent): void;
     private get options();
@@ -46,4 +54,16 @@ export declare class AIComposerFileController {
     private updateAttachment;
     private reportRejections;
 }
+/**
+ * One sentence a person can act on: the file's name and what to do instead ("notes.txt isn't
+ * supported — use images or PDF"), never the rejection code.
+ */
+export declare function describeRejections(rejections: readonly FileRejection[], context: {
+    accept: readonly string[];
+    maxFiles: number;
+    maxFileSize: string;
+    messages: Messages;
+}): string;
+/** "images or PDF" from `['image/*', '.pdf']`, joined the locale's way. */
+export declare function describeAcceptedTypes(accept: readonly string[], messages: Messages): string;
 export {};

package/dist/components/AIComposer/aiComposerFileController.svelte.js

@@ -6,6 +6,10 @@ export class AIComposerFileController {
     optionsSource;
     dropzone;
     error = $state();
+    /** Plain-language note about files that were just rejected; the composer dismisses it. */
+    notice = $state();
+    /** Counts rejection notes, so a repeated identical note still re-announces and restarts its timer. */
+    noticeId = $state(0);
     constructor(optionsSource) {
         this.optionsSource = optionsSource;
         this.dropzone = new FileDropzone(() => ({
@@ -32,8 +36,9 @@ export class AIComposerFileController {
     get accept() {
         return this.options.accept;
     }
+    /** The effective file limit: a single-file composer holds one file whatever `maxFiles` says. */
     get maxFiles() {
-        return this.options.maxFiles;
+        return this.options.fileMultiple ? this.options.maxFiles : 1;
     }
     get isDisabled() {
         const options = this.options;
@@ -73,7 +78,7 @@ export class AIComposerFileController {
             }));
         }
         catch (error) {
-            const message = getErrorMessage(error, `Unable to upload ${attachment.file.name}.`);
+            const message = getErrorMessage(error, this.options.messages.aiComposerUploadFailed(attachment.file.name));
             this.updateAttachment(attachmentId, (current) => ({
                 ...current,
                 status: 'failed',
@@ -88,8 +93,12 @@ export class AIComposerFileController {
         else
             this.commitFiles([]);
         this.error = undefined;
+        this.notice = undefined;
         this.dropzone.reset();
     }
+    dismissNotice() {
+        this.notice = undefined;
+    }
     restore(message) {
         if (this.options.managedAttachments) {
             const attachments = message.attachments.length > 0
@@ -117,6 +126,7 @@ export class AIComposerFileController {
     }
     replaceFiles(files) {
         this.error = undefined;
+        this.notice = undefined;
         const options = this.options;
         if (!options.managedAttachments) {
             this.commitFiles(files);
@@ -159,18 +169,74 @@ export class AIComposerFileController {
     }
     reportRejections(rejections) {
         if (rejections.length === 0) {
-            this.error = undefined;
+            this.notice = undefined;
             return;
         }
         const options = this.options;
         options.onFileReject?.(rejections);
-        const files = rejections.map((rejection) => rejection.file);
-        options.onFilesRejected?.(files);
-        const reasons = rejections
-            .map((rejection) => rejection.reason)
-            .filter((reason, index, allReasons) => allReasons.indexOf(reason) === index);
-        this.error = `${files.length} file${files.length === 1 ? '' : 's'} rejected (${reasons.join(', ')}).`;
+        options.onFilesRejected?.(rejections.map((rejection) => rejection.file));
+        this.noticeId += 1;
+        this.notice = describeRejections(rejections, {
+            accept: options.accept,
+            maxFiles: this.maxFiles,
+            maxFileSize: this.dropzone.formatSize(options.maxFileSize),
+            messages: options.messages
+        });
+    }
+}
+/**
+ * One sentence a person can act on: the file's name and what to do instead ("notes.txt isn't
+ * supported — use images or PDF"), never the rejection code.
+ */
+export function describeRejections(rejections, context) {
+    const { messages } = context;
+    const first = rejections[0].reason;
+    const reason = rejections.every((rejection) => rejection.reason === first) ? first : undefined;
+    const name = rejections[0].file.name;
+    const single = rejections.length === 1;
+    if (reason === 'limit')
+        return messages.aiComposerFileLimit(context.maxFiles);
+    if (reason === 'type') {
+        const types = describeAcceptedTypes(context.accept, messages);
+        return single
+            ? messages.aiComposerFileUnsupported(name, types)
+            : messages.aiComposerFilesUnsupported(rejections.length, types);
+    }
+    if (single && reason === 'size')
+        return messages.aiComposerFileTooLarge(name, context.maxFileSize);
+    if (single && reason === 'duplicate')
+        return messages.aiComposerFileDuplicate(name);
+    return messages.aiComposerFilesRejected(rejections.length);
+}
+/** "images or PDF" from `['image/*', '.pdf']`, joined the locale's way. */
+export function describeAcceptedTypes(accept, messages) {
+    const names = accept.map((pattern) => describeAcceptPattern(pattern.trim(), messages));
+    const unique = names.filter((name, index) => name && names.indexOf(name) === index);
+    try {
+        return new Intl.ListFormat(messages.locale, { type: 'disjunction' }).format(unique);
+    }
+    catch {
+        return unique.join(', ');
+    }
+}
+function describeAcceptPattern(pattern, messages) {
+    const normalized = pattern.toLowerCase();
+    if (normalized.startsWith('.'))
+        return normalized.slice(1).toUpperCase();
+    const [family, subtype] = normalized.split('/');
+    if (subtype === '*') {
+        if (family === 'image')
+            return messages.aiComposerFileTypeImages;
+        if (family === 'video')
+            return messages.aiComposerFileTypeVideos;
+        if (family === 'audio')
+            return messages.aiComposerFileTypeAudio;
+        if (family === 'text')
+            return messages.aiComposerFileTypeText;
+        return family;
     }
+    // `application/pdf` → PDF; `application/vnd.ms-excel` → MS-EXCEL.
+    return (subtype ?? family).replace(/^(?:vnd\.|x-)/, '').toUpperCase();
 }
 function createAttachment(file) {
     return {

package/dist/components/AIComposer/aiComposerSourceAdapter.js

@@ -1,4 +1,9 @@
 import { en } from '../../i18n/en.js';
+import { atIcon } from '../Icons/at.js';
+import { fileTextIcon } from '../Icons/fileText.js';
+import { lightningIcon } from '../Icons/lightning.js';
+import { linkIcon } from '../Icons/link.js';
+import { sparkleIcon } from '../Icons/sparkle.js';
 import { toRichTextInputToken } from '../RichTextInput/suggestions.js';
 export function resolveAIComposerSources(options) {
     const commands = resolveCommands(options);
@@ -164,9 +169,10 @@ function createAtSearch(mentions, references, compatibilitySearch) {
     return (context) => combineSearchResults([
         searchSource(mentions, context, 'mention'),
         searchSource(references, context, 'reference'),
-        mapSearchResult(compatibilitySearch ? searchMentions(compatibilitySearch, context.query, 'all') : [], (items) => items
-            .filter(isAtMention)
-            .map((item) => ({ ...item, kind: getAIComposerMentionKind(item, 'mention') })))
+        mapSearchResult(compatibilitySearch ? searchMentions(compatibilitySearch, context.query, 'all') : [], (items) => items.filter(isAtMention).map((item) => {
+            const kind = getAIComposerMentionKind(item, 'mention');
+            return { ...item, kind, icon: item.icon ?? KIND_ICONS[kind] };
+        }))
     ]);
 }
 function searchSource(source, context, kind) {
@@ -222,8 +228,20 @@ function requireMention(item) {
     }
     return { ...item, kind };
 }
+// A leading icon per token kind in the / @ $ menus when the item brings none, so people, files
+// and references are told apart at a glance in a mixed @ list.
+const KIND_ICONS = {
+    command: lightningIcon,
+    mention: atIcon,
+    file: fileTextIcon,
+    reference: linkIcon,
+    skill: sparkleIcon
+};
 function withKind(items, fallback) {
-    return (items ?? []).map((item) => ({ ...item, kind: itemKind(item, fallback) }));
+    return (items ?? []).map((item) => {
+        const kind = itemKind(item, fallback);
+        return { ...item, kind, icon: item.icon ?? KIND_ICONS[kind] };
+    });
 }
 function itemKind(item, fallback) {
     if (item.kind)

package/dist/components/AIComposer/aiComposerSubmitController.svelte.d.ts

@@ -11,6 +11,17 @@ type AIComposerSubmitControllerOptions = {
     conversation: AIConversationState<AIThreadItem> | null;
     buildMeta: () => AIComposerSubmitMeta;
     clearDraft: () => void;
+    /**
+     * Whether the send started inside the composer: focus is there, or the submit came from one of
+     * its buttons (Safari does not focus a clicked button, so focus sits on `<body>` then).
+     */
+    hasFocus: (event?: AIComposerSubmitEvent) => boolean;
+    /** Returns focus to the editor once a send settles. */
+    restoreFocus: () => void;
+    messages: {
+        submitFailed: string;
+        stopFailed: string;
+    };
     onSubmit: AIComposerProps['onSubmit'];
     onStop: AIComposerProps['onStop'];
 };
@@ -24,6 +35,7 @@ export declare class AIComposerSubmitController {
     submit: (event?: AIComposerSubmitEvent) => Promise<void>;
     stop: () => Promise<void>;
     private get options();
+    /** Hands the draft to `onSubmit` or the conversation; a rejection keeps the draft. */
     private dispatch;
 }
 export {};

package/dist/components/AIComposer/aiComposerSubmitController.svelte.js

@@ -16,26 +16,36 @@ export class AIComposerSubmitController {
         if (options.disabled || this.isWorking || !options.canSubmit)
             return;
         const meta = options.buildMeta();
+        // A send that started inside the composer hands focus back to the editor once it settles:
+        // the editor is read-only while a send is in flight (which blurs it), and queueing or
+        // committing an edit clears the draft, which unmounts or disables the button that sent it.
+        const hadFocus = options.hasFocus(event);
         if (options.queue.isEditing) {
             options.queue.commitEdit(meta);
+            if (hadFocus)
+                options.restoreFocus();
             return;
         }
         if (options.busy) {
             if (options.queueWhileBusy)
                 options.queue.enqueue(meta);
+            if (hadFocus)
+                options.restoreFocus();
             return;
         }
         this.isSubmitting = true;
         this.error = undefined;
         try {
-            if (await this.dispatch(meta, event))
-                options.clearDraft();
+            await this.dispatch(meta, event);
+            options.clearDraft();
         }
         catch (error) {
-            this.error = getErrorMessage(error, 'Unable to submit the message.');
+            this.error = getErrorMessage(error, options.messages.submitFailed);
         }
         finally {
             this.isSubmitting = false;
+            if (hadFocus)
+                options.restoreFocus();
         }
     };
     stop = async () => {
@@ -53,7 +63,7 @@ export class AIComposerSubmitController {
                 throw new Error('AIComposer requires onStop or a parent AIConversation to stop.');
         }
         catch (error) {
-            this.error = getErrorMessage(error, 'Unable to stop the response.');
+            this.error = getErrorMessage(error, options.messages.stopFailed);
         }
         finally {
             this.isStopping = false;
@@ -62,12 +72,13 @@ export class AIComposerSubmitController {
     get options() {
         return this.optionsSource();
     }
+    /** Hands the draft to `onSubmit` or the conversation; a rejection keeps the draft. */
     async dispatch(meta, event) {
         const options = this.options;
         const detail = { ...meta, event, steered: false };
         if (options.onSubmit) {
             await options.onSubmit(detail);
-            return false;
+            return;
         }
         if (!options.conversation) {
             throw new Error('AIComposer requires onSubmit or a parent AIConversation.');
@@ -77,7 +88,6 @@ export class AIComposerSubmitController {
             event,
             meta
         });
-        return true;
     }
 }
 function getErrorMessage(error, fallback) {

package/dist/components/AIContext/AIContext.svelte

@@ -144,9 +144,13 @@
 				decorative
 				class={classes.progress()}
 			/>
-			{#if !compact}<span class={classes.triggerValue()}
-					>{state.formattedUsed} / {state.formattedMax}</span
-				>{/if}
+			{#if compact}
+				<span data-slot="ai-context-trigger-percent" class={classes.triggerPercent()}
+					>{Math.round(clampedPercent)}%</span
+				>
+			{:else}
+				<span class={classes.triggerValue()}>{state.formattedUsed} / {state.formattedMax}</span>
+			{/if}
 		</button>
 	{/if}
 {/snippet}

package/dist/components/AIContext/aiContext.mcp.d.ts

@@ -1 +1 @@
-export declare const aiContextDescription = "\n# AIContext\n\nDisplays context-window usage with the existing `ProgressCircle` and a top-end `HoverCard` breakdown. It reads `AIConversation.contextUsage` when `usage` is omitted or undefined; a direct usage object or `null` wins over provider state. Direct `usedTokens` takes precedence over either usage source.\n\n`maxTokens` defaults to 128,000. `warningAt` and `dangerAt` default to 70 and 90 percent. Use `compact` for an icon-only trigger and `formatTokens` to replace number formatting. `dir` is forwarded to both the trigger wrapper and portalled details. The compact `labels` object overrides the title, remaining-token formatter, breakdown row labels, Used/Maximum labels, and complete trigger `label`; formatter callbacks receive already formatted token strings.\n\nThe `children` trigger and `content` detail snippets receive the complete resolved state: totals, remaining tokens, percentage, tone, formatted values, and resolved labels. Theme slots cover the root, popover/card surfaces, trigger, progress circle, trigger value, summary, meter, and breakdown rows. Native div attributes and attachments are forwarded to the root; `ref` binds that element.\n\nThe default trigger is a keyboard-focusable button with a complete context-usage label. The decorative ProgressCircle does not duplicate progress semantics, and the hover content opens from pointer or keyboard focus.\n\n```svelte\n<AIContext\n  maxTokens={128000}\n  usage={{ inputTokens: 12000, outputTokens: 3200, reasoningTokens: 800 }}\n/>\n```\n";
+export declare const aiContextDescription = "\n# AIContext\n\nDisplays context-window usage with the existing `ProgressCircle` and a top-end `HoverCard` breakdown. It reads `AIConversation.contextUsage` when `usage` is omitted or undefined; a direct usage object or `null` wins over provider state. Direct `usedTokens` takes precedence over either usage source.\n\n`maxTokens` defaults to 128,000. `warningAt` and `dangerAt` default to 70 and 90 percent. Use `compact` for the ring plus the rounded percentage (\"17%\") on the small control height used by composer footers, and `formatTokens` to replace number formatting. The default trigger is transparent so it sits on any surface. AIChat shows its default indicator only when `maxTokens` is set or the conversation reports `contextUsage`. `dir` is forwarded to both the trigger wrapper and portalled details. The compact `labels` object overrides the title, remaining-token formatter, breakdown row labels, Used/Maximum labels, and complete trigger `label`; formatter callbacks receive already formatted token strings.\n\nThe `children` trigger and `content` detail snippets receive the complete resolved state: totals, remaining tokens, percentage, tone, formatted values, and resolved labels. Theme slots cover the root, popover/card surfaces, trigger, progress circle, trigger value, summary, meter, and breakdown rows. Native div attributes and attachments are forwarded to the root; `ref` binds that element.\n\nThe default trigger is a keyboard-focusable button with a complete context-usage label. The decorative ProgressCircle does not duplicate progress semantics, and the hover content opens from pointer or keyboard focus.\n\n```svelte\n<AIContext\n  maxTokens={128000}\n  usage={{ inputTokens: 12000, outputTokens: 3200, reasoningTokens: 800 }}\n/>\n```\n";

package/dist/components/AIContext/aiContext.mcp.js

@@ -3,7 +3,7 @@ export const aiContextDescription = `
 
 Displays context-window usage with the existing \`ProgressCircle\` and a top-end \`HoverCard\` breakdown. It reads \`AIConversation.contextUsage\` when \`usage\` is omitted or undefined; a direct usage object or \`null\` wins over provider state. Direct \`usedTokens\` takes precedence over either usage source.
 
-\`maxTokens\` defaults to 128,000. \`warningAt\` and \`dangerAt\` default to 70 and 90 percent. Use \`compact\` for an icon-only trigger and \`formatTokens\` to replace number formatting. \`dir\` is forwarded to both the trigger wrapper and portalled details. The compact \`labels\` object overrides the title, remaining-token formatter, breakdown row labels, Used/Maximum labels, and complete trigger \`label\`; formatter callbacks receive already formatted token strings.
+\`maxTokens\` defaults to 128,000. \`warningAt\` and \`dangerAt\` default to 70 and 90 percent. Use \`compact\` for the ring plus the rounded percentage ("17%") on the small control height used by composer footers, and \`formatTokens\` to replace number formatting. The default trigger is transparent so it sits on any surface. AIChat shows its default indicator only when \`maxTokens\` is set or the conversation reports \`contextUsage\`. \`dir\` is forwarded to both the trigger wrapper and portalled details. The compact \`labels\` object overrides the title, remaining-token formatter, breakdown row labels, Used/Maximum labels, and complete trigger \`label\`; formatter callbacks receive already formatted token strings.
 
 The \`children\` trigger and \`content\` detail snippets receive the complete resolved state: totals, remaining tokens, percentage, tone, formatted values, and resolved labels. Theme slots cover the root, popover/card surfaces, trigger, progress circle, trigger value, summary, meter, and breakdown rows. Native div attributes and attachments are forwarded to the root; \`ref\` binds that element.
 

package/dist/components/AIContext/aiContext.props.d.ts

@@ -50,7 +50,10 @@ export type AIContextProps = WithAttachments<Omit<HTMLAttributes<HTMLDivElement>
     usedTokens?: number;
     /** Structured token breakdown; falls back to conversation state when omitted or undefined. Pass `null` to suppress that fallback. */
     usage?: AIContextUsage | null;
-    /** Renders only the circular meter in the trigger. */
+    /**
+     * Renders the circular meter with the rounded percentage (`17%`) instead of the token totals,
+     * on the small control height used by composer footers.
+     */
     compact?: boolean;
     /** Percentage at which warning styling begins. */
     warningAt?: number;

package/dist/components/AIContext/aiContext.theme.d.ts

@@ -17,6 +17,7 @@ export declare const aiContextTheme: {
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     progress: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     triggerValue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    triggerPercent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     title: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -55,6 +56,7 @@ export declare const setAIContextTheme: (theme: InferComponentTheme<{
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     progress: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     triggerValue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    triggerPercent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     title: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -91,6 +93,7 @@ export declare const useAIContextTheme: import("../../utils/cva/theme.js").UseCo
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     progress: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     triggerValue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    triggerPercent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     title: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;

package/dist/components/AIContext/aiContext.theme.js

@@ -3,10 +3,13 @@ const defaultRoot = cva({ base: 'inline-flex' });
 const defaultPopover = cva({ base: 'w-auto p-0' });
 const defaultCard = cva({ base: 'w-auto gap-0 py-0' });
 const defaultCardContent = cva({ base: 'p-0' });
+// A transparent control on the small control height, so it sits on any composer surface beside
+// the footer buttons. Compact keeps the ring and adds the percentage: a ring alone reads as a
+// loading spinner.
 const defaultTrigger = cva({
-    base: 'state-layer inline-flex items-center rounded-sm bg-surface text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-focus/50',
+    base: 'state-layer inline-flex h-control-sm shrink-0 items-center rounded-md bg-transparent text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-focus/50',
     variants: {
-        compact: { true: 'size-8 justify-center p-0', false: 'gap-sm px-md py-xs' },
+        compact: { true: 'justify-center gap-xs px-sm', false: 'gap-sm px-md' },
         tone: {
             default: 'text-neutral',
             warning: 'text-warning-readable',
@@ -17,6 +20,7 @@ const defaultTrigger = cva({
 });
 const defaultProgress = cva({ base: 'shrink-0' });
 const defaultTriggerValue = cva({ base: 'text-center font-normal tabular-nums' });
+const defaultTriggerPercent = cva({ base: 'tabular-nums' });
 const defaultContent = cva({ base: 'flex min-w-56 flex-col gap-lg p-lg' });
 const defaultSummary = cva({ base: 'flex items-start justify-between gap-lg' });
 const defaultTitle = cva({ base: 'text-xs leading-4 font-medium' });
@@ -42,6 +46,7 @@ export const aiContextTheme = {
     trigger: defaultTrigger,
     progress: defaultProgress,
     triggerValue: defaultTriggerValue,
+    triggerPercent: defaultTriggerPercent,
     content: defaultContent,
     summary: defaultSummary,
     title: defaultTitle,

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

@@ -3,7 +3,7 @@ import type { AIConversationProps } from './aiConversation.props.js';
 declare function $$render<TMessage extends AIThreadItem = AIThreadItem>(): {
     props: AIConversationProps<TMessage>;
     exports: {};
-    bindings: "error" | "attachments" | "files" | "suggestions" | "status" | "api" | "messages" | "streaming" | "queuedMessage" | "currentInput" | "liveText" | "contextUsage" | "selectedModel" | "activeAskUserQuestion";
+    bindings: "error" | "attachments" | "files" | "messages" | "suggestions" | "status" | "api" | "streaming" | "queuedMessage" | "currentInput" | "liveText" | "contextUsage" | "selectedModel" | "activeAskUserQuestion";
     slots: {};
     events: {};
 };
@@ -11,7 +11,7 @@ declare class __sveltets_Render<TMessage extends AIThreadItem = AIThreadItem> {
     props(): ReturnType<typeof $$render<TMessage>>['props'];
     events(): ReturnType<typeof $$render<TMessage>>['events'];
     slots(): ReturnType<typeof $$render<TMessage>>['slots'];
-    bindings(): "error" | "attachments" | "files" | "suggestions" | "status" | "api" | "messages" | "streaming" | "queuedMessage" | "currentInput" | "liveText" | "contextUsage" | "selectedModel" | "activeAskUserQuestion";
+    bindings(): "error" | "attachments" | "files" | "messages" | "suggestions" | "status" | "api" | "streaming" | "queuedMessage" | "currentInput" | "liveText" | "contextUsage" | "selectedModel" | "activeAskUserQuestion";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/AIFilePreview/aiFilePreview.theme.js

@@ -21,4 +21,4 @@ export const aiFilePreviewTheme = {
     error: cva({ base: 'truncate text-xs text-danger-readable' })
 };
 export const setAIFilePreviewTheme = setComponentTheme('ai-file-preview');
-export const useAIFilePreviewTheme = useComponentTheme('aiFilePreview', aiFilePreviewTheme);
+export const useAIFilePreviewTheme = useComponentTheme('ai-file-preview', aiFilePreviewTheme);