@lostgradient/cinder 0.8.0 → 0.11.0

package/src/components/chat/chat.schema.json

@@ -50,6 +50,26 @@
       "type": "string",
       "description": "Optional status label displayed in the typing indicator while `streaming` is `true` and no streaming content has arrived yet (e.g. `\"Thinking…\"` or `\"Analyzing file…\"`). When omitted, three animated dots are shown."
     },
+    "composerRole": {
+      "type": "string",
+      "description": "Explicit role for the composer textarea, for overlay patterns such as ARIA comboboxes."
+    },
+    "composerAriaExpanded": {
+      "enum": [false, true, "true", "false"],
+      "description": "`aria-expanded` passed to the composer textarea for overlays such as slash-command menus."
+    },
+    "composerAriaControls": {
+      "type": "string",
+      "description": "`aria-controls` passed to the composer textarea for overlays such as slash-command menus."
+    },
+    "composerAriaActiveDescendant": {
+      "type": "string",
+      "description": "`aria-activedescendant` passed to the composer textarea for overlays such as slash-command menus."
+    },
+    "composerAriaAutocomplete": {
+      "enum": ["none", "inline", "list", "both"],
+      "description": "`aria-autocomplete` passed to the composer textarea for overlays such as slash-command menus."
+    },
     "virtualized": {
       "type": "boolean",
       "description": "Use the virtualized message render path for long transcripts. The complete `ConversationHistory` remains unchanged; only the DOM window is reduced. Default `false`."
@@ -164,10 +184,25 @@
         "name": "onattachmentremove",
         "reason": "function-or-snippet"
       },
+      {
+        "name": "oncomposerblur",
+        "reason": "function-or-snippet",
+        "description": "Called when focus leaves the composer textarea. Overlay primitives can use\nthis to dismiss without preventing native focus movement."
+      },
       {
         "name": "oncomposerinput",
         "reason": "function-or-snippet",
-        "description": "Called with the composer's current plain-text value on every composer\ninput event. Lets a consumer build slash-command, mention, or autocomplete\nUX without reaching into `.chat-input-editor` DOM directly."
+        "description": "Called with the composer's current plain-text value on every composer\ninput event. The optional event exposes the textarea for composer-bound\noverlays without reaching into `.chat-input-editor` DOM directly."
+      },
+      {
+        "name": "oncomposerkeydown",
+        "reason": "function-or-snippet",
+        "description": "Called before Chat's internal composer key handling when a keydown\noriginates from the composer textarea. Call `event.preventDefault()` to\nlet an overlay consume Arrow keys, Enter, or Escape before Enter-to-send.\nChat does not call this hook during IME composition, so Enter can still\nconfirm the active candidate instead of sending."
+      },
+      {
+        "name": "oncomposerselectionchange",
+        "reason": "function-or-snippet",
+        "description": "Called after pointer or selection activity may have moved the composer\ncaret without changing text. Overlay primitives can resync their active\ntoken from the textarea selection."
       },
       {
         "name": "ondeny",

package/src/components/chat/chat.schema.ts

@@ -63,6 +63,31 @@ const schema = {
       description:
         'Optional status label displayed in the typing indicator while `streaming` is `true` and no streaming content has arrived yet (e.g. `"Thinking…"` or `"Analyzing file…"`). When omitted, three animated dots are shown.',
     },
+    composerRole: {
+      type: 'string',
+      description:
+        'Explicit role for the composer textarea, for overlay patterns such as ARIA comboboxes.',
+    },
+    composerAriaExpanded: {
+      enum: [false, true, 'true', 'false'],
+      description:
+        '`aria-expanded` passed to the composer textarea for overlays such as slash-command menus.',
+    },
+    composerAriaControls: {
+      type: 'string',
+      description:
+        '`aria-controls` passed to the composer textarea for overlays such as slash-command menus.',
+    },
+    composerAriaActiveDescendant: {
+      type: 'string',
+      description:
+        '`aria-activedescendant` passed to the composer textarea for overlays such as slash-command menus.',
+    },
+    composerAriaAutocomplete: {
+      enum: ['none', 'inline', 'list', 'both'],
+      description:
+        '`aria-autocomplete` passed to the composer textarea for overlays such as slash-command menus.',
+    },
     virtualized: {
       type: 'boolean',
       description:
@@ -191,11 +216,29 @@ const schema = {
         name: 'onattachmentremove',
         reason: 'function-or-snippet',
       },
+      {
+        name: 'oncomposerblur',
+        reason: 'function-or-snippet',
+        description:
+          'Called when focus leaves the composer textarea. Overlay primitives can use\nthis to dismiss without preventing native focus movement.',
+      },
       {
         name: 'oncomposerinput',
         reason: 'function-or-snippet',
         description:
-          "Called with the composer's current plain-text value on every composer\ninput event. Lets a consumer build slash-command, mention, or autocomplete\nUX without reaching into `.chat-input-editor` DOM directly.",
+          "Called with the composer's current plain-text value on every composer\ninput event. The optional event exposes the textarea for composer-bound\noverlays without reaching into `.chat-input-editor` DOM directly.",
+      },
+      {
+        name: 'oncomposerkeydown',
+        reason: 'function-or-snippet',
+        description:
+          "Called before Chat's internal composer key handling when a keydown\noriginates from the composer textarea. Call `event.preventDefault()` to\nlet an overlay consume Arrow keys, Enter, or Escape before Enter-to-send.\nChat does not call this hook during IME composition, so Enter can still\nconfirm the active candidate instead of sending.",
+      },
+      {
+        name: 'oncomposerselectionchange',
+        reason: 'function-or-snippet',
+        description:
+          'Called after pointer or selection activity may have moved the composer\ncaret without changing text. Overlay primitives can resync their active\ntoken from the textarea selection.',
       },
       {
         name: 'ondeny',

package/src/components/chat/chat.svelte

@@ -30,6 +30,14 @@ export function pushToken(token) {
 export function endStreaming() {
     impl?.endStreaming();
 }
+/**
+ * Announce consumer-rendered status text through Chat's existing live regions.
+ * No-op until mounted. Built-in tool-approval announcements take precedence
+ * over consumer assertive announcements to avoid duplicate urgent output.
+ */
+export function announce(message, level = 'polite') {
+    impl?.announce(message, level);
+}
 /** Scroll the message viewport to the bottom. No-op until mounted. */
 export function scrollToBottom() {
     impl?.scrollToBottom();
@@ -50,6 +58,10 @@ export function clearInput() {
 export function getComposerValue() {
     return impl?.getComposerValue() ?? '';
 }
+/** Read the composer textarea element. Returns null until mounted. */
+export function getEditorElement() {
+    return impl?.getEditorElement() ?? null;
+}
 </script>
 
 <ChatImplementation bind:this={impl} class={mergedClassName} {...rest} />

package/src/components/chat/chat.types.ts

@@ -49,6 +49,9 @@ export type ReadReceipt = {
   readBy?: string[];
 };
 
+/** Live-region channel for imperative Chat announcements. */
+export type ChatAnnounceLevel = 'polite' | 'assertive';
+
 /**
  * Full-row override snippet. Inversion of control: receives the message AND a
  * `renderDefault` snippet that renders the built-in row, so a consumer can wrap
@@ -127,6 +130,16 @@ export type ChatProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'onsubmit'>
    * rather than as five separate boolean props.
    */
   capabilities?: ChatCapabilities;
+  /** Explicit role for the composer textarea, for overlay patterns such as ARIA comboboxes. */
+  composerRole?: string | undefined;
+  /** `aria-expanded` passed to the composer textarea for overlays such as slash-command menus. */
+  composerAriaExpanded?: boolean | 'true' | 'false' | undefined;
+  /** `aria-controls` passed to the composer textarea for overlays such as slash-command menus. */
+  composerAriaControls?: string | undefined;
+  /** `aria-activedescendant` passed to the composer textarea for overlays such as slash-command menus. */
+  composerAriaActiveDescendant?: string | undefined;
+  /** `aria-autocomplete` passed to the composer textarea for overlays such as slash-command menus. */
+  composerAriaAutocomplete?: 'none' | 'inline' | 'list' | 'both' | undefined;
   /** Use the virtualized message render path for long transcripts. The complete `ConversationHistory` remains unchanged; only the DOM window is reduced. Default `false`. */
   virtualized?: boolean;
   /** Estimated row height in pixels for virtualized message rows. Default `88`. */
@@ -245,8 +258,27 @@ export type ChatProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'onsubmit'>
   onattachmentfailure?: (file: File, error: string) => void;
   /**
    * Called with the composer's current plain-text value on every composer
-   * input event. Lets a consumer build slash-command, mention, or autocomplete
-   * UX without reaching into `.chat-input-editor` DOM directly.
+   * input event. The optional event exposes the textarea for composer-bound
+   * overlays without reaching into `.chat-input-editor` DOM directly.
+   */
+  oncomposerinput?: (value: string, event?: Event) => void;
+  /**
+   * Called before Chat's internal composer key handling when a keydown
+   * originates from the composer textarea. Call `event.preventDefault()` to
+   * let an overlay consume Arrow keys, Enter, or Escape before Enter-to-send.
+   * Chat does not call this hook during IME composition, so Enter can still
+   * confirm the active candidate instead of sending.
+   */
+  oncomposerkeydown?: (event: KeyboardEvent) => void;
+  /**
+   * Called after pointer or selection activity may have moved the composer
+   * caret without changing text. Overlay primitives can resync their active
+   * token from the textarea selection.
+   */
+  oncomposerselectionchange?: (event: Event) => void;
+  /**
+   * Called when focus leaves the composer textarea. Overlay primitives can use
+   * this to dismiss without preventing native focus movement.
    */
-  oncomposerinput?: (value: string) => void;
+  oncomposerblur?: (event: FocusEvent) => void;
 };

package/src/components/chat/container/chat.svelte

@@ -26,7 +26,8 @@ import { useChatReadReceipts } from './use-chat-read-receipts.svelte.ts';
 import ChatParticipantTyping from './chat-participant-typing.svelte';
 import ChatReadReceipt from '../message/chat-read-receipt.svelte';
 const noopAttachment = () => { };
-let { id, conversation, atBottom = $bindable(true), unreadCount = $bindable(0), newMessageIndicatorVisible = $bindable(false), class: className, surfaceMode = 'default', density = 'comfortable', variant = 'bubble', bottomThreshold = DEFAULT_SCROLL_CONFIGURATION.bottomThreshold, jumpThreshold = DEFAULT_SCROLL_CONFIGURATION.jumpThreshold, streaming = false, streamingStatus, capabilities, virtualized = false, virtualizationEstimatedRowHeight = 88, virtualizationOverscan = 3, virtualizationInitialHeight = 640, moreHistoryAvailable = true, loadEarlierLabel = 'Load earlier messages', loadingEarlierLabel = 'Loading earlier messages', header, empty, emptyPrompts, messageActions, messageStatus, row, messagePart, viewportAttachment, typingParticipants, readReceipts, adapter, onadaptererror, onpushmessage, ontypingchange, onreadreceipt, onsubmit, onretry, onedit, onapprove, ondeny, messageReasoning, messageSteps, messageSuggestions, onsuggestionselect, onloadhistory, onstopgenerating, onjumptolatest, onscrollstatechange, onunreadindicatorchange, onexpandedchange, onattachmentadd, onattachmentremove, onattachmentfailure, oncomposerinput, ...rest } = $props();
+const CONSUMER_ANNOUNCEMENT_CLEAR_DELAY_MS = 1000;
+let { id, conversation, atBottom = $bindable(true), unreadCount = $bindable(0), newMessageIndicatorVisible = $bindable(false), class: className, surfaceMode = 'default', density = 'comfortable', variant = 'bubble', bottomThreshold = DEFAULT_SCROLL_CONFIGURATION.bottomThreshold, jumpThreshold = DEFAULT_SCROLL_CONFIGURATION.jumpThreshold, streaming = false, streamingStatus, capabilities, virtualized = false, virtualizationEstimatedRowHeight = 88, virtualizationOverscan = 3, virtualizationInitialHeight = 640, moreHistoryAvailable = true, loadEarlierLabel = 'Load earlier messages', loadingEarlierLabel = 'Loading earlier messages', header, empty, emptyPrompts, messageActions, messageStatus, row, messagePart, viewportAttachment, typingParticipants, readReceipts, adapter, onadaptererror, onpushmessage, ontypingchange, onreadreceipt, onsubmit, onretry, onedit, onapprove, ondeny, messageReasoning, messageSteps, messageSuggestions, onsuggestionselect, onloadhistory, onstopgenerating, onjumptolatest, onscrollstatechange, onunreadindicatorchange, onexpandedchange, onattachmentadd, onattachmentremove, onattachmentfailure, oncomposerinput, oncomposerkeydown, oncomposerselectionchange, oncomposerblur, composerRole, composerAriaExpanded, composerAriaControls, composerAriaActiveDescendant, composerAriaAutocomplete, ...rest } = $props();
 // ==========================================================================
 // Refs and Internal State
 // ==========================================================================
@@ -84,10 +85,15 @@ $effect(() => {
     toolCallState.reset();
     typingIndicatorState.reset();
     readReceiptsState.reset();
+    clearConsumerAnnouncements();
 });
 let isLoadingHistory = $state(false);
 let adapterHasMoreHistory = $state(undefined);
 let historyAnnouncement = $state('');
+let consumerPoliteAnnouncement = $state('');
+let consumerAssertiveAnnouncement = $state('');
+let consumerPoliteAnnouncementTimeout;
+let consumerAssertiveAnnouncementTimeout;
 let pendingHistoryScroll = $state(null);
 let deferredAdapterHasMoreHistory = null;
 let historyAnchorMessageId = $state(null);
@@ -325,6 +331,13 @@ const toolApprovalAssertiveMessage = $derived.by(() => {
     }
     return '';
 });
+const assertiveAnnouncement = $derived(toolApprovalAssertiveMessage || consumerAssertiveAnnouncement);
+const politeAnnouncement = $derived(consumerPoliteAnnouncement || historyAnnouncement || unreadState.announcerMessage);
+$effect(() => {
+    if (toolApprovalAssertiveMessage && consumerAssertiveAnnouncement) {
+        clearConsumerAssertiveAnnouncement();
+    }
+});
 // ==========================================================================
 // Scroll Anchoring via $effect.pre
 // ==========================================================================
@@ -516,6 +529,7 @@ $effect(() => {
             cancelAnimationFrame(streamingScrollRaf);
             streamingScrollRaf = undefined;
         }
+        clearConsumerAnnouncements();
     };
 });
 // ==========================================================================
@@ -588,6 +602,50 @@ const historyAnchorScrollAttachment = $derived(historyAnchorMessageId === null |
 // ==========================================================================
 // Actions
 // ==========================================================================
+export function announce(message, level = 'polite') {
+    const trimmedMessage = message.trim();
+    if (!trimmedMessage)
+        return;
+    if (level === 'assertive') {
+        if (toolApprovalAssertiveMessage)
+            return;
+        setConsumerAssertiveAnnouncement(trimmedMessage);
+        return;
+    }
+    setConsumerPoliteAnnouncement(trimmedMessage);
+}
+function setConsumerPoliteAnnouncement(message) {
+    clearTimeout(consumerPoliteAnnouncementTimeout);
+    consumerPoliteAnnouncement = message;
+    consumerPoliteAnnouncementTimeout = setTimeout(() => {
+        if (consumerPoliteAnnouncement === message)
+            consumerPoliteAnnouncement = '';
+        consumerPoliteAnnouncementTimeout = undefined;
+    }, CONSUMER_ANNOUNCEMENT_CLEAR_DELAY_MS);
+}
+function setConsumerAssertiveAnnouncement(message) {
+    clearTimeout(consumerAssertiveAnnouncementTimeout);
+    consumerAssertiveAnnouncement = message;
+    consumerAssertiveAnnouncementTimeout = setTimeout(() => {
+        if (consumerAssertiveAnnouncement === message)
+            consumerAssertiveAnnouncement = '';
+        consumerAssertiveAnnouncementTimeout = undefined;
+    }, CONSUMER_ANNOUNCEMENT_CLEAR_DELAY_MS);
+}
+function clearConsumerPoliteAnnouncement() {
+    clearTimeout(consumerPoliteAnnouncementTimeout);
+    consumerPoliteAnnouncementTimeout = undefined;
+    consumerPoliteAnnouncement = '';
+}
+function clearConsumerAssertiveAnnouncement() {
+    clearTimeout(consumerAssertiveAnnouncementTimeout);
+    consumerAssertiveAnnouncementTimeout = undefined;
+    consumerAssertiveAnnouncement = '';
+}
+function clearConsumerAnnouncements() {
+    clearConsumerPoliteAnnouncement();
+    clearConsumerAssertiveAnnouncement();
+}
 function handleJumpToLatest() {
     if (isVirtualized) {
         chatVirtualizer.scrollToIndex(Math.max(0, renderRows.length - 1), {
@@ -1069,6 +1127,10 @@ export function clearInput() {
 export function getComposerValue() {
     return inputRef?.getValue() ?? '';
 }
+/** Read the composer textarea element. Returns null until mounted. */
+export function getEditorElement() {
+    return inputRef?.getEditorElement() ?? null;
+}
 /**
  * Begin streaming content for a specific message.
  * The message should already exist in the conversation.
@@ -1414,6 +1476,14 @@ function virtualRowAttachment(row) {
         {allowAttachments}
         onstop={streaming ? handleStopGenerating : undefined}
         {oncomposerinput}
+        {oncomposerkeydown}
+        {oncomposerselectionchange}
+        {oncomposerblur}
+        {composerRole}
+        {composerAriaExpanded}
+        {composerAriaControls}
+        {composerAriaActiveDescendant}
+        {composerAriaAutocomplete}
         {onattachmentadd}
         {onattachmentremove}
         {onattachmentfailure}
@@ -1424,8 +1494,8 @@ function virtualRowAttachment(row) {
   <ChatStatusAnnouncer
     {statusId}
     messageCount={messages.length}
-    announcerMessage={historyAnnouncement || unreadState.announcerMessage}
-    assertiveMessage={toolApprovalAssertiveMessage}
+    announcerMessage={politeAnnouncement}
+    assertiveMessage={assertiveAnnouncement}
   />
 
   <!-- Typing-participant live region: outside role="log" to avoid double announcement.

package/src/components/chat/conversation-model.ts

@@ -13,6 +13,7 @@ import type { ToMarkdownOptions as ConversationalistToMarkdownOptions } from 'co
 export type {
   AssistantMessage,
   ContainerUploadContent,
+  ConversationEnvironment,
   ConversationHistory,
   ConversationStatus,
   ImageContent,

package/src/components/chat/index.ts

@@ -13,7 +13,13 @@ import './chat.css';
 import Chat from './chat.svelte';
 
 export default Chat;
-export type { ChatCapabilities, ChatProps, ReadReceipt, TypingParticipant } from './chat.types.ts';
+export type {
+  ChatAnnounceLevel,
+  ChatCapabilities,
+  ChatProps,
+  ReadReceipt,
+  TypingParticipant,
+} from './chat.types.ts';
 export { Chat };
 
 // Adapter seam — the optional event/transport boundary around <Chat>. Type-only.
@@ -40,6 +46,7 @@ export {
 export type {
   AssistantMessage,
   ContainerUploadContent,
+  ConversationEnvironment,
   ConversationHistory,
   ConversationStatus,
   ExportOptions,
@@ -80,8 +87,14 @@ export {
 } from './utilities';
 
 // Input
-export { ChatAttachmentPreview, ChatInput, deriveAttachmentKind } from './input';
-export type { AttachmentKind, ChatAttachment } from './input';
+export {
+  ChatAttachmentPreview,
+  ChatInput,
+  deriveAttachmentKind,
+  serializeChatAttachment,
+  serializeChatAttachments,
+} from './input';
+export type { AttachmentKind, ChatAttachment, SerializedChatAttachment } from './input';
 
 // Message
 export {

package/src/components/chat/input/chat-attachment-serialization.ts

@@ -0,0 +1,63 @@
+import type { ChatAttachment } from './chat-attachment.ts';
+
+const BASE64_CHUNK_SIZE = 0x8000;
+
+type Base64Runtime = typeof globalThis & {
+  btoa?: (data: string) => string;
+  Buffer?: {
+    from: (data: Uint8Array) => { toString: (encoding: 'base64') => string };
+  };
+};
+
+export interface SerializedChatAttachment {
+  name: string;
+  mimeType: string;
+  kind: ChatAttachment['kind'];
+  content: string;
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  const runtime = globalThis as Base64Runtime;
+
+  if (typeof runtime.btoa === 'function') {
+    let binary = '';
+
+    for (let start = 0; start < bytes.length; start += BASE64_CHUNK_SIZE) {
+      const chunk = bytes.subarray(start, start + BASE64_CHUNK_SIZE);
+      binary += String.fromCharCode(...chunk);
+    }
+
+    return runtime.btoa(binary);
+  }
+
+  if (typeof runtime.Buffer?.from === 'function') {
+    return runtime.Buffer.from(bytes).toString('base64');
+  }
+
+  throw new Error('serializeChatAttachment requires btoa or Buffer for base64 encoding.');
+}
+
+export async function serializeChatAttachment(
+  attachment: ChatAttachment,
+): Promise<SerializedChatAttachment> {
+  const bytes = new Uint8Array(await attachment.file.arrayBuffer());
+
+  return {
+    name: attachment.file.name,
+    mimeType: attachment.file.type,
+    kind: attachment.kind,
+    content: bytesToBase64(bytes),
+  };
+}
+
+export async function serializeChatAttachments(
+  attachments: readonly ChatAttachment[],
+): Promise<SerializedChatAttachment[]> {
+  const serializedAttachments: SerializedChatAttachment[] = [];
+
+  for (const attachment of attachments) {
+    serializedAttachments.push(await serializeChatAttachment(attachment));
+  }
+
+  return serializedAttachments;
+}

package/src/components/chat/input/chat-input.svelte

@@ -40,7 +40,7 @@ const attachmentIdFactory = createIdFactory('attachment');
 // Tracks hash-derived IDs used in this instance so collisions (same name/size/mtime)
 // get a unique suffix rather than a duplicate DOM ID.
 const usedAttachmentIds = new Set();
-let { id, value = $bindable(''), placeholder = 'Type a message...', composerLabel = 'Message', disabled = false, sending = false, error, class: className, action, name = 'content', clearOnSubmit = true, allowAttachments = true, maxFileSize = 10 * 1024 * 1024, // 10MB
+let { id, value = $bindable(''), placeholder = 'Type a message...', composerLabel = 'Message', composerRole, composerAriaExpanded, composerAriaControls, composerAriaActiveDescendant, composerAriaAutocomplete, disabled = false, sending = false, error, class: className, action, name = 'content', clearOnSubmit = true, allowAttachments = true, maxFileSize = 10 * 1024 * 1024, // 10MB
 acceptedTypes = [
     'image/*',
     'text/*',
@@ -55,7 +55,7 @@ acceptedTypes = [
     'application/x-sh',
     'application/sql',
     'application/toml',
-], onsubmit, onstop, oncomposerinput, onattachmentadd, onattachmentremove, onattachmentfailure, actions, ...rest } = $props();
+], onsubmit, onstop, oncomposerinput, oncomposerkeydown, oncomposerselectionchange, oncomposerblur, onattachmentadd, onattachmentremove, onattachmentfailure, actions, ...rest } = $props();
 const resolvedComposerLabel = $derived(composerLabel.trim() || 'Message');
 // Derived: show stop button when sending and onstop is provided
 const showStopButton = $derived(sending && onstop !== undefined);
@@ -266,6 +266,12 @@ function handleKeyDown(event) {
     if (event.isComposing || isComposing) {
         return;
     }
+    if (event.target === editorElement) {
+        oncomposerkeydown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+    }
     // Shift+Enter: Newline (let editor handle it)
     if (event.key === 'Enter' && event.shiftKey) {
         return;
@@ -287,8 +293,8 @@ function handleCompositionEnd() {
 // Fires after `bind:value` has already applied the textarea's new value
 // (Svelte merges the binding's own input listener with this handler on the
 // same event), so `value` here is always current — never one keystroke stale.
-function handleInput() {
-    oncomposerinput?.(value);
+function handleInput(event) {
+    oncomposerinput?.(value, event);
 }
 // =========================================================================
 // Imperative API
@@ -307,6 +313,9 @@ export function getAttachments() {
 export function getValue() {
     return value;
 }
+export function getEditorElement() {
+    return editorElement;
+}
 export function addFiles(files) {
     if (!allowAttachments)
         return;
@@ -326,7 +335,6 @@ onDestroy(() => {
   method="POST"
   {action}
   onsubmit={handleSubmit}
-  onkeydown={handleKeyDown}
   onpaste={handlePaste}
   ondrop={handleDrop}
   ondragover={handleDragOver}
@@ -367,9 +375,18 @@ onDestroy(() => {
       bind:this={editorElement}
       id={`${id}-editor`}
       bind:value
+      onkeydown={handleKeyDown}
       oninput={handleInput}
+      onpointerup={oncomposerselectionchange}
+      onselect={oncomposerselectionchange}
+      onblur={oncomposerblur}
       {placeholder}
+      role={composerRole}
       aria-label={resolvedComposerLabel}
+      aria-expanded={composerAriaExpanded}
+      aria-controls={composerAriaControls}
+      aria-activedescendant={composerAriaActiveDescendant}
+      aria-autocomplete={composerAriaAutocomplete}
       {disabled}
       readonly={sending}
       class="chat-input-editor"

package/src/components/chat/input/index.ts

@@ -1,4 +1,9 @@
 export { deriveAttachmentKind, type AttachmentKind } from './attachment-kind.js';
 export { default as ChatAttachmentPreview } from './chat-attachment-preview.svelte';
+export {
+  serializeChatAttachment,
+  serializeChatAttachments,
+  type SerializedChatAttachment,
+} from './chat-attachment-serialization.ts';
 export type { ChatAttachment } from './chat-attachment.ts';
 export { default as ChatInput } from './chat-input.svelte';

package/src/components/chat/utilities/conversation.ts

@@ -1,26 +1,44 @@
 /**
  * Conversation-reading helpers for Chat.
  *
- * These delegate to `conversationalist` so message ordering stays aligned with
- * the published conversation package. Tool pairing keeps Chat's role gate so an
- * incidental tool-shaped field on a non-tool message never renders as a pair.
+ * These helpers operate on the Conversationalist transcript shape while keeping
+ * Cinder's browser runtime free of the full conversation package.
  */
 
-import { getMessages } from 'conversationalist';
-import { pairToolCallsWithResults as pairConversationalistToolCallsWithResults } from 'conversationalist/utilities';
+import type {
+  ConversationHistory,
+  Message,
+  ToolCallPair,
+  ToolResult,
+} from '../conversation-model.ts';
 
-import type { Message, ToolCallPair } from '../conversation-model.ts';
-
-function hasPairableToolField(message: Message): boolean {
-  return (
-    (message.role === 'tool-call' && message.toolCall !== undefined) ||
-    (message.role === 'tool-result' && message.toolResult !== undefined)
-  );
+export function getMessages(
+  conversation: ConversationHistory,
+  options: { includeHidden?: boolean } = {},
+): Message[] {
+  return conversation.ids
+    .map((id) => conversation.messages[id])
+    .filter((message): message is Message => message !== undefined)
+    .filter((message) => options.includeHidden === true || !message.hidden);
 }
 
 /** Pairs tool calls with role-valid tool results from an already-ordered message array. */
 export function pairToolCallsWithResults(messages: ReadonlyArray<Message>): ToolCallPair[] {
-  return pairConversationalistToolCallsWithResults(messages.filter(hasPairableToolField));
-}
+  const resultsByCallId = new Map<string, ToolResult>();
+  for (const message of messages) {
+    if (message.role === 'tool-result' && message.toolResult !== undefined) {
+      resultsByCallId.set(message.toolResult.callId, message.toolResult);
+    }
+  }
 
-export { getMessages };
+  const pairs: ToolCallPair[] = [];
+  for (const message of messages) {
+    if (message.role === 'tool-call' && message.toolCall !== undefined) {
+      pairs.push({
+        call: message.toolCall,
+        result: resultsByCallId.get(message.toolCall.id),
+      });
+    }
+  }
+  return pairs;
+}

package/src/components/chat-composer-popover/chat-composer-popover-filter.ts

@@ -0,0 +1,68 @@
+export type FuzzyFilterItem = {
+  value: string;
+  label: string;
+  keywords?: readonly string[] | undefined;
+};
+
+export type FuzzyFilterResult<TItem extends FuzzyFilterItem> = {
+  item: TItem;
+  score: number;
+};
+
+function normalize(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+export function fuzzySubsequenceScore(candidate: string, query: string): number | null {
+  const normalizedCandidate = normalize(candidate);
+  const normalizedQuery = normalize(query);
+
+  if (normalizedQuery.length === 0) return 0;
+  if (normalizedCandidate.length === 0) return null;
+
+  let score = 0;
+  let searchIndex = 0;
+  let previousMatchIndex = -1;
+
+  for (const character of normalizedQuery) {
+    const matchIndex = normalizedCandidate.indexOf(character, searchIndex);
+    if (matchIndex === -1) return null;
+
+    score += matchIndex === previousMatchIndex + 1 ? 4 : 1;
+    if (matchIndex === 0) score += 2;
+    if (/[\s/_-]/u.test(normalizedCandidate[matchIndex - 1] ?? '')) score += 2;
+
+    previousMatchIndex = matchIndex;
+    searchIndex = matchIndex + 1;
+  }
+
+  return score - normalizedCandidate.length * 0.01;
+}
+
+export function filterFuzzySubsequence<TItem extends FuzzyFilterItem>(
+  items: readonly TItem[],
+  query: string,
+): TItem[] {
+  const normalizedQuery = normalize(query);
+  if (normalizedQuery.length === 0) return [...items];
+
+  const matchedItems = items
+    .map((item, index) => {
+      const candidates = [item.label, item.value, ...(item.keywords ?? [])];
+      let bestScore: number | null = null;
+
+      for (const candidate of candidates) {
+        const score = fuzzySubsequenceScore(candidate, normalizedQuery);
+        if (score !== null && (bestScore === null || score > bestScore)) {
+          bestScore = score;
+        }
+      }
+
+      return bestScore === null ? null : { item, index, score: bestScore };
+    })
+    .filter((result) => result !== null);
+
+  matchedItems.sort((a, b) => b.score - a.score || a.index - b.index);
+
+  return matchedItems.map((result) => result.item);
+}