@schlenkr/quassel 0.5.6 → 0.7.0

package/index.js

@@ -42,6 +42,11 @@ var englishTexts = {
   send: "Send",
   sendIntoRun: "Feed into the running turn",
   stop: "Stop work",
+  microphone: "Speak",
+  microphoneHint: "Hold to speak or click to start recording",
+  microphonePreparing: "Connecting microphone ...",
+  microphoneRecording: "Finish recording",
+  microphoneTranscribing: "Transcribing ...",
   placeholder: "Write a message ...",
   steeringPlaceholder: "Interject ...",
   steered: "Fed into the running turn",
@@ -112,6 +117,11 @@ var germanTexts = {
   send: "Senden",
   sendIntoRun: "In die laufende Antwort einreihen",
   stop: "Bearbeitung stoppen",
+  microphone: "Sprechen",
+  microphoneHint: "Zum Sprechen halten oder zum Aufnehmen antippen",
+  microphonePreparing: "Mikrofon wird verbunden ...",
+  microphoneRecording: "Aufnahme beenden",
+  microphoneTranscribing: "Wird transkribiert ...",
   placeholder: "Nachricht schreiben ...",
   steeringPlaceholder: "Nachsteuern ...",
   steered: "In die laufende Antwort eingereiht",
@@ -164,7 +174,7 @@ var defaultTexts = englishTexts;
 
 // packages/quassel/src/ui/cn.ts
 import { createCn } from "cn/config";
-var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "timestamp", "label", "chat"] } } });
+var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["body", "small"] } } });
 
 // packages/quassel/src/ChatMessages.tsx
 import { useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
@@ -236,7 +246,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "qsl:group/button qsl:inline-flex qsl:shrink-0 qsl:items-center qsl:justify-center qsl:rounded-lg qsl:border qsl:border-transparent qsl:bg-clip-padding qsl:text-sm qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:select-none qsl:focus-visible:border-ring qsl:focus-visible:ring-3 qsl:focus-visible:ring-ring/50 qsl:active:not-aria-[haspopup]:translate-y-px qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-3 qsl:aria-invalid:ring-destructive/20 qsl:dark:aria-invalid:border-destructive/50 qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
+  "qsl:group/button qsl:inline-flex qsl:shrink-0 qsl:items-center qsl:justify-center qsl:rounded-lg qsl:border qsl:border-transparent qsl:bg-clip-padding qsl:text-body qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:select-none qsl:focus-visible:border-ring qsl:focus-visible:ring-3 qsl:focus-visible:ring-ring/50 qsl:active:not-aria-[haspopup]:translate-y-px qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-3 qsl:aria-invalid:ring-destructive/20 qsl:dark:aria-invalid:border-destructive/50 qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -249,7 +259,7 @@ var buttonVariants = cva(
       },
       size: {
         default: "qsl:h-8 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
-        xs: "qsl:h-6 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:px-2 qsl:text-xs qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3",
+        xs: "qsl:h-6 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:px-2 qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3",
         sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:in-data-[slot=button-group]:rounded-lg qsl:has-data-[icon=inline-end]:pr-1.5 qsl:has-data-[icon=inline-start]:pl-1.5 qsl:[&_svg:not([class*='size-'])]:size-3.5",
         lg: "qsl:h-9 qsl:gap-1.5 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
         icon: "qsl:size-8",
@@ -295,7 +305,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "qsl:group/card qsl:flex qsl:flex-col qsl:gap-(--qsl-card-spacing) qsl:overflow-hidden qsl:rounded-panel qsl:border qsl:border-border qsl:bg-card qsl:py-(--qsl-card-spacing) qsl:text-sm qsl:text-card-foreground qsl:shadow-bar qsl:[--qsl-card-spacing:--spacing(4)] qsl:has-data-[slot=card-footer]:pb-0 qsl:has-[>img:first-child]:pt-0 qsl:data-[size=sm]:[--qsl-card-spacing:--spacing(3)] qsl:data-[size=sm]:has-data-[slot=card-footer]:pb-0 qsl:*:[img:first-child]:rounded-t-xl qsl:*:[img:last-child]:rounded-b-xl",
+        "qsl:group/card qsl:flex qsl:flex-col qsl:gap-(--qsl-card-spacing) qsl:overflow-hidden qsl:rounded-panel qsl:border qsl:border-border qsl:bg-card qsl:py-(--qsl-card-spacing) qsl:text-body qsl:text-card-foreground qsl:shadow-bar qsl:[--qsl-card-spacing:--spacing(4)] qsl:has-data-[slot=card-footer]:pb-0 qsl:has-[>img:first-child]:pt-0 qsl:data-[size=sm]:[--qsl-card-spacing:--spacing(3)] qsl:data-[size=sm]:has-data-[slot=card-footer]:pb-0 qsl:*:[img:first-child]:rounded-t-xl qsl:*:[img:last-child]:rounded-b-xl",
         className
       ),
       ...props
@@ -324,6 +334,7 @@ function PopoverContent({
   return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { container: portalContainer, keepMounted, children: /* @__PURE__ */ jsx3(
     PopoverPrimitive.Positioner,
     {
+      "data-quassel": "",
       align,
       alignOffset,
       anchor,
@@ -338,7 +349,7 @@ function PopoverContent({
           "data-quassel-popover": "",
           "data-slot": "popover-content",
           className: cn(
-            "qsl:z-[110] qsl:flex qsl:w-72 qsl:origin-(--transform-origin) qsl:flex-col qsl:gap-2.5 qsl:rounded-lg qsl:bg-popover qsl:p-2.5 qsl:text-sm qsl:text-popover-foreground qsl:shadow-md qsl:ring-1 qsl:ring-foreground/10 qsl:outline-hidden qsl:duration-100 qsl:data-[side=bottom]:slide-in-from-top-2 qsl:data-[side=inline-end]:slide-in-from-left-2 qsl:data-[side=inline-start]:slide-in-from-right-2 qsl:data-[side=left]:slide-in-from-right-2 qsl:data-[side=right]:slide-in-from-left-2 qsl:data-[side=top]:slide-in-from-bottom-2 qsl:data-open:animate-in qsl:data-open:fade-in-0 qsl:data-open:zoom-in-95 qsl:data-closed:animate-out qsl:data-closed:fade-out-0 qsl:data-closed:zoom-out-95",
+            "qsl:z-[110] qsl:flex qsl:w-72 qsl:origin-(--transform-origin) qsl:flex-col qsl:gap-2.5 qsl:rounded-lg qsl:bg-popover qsl:p-2.5 qsl:text-small qsl:text-popover-foreground qsl:shadow-md qsl:ring-1 qsl:ring-foreground/10 qsl:outline-hidden qsl:duration-100 qsl:data-[side=bottom]:slide-in-from-top-2 qsl:data-[side=inline-end]:slide-in-from-left-2 qsl:data-[side=inline-start]:slide-in-from-right-2 qsl:data-[side=left]:slide-in-from-right-2 qsl:data-[side=right]:slide-in-from-left-2 qsl:data-[side=top]:slide-in-from-bottom-2 qsl:data-open:animate-in qsl:data-open:fade-in-0 qsl:data-open:zoom-in-95 qsl:data-closed:animate-out qsl:data-closed:fade-out-0 qsl:data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -373,7 +384,7 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var toggleVariants = cva2(
-  "qsl:group/toggle qsl:inline-flex qsl:items-center qsl:justify-center qsl:gap-1 qsl:rounded-lg qsl:text-sm qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:hover:bg-muted qsl:hover:text-foreground qsl:focus-visible:border-ring qsl:focus-visible:ring-[3px] qsl:focus-visible:ring-ring/50 qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-destructive/20 qsl:aria-pressed:bg-muted qsl:data-[state=on]:bg-muted qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
+  "qsl:group/toggle qsl:inline-flex qsl:items-center qsl:justify-center qsl:gap-1 qsl:rounded-lg qsl:text-body qsl:font-medium qsl:whitespace-nowrap qsl:transition-all qsl:outline-none qsl:hover:bg-muted qsl:hover:text-foreground qsl:focus-visible:border-ring qsl:focus-visible:ring-[3px] qsl:focus-visible:ring-ring/50 qsl:disabled:pointer-events-none qsl:disabled:opacity-50 qsl:aria-invalid:border-destructive qsl:aria-invalid:ring-destructive/20 qsl:aria-pressed:bg-muted qsl:data-[state=on]:bg-muted qsl:dark:aria-invalid:ring-destructive/40 qsl:[&_svg]:pointer-events-none qsl:[&_svg]:shrink-0 qsl:[&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -493,7 +504,7 @@ function CodeBlock({ children }) {
     {
       ref: code,
       "data-chat": "code-block",
-      className: cn(scrollbar, "qsl:my-2 qsl:overflow-auto qsl:overscroll-contain qsl:rounded-lg qsl:bg-secondary qsl:px-3 qsl:py-2 qsl:font-mono qsl:text-[length:1em] qsl:leading-relaxed qsl:in-data-[tone=on-color]:bg-black/30 qsl:in-data-[tone=on-color]:text-inherit"),
+      className: cn(scrollbar, "qsl:overflow-auto qsl:overscroll-contain"),
       style: { maxHeight: options?.maxHeight, whiteSpace: options?.wrap ? "pre-wrap" : void 0, overflowWrap: options?.wrap ? "anywhere" : void 0 },
       children
     }
@@ -516,7 +527,7 @@ function CodeBlock({ children }) {
         children: action.status === "done" ? /* @__PURE__ */ jsx8(CheckIcon, {}) : /* @__PURE__ */ jsx8(CopyIcon, {})
       }
     ),
-    action.error && /* @__PURE__ */ jsx8("p", { className: "qsl:text-sm qsl:text-destructive", role: "alert", children: action.error })
+    action.error && /* @__PURE__ */ jsx8("p", { className: "qsl:text-small qsl:text-destructive", role: "alert", children: action.error })
   ] });
 }
 function MarkdownLinks({ children, onLinkClick }) {
@@ -530,7 +541,6 @@ function MarkdownLink({ href, children }) {
   return /* @__PURE__ */ jsx8(
     "a",
     {
-      className: "qsl:text-primary qsl:[text-underline-offset:2px] qsl:in-data-[tone=on-color]:text-inherit qsl:in-data-[tone=on-color]:underline",
       href,
       onClick: (event) => {
         if (href && onLinkClick?.(href, event.currentTarget.textContent ?? "")) {
@@ -545,34 +555,32 @@ function MarkdownLink({ href, children }) {
 }
 var scrollbar = "qsl:[scrollbar-width:thin] qsl:[&::-webkit-scrollbar]:block qsl:[&::-webkit-scrollbar]:h-2 qsl:[&::-webkit-scrollbar-thumb]:rounded-full qsl:[&::-webkit-scrollbar-thumb]:bg-border";
 var scrollCover = "qsl:bg-[linear-gradient(to_right,var(--qsl-scroll-cover,var(--qsl-background))_50%,transparent)_left/20px_100%_no-repeat_local,linear-gradient(to_left,var(--qsl-scroll-cover,var(--qsl-background))_50%,transparent)_right/20px_100%_no-repeat_local,linear-gradient(to_right,#00000047,transparent)_left/14px_100%_no-repeat_scroll,linear-gradient(to_left,#00000047,transparent)_right/14px_100%_no-repeat_scroll]";
-var headingClasses = "qsl:mt-3 qsl:mb-1 qsl:text-[length:1.1em] qsl:font-medium";
-var cellClasses = "qsl:max-w-[44ch] qsl:border qsl:border-border qsl:px-2 qsl:py-1 qsl:text-left qsl:align-top qsl:in-data-[tone=on-color]:border-white/35";
 var components = {
-  h1: ({ children }) => /* @__PURE__ */ jsx8("h1", { className: "qsl:mt-3 qsl:mb-1 qsl:text-[length:1.2em] qsl:font-semibold", children }),
-  h2: ({ children }) => /* @__PURE__ */ jsx8("h2", { className: headingClasses, children }),
-  h3: ({ children }) => /* @__PURE__ */ jsx8("h3", { className: headingClasses, children }),
-  h4: ({ children }) => /* @__PURE__ */ jsx8("h4", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
-  h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
-  h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { className: "qsl:mt-2 qsl:mb-1 qsl:font-medium", children }),
-  p: ({ children }) => /* @__PURE__ */ jsx8("p", { className: "qsl:[p+&]:mt-3", children }),
-  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { className: "qsl:my-3 qsl:list-disc qsl:pl-6 qsl:[li>&]:my-0", children }),
-  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { className: "qsl:my-3 qsl:list-decimal qsl:pl-6 qsl:[li>&]:my-0", children }),
-  li: ({ children }) => /* @__PURE__ */ jsx8("li", { className: "qsl:[li+&]:mt-1 qsl:marker:text-muted-foreground qsl:in-data-[tone=on-color]:marker:text-inherit", children }),
-  hr: () => /* @__PURE__ */ jsx8("hr", { className: "qsl:my-3 qsl:border-t qsl:border-border" }),
+  h1: ({ children }) => /* @__PURE__ */ jsx8("h1", { children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx8("h2", { children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx8("h3", { children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx8("h4", { children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx8("h5", { children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx8("h6", { children }),
+  p: ({ children }) => /* @__PURE__ */ jsx8("p", { children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx8("ul", { children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx8("ol", { children }),
+  li: ({ children }) => /* @__PURE__ */ jsx8("li", { children }),
+  hr: () => /* @__PURE__ */ jsx8("hr", {}),
   img: ({ src, alt }) => /* @__PURE__ */ jsx8("img", { alt, className: "qsl:h-auto qsl:max-w-full", src: typeof src === "string" ? src : void 0 }),
-  blockquote: ({ children }) => /* @__PURE__ */ jsx8("blockquote", { className: "qsl:my-1 qsl:border-l-2 qsl:border-border qsl:pl-3 qsl:text-muted-foreground qsl:in-data-[tone=on-color]:border-white/50 qsl:in-data-[tone=on-color]:text-inherit", children }),
-  strong: ({ children }) => /* @__PURE__ */ jsx8("strong", { className: "qsl:font-medium", children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx8("blockquote", { children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx8("strong", { children }),
   em: ({ children }) => /* @__PURE__ */ jsx8("em", { children }),
   a: ({ href, children }) => /* @__PURE__ */ jsx8(MarkdownLink, { href, children }),
   pre: ({ children }) => /* @__PURE__ */ jsx8(CodeBlock, { children }),
-  code: ({ children, className }) => /* @__PURE__ */ jsx8("code", { className: cn(className, "qsl:rounded-sm qsl:bg-secondary qsl:px-1 qsl:py-0.5 qsl:font-mono qsl:text-[length:1em] qsl:[overflow-wrap:anywhere] qsl:in-data-[tone=on-color]:bg-white/20 qsl:in-data-[tone=on-color]:text-inherit", "qsl:[pre>&]:bg-transparent qsl:[pre>&]:p-0"), children }),
+  code: ({ children, className }) => /* @__PURE__ */ jsx8("code", { className, children }),
   // Without max-content the table shrinks to the container and stacks letters.
-  table: ({ children }) => /* @__PURE__ */ jsx8("div", { className: cn(scrollbar, scrollCover, "qsl:my-2 qsl:overflow-x-auto qsl:overscroll-x-contain"), children: /* @__PURE__ */ jsx8("table", { className: "qsl:w-max qsl:min-w-full qsl:border-collapse qsl:text-sm", children }) }),
+  table: ({ children }) => /* @__PURE__ */ jsx8("div", { className: cn(scrollbar, scrollCover, "qsl:overflow-x-auto qsl:overscroll-x-contain"), "data-quassel-table": "", children: /* @__PURE__ */ jsx8("table", { className: "qsl:w-max qsl:min-w-full qsl:border-collapse", children }) }),
   thead: ({ children }) => /* @__PURE__ */ jsx8("thead", { children }),
   tbody: ({ children }) => /* @__PURE__ */ jsx8("tbody", { children }),
   tr: ({ children }) => /* @__PURE__ */ jsx8("tr", { children }),
-  th: ({ children }) => /* @__PURE__ */ jsx8("th", { className: cn(cellClasses, "qsl:bg-secondary qsl:font-medium qsl:in-data-[tone=on-color]:bg-white/15 qsl:in-data-[tone=on-color]:text-inherit"), children }),
-  td: ({ children }) => /* @__PURE__ */ jsx8("td", { className: cellClasses, children })
+  th: ({ children }) => /* @__PURE__ */ jsx8("th", { children }),
+  td: ({ children }) => /* @__PURE__ */ jsx8("td", { children })
 };
 function transformUrl(url, allowUrl, resolveUrl) {
   const resolved = resolveUrl ? resolveUrl(url) : url;
@@ -584,10 +592,9 @@ function Markdown({ text, streaming = false }) {
   const allowUrl = useAllowUrl();
   const resolveUrl = useResolveUrl();
   const urlTransform = useCallback((url) => transformUrl(url, allowUrl, resolveUrl), [allowUrl, resolveUrl]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx8("div", { "data-quassel": "", "data-quassel-markdown": "", children: /* @__PURE__ */ jsx8(
     Streamdown,
     {
-      className: "space-y-0 text-inherit",
       prefix: "qsl",
       mode: streaming ? "streaming" : "static",
       isAnimating: streaming,
@@ -599,7 +606,7 @@ function Markdown({ text, streaming = false }) {
       skipHtml: true,
       children: text
     }
-  );
+  ) });
 }
 function markdownPlainText(text) {
   return text.split("\n").filter((line) => !/^\s*```\w*\s*$/.test(line) && !isTableDivider(line)).map((line) => (line.trim().startsWith("|") ? splitTableRow(line).join(", ") : line).replace(/^(#{1,6})\s+/, "").replace(/^\s*>\s?/, "").replace(/^\s*([-*+]|\d+[.)])\s+/, "").replace(/!?\[([^\]]*)\]\(([^)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|`([^`]+)`/g, (_, link, _href, bold, boldUnderscore, italic, code) => link ?? bold ?? boldUnderscore ?? italic ?? code).trim()).filter((line) => line !== "").join("\n");
@@ -627,7 +634,7 @@ var stepPopoverOrigin = (event) => ({
   y: event.clientY,
   base: getComputedStyle(event.currentTarget).getPropertyValue("--qsl-base")
 });
-var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-trace qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
+var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-small qsl:break-all qsl:whitespace-pre-wrap";
 function StepPopover({
   message,
   position,
@@ -658,7 +665,7 @@ function StepPopover({
       anchor,
       "aria-label": title,
       className: cn(
-        "qsl:w-[min(680px,calc(100vw-32px))] qsl:gap-0 qsl:overflow-hidden qsl:p-0 qsl:text-base qsl:leading-normal qsl:shadow-pop",
+        "qsl:w-[min(680px,calc(100vw-32px))] qsl:gap-0 qsl:overflow-hidden qsl:p-0 qsl:text-body qsl:shadow-pop",
         "qsl:max-h-[min(70dvh,620px,var(--available-height))]"
       ),
       collisionPadding: 16,
@@ -672,10 +679,10 @@ function StepPopover({
           /* @__PURE__ */ jsx9("span", { className: "qsl:min-w-0 qsl:flex-1 qsl:overflow-hidden qsl:text-ellipsis qsl:whitespace-nowrap qsl:font-medium", children: title }),
           /* @__PURE__ */ jsx9(Button2, { "aria-label": texts.close, className: "qsl:flex-none", onClick: onClose, size: "icon-sm", title: texts.close, variant: "ghost", children: /* @__PURE__ */ jsx9(XIcon, {}) })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "qsl:min-h-0 qsl:flex-1 qsl:overflow-auto qsl:overscroll-contain qsl:p-4", children: thinking ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-sm qsl:leading-[1.625] qsl:whitespace-pre-wrap", children: message.text }) : tool ? /* @__PURE__ */ jsxs2("div", { className: "qsl:flex qsl:flex-col qsl:gap-4", children: [
-          /* @__PURE__ */ jsx9("div", { className: "qsl:font-mono qsl:text-sm", children: message.text }),
+        /* @__PURE__ */ jsx9("div", { className: "qsl:min-h-0 qsl:flex-1 qsl:overflow-auto qsl:overscroll-contain qsl:p-4", children: thinking ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-small qsl:whitespace-pre-wrap", children: message.text }) : tool ? /* @__PURE__ */ jsxs2("div", { className: "qsl:flex qsl:flex-col qsl:gap-4", children: [
+          /* @__PURE__ */ jsx9("div", { className: "qsl:font-mono qsl:text-small", children: message.text }),
           /* @__PURE__ */ jsx9(PopoverSection, { label: texts.argumentsLabel, value: toolArgumentsText(tool) }),
-          tool.result === void 0 ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-sm qsl:text-muted-foreground", children: texts.toolStillRunning }) : /* @__PURE__ */ jsx9(PopoverSection, { error: tool.isError, label: texts.resultLabel, value: prettyJson(tool.result) })
+          tool.result === void 0 ? /* @__PURE__ */ jsx9("div", { className: "qsl:text-small qsl:text-muted-foreground", children: texts.toolStillRunning }) : /* @__PURE__ */ jsx9(PopoverSection, { error: tool.isError, label: texts.resultLabel, value: prettyJson(tool.result) })
         ] }) : null })
       ]
     }
@@ -683,7 +690,7 @@ function StepPopover({
 }
 function PopoverSection({ label, value, error = false }) {
   return /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-trace qsl:font-semibold qsl:tracking-[0.04em] qsl:text-muted-foreground qsl:uppercase", children: label }),
+    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-small qsl:font-semibold qsl:tracking-[0.04em] qsl:text-muted-foreground qsl:uppercase", children: label }),
     /* @__PURE__ */ jsx9("pre", { className: cn(preClasses, error && "qsl:text-destructive"), children: value })
   ] });
 }
@@ -691,7 +698,7 @@ function PopoverSection({ label, value, error = false }) {
 // packages/quassel/src/PendingActionCard.tsx
 import { CheckIcon as CheckIcon2, XIcon as XIcon2 } from "lucide-react";
 import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
-var cardClasses = "qsl:gap-2.5 qsl:bg-background qsl:px-3.5 qsl:text-sm";
+var cardClasses = "qsl:gap-2.5 qsl:bg-background qsl:px-3.5 qsl:text-body";
 var resultText = (result) => typeof result === "string" ? result : result === null || result === void 0 ? "" : JSON.stringify(result);
 function PendingActionCard({
   text,
@@ -704,17 +711,17 @@ function PendingActionCard({
   const { Button: Button2, Card: Card2 } = useQuasselComponents();
   if (action.status !== void 0) {
     return /* @__PURE__ */ jsxs3(Card2, { className: cardClasses, size: "sm", children: [
-      /* @__PURE__ */ jsx10("div", { className: "qsl:leading-normal", children: text }),
-      /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:gap-1.5 qsl:text-sm qsl:text-muted-foreground", "data-action": "resolved", children: [
+      /* @__PURE__ */ jsx10("div", { className: "qsl:text-body", children: text }),
+      /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:gap-1.5 qsl:text-body qsl:text-muted-foreground", "data-action": "resolved", children: [
         action.status === "approved" ? /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }) : /* @__PURE__ */ jsx10(XIcon2, { size: 12 }),
         action.status === "approved" ? resultText(action.result) : dismissedLabel
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxs3(Card2, { className: cardClasses, size: "sm", children: [
-    /* @__PURE__ */ jsx10("div", { className: "qsl:leading-normal", children: text }),
+    /* @__PURE__ */ jsx10("div", { className: "qsl:text-body", children: text }),
     /* @__PURE__ */ jsxs3("div", { className: "qsl:flex qsl:items-center qsl:justify-between qsl:gap-2", children: [
-      /* @__PURE__ */ jsx10("span", { className: "qsl:text-sm qsl:text-muted-foreground", "data-action": "waiting", children: waitingLabel }),
+      /* @__PURE__ */ jsx10("span", { className: "qsl:text-small qsl:text-muted-foreground", "data-action": "waiting", children: waitingLabel }),
       onDismiss && /* @__PURE__ */ jsx10(Button2, { onClick: onDismiss, size: "sm", variant: "outline", children: dismissLabel })
     ] })
   ] });
@@ -903,7 +910,7 @@ function WorkingScenes({ label = "Working ...", compact = false }) {
     return () => window.clearInterval(timer);
   }, [reducedMotion]);
   const frame = scene.draw(Math.floor(frameTick / scene.tick) + (scene.moving ? offset : 0));
-  return /* @__PURE__ */ jsxs4("span", { "aria-label": label, className: cn("qsl:flex qsl:items-center qsl:gap-2.5 qsl:text-chat", compact ? "qsl:text-inherit" : "qsl:mt-4 qsl:text-foreground"), "data-chat": "working", role: "status", children: [
+  return /* @__PURE__ */ jsxs4("span", { "aria-label": label, className: cn("qsl:flex qsl:items-center qsl:gap-2.5 qsl:text-body", compact ? "qsl:text-inherit" : "qsl:mt-4 qsl:text-foreground"), "data-chat": "working", role: "status", children: [
     !compact && /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "qsl:text-muted-foreground qsl:opacity-70", children: ">" }),
     /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: cn("qsl:inline-block qsl:flex-none qsl:font-mono qsl:[font-variant-ligatures:none]", compact ? "qsl:w-[2.4em] qsl:text-center" : "qsl:w-[15rem]"), children: /* @__PURE__ */ jsx11("span", { className: "qsl:tracking-[0.02em] qsl:whitespace-pre qsl:motion-reduce:opacity-60", children: typeof frame === "string" ? frame : frame.map((cell, index) => /* @__PURE__ */ jsx11("span", { className: "qsl:inline-block qsl:w-[1.35em] qsl:text-center", children: cell }, index)) }) }, scene.id)
   ] });
@@ -957,12 +964,8 @@ import { CheckIcon as CheckIcon4, ChevronDownIcon, ChevronRightIcon, ChevronUpIc
 // packages/quassel/src/options.ts
 var cssLength = (value) => typeof value === "number" ? `${value}px` : value;
 var appearanceStyle = (appearance) => ({
-  "--qsl-font-size": cssLength(appearance?.fontSize),
-  "--qsl-chat-font-size": cssLength(appearance?.fontSize),
-  "--qsl-chat-line-height": appearance?.lineHeight,
   "--qsl-chat-message-gap": cssLength(appearance?.messageGap),
   "--qsl-chat-dense-message-gap": cssLength(appearance?.denseMessageGap),
-  "--qsl-tool-font-scale": appearance?.toolFontScale,
   "--qsl-tool-group-gap": cssLength(appearance?.toolGroupGap),
   "--qsl-tool-row-padding": cssLength(appearance?.toolRowPadding)
 });
@@ -1110,7 +1113,7 @@ function MessageActions({ message, options, texts, contentRef, side = message.ro
         item.id
       );
     }) }),
-    action.error && /* @__PURE__ */ jsx12("p", { className: "qsl:mt-2 qsl:text-sm qsl:text-destructive", role: "alert", children: action.error })
+    action.error && /* @__PURE__ */ jsx12("p", { className: "qsl:mt-2 qsl:text-small qsl:text-destructive", role: "alert", children: action.error })
   ] });
 }
 
@@ -1198,7 +1201,7 @@ function announce(text) {
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var stepClasses = "qsl:mt-[var(--qsl-chat-message-gap,10px)]";
 var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,3px)]";
-var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:py-[var(--qsl-tool-row-padding,1px)] qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:py-[var(--qsl-tool-row-padding,1px)] qsl:pl-6 qsl:text-left qsl:text-small qsl:text-muted-foreground";
 var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:pr-2 qsl:transition-colors qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none";
 var traceIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:opacity-60";
 var traceErrorIconClasses = "qsl:mt-0.5 qsl:flex-none qsl:text-destructive qsl:opacity-100";
@@ -1209,7 +1212,7 @@ var rowErrorIconClasses = cn(traceErrorIconClasses, "qsl:mt-0");
 var rowLineClasses = cn(traceLineClasses, "qsl:self-auto");
 var chipClasses = cn(
   "qsl:inline-flex qsl:max-w-[220px] qsl:items-center qsl:gap-[5px] qsl:rounded-full qsl:border qsl:border-border-soft qsl:px-2.5 qsl:py-0.5",
-  "qsl:text-meta qsl:leading-[1.6] qsl:text-muted-foreground qsl:transition-colors",
+  "qsl:text-small qsl:text-muted-foreground qsl:transition-colors",
   "qsl:data-[state=running]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
   "qsl:data-[state=thinking]:border-[color-mix(in_srgb,var(--qsl-primary)_40%,var(--qsl-border-soft))]",
   "qsl:data-[state=error]:border-[color-mix(in_srgb,var(--qsl-destructive)_45%,var(--qsl-border-soft))]",
@@ -1218,7 +1221,7 @@ var chipClasses = cn(
 var chipInteractiveClasses = "qsl:cursor-pointer qsl:hover:border-border qsl:hover:bg-secondary qsl:hover:text-foreground qsl:focus-visible:border-border qsl:focus-visible:bg-secondary qsl:focus-visible:text-foreground qsl:focus-visible:outline-none qsl:data-[state=done]:hover:opacity-100 qsl:data-[state=done]:focus-visible:opacity-100";
 var collapseAtBottomFrom = 11;
 var maxAnnouncementsAtOnce = 2;
-var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
+var bubbleBodyClasses = "qsl:relative qsl:max-w-[86%] qsl:px-3 qsl:py-2 qsl:text-body qsl:[overflow-wrap:anywhere] qsl:@max-[620px]/chat:max-w-full";
 function isStep(message) {
   return !!message && (message.role === "thinking" || message.role === "tool");
 }
@@ -1380,7 +1383,7 @@ function ChatMessages({
       "data-timestamp-position": timestampOptions?.position ?? "aside",
       children: [
         /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
-          "qsl:flex-none qsl:text-timestamp qsl:leading-[1.375] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+          "qsl:flex-none qsl:text-small qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
           timestampOptions?.position === "above" ? "qsl:self-start" : timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:min-w-[5ch] qsl:whitespace-nowrap"
         ), children: messageDate(at) ? timestampLabel(messageDate(at), timestampOptions, now) : "" }),
         /* @__PURE__ */ jsx13("div", { className: "qsl:min-w-0 qsl:flex-1 qsl:[&>*:first-child]:mt-0", children: content })
@@ -1435,7 +1438,7 @@ function ChatMessages({
       const day = timestampDay(date, timestampOptions);
       if (day.key !== lastDay) {
         closeGroup();
-        blocks.push(/* @__PURE__ */ jsx13("div", { className: cn(stepClasses, "qsl:text-center qsl:text-xs qsl:text-muted-foreground"), "data-chat": "day-separator", "data-day": day.key, children: day.label }, `day-${message.key}`));
+        blocks.push(/* @__PURE__ */ jsx13("div", { className: cn(stepClasses, "qsl:text-center qsl:text-small qsl:text-muted-foreground"), "data-chat": "day-separator", "data-day": day.key, children: day.label }, `day-${message.key}`));
         lastDay = day.key;
       }
     }
@@ -1483,15 +1486,14 @@ function ChatMessages({
   const transcript = /* @__PURE__ */ jsxs6("div", { className: cn("qsl:@container/chat qsl:relative qsl:flex qsl:min-h-0 qsl:flex-1 qsl:flex-col", className), "data-quassel": "", style: {
     ...appearanceStyle(appearance),
     "--qsl-chat-content-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
-    "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding,
-    "--qsl-timestamp-font-size": timestampOptions?.fontScale === void 0 ? void 0 : `calc(var(--qsl-base) * ${timestampOptions.fontScale})`
+    "--qsl-chat-horizontal-padding": typeof horizontalPadding === "number" ? `${horizontalPadding}px` : horizontalPadding
   }, children: [
     /* @__PURE__ */ jsx13(
       "div",
       {
         "aria-label": allTexts.transcript,
         className: cn(
-          "qsl:min-h-0 qsl:flex-1 qsl:cursor-default qsl:overflow-y-auto qsl:overscroll-contain qsl:text-chat qsl:text-foreground",
+          "qsl:min-h-0 qsl:flex-1 qsl:cursor-default qsl:overflow-y-auto qsl:overscroll-contain qsl:text-body qsl:text-foreground",
           "qsl:[--qsl-fade-edge:calc(100%_-_var(--qsl-composer-height,0px))]",
           "qsl:[-webkit-mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
           "qsl:[mask-image:linear-gradient(to_bottom,#000_calc(var(--qsl-fade-edge)_-_40px),transparent_calc(var(--qsl-fade-edge)_+_16px))]",
@@ -1549,7 +1551,7 @@ function ChatMessages({
       }
     }, children: /* @__PURE__ */ jsx13(ChevronDownIcon, {}) }) }),
     dock && openActions.length > 0 && createPortal(
-      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,3px)] qsl:text-chat qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
+      /* @__PURE__ */ jsx13("div", { className: "qsl:flex qsl:flex-col qsl:gap-[var(--qsl-chat-dense-message-gap,3px)] qsl:text-body qsl:text-foreground", style: appearanceStyle(appearance), children: openActions.map((message) => /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts: allTexts }) }, message.key)) }),
       dock
     )
   ] });
@@ -1776,9 +1778,9 @@ function Bubble({
       /* @__PURE__ */ jsxs6("div", { className: "qsl:min-w-0 qsl:flex-1", children: [
         /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:italic qsl:whitespace-pre-wrap"), children: line }),
         tool && /* @__PURE__ */ jsxs6("div", { className: "qsl:mt-0.5 qsl:border-l-2 qsl:border-border-soft qsl:pl-2", children: [
-          /* @__PURE__ */ jsx13("pre", { className: "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80", children: toolArgumentsText(tool) }),
+          /* @__PURE__ */ jsx13("pre", { className: "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-small qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80", children: toolArgumentsText(tool) }),
           tool.result !== void 0 && /* @__PURE__ */ jsx13("pre", { className: cn(
-            "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80",
+            "qsl:mb-0.5 qsl:max-h-[208px] qsl:overflow-auto qsl:overscroll-contain qsl:font-mono qsl:text-small qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80",
             tool.isError && "qsl:text-destructive qsl:opacity-100"
           ), children: prettyJson(tool.result) })
         ] })
@@ -1789,7 +1791,7 @@ function Bubble({
     return /* @__PURE__ */ jsx13("div", { className: stepSpacing, children: /* @__PURE__ */ jsx13(ActionContent, { action: message.action, onDismissAction, renderAction, text: message.text, texts }) });
   }
   if (message.role === "system") {
-    return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-sm qsl:text-muted-foreground"), "data-message": "system", children: [
+    return /* @__PURE__ */ jsxs6("div", { className: cn(stepSpacing, "qsl:border-l-2 qsl:border-destructive/50 qsl:pl-3 qsl:text-small qsl:text-muted-foreground"), "data-message": "system", children: [
       /* @__PURE__ */ jsx13(Markdown, { text: message.text }),
       /* @__PURE__ */ jsx13(MessageAttachments, { message, texts })
     ] });
@@ -1802,15 +1804,15 @@ function Bubble({
   const showSender = bubbleOptions?.showSender ?? (!!message.bubble?.label && !plain);
   const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     showSender && sender && /* @__PURE__ */ jsx13("span", { className: cn(
-      "qsl:mb-[5px] qsl:table qsl:text-label qsl:leading-[1.45] qsl:font-semibold",
+      "qsl:mb-[5px] qsl:table qsl:text-small qsl:font-semibold",
       useBubble && message.bubble && "qsl:rounded-full qsl:border qsl:border-white/30 qsl:bg-black/15 qsl:px-[7px] qsl:py-px qsl:tracking-[0.02em]"
     ), "data-chat": "sender", children: sender }),
     /* @__PURE__ */ jsx13("div", { "data-chat": "message-text", ref: textRef, children: /* @__PURE__ */ jsx13(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }) }),
     /* @__PURE__ */ jsx13(MessageAttachments, { message, texts }),
-    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-label qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered })
+    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-small qsl:opacity-70", "data-chat": "steered", children: texts.steered })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
-  if (!useBubble) return /* @__PURE__ */ jsxs6("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group/message qsl:relative qsl:w-full qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground"), "data-message": "answer", children: [
+  if (!useBubble) return /* @__PURE__ */ jsxs6("div", { "data-chat-text-cursor": cursor, className: cn(stepSpacing, "qsl:group/message qsl:relative qsl:w-full qsl:text-foreground"), "data-message": "answer", children: [
     content,
     /* @__PURE__ */ jsx13(MessageActions, { contentRef: textRef, message, options: messageActions, side, texts })
   ] });
@@ -1868,18 +1870,20 @@ function MessageAttachments({ message, texts }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsx13("ul", { className: "qsl:mt-2.5 qsl:flex qsl:flex-wrap qsl:gap-2", "aria-label": texts.attachments, children: message.attachments.map((attachment, index) => {
       const isImage = attachment.mediaType.startsWith("image/");
-      return /* @__PURE__ */ jsxs6("li", { className: cn("qsl:relative qsl:flex qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm", isImage ? "qsl:w-[320px]" : "qsl:w-[190px]"), children: [
-        isImage && /* @__PURE__ */ jsx13(
+      if (isImage)
+        return /* @__PURE__ */ jsx13("li", { className: "qsl:relative qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border", children: /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
-            className: "qsl:block qsl:w-full qsl:cursor-zoom-in qsl:bg-secondary",
+            className: "qsl:block qsl:cursor-zoom-in qsl:bg-secondary",
             "aria-label": fillText(texts.enlargeImage ?? defaultTexts.enlargeImage, { name: attachment.name }),
+            title: attachment.name,
             onClick: () => setEnlarged(attachment),
             "data-chat": "attachment-image",
-            children: /* @__PURE__ */ jsx13("img", { className: "qsl:mx-auto qsl:block qsl:max-h-[240px] qsl:max-w-full qsl:object-contain", src: attachment.url, alt: attachment.name, loading: "lazy" })
+            children: /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:size-24 qsl:object-cover", src: attachment.url, alt: attachment.name, loading: "lazy" })
           }
-        ),
+        ) }, `${attachment.url}-${index}`);
+      return /* @__PURE__ */ jsxs6("li", { className: "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-small", children: [
         attachment.mediaType.startsWith("video/") && /* @__PURE__ */ jsx13("video", { className: "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain", src: attachment.url, controls: true, preload: "metadata", "aria-label": attachment.name }),
         /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:[overflow-wrap:anywhere]", children: [
           /* @__PURE__ */ jsx13("a", { className: "qsl:font-medium", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: attachment.name }),
@@ -1903,7 +1907,7 @@ function ImageViewer({ attachment, onClose, texts }) {
         "data-chat": "image-viewer",
         children: attachment && /* @__PURE__ */ jsxs6(Fragment2, { children: [
           /* @__PURE__ */ jsx13("img", { className: "qsl:block qsl:max-h-[calc(100vh-6rem)] qsl:max-w-full qsl:rounded-md qsl:bg-background qsl:object-contain qsl:shadow-lg", src: attachment.url, alt: attachment.name }),
-          /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:items-center qsl:gap-4 qsl:text-sm qsl:text-white", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "qsl:flex qsl:items-center qsl:gap-4 qsl:text-small qsl:text-white", children: [
             /* @__PURE__ */ jsx13("span", { className: "qsl:[overflow-wrap:anywhere]", children: attachment.name }),
             /* @__PURE__ */ jsx13("a", { className: "qsl:underline", href: attachmentDownloadUrl(attachment.url), download: attachment.name, children: texts.downloadAttachment ?? defaultTexts.downloadAttachment }),
             /* @__PURE__ */ jsx13(Dialog.Close, { className: "qsl:cursor-pointer qsl:underline", children: texts.close })
@@ -1994,7 +1998,7 @@ function ChatPanel({
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
-import { PaperclipIcon, SendIcon, XIcon as XIcon3 } from "lucide-react";
+import { PaperclipIcon, SendIcon as SendIcon2, XIcon as XIcon3 } from "lucide-react";
 
 // packages/quassel/src/ui/useFileInput.ts
 import { useRef as useRef5, useState as useState6 } from "react";
@@ -2045,12 +2049,217 @@ function useFileInput({ disabled, onFiles, onPasteText }) {
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
-import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect5, useImperativeHandle, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useContext as useContext4, useEffect as useEffect6, useImperativeHandle, useLayoutEffect as useLayoutEffect5, useRef as useRef8, useState as useState8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// packages/quassel/src/ComposerPrimaryAction.tsx
+import { LoaderCircleIcon, MicIcon, SendIcon, SquareIcon as SquareIcon2 } from "lucide-react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect4, useRef as useRef7, useState as useState7 } from "react";
+
+// packages/quassel/src/RecordingAura.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function RecordingAura({ anchor, level = 0 }) {
+  const aura = useRef6(null);
+  const volume = Number.isFinite(level) ? Math.max(0, Math.min(1, level)) : 0;
+  useLayoutEffect3(() => {
+    const element = aura.current;
+    const view = anchor.ownerDocument.defaultView;
+    if (!element || !view) return;
+    let frame = 0;
+    let visible = true;
+    const observer = new view.IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+    });
+    observer.observe(anchor);
+    const update = () => {
+      const rect = anchor.getBoundingClientRect();
+      const style = view.getComputedStyle(anchor);
+      element.style.left = `${rect.left}px`;
+      element.style.top = `${rect.top}px`;
+      element.style.width = `${rect.width}px`;
+      element.style.height = `${rect.height}px`;
+      element.style.visibility = visible && rect.width && rect.height && anchor.checkVisibility() ? "visible" : "hidden";
+      element.style.setProperty("--qsl-pill-aura-color", style.getPropertyValue("--qsl-pill-aura-color") || style.getPropertyValue("--qsl-destructive"));
+      element.style.setProperty("--qsl-pill-aura-ring-color", style.getPropertyValue("--qsl-pill-aura-ring-color") || style.getPropertyValue("--qsl-pill-aura-color") || style.getPropertyValue("--qsl-destructive"));
+      element.style.zIndex = style.getPropertyValue("--qsl-pill-aura-z-index") || "1000";
+      frame = view.requestAnimationFrame(update);
+    };
+    update();
+    return () => {
+      view.cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [anchor]);
+  return createPortal2(/* @__PURE__ */ jsx15(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "qsl:recording-aura",
+      "data-quassel": "",
+      "data-recording-aura": "",
+      ref: aura,
+      style: { transform: `scale(${1.2 + volume * 0.65})`, opacity: 0.4 + volume * 0.4 }
+    }
+  ), anchor.ownerDocument.body);
+}
+
+// packages/quassel/src/ComposerPrimaryAction.tsx
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function ComposerPrimaryAction({ hasContent, running: running2, sending, disabled, sendDisabled, microphone, texts, onSend, onStop }) {
+  const state = microphone && microphone.state !== "idle" ? microphone.state : hasContent ? "send" : running2 ? "stop" : microphone && !sending ? "microphone" : "send";
+  const voice = state === "microphone" || state === "preparing" || state === "recording";
+  const busy = state === "preparing" || state === "transcribing";
+  const blocked = disabled || state === "transcribing" || state === "send" && (sendDisabled || sending || !hasContent) || state === "stop" && !onStop;
+  const label = state === "microphone" ? microphone?.label ?? texts.microphone : state === "preparing" ? texts.microphonePreparing : state === "recording" ? texts.microphoneRecording : state === "transcribing" ? texts.microphoneTranscribing : state === "stop" ? texts.stop : running2 ? texts.sendIntoRun : texts.send;
+  const [button, setButton] = useState7(null);
+  const press = useRef7(null);
+  const suppressClick = useRef7(false);
+  const clickReset = useRef7(void 0);
+  const currentMicrophone = useRef7(microphone);
+  const resetClick = () => {
+    clearTimeout(clickReset.current);
+    clickReset.current = setTimeout(() => {
+      suppressClick.current = false;
+    }, 0);
+  };
+  const cancel = () => {
+    const active = press.current;
+    press.current = null;
+    if (active) resetClick();
+    const current = currentMicrophone.current;
+    if (active) active.microphone.onCancel();
+    else if (current?.state === "recording" || current?.state === "preparing") current.onCancel();
+  };
+  useLayoutEffect4(() => {
+    currentMicrophone.current = microphone;
+  }, [microphone]);
+  useEffect5(() => {
+    if (disabled) cancel();
+  }, [disabled]);
+  useEffect5(() => {
+    if (!button) return;
+    const document2 = button.ownerDocument;
+    const view = document2.defaultView;
+    const onVisibility = () => {
+      if (document2.hidden) cancel();
+    };
+    const onEscape = (event) => {
+      if (event.key === "Escape" && (press.current || currentMicrophone.current?.state === "recording" || currentMicrophone.current?.state === "preparing")) {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    view.addEventListener("blur", cancel);
+    document2.addEventListener("visibilitychange", onVisibility);
+    document2.addEventListener("keydown", onEscape);
+    return () => {
+      view.removeEventListener("blur", cancel);
+      document2.removeEventListener("visibilitychange", onVisibility);
+      document2.removeEventListener("keydown", onEscape);
+      cancel();
+      clearTimeout(clickReset.current);
+    };
+  }, [button]);
+  const start = (source, timeStamp, pointerId, key) => {
+    if (!voice || state === "preparing" || blocked || !microphone || press.current) return;
+    press.current = { source, pointerId, key, microphone };
+    clearTimeout(clickReset.current);
+    suppressClick.current = true;
+    microphone.onPressStart({ source, timeStamp });
+  };
+  const end = (timeStamp) => {
+    const active = press.current;
+    press.current = null;
+    resetClick();
+    active?.microphone.onPressEnd({ source: active.source, timeStamp });
+  };
+  const activationKey = (event) => (event.key === " " || event.key === "Enter") && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229;
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    state === "recording" && button && /* @__PURE__ */ jsx16(RecordingAura, { anchor: button, level: microphone?.level }),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        "aria-busy": busy || void 0,
+        "aria-label": label,
+        "aria-pressed": voice ? state === "recording" : void 0,
+        className: "qsl:primary-action",
+        "data-primary-action": state,
+        disabled: blocked,
+        onBlur: () => {
+          if (press.current?.source === "keyboard") cancel();
+        },
+        onClick: (event) => {
+          if (suppressClick.current) {
+            suppressClick.current = false;
+            return;
+          }
+          if (voice && event.detail === 0) {
+            start("virtual", event.timeStamp);
+            end(event.timeStamp);
+            suppressClick.current = false;
+          } else if (state === "send") onSend();
+          else if (state === "stop") onStop?.();
+        },
+        onContextMenu: (event) => {
+          if (voice) event.preventDefault();
+        },
+        onKeyDown: (event) => {
+          if (activationKey(event) && event.repeat) {
+            event.preventDefault();
+            return;
+          }
+          if (!voice) {
+            suppressClick.current = false;
+            return;
+          }
+          if (activationKey(event)) {
+            event.preventDefault();
+            start("keyboard", event.timeStamp, void 0, event.key);
+          }
+        },
+        onKeyUp: (event) => {
+          if (activationKey(event) && (voice || press.current?.source === "keyboard")) {
+            event.preventDefault();
+            if (press.current?.source === "keyboard" && press.current.key === event.key) end(event.timeStamp);
+          }
+        },
+        onLostPointerCapture: (event) => {
+          if (press.current?.pointerId === event.pointerId) cancel();
+        },
+        onPointerCancel: (event) => {
+          if (press.current?.pointerId === event.pointerId) cancel();
+        },
+        onPointerDown: (event) => {
+          suppressClick.current = false;
+          if (event.button !== 0 || event.isPrimary === false) return;
+          start("pointer", event.timeStamp, event.pointerId);
+          if (press.current?.pointerId === event.pointerId) event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerUp: (event) => {
+          if (press.current?.source === "pointer" && press.current.pointerId === event.pointerId) end(event.timeStamp);
+        },
+        ref: setButton,
+        title: state === "microphone" ? texts.microphoneHint : label,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "microphone" || state === "recording", children: /* @__PURE__ */ jsx16(MicIcon, {}) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "send", children: /* @__PURE__ */ jsx16(SendIcon, {}) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": state === "stop", children: /* @__PURE__ */ jsx16(SquareIcon2, { fill: "currentColor" }) }),
+          /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:primary-icon", "data-active": busy, children: /* @__PURE__ */ jsx16(LoaderCircleIcon, { className: "qsl:motion-safe:animate-spin" }) }),
+          state === "recording" && /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "qsl:recording-dot" })
+        ]
+      }
+    )
+  ] });
+}
+
+// packages/quassel/src/ChatInputToolbar.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var COMPACT_WIDTH_PX = 480;
-var errorClasses = "qsl:px-3 qsl:py-2 qsl:text-sm qsl:text-destructive";
-var attachmentItemClasses = "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-sm";
+var errorClasses = "qsl:px-3 qsl:py-2 qsl:text-small qsl:text-destructive";
+var attachmentItemClasses = "qsl:relative qsl:flex qsl:w-[190px] qsl:max-w-full qsl:min-w-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-lg qsl:border qsl:border-border qsl:text-small";
 var attachmentMediaClasses = "qsl:block qsl:h-[112px] qsl:w-full qsl:bg-secondary qsl:object-contain";
 function ChatInputToolbar({
   onSend,
@@ -2067,6 +2276,8 @@ function ChatInputToolbar({
   actions,
   toolbarLeft,
   toolbarRight,
+  microphone,
+  replaceInput,
   texts,
   handleRef,
   attachments: attachmentsEnabled = true,
@@ -2082,21 +2293,21 @@ function ChatInputToolbar({
   const sendScope = useContext4(ChatSendContext);
   const allTexts = { ...defaultTexts, ...texts };
   const { Button: Button2, StopButton: StopButton2, Toggle: Toggle2 } = useQuasselComponents();
-  const [draft, setDraft] = useState7(initialValue);
-  const [sending, setSending] = useState7(false);
-  const [sendError, setSendError] = useState7();
-  const [failedSubmissions, setFailedSubmissions] = useState7([]);
-  const nextFailedId = useRef6(0);
-  const pendingSend = useRef6(false);
-  const generation = useRef6(0);
-  useLayoutEffect3(() => () => {
+  const [draft, setDraft] = useState8(initialValue);
+  const [sending, setSending] = useState8(false);
+  const [sendError, setSendError] = useState8();
+  const [failedSubmissions, setFailedSubmissions] = useState8([]);
+  const nextFailedId = useRef8(0);
+  const pendingSend = useRef8(false);
+  const generation = useRef8(0);
+  useLayoutEffect5(() => () => {
     generation.current += 1;
   }, []);
-  const draftRevision = useRef6(0);
-  const [attachments, setAttachments] = useState7([]);
-  const attachmentsRef = useRef6([]);
-  const nextAttachmentId = useRef6(0);
-  const [attachmentError, setAttachmentError] = useState7();
+  const draftRevision = useRef8(0);
+  const [attachments, setAttachments] = useState8([]);
+  const attachmentsRef = useRef8([]);
+  const nextAttachmentId = useRef8(0);
+  const [attachmentError, setAttachmentError] = useState8();
   const updateAttachments = (update) => {
     attachmentsRef.current = update(attachmentsRef.current);
     setAttachments(attachmentsRef.current);
@@ -2127,10 +2338,11 @@ function ChatInputToolbar({
       );
     }
   };
-  const rootRef = useRef6(null);
-  const textareaRef = useRef6(null);
-  const autoFocusSettled = useRef6(false);
-  useEffect5(() => {
+  const rootRef = useRef8(null);
+  const textareaRef = useRef8(null);
+  const composing = useRef8(false);
+  const autoFocusSettled = useRef8(false);
+  useEffect6(() => {
     if (!autoFocus || autoFocusSettled.current) return;
     const input2 = textareaRef.current;
     if (!input2) return;
@@ -2175,8 +2387,8 @@ function ChatInputToolbar({
       window.removeEventListener("blur", settle);
     };
   }, [autoFocus, disabled, onAutoFocusSettled]);
-  const [compact, setCompact] = useState7(false);
-  const pendingFocus = useRef6(false);
+  const [compact, setCompact] = useState8(false);
+  const pendingFocus = useRef8(false);
   const fileInput = useFileInput({
     disabled: disabled || sending,
     onFiles: addFiles,
@@ -2192,17 +2404,21 @@ function ChatInputToolbar({
   });
   const toolbar = layout === "toolbar";
   const inline = layout === "inline";
-  const inputRows = inline || toolbar ? 1 : rows;
-  const inputMaxRows = toolbar ? 1 : inline ? maxRows ?? 1 : maxRows;
+  const pill = layout === "pill";
+  const inputRows = inline || toolbar || pill ? 1 : rows;
+  const inputMaxRows = toolbar ? 1 : pill ? maxRows ?? 6 : inline ? maxRows ?? 1 : maxRows;
+  const microphoneBusy = pill && !!microphone && microphone.state !== "idle";
+  const replacingInput = pill && replaceInput !== void 0 && replaceInput !== null && typeof replaceInput !== "boolean";
   const rootClasses = cn(
-    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
-    "qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
+    "qsl:flex qsl:shrink-0 qsl:flex-col",
+    pill ? "qsl:min-w-0" : "qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,--theme(--radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary qsl:in-data-[tone=material]:rounded-xl qsl:in-data-[tone=material]:border-glass-edge/50 qsl:in-data-[tone=material]:bg-background",
     toolbar && "qsl:h-full qsl:min-w-0 qsl:flex-row qsl:items-center qsl:rounded-lg qsl:data-[working=true]:animate-working-pulse qsl:data-[working=true]:border-primary qsl:motion-reduce:data-[working=true]:animate-none",
     fileInput.dragging && "qsl:outline-2 qsl:outline-offset-[3px] qsl:outline-dashed qsl:outline-primary"
   );
   const textareaClasses = cn(
-    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-chat qsl:leading-[var(--qsl-chat-line-height,1.65)] qsl:text-foreground qsl:placeholder:text-muted-foreground qsl:focus:outline-none",
-    inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px] qsl:leading-[1.3]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
+    "qsl:resize-none qsl:overscroll-contain qsl:border-0 qsl:bg-transparent qsl:text-foreground qsl:placeholder:text-muted-foreground",
+    !pill && "qsl:text-body qsl:focus:outline-none",
+    pill ? "qsl:pill-input" : inline ? "qsl:min-w-0 qsl:flex-1 qsl:px-2.5 qsl:py-2" : toolbar ? "qsl:w-full qsl:min-w-0 qsl:flex-auto qsl:px-2 qsl:py-[3px]" : "qsl:px-3 qsl:pt-3 qsl:pb-2"
   );
   const toolbarRowClasses = cn(
     "qsl:flex qsl:items-center qsl:gap-2 qsl:border-t qsl:border-border-soft qsl:px-2 qsl:py-1.5 qsl:in-data-[tone=overseer-details]:flex-nowrap",
@@ -2237,10 +2453,10 @@ function ChatInputToolbar({
       fileInput.clearDragging();
     }
   }));
-  useEffect5(() => {
+  useEffect6(() => {
     onDraftChange?.(draft);
   }, [draft, onDraftChange]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!pendingFocus.current) {
       return;
     }
@@ -2257,7 +2473,7 @@ function ChatInputToolbar({
       return;
     }
     const style = getComputedStyle(element);
-    const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.4;
+    const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5;
     const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
     const maximum = lineHeight * Math.max(inputMaxRows, inputRows) + padding;
     element.style.height = "auto";
@@ -2265,10 +2481,10 @@ function ChatInputToolbar({
     element.style.height = `${Math.min(contentHeight, maximum)}px`;
     element.style.overflowY = contentHeight > maximum ? "auto" : "hidden";
   }, [inputMaxRows, inputRows]);
-  useEffect5(() => {
+  useEffect6(() => {
     applyAutoGrow();
-  }, [draft, applyAutoGrow]);
-  useEffect5(() => {
+  }, [draft, replacingInput, applyAutoGrow]);
+  useEffect6(() => {
     const element = textareaRef.current;
     if (!element || inputMaxRows === void 0) {
       return;
@@ -2282,8 +2498,8 @@ function ChatInputToolbar({
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [inputMaxRows, applyAutoGrow]);
-  useEffect5(() => {
+  }, [inputMaxRows, replacingInput, applyAutoGrow]);
+  useEffect6(() => {
     const element = rootRef.current;
     if (!element) {
       return;
@@ -2295,7 +2511,7 @@ function ChatInputToolbar({
     return () => observer.disconnect();
   }, []);
   const hasAttachments = attachments.length > 0;
-  useEffect5(() => {
+  useEffect6(() => {
     onAttachmentsChange?.(hasAttachments);
   }, [hasAttachments, onAttachmentsChange]);
   const capabilityError = hasAttachments && attachmentCapabilitiesError ? attachmentCapabilitiesError : attachmentCapabilities ? attachmentCapabilityError(attachments.map((entry) => ({
@@ -2306,13 +2522,13 @@ function ChatInputToolbar({
   const preparing = attachments.some((entry) => entry.status === "reading");
   const attachmentBlocked = attachments.some((entry) => entry.status !== "ready");
   const currentError = sendError ?? attachmentError ?? capabilityError ?? attachments.find((entry) => entry.status === "error")?.error;
-  useEffect5(() => {
+  useEffect6(() => {
     onErrorChange?.(currentError);
   }, [currentError, onErrorChange]);
   const send = async (onSubmit = onSend, allowEmpty = false) => {
     const text = draft.trim();
     const snapshot = attachmentsRef.current;
-    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
+    if (!allowEmpty && !text && !snapshot.length || disabled || sendDisabled || microphoneBusy || replacingInput || pendingSend.current || capabilityError || snapshot.some((entry) => entry.status !== "ready")) {
       return;
     }
     pendingSend.current = true;
@@ -2357,21 +2573,21 @@ function ChatInputToolbar({
     }
   };
   const onKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (sendShortcut === "enter" || event.metaKey || event.ctrlKey)) {
+    if (event.key === "Enter" && !event.shiftKey && !composing.current && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229 && (sendShortcut === "enter" || event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       if (!event.repeat) void send();
     }
   };
-  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx15("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl:overscroll-contain qsl:px-3 qsl:pt-2.5 qsl:in-data-[tone=overseer-details]:max-h-40 qsl:in-data-[tone=overseer-details]:overflow-y-auto", "aria-label": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs8("li", { className: attachmentItemClasses, children: [
-    entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx15("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
-    entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx15("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
-    /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
-      /* @__PURE__ */ jsx15("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
-      /* @__PURE__ */ jsx15("small", { children: formatAttachmentSize(entry.file.size) }),
-      entry.status === "reading" && /* @__PURE__ */ jsx15("small", { role: "status", children: allTexts.attachmentPreparing }),
-      entry.status === "error" && /* @__PURE__ */ jsx15("small", { role: "alert", children: entry.error })
+  const attachmentPreviews = attachments.length > 0 && /* @__PURE__ */ jsx17("ul", { className: "qsl:flex qsl:max-h-[240px] qsl:flex-wrap qsl:gap-2 qsl:overflow-y-auto qsl:overscroll-contain qsl:px-3 qsl:pt-2.5 qsl:in-data-[tone=overseer-details]:max-h-40 qsl:in-data-[tone=overseer-details]:overflow-y-auto", "aria-label": allTexts.attachments, children: attachments.map((entry) => /* @__PURE__ */ jsxs9("li", { className: attachmentItemClasses, children: [
+    entry.status === "ready" && entry.input.mediaType.startsWith("image/") && /* @__PURE__ */ jsx17("img", { className: attachmentMediaClasses, src: `data:${entry.input.mediaType};base64,${entry.input.data}`, alt: entry.file.name }),
+    entry.status === "ready" && entry.input.mediaType.startsWith("video/") && /* @__PURE__ */ jsx17("video", { className: attachmentMediaClasses, controls: true, preload: "metadata", "aria-label": entry.file.name, src: `data:${entry.input.mediaType};base64,${entry.input.data}` }),
+    /* @__PURE__ */ jsxs9("div", { className: "qsl:flex qsl:flex-col qsl:gap-1 qsl:p-2 qsl:pr-8 qsl:[overflow-wrap:anywhere]", children: [
+      /* @__PURE__ */ jsx17("span", { className: "qsl:font-medium", title: entry.file.name, children: entry.file.name }),
+      /* @__PURE__ */ jsx17("small", { children: formatAttachmentSize(entry.file.size) }),
+      entry.status === "reading" && /* @__PURE__ */ jsx17("small", { role: "status", children: allTexts.attachmentPreparing }),
+      entry.status === "error" && /* @__PURE__ */ jsx17("small", { role: "alert", children: entry.error })
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(
       Button2,
       {
         "aria-label": fillText(allTexts.removeAttachment, { name: entry.file.name }),
@@ -2385,16 +2601,16 @@ function ChatInputToolbar({
         size: "icon-sm",
         title: fillText(allTexts.removeAttachment, { name: entry.file.name }),
         variant: "outline",
-        children: /* @__PURE__ */ jsx15(XIcon3, {})
+        children: /* @__PURE__ */ jsx17(XIcon3, {})
       }
     )
   ] }, entry.id)) });
-  const errors = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    capabilityError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: capabilityError }),
-    attachmentError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: attachmentError }),
-    sendError && /* @__PURE__ */ jsx15("p", { className: errorClasses, role: "alert", children: sendError }),
-    failedSubmissions.map((failed) => /* @__PURE__ */ jsxs8("div", { className: cn(errorClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-2"), role: "status", children: [
-      /* @__PURE__ */ jsxs8("span", { children: [
+  const errors = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    capabilityError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: capabilityError }),
+    attachmentError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: attachmentError }),
+    sendError && /* @__PURE__ */ jsx17("p", { className: errorClasses, role: "alert", children: sendError }),
+    failedSubmissions.map((failed) => /* @__PURE__ */ jsxs9("div", { className: cn(errorClasses, "qsl:flex qsl:flex-wrap qsl:items-center qsl:gap-2"), role: "status", children: [
+      /* @__PURE__ */ jsxs9("span", { children: [
         allTexts.notSent,
         " ",
         failed.draft.slice(0, 100),
@@ -2402,7 +2618,7 @@ function ChatInputToolbar({
         failed.attachments.length > 0 ? ` ${fillText(allTexts.notSentAttachments, { count: failed.attachments.length })}` : "",
         " "
       ] }),
-      /* @__PURE__ */ jsx15(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
+      /* @__PURE__ */ jsx17(Button2, { disabled: disabled || sending, size: "sm", variant: "outline", onClick: () => {
         try {
           validateAttachmentSelection(attachmentsRef.current.map((entry) => entry.file), failed.attachments.map((entry) => entry.file), allTexts);
         } catch (error) {
@@ -2418,9 +2634,9 @@ function ChatInputToolbar({
       }, children: allTexts.insertUnsent })
     ] }, failed.id))
   ] });
-  const sendButtons = /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    running2 && onStop && !hasContent && /* @__PURE__ */ jsx15(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
-    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx15(
+  const sendButtons = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    running2 && onStop && !hasContent && /* @__PURE__ */ jsx17(StopButton2, { className: "qsl:flex-none", label: allTexts.stop, onClick: onStop, size: "icon-sm" }),
+    (!running2 || !onStop || hasContent) && /* @__PURE__ */ jsx17(
       Button2,
       {
         "aria-label": allTexts.send,
@@ -2431,53 +2647,62 @@ function ChatInputToolbar({
         },
         size: "icon-sm",
         title: running2 ? allTexts.sendIntoRun : allTexts.send,
-        children: /* @__PURE__ */ jsx15(SendIcon, { size: 14 })
+        children: /* @__PURE__ */ jsx17(SendIcon2, { size: 14 })
       }
     )
   ] });
-  const detailToolbar = /* @__PURE__ */ jsxs8("div", { className: toolbarRowClasses, "data-input": "controls", children: [
-    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-none", inline || toolbar ? "qsl:flex-none" : "qsl:flex-auto"), children: [
-      attachmentsEnabled && /* @__PURE__ */ jsx15(
-        Button2,
-        {
-          "aria-label": allTexts.attachFiles,
-          disabled: disabled || sending,
-          onClick: () => fileInput.inputRef.current?.click(),
-          size: "icon-sm",
-          title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
-          variant: "ghost",
-          children: /* @__PURE__ */ jsx15(PaperclipIcon, {})
-        }
-      ),
-      preparing && /* @__PURE__ */ jsx15("span", { className: cn("qsl:text-xs qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
-      actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs8(Button2, { disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
-        action.icon,
-        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
-      ] }, index) : /* @__PURE__ */ jsxs8(Toggle2, { disabled: action.disabled, onPressedChange: () => action.onClick(), pressed: action.active, size: "sm", title: action.title ?? action.label, children: [
-        action.icon,
-        action.label && /* @__PURE__ */ jsx15("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
-      ] }, index)),
+  const actionButtons = actions?.map((action, index) => action.active === void 0 ? /* @__PURE__ */ jsxs9(Button2, { "aria-label": action.label ?? action.title, disabled: action.disabled, onClick: action.onClick, size: "sm", title: action.title ?? action.label, variant: "ghost", children: [
+    action.icon,
+    action.label && /* @__PURE__ */ jsx17("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+  ] }, index) : /* @__PURE__ */ jsxs9(Toggle2, { "aria-label": action.label ?? action.title, disabled: action.disabled, onPressedChange: () => action.onClick(), pressed: action.active, size: "sm", title: action.title ?? action.label, children: [
+    action.icon,
+    action.label && /* @__PURE__ */ jsx17("span", { className: action.icon ? "qsl:in-data-[compact=true]:hidden" : void 0, children: action.label })
+  ] }, index));
+  const attachButton = attachmentsEnabled && /* @__PURE__ */ jsx17(
+    Button2,
+    {
+      "aria-label": allTexts.attachFiles,
+      disabled: disabled || sending,
+      onClick: () => fileInput.inputRef.current?.click(),
+      size: "icon-sm",
+      title: fillText(allTexts.attachFilesHint, { count: MAX_CHAT_ATTACHMENTS, size: maxAttachmentSizeLabel }),
+      variant: "ghost",
+      children: /* @__PURE__ */ jsx17(PaperclipIcon, {})
+    }
+  );
+  const detailToolbar = /* @__PURE__ */ jsxs9("div", { className: toolbarRowClasses, "data-input": "controls", children: [
+    /* @__PURE__ */ jsxs9("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-none", inline || toolbar ? "qsl:flex-none" : "qsl:flex-auto"), children: [
+      attachButton,
+      preparing && /* @__PURE__ */ jsx17("span", { className: cn("qsl:text-small qsl:text-muted-foreground", inline && "qsl:sr-only"), role: "status", children: allTexts.attachmentsPreparing }),
+      actionButtons,
       toolbarLeft
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-1", inline || toolbar ? "qsl:flex-none" : "qsl:flex-[0_1_auto]"), children: [
+    /* @__PURE__ */ jsxs9("div", { className: cn(toolbarSideClasses, "qsl:in-data-[tone=overseer-details]:flex-1", inline || toolbar ? "qsl:flex-none" : "qsl:flex-[0_1_auto]"), children: [
       toolbarRight,
       !toolbar && sendButtons
     ] })
   ] });
-  const details = /* @__PURE__ */ jsxs8("div", { className: "qsl:min-w-0", "data-compact": compact, "data-quassel": "", children: [
+  const details = /* @__PURE__ */ jsxs9("div", { className: "qsl:min-w-0", "data-compact": compact, "data-quassel": "", children: [
     attachmentPreviews,
     errors,
     detailToolbar
   ] });
-  const input = /* @__PURE__ */ jsx15(
+  const input = /* @__PURE__ */ jsx17(
     "textarea",
     {
       "aria-controls": inputAriaControls,
       className: textareaClasses,
       "aria-label": allTexts.placeholder,
-      disabled: !toolbar && disabled,
+      disabled: !toolbar && (disabled || microphoneBusy),
+      hidden: replacingInput,
       readOnly: toolbar && disabled,
       onChange: (event) => changeDraft(event.target.value),
+      onCompositionStart: () => {
+        composing.current = true;
+      },
+      onCompositionEnd: () => {
+        composing.current = false;
+      },
       onKeyDown,
       placeholder: running2 ? allTexts.steeringPlaceholder : allTexts.placeholder,
       ref: textareaRef,
@@ -2485,7 +2710,7 @@ function ChatInputToolbar({
       value: draft
     }
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: rootClasses,
@@ -2496,7 +2721,7 @@ function ChatInputToolbar({
       ref: rootRef,
       ...attachmentsEnabled ? fileInput.dropProps : {},
       children: [
-        attachmentsEnabled && /* @__PURE__ */ jsx15(
+        attachmentsEnabled && /* @__PURE__ */ jsx17(
           "input",
           {
             "aria-label": allTexts.attachFiles,
@@ -2507,17 +2732,48 @@ function ChatInputToolbar({
           }
         ),
         !toolbar && attachmentPreviews,
-        inline ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        pill ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
           errors,
-          /* @__PURE__ */ jsxs8("div", { className: "qsl:flex qsl:min-w-0 qsl:items-end", children: [
+          preparing && /* @__PURE__ */ jsx17("span", { className: "qsl:sr-only", role: "status", children: allTexts.attachmentsPreparing }),
+          /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-row", "data-input": "pill", children: [
+            (actionButtons?.length || toolbarLeft) && /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-slot", "data-input": "left", children: [
+              actionButtons,
+              toolbarLeft
+            ] }),
+            input,
+            replacingInput && /* @__PURE__ */ jsx17("div", { className: "qsl:pill-replacement", "data-input": "replacement", children: replaceInput }),
+            (toolbarRight || attachmentsEnabled) && /* @__PURE__ */ jsxs9("div", { className: "qsl:pill-slot", "data-input": "right", children: [
+              toolbarRight,
+              attachButton
+            ] }),
+            /* @__PURE__ */ jsx17(
+              ComposerPrimaryAction,
+              {
+                disabled,
+                hasContent,
+                microphone,
+                onSend: () => {
+                  void send();
+                },
+                onStop,
+                running: running2,
+                sendDisabled: sendDisabled || attachmentBlocked || !!capabilityError || replacingInput,
+                sending,
+                texts: allTexts
+              }
+            )
+          ] })
+        ] }) : inline ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          errors,
+          /* @__PURE__ */ jsxs9("div", { className: "qsl:flex qsl:min-w-0 qsl:items-end", children: [
             input,
             detailToolbar
           ] })
         ] }) : input,
-        toolbar ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx15("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-1 qsl:p-1", children: sendButtons }),
-          detailsContainer && createPortal2(details, detailsContainer)
-        ] }) : !inline && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        toolbar ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx17("div", { className: "qsl:flex qsl:flex-none qsl:items-center qsl:gap-1 qsl:p-1", children: sendButtons }),
+          detailsContainer && createPortal3(details, detailsContainer)
+        ] }) : !inline && !pill && /* @__PURE__ */ jsxs9(Fragment4, { children: [
           errors,
           detailToolbar
         ] })
@@ -2528,7 +2784,7 @@ function ChatInputToolbar({
 
 // packages/quassel/src/DetailModeSwitch.tsx
 import { CircleDotIcon, EyeOffIcon, ListCollapseIcon, ListIcon, ShapesIcon, TagsIcon, TextAlignJustifyIcon } from "lucide-react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var DETAIL_MODES = ["off", "current", "icons", "chips", "grouped", "compact", "full"];
 var TEXT_KEYS = {
   off: "detailModeOff",
@@ -2562,18 +2818,18 @@ function DetailModeSwitch({
   const next2 = modes[(current < 0 ? 0 : current + 1) % modes.length];
   const Icon = ICONS[mode];
   const title = `${allTexts.detailModeTitle}: ${detailModeLabel(mode, texts)}`;
-  return /* @__PURE__ */ jsx16(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx16(Icon, {}) });
+  return /* @__PURE__ */ jsx18(Button2, { "aria-label": title, className, onClick: () => onChange(next2), size: "icon-sm", title, variant: "ghost", children: /* @__PURE__ */ jsx18(Icon, {}) });
 }
 
 // packages/quassel/src/TranscriptModeSwitch.tsx
 import { MessagesSquareIcon, MessageSquareIcon } from "lucide-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function TranscriptModeSwitch({ mode, onChange, texts, className }) {
   const labels = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
   const latest = mode === "latest";
   const title = latest ? labels.showAllMessages : labels.showLatestExchange;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Button2,
     {
       "aria-label": title,
@@ -2583,19 +2839,19 @@ function TranscriptModeSwitch({ mode, onChange, texts, className }) {
       size: "icon-sm",
       title,
       variant: "ghost",
-      children: latest ? /* @__PURE__ */ jsx17(MessageSquareIcon, {}) : /* @__PURE__ */ jsx17(MessagesSquareIcon, {})
+      children: latest ? /* @__PURE__ */ jsx19(MessageSquareIcon, {}) : /* @__PURE__ */ jsx19(MessagesSquareIcon, {})
     }
   );
 }
 
 // packages/quassel/src/TimestampSwitch.tsx
 import { ClockFadingIcon, ClockIcon } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
   const labels = { ...defaultTexts, ...texts };
   const { Button: Button2 } = useQuasselComponents();
   const title = showTimestamps ? labels.hideTimestamps : labels.showTimestamps;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     Button2,
     {
       "aria-label": title,
@@ -2605,7 +2861,7 @@ function TimestampSwitch({ showTimestamps, onChange, texts, className }) {
       size: "icon-sm",
       title,
       variant: "ghost",
-      children: showTimestamps ? /* @__PURE__ */ jsx18(ClockIcon, {}) : /* @__PURE__ */ jsx18(ClockFadingIcon, {})
+      children: showTimestamps ? /* @__PURE__ */ jsx20(ClockIcon, {}) : /* @__PURE__ */ jsx20(ClockFadingIcon, {})
     }
   );
 }