@lostgradient/cinder 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lostgradient/cinder
 
+## 0.8.0
+
+### Minor Changes
+
+- [`9686390`](https://github.com/stevekinney/cinder/commit/9686390483ce91eebe82f2f28852e436c1f2724a) Thanks [@stevekinney](https://github.com/stevekinney)! - `Chat` composer public API: added `clearInput()`, `getComposerValue()`, and an `oncomposerinput` callback prop so consumers can read, clear, and observe the composer's plain-text value without reaching into `.chat-input-editor` DOM directly (useful for building slash-command, mention, or autocomplete UX layered on top of the composer).
+
+  Also re-exported the `ChatAttachment` type from the public `@lostgradient/cinder/chat` entry — previously consumers had to derive it from `ChatSubmitEvent['attachments'][number]`.
+
+### Patch Changes
+
+- [#675](https://github.com/stevekinney/cinder/pull/675) [`e55561d`](https://github.com/stevekinney/cinder/commit/e55561db6d348573e29df711c095b2ec18e197ef) Thanks [@stevekinney](https://github.com/stevekinney)! - Close a collapsed top NavigationBar mobile menu after enabled item activation.
+
+- [#667](https://github.com/stevekinney/cinder/pull/667) [`d9ce2c3`](https://github.com/stevekinney/cinder/commit/d9ce2c3660805d8b6a7e964f3f671174c61ca819) Thanks [@stevekinney](https://github.com/stevekinney)! - Internal build and validation overhaul: content-hash build caching (with the cache marker excluded from the published tarball), global test cleanup registration, and a lint script split into `lint` and `lint:invariants`.
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -18,6 +18,11 @@ Rich editor, markdown rendering, editor/commentary re-exports, and syntax-highli
 bun add @milkdown/ctx @milkdown/kit @milkdown/prose @shikijs/engine-oniguruma @shikijs/langs @shikijs/rehype @shikijs/types @types/hast @types/mdast @types/unist comlink hast-util-sanitize js-yaml prosemirror-inputrules prosemirror-model prosemirror-state prosemirror-view rehype-katex rehype-sanitize rehype-stringify remark-gfm remark-html remark-math remark-parse remark-rehype remark-stringify shiki unified unist-util-remove unist-util-visit
 ```
 
+`@lostgradient/cinder/markdown-editor` needs the editor and Markdown pipeline subset from that
+list at build time. If `prosemirror-state`, `prosemirror-view`, `@milkdown/kit`, or another editor
+peer is missing, Vite may report the failure through its optional-peer placeholder module instead
+of naming this install step.
+
 ## Quickstart
 
 Load the base stylesheet once at your app entry:

package/components.json

@@ -3,7 +3,7 @@
   "manifestVersion": 1,
   "package": {
     "name": "@lostgradient/cinder",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",

package/dist/components/chat/chat.schema.js

@@ -225,6 +225,11 @@ generation. When an adapter is also wired, Chat calls
         name: "onattachmentremove",
         reason: "function-or-snippet"
       },
+      {
+        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."
+      },
       {
         name: "ondeny",
         reason: "function-or-snippet",
@@ -316,4 +321,4 @@ export {
   chat_schema_default as default
 };
 
-//# debugId=FF251C2AABC0897B64756E2164756E21
+//# debugId=9906999F3FA9B93664756E2164756E21

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

@@ -21,6 +21,8 @@ declare const Chat: import("svelte").Component<ChatProps, {
     scrollToBottom: () => void;
     scrollToTop: () => void;
     focusInput: () => void;
+    clearInput: () => void;
+    getComposerValue: () => string;
 }, "">;
 type Chat = ReturnType<typeof Chat>;
 export default Chat;

package/dist/components/chat/chat.types.d.ts

@@ -228,4 +228,10 @@ export type ChatProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'onsubmit'>
     onattachmentadd?: (attachment: ChatAttachment) => void;
     onattachmentremove?: (attachment: ChatAttachment) => void;
     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.
+     */
+    oncomposerinput?: (value: string) => void;
 };

package/dist/components/chat/container/chat.svelte.d.ts

@@ -5,6 +5,8 @@ declare const Chat: import("svelte").Component<ChatProps, {
     scrollToBottom: () => void;
     scrollToTop: () => void;
     focusInput: () => void;
+    clearInput: () => void;
+    getComposerValue: () => string;
     beginStreaming: (messageId: string) => void;
     pushToken: (token: string) => void;
     endStreaming: () => void;

package/dist/components/chat/index.d.ts

@@ -15,7 +15,7 @@ export { appendAssistantMessage, appendMessages, appendUserMessage, createConver
 export type { AssistantMessage, ContainerUploadContent, ConversationHistory, ConversationStatus, ExportOptions, ImageContent, JSONValue, Message, MessageInput, MessageRole, MultiModalContent, RedactedThinkingContent, ServerToolResultContent, ServerToolResultType, ServerToolUseContent, TextContent, ThinkingContent, ToMarkdownOptions, TokenUsage, ToolAction, ToolCall, ToolCallPair, ToolError, ToolErrorCategory, ToolResult, WebSearchToolResultContent, } from './conversation-model.ts';
 export { formatMessageAsMarkdown, getMessageRoleLabel, getMessageText, messagesToMarkdown, type ChatExportOptions, type DeliveryStatus, } from './utilities';
 export { ChatAttachmentPreview, ChatInput, deriveAttachmentKind } from './input';
-export type { AttachmentKind } from './input';
+export type { AttachmentKind, ChatAttachment } from './input';
 export { ChatDateSeparator, ChatMessage, MessageAttachments, MessageContent, ToolCallGroup, } from './message';
 export { DEFAULT_SCROLL_CONFIGURATION, calculateScrollToBottom, calculateUnreadCount, extractTimestamp, findUnreadBoundaryIndex, isAtBottom, shouldShowJumpToLatest, } from './container';
 export type { ChatScrollStateChangeEvent, ChatStopGeneratingEvent, ChatSubmitEvent, ChatUnreadIndicatorChangeEvent, ScrollConfiguration, ScrollState, } from './container';

package/dist/components/chat/index.js

@@ -10003,6 +10003,7 @@ var rest_excludes11 = new Set([
   "acceptedTypes",
   "onsubmit",
   "onstop",
+  "oncomposerinput",
   "onattachmentadd",
   "onattachmentremove",
   "onattachmentfailure",
@@ -10202,6 +10203,9 @@ function Chat_input($$anchor, $$props) {
   function handleCompositionEnd() {
     $45.set(isComposing, false);
   }
+  function handleInput() {
+    $$props.oncomposerinput?.(value());
+  }
   function focus() {
     $45.get(editorElement)?.focus();
   }
@@ -10213,6 +10217,9 @@ function Chat_input($$anchor, $$props) {
   function getAttachments() {
     return [...$45.get(attachments)];
   }
+  function getValue() {
+    return value();
+  }
   function addFiles(files) {
     if (!allowAttachments())
       return;
@@ -10221,7 +10228,7 @@ function Chat_input($$anchor, $$props) {
   onDestroy(() => {
     $45.get(attachments).forEach((a) => URL.revokeObjectURL(a.previewUrl));
   });
-  var $$exports = { focus, clear, getAttachments, addFiles };
+  var $$exports = { focus, clear, getAttachments, getValue, addFiles };
   var form = root_9();
   $45.attribute_effect(form, ($0) => ({
     class: $0,
@@ -10456,11 +10463,12 @@ function Chat_input($$anchor, $$props) {
     $45.set_attribute(span, "id", $45.get(shortcutDescriptionId));
     $45.set_text(text_4, announcer.message);
   });
+  $45.delegated("input", textarea, handleInput);
   $45.bind_value(textarea, value);
   $45.append($$anchor, form);
   return $45.pop($$exports);
 }
-$45.delegate(["click", "change"]);
+$45.delegate(["click", "input", "change"]);
 // src/components/chat/container/scroll-utilities.ts
 var DEFAULT_SCROLL_CONFIGURATION = {
   bottomThreshold: 150,
@@ -11898,7 +11906,8 @@ var rest_excludes12 = new Set([
   "onexpandedchange",
   "onattachmentadd",
   "onattachmentremove",
-  "onattachmentfailure"
+  "onattachmentfailure",
+  "oncomposerinput"
 ]);
 var root30 = $65.from_html(`<span class="chat-typing-status svelte-932akd"> </span>`);
 var root_121 = $65.from_html(`<span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span>`, 1);
@@ -12674,6 +12683,12 @@ function Chat($$anchor, $$props) {
   function focusInput() {
     inputRef?.focus();
   }
+  function clearInput() {
+    inputRef?.clear();
+  }
+  function getComposerValue() {
+    return inputRef?.getValue() ?? "";
+  }
   function beginStreaming(messageId) {
     if (streamingScrollRaf !== undefined) {
       cancelAnimationFrame(streamingScrollRaf);
@@ -12739,6 +12754,8 @@ function Chat($$anchor, $$props) {
     scrollToBottom,
     scrollToTop,
     focusInput,
+    clearInput,
+    getComposerValue,
     beginStreaming,
     pushToken,
     endStreaming
@@ -13210,6 +13227,9 @@ function Chat($$anchor, $$props) {
         get onstop() {
           return $65.get($0);
         },
+        get oncomposerinput() {
+          return $$props.oncomposerinput;
+        },
         get onattachmentadd() {
           return $$props.onattachmentadd;
         },
@@ -13278,13 +13298,21 @@ function Chat2($$anchor, $$props) {
   function focusInput() {
     impl?.focusInput();
   }
+  function clearInput() {
+    impl?.clearInput();
+  }
+  function getComposerValue() {
+    return impl?.getComposerValue() ?? "";
+  }
   var $$exports = {
     beginStreaming,
     pushToken,
     endStreaming,
     scrollToBottom,
     scrollToTop,
-    focusInput
+    focusInput,
+    clearInput,
+    getComposerValue
   };
   $66.bind_this(Chat($$anchor, $66.spread_props({
     get class() {
@@ -14785,4 +14813,4 @@ export {
   Artifact_panel as ArtifactPanel
 };
 
-//# debugId=2B5157A7C75D81C564756E2164756E21
+//# debugId=A92B5858E013516164756E2164756E21

package/dist/components/chat/input/chat-input.svelte.d.ts

@@ -36,6 +36,8 @@ export type ChatInputProps = Omit<HTMLFormAttributes, 'onsubmit' | 'class'> & {
     onsubmit?: (message: MessageInput, attachments: ChatAttachment[]) => void;
     /** Called when stop is requested (transforms send button into stop button when sending=true) */
     onstop?: (() => void) | undefined;
+    /** Called with the composer's current plain-text value on every input event. */
+    oncomposerinput?: ((value: string) => void) | undefined;
     /** Called when an attachment is added */
     onattachmentadd?: ((attachment: ChatAttachment) => void) | undefined;
     /** Called when an attachment is removed */
@@ -49,6 +51,7 @@ declare const ChatInput: import("svelte").Component<ChatInputProps, {
     focus: () => void;
     clear: () => void;
     getAttachments: () => ChatAttachment[];
+    getValue: () => string;
     addFiles: (files: File[]) => void;
 }, "value">;
 type ChatInput = ReturnType<typeof ChatInput>;

package/dist/components/navigation-bar/index.js

@@ -85,6 +85,7 @@ var rest_excludes = new Set([
   "data-cinder-placement",
   "data-cinder-label-visibility",
   "data-cinder-menu-toggle-placement",
+  "onclick",
   "onkeydown"
 ]);
 var root = $.from_html(`<div class="cinder-navigation-bar__menu-toggle"><!></div>`);
@@ -98,6 +99,7 @@ function Navigation_bar($$anchor, $$props) {
   const FALLBACK_ROOT_FONT_SIZE_PX = 16;
   let placement = $.prop($$props, "placement", 3, "top"), showLabels = $.prop($$props, "showLabels", 3, "always"), menuTogglePlacement = $.prop($$props, "menuTogglePlacement", 3, "after-brand"), mobileMenuOpen = $.prop($$props, "mobileMenuOpen", 15, false), label = $.prop($$props, "label", 3, "Main navigation"), rest = $.rest_props($$props, rest_excludes);
   const navigationItemSelector = "[data-cinder-navigation-item]";
+  const toggleFocusSelector = '.cinder-navigation-bar__menu-toggle button, .cinder-navigation-bar__menu-toggle [href], .cinder-navigation-bar__menu-toggle input, .cinder-navigation-bar__menu-toggle select, .cinder-navigation-bar__menu-toggle textarea, .cinder-navigation-bar__menu-toggle [tabindex]:not([tabindex="-1"])';
   const isCollapsible = $.derived(() => placement() === "top" && $$props.menuToggle !== undefined);
   let isMobileLayout = $.state(false);
   const variant = $.derived(() => placement() === "bottom" ? "mobile" : $.get(isCollapsible) && $.get(isMobileLayout) && mobileMenuOpen() ? "mobile" : "horizontal");
@@ -170,15 +172,50 @@ function Navigation_bar($$anchor, $$props) {
     return item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled");
   }
   function getEventNavigationItem(event) {
-    if (!(event.target instanceof HTMLElement) || !itemsRegionElement)
+    if (!(event.target instanceof Element) || !itemsRegionElement)
       return null;
     const navigationItem = event.target.closest(navigationItemSelector);
     if (!navigationItem || !itemsRegionElement.contains(navigationItem))
       return null;
-    if (navigationItem !== event.target)
-      return null;
     return navigationItem;
   }
+  function isModifiedClick(event) {
+    return event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+  }
+  function opensOutsideCurrentPage(item) {
+    if (!(item instanceof HTMLAnchorElement))
+      return false;
+    const target = item.getAttribute("target");
+    return item.hasAttribute("download") || target !== null && target.trim() !== "" && target.trim().toLowerCase() !== "_self";
+  }
+  function canCloseAfterItemActivation(item, event) {
+    return $.get(isCollapsible) && $.get(isMobileLayout) && mobileMenuOpen() && isEnabledNavigationItem(item) && !isModifiedClick(event) && !opensOutsideCurrentPage(item);
+  }
+  function moveFocusBeforeClosingItemsRegion() {
+    if (!true_default || !itemsRegionElement)
+      return;
+    const activeElement = document.activeElement;
+    if (activeElement instanceof Element && itemsRegionElement.contains(activeElement)) {
+      focusMenuToggle();
+    }
+  }
+  function focusMenuToggle() {
+    const focusTarget = toggleElement ?? navigationBarElement?.querySelector(toggleFocusSelector);
+    focusTarget?.focus();
+  }
+  function handleClick(event) {
+    if ($$props.onclick) {
+      const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : navigationBarElement;
+      $$props.onclick.call(currentTarget, event);
+    }
+    if (event.defaultPrevented)
+      return;
+    const navigationItem = getEventNavigationItem(event);
+    if (!navigationItem || !canCloseAfterItemActivation(navigationItem, event))
+      return;
+    moveFocusBeforeClosingItemsRegion();
+    mobileMenuOpen(false);
+  }
   function focusAdjacentNavigationItem(currentItem, direction) {
     const items = getNavigationItems();
     if (items.length === 0)
@@ -203,11 +240,11 @@ function Navigation_bar($$anchor, $$props) {
       return;
     if (event.key === "Escape" && $.get(isCollapsible) && $.get(isMobileLayout) && mobileMenuOpen()) {
       mobileMenuOpen(false);
-      toggleElement?.focus();
+      focusMenuToggle();
       return;
     }
     const navigationItem = getEventNavigationItem(event);
-    if (!navigationItem)
+    if (!navigationItem || navigationItem !== event.target)
       return;
     if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       event.preventDefault();
@@ -230,6 +267,7 @@ function Navigation_bar($$anchor, $$props) {
     "data-cinder-placement": placement(),
     "data-cinder-label-visibility": showLabels(),
     "data-cinder-menu-toggle-placement": menuTogglePlacement(),
+    onclick: handleClick,
     onkeydown: handleKeyDown
   }), [() => classNames("cinder-navigation-bar", $$props.class)]);
   var node = $.child(nav);
@@ -329,4 +367,4 @@ export {
   Navigation_bar as NavigationBar
 };
 
-//# debugId=C52BF290DA6C7F6A64756E2164756E21
+//# debugId=D071FB931C6D395164756E2164756E21

package/dist/components/sidebar/index.js

@@ -1053,7 +1053,9 @@ function Sidebar($$anchor, $$props) {
     return label();
   });
   const navigationLabel = $6.derived(() => `${$6.get(validatedLabel)} navigation`);
-  const mobile = typeof window === "undefined" || typeof window.matchMedia !== "function" ? { current: false } : new MediaQuery2("(max-width: 47.99rem)", false);
+  const hasMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+  const usesSsrResponsiveFallback = !hasMatchMedia;
+  const mobile = hasMatchMedia ? new MediaQuery2("(max-width: 47.99rem)", false) : { current: false };
   const context = {
     get collapsed() {
       return collapsed();
@@ -1103,7 +1105,8 @@ function Sidebar($$anchor, $$props) {
         ...rest,
         class: $0,
         "aria-label": $6.get(validatedLabel),
-        "data-cinder-collapsed": collapsed() ? "" : undefined
+        "data-cinder-collapsed": collapsed() ? "" : undefined,
+        "data-cinder-ssr-mobile-fallback": usesSsrResponsiveFallback ? "" : undefined
       }), [
         () => classNames("cinder-sidebar", "cinder-sidebar--desktop", $$props.class)
       ]);
@@ -1130,4 +1133,4 @@ export {
   Sidebar
 };
 
-//# debugId=3DBAC8BB0279502164756E2164756E21
+//# debugId=13D61E15EB9EC3BE64756E2164756E21

package/dist/components/sidebar/sidebar.css

@@ -40,6 +40,10 @@
       border-inline-end: none;
     }
 
+    .cinder-sidebar--desktop[data-cinder-ssr-mobile-fallback] {
+      display: none;
+    }
+
     .cinder-sidebar--desktop[data-cinder-collapsed] {
       display: none;
     }

package/dist/index.js

@@ -22182,6 +22182,7 @@ var rest_excludes39 = new Set([
   "acceptedTypes",
   "onsubmit",
   "onstop",
+  "oncomposerinput",
   "onattachmentadd",
   "onattachmentremove",
   "onattachmentfailure",
@@ -22381,6 +22382,9 @@ function Chat_input($$anchor, $$props) {
   function handleCompositionEnd() {
     $116.set(isComposing, false);
   }
+  function handleInput() {
+    $$props.oncomposerinput?.(value());
+  }
   function focus() {
     $116.get(editorElement)?.focus();
   }
@@ -22392,6 +22396,9 @@ function Chat_input($$anchor, $$props) {
   function getAttachments() {
     return [...$116.get(attachments)];
   }
+  function getValue() {
+    return value();
+  }
   function addFiles(files) {
     if (!allowAttachments())
       return;
@@ -22400,7 +22407,7 @@ function Chat_input($$anchor, $$props) {
   onDestroy5(() => {
     $116.get(attachments).forEach((a) => URL.revokeObjectURL(a.previewUrl));
   });
-  var $$exports = { focus, clear, getAttachments, addFiles };
+  var $$exports = { focus, clear, getAttachments, getValue, addFiles };
   var form = root_96();
   $116.attribute_effect(form, ($0) => ({
     class: $0,
@@ -22635,11 +22642,12 @@ function Chat_input($$anchor, $$props) {
     $116.set_attribute(span, "id", $116.get(shortcutDescriptionId));
     $116.set_text(text_4, announcer.message);
   });
+  $116.delegated("input", textarea, handleInput);
   $116.bind_value(textarea, value);
   $116.append($$anchor, form);
   return $116.pop($$exports);
 }
-$116.delegate(["click", "change"]);
+$116.delegate(["click", "input", "change"]);
 // src/components/chat/container/scroll-utilities.ts
 var DEFAULT_SCROLL_CONFIGURATION = {
   bottomThreshold: 150,
@@ -24007,7 +24015,8 @@ var rest_excludes40 = new Set([
   "onexpandedchange",
   "onattachmentadd",
   "onattachmentremove",
-  "onattachmentfailure"
+  "onattachmentfailure",
+  "oncomposerinput"
 ]);
 var root65 = $133.from_html(`<span class="chat-typing-status svelte-932akd"> </span>`);
 var root_171 = $133.from_html(`<span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span> <span class="chat-typing-dot svelte-932akd" aria-hidden="true"></span>`, 1);
@@ -24783,6 +24792,12 @@ function Chat($$anchor, $$props) {
   function focusInput() {
     inputRef?.focus();
   }
+  function clearInput() {
+    inputRef?.clear();
+  }
+  function getComposerValue() {
+    return inputRef?.getValue() ?? "";
+  }
   function beginStreaming(messageId) {
     if (streamingScrollRaf !== undefined) {
       cancelAnimationFrame(streamingScrollRaf);
@@ -24848,6 +24863,8 @@ function Chat($$anchor, $$props) {
     scrollToBottom,
     scrollToTop,
     focusInput,
+    clearInput,
+    getComposerValue,
     beginStreaming,
     pushToken,
     endStreaming
@@ -25319,6 +25336,9 @@ function Chat($$anchor, $$props) {
         get onstop() {
           return $133.get($0);
         },
+        get oncomposerinput() {
+          return $$props.oncomposerinput;
+        },
         get onattachmentadd() {
           return $$props.onattachmentadd;
         },
@@ -25387,13 +25407,21 @@ function Chat2($$anchor, $$props) {
   function focusInput() {
     impl?.focusInput();
   }
+  function clearInput() {
+    impl?.clearInput();
+  }
+  function getComposerValue() {
+    return impl?.getComposerValue() ?? "";
+  }
   var $$exports = {
     beginStreaming,
     pushToken,
     endStreaming,
     scrollToBottom,
     scrollToTop,
-    focusInput
+    focusInput,
+    clearInput,
+    getComposerValue
   };
   $134.bind_this(Chat($$anchor, $134.spread_props({
     get class() {
@@ -52075,6 +52103,7 @@ var rest_excludes113 = new Set([
   "data-cinder-placement",
   "data-cinder-label-visibility",
   "data-cinder-menu-toggle-placement",
+  "onclick",
   "onkeydown"
 ]);
 var root164 = $254.from_html(`<div class="cinder-navigation-bar__menu-toggle"><!></div>`);
@@ -52088,6 +52117,7 @@ function Navigation_bar($$anchor, $$props) {
   const FALLBACK_ROOT_FONT_SIZE_PX = 16;
   let placement = $254.prop($$props, "placement", 3, "top"), showLabels = $254.prop($$props, "showLabels", 3, "always"), menuTogglePlacement = $254.prop($$props, "menuTogglePlacement", 3, "after-brand"), mobileMenuOpen = $254.prop($$props, "mobileMenuOpen", 15, false), label = $254.prop($$props, "label", 3, "Main navigation"), rest = $254.rest_props($$props, rest_excludes113);
   const navigationItemSelector = "[data-cinder-navigation-item]";
+  const toggleFocusSelector = '.cinder-navigation-bar__menu-toggle button, .cinder-navigation-bar__menu-toggle [href], .cinder-navigation-bar__menu-toggle input, .cinder-navigation-bar__menu-toggle select, .cinder-navigation-bar__menu-toggle textarea, .cinder-navigation-bar__menu-toggle [tabindex]:not([tabindex="-1"])';
   const isCollapsible = $254.derived(() => placement() === "top" && $$props.menuToggle !== undefined);
   let isMobileLayout = $254.state(false);
   const variant = $254.derived(() => placement() === "bottom" ? "mobile" : $254.get(isCollapsible) && $254.get(isMobileLayout) && mobileMenuOpen() ? "mobile" : "horizontal");
@@ -52160,15 +52190,50 @@ function Navigation_bar($$anchor, $$props) {
     return item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled");
   }
   function getEventNavigationItem(event24) {
-    if (!(event24.target instanceof HTMLElement) || !itemsRegionElement)
+    if (!(event24.target instanceof Element) || !itemsRegionElement)
       return null;
     const navigationItem = event24.target.closest(navigationItemSelector);
     if (!navigationItem || !itemsRegionElement.contains(navigationItem))
       return null;
-    if (navigationItem !== event24.target)
-      return null;
     return navigationItem;
   }
+  function isModifiedClick(event24) {
+    return event24.button !== 0 || event24.altKey || event24.ctrlKey || event24.metaKey || event24.shiftKey;
+  }
+  function opensOutsideCurrentPage(item) {
+    if (!(item instanceof HTMLAnchorElement))
+      return false;
+    const target = item.getAttribute("target");
+    return item.hasAttribute("download") || target !== null && target.trim() !== "" && target.trim().toLowerCase() !== "_self";
+  }
+  function canCloseAfterItemActivation(item, event24) {
+    return $254.get(isCollapsible) && $254.get(isMobileLayout) && mobileMenuOpen() && isEnabledNavigationItem(item) && !isModifiedClick(event24) && !opensOutsideCurrentPage(item);
+  }
+  function moveFocusBeforeClosingItemsRegion() {
+    if (!true_default || !itemsRegionElement)
+      return;
+    const activeElement = document.activeElement;
+    if (activeElement instanceof Element && itemsRegionElement.contains(activeElement)) {
+      focusMenuToggle();
+    }
+  }
+  function focusMenuToggle() {
+    const focusTarget = toggleElement ?? navigationBarElement?.querySelector(toggleFocusSelector);
+    focusTarget?.focus();
+  }
+  function handleClick(event24) {
+    if ($$props.onclick) {
+      const currentTarget = event24.currentTarget instanceof HTMLElement ? event24.currentTarget : navigationBarElement;
+      $$props.onclick.call(currentTarget, event24);
+    }
+    if (event24.defaultPrevented)
+      return;
+    const navigationItem = getEventNavigationItem(event24);
+    if (!navigationItem || !canCloseAfterItemActivation(navigationItem, event24))
+      return;
+    moveFocusBeforeClosingItemsRegion();
+    mobileMenuOpen(false);
+  }
   function focusAdjacentNavigationItem(currentItem, direction) {
     const items = getNavigationItems();
     if (items.length === 0)
@@ -52193,11 +52258,11 @@ function Navigation_bar($$anchor, $$props) {
       return;
     if (event24.key === "Escape" && $254.get(isCollapsible) && $254.get(isMobileLayout) && mobileMenuOpen()) {
       mobileMenuOpen(false);
-      toggleElement?.focus();
+      focusMenuToggle();
       return;
     }
     const navigationItem = getEventNavigationItem(event24);
-    if (!navigationItem)
+    if (!navigationItem || navigationItem !== event24.target)
       return;
     if (event24.key === "ArrowLeft" || event24.key === "ArrowRight") {
       event24.preventDefault();
@@ -52220,6 +52285,7 @@ function Navigation_bar($$anchor, $$props) {
     "data-cinder-placement": placement(),
     "data-cinder-label-visibility": showLabels(),
     "data-cinder-menu-toggle-placement": menuTogglePlacement(),
+    onclick: handleClick,
     onkeydown: handleKeyDown
   }), [() => classNames("cinder-navigation-bar", $$props.class)]);
   var node = $254.child(nav);
@@ -63660,7 +63726,9 @@ function Sidebar($$anchor, $$props) {
     return label();
   });
   const navigationLabel = $284.derived(() => `${$284.get(validatedLabel)} navigation`);
-  const mobile = typeof window === "undefined" || typeof window.matchMedia !== "function" ? { current: false } : new MediaQuery2("(max-width: 47.99rem)", false);
+  const hasMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+  const usesSsrResponsiveFallback = !hasMatchMedia;
+  const mobile = hasMatchMedia ? new MediaQuery2("(max-width: 47.99rem)", false) : { current: false };
   const context = {
     get collapsed() {
       return collapsed();
@@ -63710,7 +63778,8 @@ function Sidebar($$anchor, $$props) {
         ...rest,
         class: $0,
         "aria-label": $284.get(validatedLabel),
-        "data-cinder-collapsed": collapsed() ? "" : undefined
+        "data-cinder-collapsed": collapsed() ? "" : undefined,
+        "data-cinder-ssr-mobile-fallback": usesSsrResponsiveFallback ? "" : undefined
       }), [
         () => classNames("cinder-sidebar", "cinder-sidebar--desktop", $$props.class)
       ]);
@@ -74446,4 +74515,4 @@ export {
   AccessGateExport as AccessGate
 };
 
-//# debugId=601DF5555E6E0A1764756E2164756E21
+//# debugId=D4AB81D9615DF39E64756E2164756E21

package/dist/server/components/chat/index.js

@@ -23,7 +23,7 @@ import {
   findUnreadBoundaryIndex,
   isAtBottom,
   shouldShowJumpToLatest
-} from "../../index.server-bvmwnjx6.js";
+} from "../../index.server-v4zabrsx.js";
 import"../../index.server-qkfd0qa7.js";
 import"../../index.server-kb6w1a7c.js";
 import"../../index.server-317enkqq.js";

package/dist/server/components/navigation-bar/index.js

@@ -1,7 +1,7 @@
 import {
   Navigation_bar,
   navigation_bar_default
-} from "../../index.server-zeqv7nrz.js";
+} from "../../index.server-5tf22d6e.js";
 import"../../index.server-ge07r1p8.js";
 import"../../index.server-z7nvkz8v.js";
 import"../../index.server-0v6na3yp.js";

package/dist/server/components/sidebar/index.js

@@ -1,7 +1,7 @@
 import {
   Sidebar,
   sidebar_default
-} from "../../index.server-qwknp759.js";
+} from "../../index.server-69epaape.js";
 import"../../index.server-9jete4xx.js";
 import"../../index.server-6zgzghtm.js";
 import"../../index.server-78d33trm.js";

package/dist/server/index.js

@@ -164,7 +164,7 @@ import"./index.server-d6j2jmqg.js";
 import"./index.server-amfq2v2p.js";
 import {
   sidebar_default
-} from "./index.server-qwknp759.js";
+} from "./index.server-69epaape.js";
 import {
   skeleton_default
 } from "./index.server-5fypkt27.js";
@@ -247,7 +247,7 @@ import {
 } from "./index.server-dj47xy3x.js";
 import {
   navigation_bar_default
-} from "./index.server-zeqv7nrz.js";
+} from "./index.server-5tf22d6e.js";
 import {
   navigation_item_default
 } from "./index.server-ncdt0xb7.js";
@@ -566,7 +566,7 @@ import {
 } from "./index.server-tbyd4re7.js";
 import {
   chat_default
-} from "./index.server-bvmwnjx6.js";
+} from "./index.server-v4zabrsx.js";
 import"./index.server-qkfd0qa7.js";
 import {
   useIntersection

package/dist/server/{index.server-zeqv7nrz.js → index.server-5tf22d6e.js}

@@ -28,12 +28,14 @@ function Navigation_bar($$renderer, $$props) {
       "data-cinder-placement": _dataCinderPlacement,
       "data-cinder-label-visibility": _dataCinderLabelVisibility,
       "data-cinder-menu-toggle-placement": _dataCinderMenuTogglePlacement,
+      onclick: consumerOnClick,
       onkeydown: consumerOnKeyDown,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const navigationItemSelector = "[data-cinder-navigation-item]";
+    const toggleFocusSelector = '.cinder-navigation-bar__menu-toggle button, .cinder-navigation-bar__menu-toggle [href], .cinder-navigation-bar__menu-toggle input, .cinder-navigation-bar__menu-toggle select, .cinder-navigation-bar__menu-toggle textarea, .cinder-navigation-bar__menu-toggle [tabindex]:not([tabindex="-1"])';
     const isCollapsible = $.derived(() => placement === "top" && menuToggle !== undefined);
     let isMobileLayout = false;
     const variant = $.derived(() => placement === "bottom" ? "mobile" : isCollapsible() && isMobileLayout && mobileMenuOpen ? "mobile" : "horizontal");
@@ -67,15 +69,50 @@ function Navigation_bar($$renderer, $$props) {
       return item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled");
     }
     function getEventNavigationItem(event) {
-      if (!(event.target instanceof HTMLElement) || !itemsRegionElement)
+      if (!(event.target instanceof Element) || !itemsRegionElement)
         return null;
       const navigationItem = event.target.closest(navigationItemSelector);
       if (!navigationItem || !itemsRegionElement.contains(navigationItem))
         return null;
-      if (navigationItem !== event.target)
-        return null;
       return navigationItem;
     }
+    function isModifiedClick(event) {
+      return event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+    }
+    function opensOutsideCurrentPage(item) {
+      if (!(item instanceof HTMLAnchorElement))
+        return false;
+      const target = item.getAttribute("target");
+      return item.hasAttribute("download") || target !== null && target.trim() !== "" && target.trim().toLowerCase() !== "_self";
+    }
+    function canCloseAfterItemActivation(item, event) {
+      return isCollapsible() && isMobileLayout && mobileMenuOpen && isEnabledNavigationItem(item) && !isModifiedClick(event) && !opensOutsideCurrentPage(item);
+    }
+    function moveFocusBeforeClosingItemsRegion() {
+      if (!false_default || !itemsRegionElement)
+        return;
+      const activeElement = document.activeElement;
+      if (activeElement instanceof Element && itemsRegionElement.contains(activeElement)) {
+        focusMenuToggle();
+      }
+    }
+    function focusMenuToggle() {
+      const focusTarget = toggleElement ?? navigationBarElement?.querySelector(toggleFocusSelector);
+      focusTarget?.focus();
+    }
+    function handleClick(event) {
+      if (consumerOnClick) {
+        const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : navigationBarElement;
+        consumerOnClick.call(currentTarget, event);
+      }
+      if (event.defaultPrevented)
+        return;
+      const navigationItem = getEventNavigationItem(event);
+      if (!navigationItem || !canCloseAfterItemActivation(navigationItem, event))
+        return;
+      moveFocusBeforeClosingItemsRegion();
+      mobileMenuOpen = false;
+    }
     function focusAdjacentNavigationItem(currentItem, direction) {
       const items2 = getNavigationItems();
       if (items2.length === 0)
@@ -100,11 +137,11 @@ function Navigation_bar($$renderer, $$props) {
         return;
       if (event.key === "Escape" && isCollapsible() && isMobileLayout && mobileMenuOpen) {
         mobileMenuOpen = false;
-        toggleElement?.focus();
+        focusMenuToggle();
         return;
       }
       const navigationItem = getEventNavigationItem(event);
-      if (!navigationItem)
+      if (!navigationItem || navigationItem !== event.target)
         return;
       if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
         event.preventDefault();
@@ -181,4 +218,4 @@ function Navigation_bar($$renderer, $$props) {
 var navigation_bar_default = Navigation_bar;
 export { Navigation_bar, navigation_bar_default };
 
-//# debugId=414D38B61FBCF6F064756E2164756E21
+//# debugId=7CE77ABFF189F35064756E2164756E21

package/dist/server/{index.server-qwknp759.js → index.server-69epaape.js}

@@ -44,7 +44,9 @@ function Sidebar($$renderer, $$props) {
       return label;
     });
     const navigationLabel = $.derived(() => `${validatedLabel()} navigation`);
-    const mobile = typeof window === "undefined" || typeof window.matchMedia !== "function" ? { current: false } : new MediaQuery("(max-width: 47.99rem)", false);
+    const hasMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+    const usesSsrResponsiveFallback = !hasMatchMedia;
+    const mobile = hasMatchMedia ? new MediaQuery("(max-width: 47.99rem)", false) : { current: false };
     const context = {
       get collapsed() {
         return collapsed;
@@ -117,7 +119,8 @@ function Sidebar($$renderer, $$props) {
           ...rest,
           class: $.clsx(classNames("cinder-sidebar", "cinder-sidebar--desktop", className)),
           "aria-label": validatedLabel(),
-          "data-cinder-collapsed": collapsed ? "" : undefined
+          "data-cinder-collapsed": collapsed ? "" : undefined,
+          "data-cinder-ssr-mobile-fallback": usesSsrResponsiveFallback ? "" : undefined
         })}>`);
         sidebarContents($$renderer3, false);
         $$renderer3.push(`<!----></aside>`);
@@ -138,4 +141,4 @@ function Sidebar($$renderer, $$props) {
 var sidebar_default = Sidebar;
 export { Sidebar, sidebar_default };
 
-//# debugId=7384BF809C61CBDC64756E2164756E21
+//# debugId=4AE415A204BE6FC264756E2164756E21

package/dist/server/{index.server-bvmwnjx6.js → index.server-v4zabrsx.js}

@@ -1267,6 +1267,7 @@ function Chat_input($$renderer, $$props) {
       ],
       onsubmit,
       onstop,
+      oncomposerinput,
       onattachmentadd,
       onattachmentremove,
       onattachmentfailure,
@@ -1441,6 +1442,9 @@ function Chat_input($$renderer, $$props) {
     function handleCompositionEnd() {
       isComposing = false;
     }
+    function handleInput() {
+      oncomposerinput?.(value);
+    }
     function focus() {
       editorElement?.focus();
     }
@@ -1452,6 +1456,9 @@ function Chat_input($$renderer, $$props) {
     function getAttachments() {
       return [...attachments];
     }
+    function getValue() {
+      return value;
+    }
     function addFiles(files) {
       if (!allowAttachments)
         return;
@@ -1565,7 +1572,7 @@ function Chat_input($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]--> <div aria-live="polite" aria-atomic="true" class="sr-only svelte-1tzweuh">${$19.escape(announcer.message)}</div></form>`);
-    $19.bind_props($$props, { value, focus, clear, getAttachments, addFiles });
+    $19.bind_props($$props, { value, focus, clear, getAttachments, getValue, addFiles });
   }, Chat_input);
 }
 // src/components/chat/container/scroll-utilities.ts
@@ -2731,6 +2738,7 @@ function Chat($$renderer, $$props) {
       onattachmentadd,
       onattachmentremove,
       onattachmentfailure,
+      oncomposerinput,
       $$slots,
       $$events,
       ...rest
@@ -3356,6 +3364,12 @@ function Chat($$renderer, $$props) {
     function focusInput() {
       inputRef?.focus();
     }
+    function clearInput() {
+      inputRef?.clear();
+    }
+    function getComposerValue() {
+      return inputRef?.getValue() ?? "";
+    }
     function beginStreaming(messageId) {
       if (streamingScrollRaf !== undefined) {
         cancelAnimationFrame(streamingScrollRaf);
@@ -3646,6 +3660,7 @@ function Chat($$renderer, $$props) {
       sending: streaming,
       allowAttachments: allowAttachments(),
       onstop: streaming ? handleStopGenerating : undefined,
+      oncomposerinput,
       onattachmentadd,
       onattachmentremove,
       onattachmentfailure
@@ -3665,6 +3680,8 @@ function Chat($$renderer, $$props) {
       scrollToBottom,
       scrollToTop,
       focusInput,
+      clearInput,
+      getComposerValue,
       beginStreaming,
       pushToken,
       endStreaming
@@ -3696,6 +3713,12 @@ function Chat2($$renderer, $$props) {
     function focusInput() {
       impl?.focusInput();
     }
+    function clearInput() {
+      impl?.clearInput();
+    }
+    function getComposerValue() {
+      return impl?.getComposerValue() ?? "";
+    }
     Chat($$renderer2, $36.spread_props([{ class: mergedClassName() }, rest]));
     $36.bind_props($$props, {
       beginStreaming,
@@ -3703,7 +3726,9 @@ function Chat2($$renderer, $$props) {
       endStreaming,
       scrollToBottom,
       scrollToTop,
-      focusInput
+      focusInput,
+      clearInput,
+      getComposerValue
     });
   }, Chat2);
 }
@@ -3794,4 +3819,4 @@ function Chat_artifact_layout($$renderer, $$props) {
 var chat_default = Chat2;
 export { Chat_date_separator, Message_content, Tool_call_group, Message_attachments, Chat_message, deriveAttachmentKind, Chat_attachment_preview, Chat_input, DEFAULT_SCROLL_CONFIGURATION, isAtBottom, shouldShowJumpToLatest, calculateUnreadCount, findUnreadBoundaryIndex, calculateScrollToBottom, extractTimestamp, Chat2 as Chat, createConversation, appendMessages2 as appendMessages, appendUserMessage2 as appendUserMessage, appendAssistantMessage2 as appendAssistantMessage, Artifact_panel, Artifact_viewer, Chat_artifact_layout, chat_default };
 
-//# debugId=C6DF556ADAD5FCBD64756E2164756E21
+//# debugId=48E7964ABAFE717A64756E2164756E21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lostgradient/cinder",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A Svelte 5 component library and design system focused on accessibility, theming, and per-component tree-shaking.",
   "keywords": [
     "svelte",
@@ -6427,10 +6427,12 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.7",
     "@types/bun": "^1.3.11",
+    "@types/js-yaml": "^4.0.9",
     "@types/qrcode": "^1.5.6",
     "chalk": "^5.6.2",
     "change-case": "^5.4.4",
     "happy-dom": "^15.11.7",
+    "js-yaml": "^4.1.0",
     "lucide-svelte": "^0.503.0",
     "oxlint": "^1.56.0",
     "oxlint-tsgolint": "^0.17.0",

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

@@ -164,6 +164,11 @@
         "name": "onattachmentremove",
         "reason": "function-or-snippet"
       },
+      {
+        "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."
+      },
       {
         "name": "ondeny",
         "reason": "function-or-snippet",

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

@@ -191,6 +191,12 @@ const schema = {
         name: 'onattachmentremove',
         reason: 'function-or-snippet',
       },
+      {
+        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.",
+      },
       {
         name: 'ondeny',
         reason: 'function-or-snippet',

package/src/components/chat/chat.svelte

@@ -42,6 +42,14 @@ export function scrollToTop() {
 export function focusInput() {
     impl?.focusInput();
 }
+/** Clear the composer's current content. No-op until mounted. */
+export function clearInput() {
+    impl?.clearInput();
+}
+/** Read the composer's current plain-text value. Returns '' until mounted. */
+export function getComposerValue() {
+    return impl?.getComposerValue() ?? '';
+}
 </script>
 
 <ChatImplementation bind:this={impl} class={mergedClassName} {...rest} />

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

@@ -243,4 +243,10 @@ export type ChatProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'onsubmit'>
   onattachmentadd?: (attachment: ChatAttachment) => void;
   onattachmentremove?: (attachment: ChatAttachment) => void;
   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.
+   */
+  oncomposerinput?: (value: string) => void;
 };

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

@@ -26,7 +26,7 @@ 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, ...rest } = $props();
+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();
 // ==========================================================================
 // Refs and Internal State
 // ==========================================================================
@@ -1061,6 +1061,14 @@ export function scrollToTop() {
 export function focusInput() {
     inputRef?.focus();
 }
+/** Clear the composer's current content. */
+export function clearInput() {
+    inputRef?.clear();
+}
+/** Read the composer's current plain-text value. */
+export function getComposerValue() {
+    return inputRef?.getValue() ?? '';
+}
 /**
  * Begin streaming content for a specific message.
  * The message should already exist in the conversation.
@@ -1405,6 +1413,7 @@ function virtualRowAttachment(row) {
         sending={streaming}
         {allowAttachments}
         onstop={streaming ? handleStopGenerating : undefined}
+        {oncomposerinput}
         {onattachmentadd}
         {onattachmentremove}
         {onattachmentfailure}

package/src/components/chat/index.ts

@@ -81,7 +81,7 @@ export {
 
 // Input
 export { ChatAttachmentPreview, ChatInput, deriveAttachmentKind } from './input';
-export type { AttachmentKind } from './input';
+export type { AttachmentKind, ChatAttachment } from './input';
 
 // Message
 export {

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

@@ -55,7 +55,7 @@ acceptedTypes = [
     'application/x-sh',
     'application/sql',
     'application/toml',
-], onsubmit, onstop, onattachmentadd, onattachmentremove, onattachmentfailure, actions, ...rest } = $props();
+], onsubmit, onstop, oncomposerinput, 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);
@@ -284,6 +284,12 @@ function handleCompositionStart() {
 function handleCompositionEnd() {
     isComposing = false;
 }
+// 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);
+}
 // =========================================================================
 // Imperative API
 // =========================================================================
@@ -298,6 +304,9 @@ export function clear() {
 export function getAttachments() {
     return [...attachments];
 }
+export function getValue() {
+    return value;
+}
 export function addFiles(files) {
     if (!allowAttachments)
         return;
@@ -358,6 +367,7 @@ onDestroy(() => {
       bind:this={editorElement}
       id={`${id}-editor`}
       bind:value
+      oninput={handleInput}
       {placeholder}
       aria-label={resolvedComposerLabel}
       {disabled}

package/src/components/navigation-bar/navigation-bar.svelte

@@ -10,8 +10,9 @@ const FALLBACK_ROOT_FONT_SIZE_PX = 16;
 const regionId = $props.id();
 let { class: className, placement = 'top', showLabels = 'always', menuTogglePlacement = 'after-brand', brand, items, actions, menuToggle, mobileMenuOpen = $bindable(false), label = 'Main navigation', 
 // Strip these from rest so they cannot collide with internal attributes.
-'aria-label': _ariaLabel, 'data-collapsible': _dataCollapsible, 'data-cinder-placement': _dataCinderPlacement, 'data-cinder-label-visibility': _dataCinderLabelVisibility, 'data-cinder-menu-toggle-placement': _dataCinderMenuTogglePlacement, onkeydown: consumerOnKeyDown, ...rest } = $props();
+'aria-label': _ariaLabel, 'data-collapsible': _dataCollapsible, 'data-cinder-placement': _dataCinderPlacement, 'data-cinder-label-visibility': _dataCinderLabelVisibility, 'data-cinder-menu-toggle-placement': _dataCinderMenuTogglePlacement, onclick: consumerOnClick, onkeydown: consumerOnKeyDown, ...rest } = $props();
 const navigationItemSelector = '[data-cinder-navigation-item]';
+const toggleFocusSelector = '.cinder-navigation-bar__menu-toggle button, .cinder-navigation-bar__menu-toggle [href], .cinder-navigation-bar__menu-toggle input, .cinder-navigation-bar__menu-toggle select, .cinder-navigation-bar__menu-toggle textarea, .cinder-navigation-bar__menu-toggle [tabindex]:not([tabindex="-1"])';
 const isCollapsible = $derived(placement === 'top' && menuToggle !== undefined);
 let isMobileLayout = $state(false);
 const variant = $derived(placement === 'bottom'
@@ -95,15 +96,56 @@ function isEnabledNavigationItem(item) {
     return item.getAttribute('aria-disabled') !== 'true' && !item.hasAttribute('disabled');
 }
 function getEventNavigationItem(event) {
-    if (!(event.target instanceof HTMLElement) || !itemsRegionElement)
+    if (!(event.target instanceof Element) || !itemsRegionElement)
         return null;
     const navigationItem = event.target.closest(navigationItemSelector);
     if (!navigationItem || !itemsRegionElement.contains(navigationItem))
         return null;
-    if (navigationItem !== event.target)
-        return null;
     return navigationItem;
 }
+function isModifiedClick(event) {
+    return event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+function opensOutsideCurrentPage(item) {
+    if (!(item instanceof HTMLAnchorElement))
+        return false;
+    const target = item.getAttribute('target');
+    return (item.hasAttribute('download') ||
+        (target !== null && target.trim() !== '' && target.trim().toLowerCase() !== '_self'));
+}
+function canCloseAfterItemActivation(item, event) {
+    return (isCollapsible &&
+        isMobileLayout &&
+        mobileMenuOpen &&
+        isEnabledNavigationItem(item) &&
+        !isModifiedClick(event) &&
+        !opensOutsideCurrentPage(item));
+}
+function moveFocusBeforeClosingItemsRegion() {
+    if (!browser || !itemsRegionElement)
+        return;
+    const activeElement = document.activeElement;
+    if (activeElement instanceof Element && itemsRegionElement.contains(activeElement)) {
+        focusMenuToggle();
+    }
+}
+function focusMenuToggle() {
+    const focusTarget = toggleElement ?? navigationBarElement?.querySelector(toggleFocusSelector);
+    focusTarget?.focus();
+}
+function handleClick(event) {
+    if (consumerOnClick) {
+        const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : navigationBarElement;
+        consumerOnClick.call(currentTarget, event);
+    }
+    if (event.defaultPrevented)
+        return;
+    const navigationItem = getEventNavigationItem(event);
+    if (!navigationItem || !canCloseAfterItemActivation(navigationItem, event))
+        return;
+    moveFocusBeforeClosingItemsRegion();
+    mobileMenuOpen = false;
+}
 function focusAdjacentNavigationItem(currentItem, direction) {
     const items = getNavigationItems();
     if (items.length === 0)
@@ -129,12 +171,11 @@ function handleKeyDown(event) {
         return;
     if (event.key === 'Escape' && isCollapsible && isMobileLayout && mobileMenuOpen) {
         mobileMenuOpen = false;
-        // Return focus synchronously — toggleElement is captured on each click.
-        toggleElement?.focus();
+        focusMenuToggle();
         return;
     }
     const navigationItem = getEventNavigationItem(event);
-    if (!navigationItem)
+    if (!navigationItem || navigationItem !== event.target)
         return;
     if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
         event.preventDefault();
@@ -159,6 +200,7 @@ function handleKeyDown(event) {
   data-cinder-placement={placement}
   data-cinder-label-visibility={showLabels}
   data-cinder-menu-toggle-placement={menuTogglePlacement}
+  onclick={handleClick}
   onkeydown={handleKeyDown}
 >
   {#if isCollapsible && menuToggle && menuTogglePlacement === 'before-brand'}

package/src/components/sidebar/sidebar.css

@@ -40,6 +40,10 @@
       border-inline-end: none;
     }
 
+    .cinder-sidebar--desktop[data-cinder-ssr-mobile-fallback] {
+      display: none;
+    }
+
     .cinder-sidebar--desktop[data-cinder-collapsed] {
       display: none;
     }

package/src/components/sidebar/sidebar.svelte

@@ -24,9 +24,11 @@ const navigationLabel = $derived(`${validatedLabel} navigation`);
 // on Firefox and Safari.
 // Keep the fallback explicit for SSR-contract test environments that resolve
 // the client MediaQuery build while `window.matchMedia` is unavailable.
-const mobile = typeof window === 'undefined' || typeof window.matchMedia !== 'function'
-    ? { current: false }
-    : new MediaQuery('(max-width: 47.99rem)', false);
+const hasMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+const usesSsrResponsiveFallback = !hasMatchMedia;
+const mobile = hasMatchMedia
+    ? new MediaQuery('(max-width: 47.99rem)', false)
+    : { current: false };
 const context = {
     get collapsed() {
         return collapsed;
@@ -84,6 +86,7 @@ setSidebarContext(context);
     class={classNames('cinder-sidebar', 'cinder-sidebar--desktop', className)}
     aria-label={validatedLabel}
     data-cinder-collapsed={collapsed ? '' : undefined}
+    data-cinder-ssr-mobile-fallback={usesSsrResponsiveFallback ? '' : undefined}
   >
     {@render sidebarContents(false)}
   </aside>