quassel 0.2.0 → 0.2.2

package/ChatMessages.d.ts

@@ -7,7 +7,7 @@ import { type ChatAppearance, type TimestampOptions, type CodeBlockOptions, type
  * Der Verlauf: eigener Scroll-Container mit Autoscroll, solange man unten ist,
  * und einem Zum-Ende-Knopf, sobald man liest. Ohne Eingabe read-only nutzbar.
  */
-export declare function ChatMessages({ messages, owner, detailMode, running, working, stepsExpandable, texts, toolArgumentsText, renderTool, renderAction, onDismissAction, onLinkClick, emptyState, className, showTimestamps, announce, scrollerRef, maxWidth, horizontalPadding, jumpToEndThreshold, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, }: {
+export declare function ChatMessages({ messages, owner, detailMode, running, working, stepsExpandable, texts, toolArgumentsText, renderTool, renderAction, onDismissAction, onLinkClick, emptyState, className, scrollerClassName, showTimestamps, announce, scrollerRef, maxWidth, horizontalPadding, jumpToEndThreshold, appearance, timestampOptions, codeBlockOptions, bubbleOptions, messageActions, }: {
     messages: Message[];
     /** Beiträge mit diesem Message.sender erscheinen ohne Sprechblase; null behält die Nachrichtenvorgaben. */
     owner?: string | null;
@@ -27,6 +27,8 @@ export declare function ChatMessages({ messages, owner, detailMode, running, wor
     onLinkClick?: LinkClickHandler;
     emptyState?: ReactNode;
     className?: string;
+    /** Klassen des Hosts für den Scroll-Container (data-quassel-transcript). */
+    scrollerClassName?: string;
     /** true = dezente HH:MM-Spalte links an jedem Block (Message.at). */
     showTimestamps?: boolean;
     /** Screenreader-Ansage fertiger Antworten und neuer Aktionen; false = der Host sagt selbst an. */

package/QuasselProvider.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from "react";
+import { type ComponentType, type ReactNode, type RefObject } from "react";
 export type QuasselButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
 export type QuasselButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
 export interface QuasselButtonProps {
@@ -45,6 +45,9 @@ export interface QuasselPopoverAnchor {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
 }
+/** Where popovers mount: an element, a ref or a getter; resolved when the popover opens. */
+export type QuasselPortalTarget = HTMLElement | ShadowRoot;
+export type QuasselPortalContainer = QuasselPortalTarget | RefObject<QuasselPortalTarget | null> | (() => QuasselPortalTarget | null | undefined);
 export interface QuasselPopoverContentProps {
     anchor?: QuasselPopoverAnchor;
     align?: "start" | "center" | "end";
@@ -53,6 +56,8 @@ export interface QuasselPopoverContentProps {
     collisionPadding?: number;
     className?: string;
     "aria-label"?: string;
+    /** The resolved portalContainer of QuasselProvider; undefined = document.body. */
+    portalContainer?: QuasselPortalTarget;
     children?: ReactNode;
 }
 /** The primitives quassel renders; a host replaces any of them through QuasselProvider. */
@@ -65,12 +70,15 @@ export interface QuasselComponents {
     PopoverContent: ComponentType<QuasselPopoverContentProps>;
 }
 export declare const defaultComponents: QuasselComponents;
-export declare function QuasselProvider({ components, allowUrl, children }: {
+export declare function QuasselProvider({ components, allowUrl, portalContainer, children }: {
     /** Replaces single primitives; the rest stay the built-in ones or those of an outer provider. */
     components?: Partial<QuasselComponents>;
     /** Keeps Markdown link and image URLs that the default policy (http, https, mailto, tel, ftp, irc, xmpp, relative) would drop. */
     allowUrl?: (url: string) => boolean;
+    /** Mounts quassel's popovers inside this element instead of document.body, e.g. within the host's theme wrapper. */
+    portalContainer?: QuasselPortalContainer;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare const useQuasselComponents: () => QuasselComponents;
 export declare const useAllowUrl: () => ((url: string) => boolean) | undefined;
+export declare function useQuasselPortalContainer(): QuasselPortalTarget | undefined;

package/README.md

@@ -4,7 +4,7 @@ Chat building blocks for React: a streaming transcript with thinking and tool st
 actions, an input card with attachments and steering, and a small event contract that works
 on the server as well. quassel is the chat of [RAgents](https://github.com/SchlenkR/RAgents),
 published as a library. It ships a compiled stylesheet, so hosts need no Tailwind, and every
-color, radius and font is a `--qsl-*` variable.
+color, radius, font and font size is a `--qsl-*` variable.
 
 ![An agent chat with grouped steps, timestamps, Markdown and the input card](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/agent.png)
 
@@ -27,7 +27,9 @@ rendering per action owner. Resolved actions stay in the transcript as a record.
 </p>
 
 **Your look, not a fork.** Override `--qsl-*` variables on any wrapper, switch light and dark
-with `data-theme`, or hand quassel your own Button, Toggle, Card and Popover components.
+with `data-theme`, or hand quassel your own Button, Toggle, Card and Popover components. With
+`portalContainer` on `QuasselProvider`, popovers render inside your wrapper and pick up its
+variables too.
 
 ![Default, sunset and emerald themes](https://raw.githubusercontent.com/SchlenkR/quassel/main/docs/images/themes.png)
 

package/chat.css

@@ -18,11 +18,12 @@
     --qsl-font-weight-semibold: 600;
     --qsl-leading-normal: 1.5;
     --qsl-leading-relaxed: 1.625;
-    --qsl-radius-md: calc(var(--qsl-radius) * 0.8);
-    --qsl-radius-xl: calc(var(--qsl-radius) * 1.4);
     --qsl-animate-spin: qsl-spin 1s linear infinite;
     --qsl-default-transition-duration: 150ms;
     --qsl-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --qsl-text-meta: 10.5px;
+    --qsl-text-trace: 11px;
+    --qsl-text-label: 0.72rem;
     --qsl-radius-panel: 17px;
     --qsl-animate-fade-pulse: qsl-fade-pulse 1.9s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
     --qsl-animate-working-pulse: qsl-working-pulse 1.6s ease-in-out infinite;
@@ -405,32 +406,32 @@
   .qsl\:overflow-y-auto {
     overflow-y: auto;
   }
-  .qsl\:rounded-\[10px_10px_4px_10px\] {
-    border-radius: 10px 10px 4px 10px;
+  .qsl\:rounded-\[min\(--theme\(--radius-md\)\,10px\)\] {
+    border-radius: min(var(--qsl-radius-md, calc(var(--qsl-radius) * 0.8)), 10px);
   }
-  .qsl\:rounded-\[min\(var\(--qsl-radius-md\)\,10px\)\] {
-    border-radius: min(var(--qsl-radius-md), 10px);
+  .qsl\:rounded-\[min\(--theme\(--radius-md\)\,12px\)\] {
+    border-radius: min(var(--qsl-radius-md, calc(var(--qsl-radius) * 0.8)), 12px);
   }
-  .qsl\:rounded-\[min\(var\(--qsl-radius-md\)\,12px\)\] {
-    border-radius: min(var(--qsl-radius-md), 12px);
+  .qsl\:rounded-\[var\(--qsl-bubble-radius\,10px_10px_4px_10px\)\] {
+    border-radius: var(--qsl-bubble-radius,10px 10px 4px 10px);
   }
-  .qsl\:rounded-\[var\(--qsl-input-card-radius\,var\(--qsl-radius-xl\)\)\] {
-    border-radius: var(--qsl-input-card-radius,var(--qsl-radius-xl));
+  .qsl\:rounded-\[var\(--qsl-input-card-radius\,--theme\(--radius-xl\)\)\] {
+    border-radius: var(--qsl-input-card-radius,var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4)));
   }
   .qsl\:rounded-full {
     border-radius: calc(infinity * 1px);
   }
   .qsl\:rounded-lg {
-    border-radius: var(--qsl-radius);
+    border-radius: var(--qsl-radius-lg, var(--qsl-radius));
   }
   .qsl\:rounded-md {
-    border-radius: calc(var(--qsl-radius) * 0.8);
+    border-radius: var(--qsl-radius-md, calc(var(--qsl-radius) * 0.8));
   }
   .qsl\:rounded-panel {
     border-radius: var(--qsl-radius-panel);
   }
   .qsl\:rounded-sm {
-    border-radius: calc(var(--qsl-radius) * 0.6);
+    border-radius: var(--qsl-radius-sm, calc(var(--qsl-radius) * 0.6));
   }
   .qsl\:border {
     border-style: var(--tw-border-style);
@@ -667,15 +668,6 @@
   .qsl\:text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
-  .qsl\:text-\[0\.72rem\] {
-    font-size: 0.72rem;
-  }
-  .qsl\:text-\[10\.5px\] {
-    font-size: 10.5px;
-  }
-  .qsl\:text-\[11px\] {
-    font-size: 11px;
-  }
   .qsl\:text-\[13px\] {
     font-size: 13px;
   }
@@ -685,6 +677,15 @@
   .qsl\:text-\[length\:var\(--qsl-chat-font-size\,13px\)\] {
     font-size: var(--qsl-chat-font-size,13px);
   }
+  .qsl\:text-label {
+    font-size: var(--qsl-text-label);
+  }
+  .qsl\:text-meta {
+    font-size: var(--qsl-text-meta);
+  }
+  .qsl\:text-trace {
+    font-size: var(--qsl-text-trace);
+  }
   .qsl\:leading-\[1\.3\] {
     --tw-leading: 1.3;
     line-height: 1.3;
@@ -1071,13 +1072,13 @@
     display: none;
   }
   :where([data-slot="button-group"]) .qsl\:in-data-\[slot\=button-group\]\:rounded-lg {
-    border-radius: var(--qsl-radius);
+    border-radius: var(--qsl-radius-lg, var(--qsl-radius));
   }
-  :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:rounded-\[9px\] {
-    border-radius: 9px;
+  :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:rounded-\[var\(--qsl-bubble-radius\,9px\)\] {
+    border-radius: var(--qsl-bubble-radius,9px);
   }
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:rounded-xl {
-    border-radius: calc(var(--qsl-radius) * 1.4);
+    border-radius: var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4));
   }
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:border-glass-edge\/20 {
     border-color: var(--qsl-glass-edge);
@@ -1512,12 +1513,12 @@
     background-color: var(--qsl-border);
   }
   :is(.qsl\:\*\:\[img\:first-child\]\:rounded-t-xl > *):is(img:first-child) {
-    border-top-left-radius: calc(var(--qsl-radius) * 1.4);
-    border-top-right-radius: calc(var(--qsl-radius) * 1.4);
+    border-top-left-radius: var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4));
+    border-top-right-radius: var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4));
   }
   :is(.qsl\:\*\:\[img\:last-child\]\:rounded-b-xl > *):is(img:last-child) {
-    border-bottom-right-radius: calc(var(--qsl-radius) * 1.4);
-    border-bottom-left-radius: calc(var(--qsl-radius) * 1.4);
+    border-bottom-right-radius: var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4));
+    border-bottom-left-radius: var(--qsl-radius-xl, calc(var(--qsl-radius) * 1.4));
   }
   .qsl\:\[\&\>\*\:first-child\]\:mt-0 > :first-child {
     margin-top: 0px;
@@ -1656,10 +1657,6 @@
     --qsl-pop-shadow: 0 12px 36px #49384e26;
     --qsl-card-shadow: 0 12px 22px #49384e2c;
   }
-  :where([data-quassel]) {
-    --qsl-radius-md: calc(var(--qsl-radius) * 0.8);
-    --qsl-radius-xl: calc(var(--qsl-radius) * 1.4);
-  }
   :where([data-theme="dark"]) {
     --qsl-color-scheme: dark;
     --qsl-background: #292735;
@@ -1750,7 +1747,7 @@
     font-size: 1em;
   }
   :where([data-quassel], [data-quassel] *):where(small) {
-    font-size: 80%;
+    font-size: var(--qsl-text-small, 80%);
   }
   :where([data-quassel], [data-quassel] *):where(sub, sup) {
     font-size: 75%;

package/index.d.ts

@@ -20,4 +20,4 @@ export { messageDate, timestampDay, timestampLabel } from "./timestamps";
 export { attachmentCapabilityError, attachmentDownloadUrl, attachmentMediaType, encodeAttachment, formatAttachmentSize, validateAttachmentSelection, MAX_CHAT_ATTACHMENTS, MAX_CHAT_ATTACHMENT_BYTES, } from "./attachments";
 export type { ChatAppearance, TimestampOptions, CodeBlockOptions, BubbleOptions, MessageAction, MessageActionsOptions, SendShortcut, } from "./options";
 export { appearanceStyle } from "./options";
-export { QuasselProvider, defaultComponents, useQuasselComponents, type QuasselComponents, type QuasselButtonProps, type QuasselButtonVariant, type QuasselButtonSize, type QuasselToggleProps, type QuasselCardProps, type QuasselStopButtonProps, type QuasselPopoverProps, type QuasselPopoverContentProps, type QuasselPopoverAnchor, } from "./QuasselProvider";
+export { QuasselProvider, defaultComponents, useQuasselComponents, useQuasselPortalContainer, type QuasselComponents, type QuasselButtonProps, type QuasselButtonVariant, type QuasselButtonSize, type QuasselToggleProps, type QuasselCardProps, type QuasselStopButtonProps, type QuasselPopoverProps, type QuasselPopoverContentProps, type QuasselPopoverAnchor, type QuasselPortalContainer, type QuasselPortalTarget, } from "./QuasselProvider";

package/index.js

@@ -42,7 +42,6 @@ var defaultTexts = {
   placeholder: "Nachricht schreiben ...",
   steeringPlaceholder: "Dazwischenfunken ...",
   steered: "In den laufenden Turn eingespeist",
-  inputHint: "Enter zum Senden - Shift + Enter f\xFCr eine neue Zeile",
   detailModeTitle: "Detailgrad der Schritte",
   detailModeOff: "nur Antworten",
   detailModeCurrent: "aktuell",
@@ -87,7 +86,7 @@ var defaultTexts = {
 
 // packages/quassel/src/ui/cn.ts
 import { createCn } from "cn/config";
-var cn = createCn({ prefix: "qsl" });
+var cn = createCn({ prefix: "qsl", extend: { theme: { text: ["meta", "trace", "label"] } } });
 
 // 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";
@@ -154,12 +153,12 @@ 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(var(--qsl-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",
-        sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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",
+        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",
+        sm: "qsl:h-7 qsl:gap-1 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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",
-        "icon-xs": "qsl:size-6 qsl:rounded-[min(var(--qsl-radius-md),10px)] qsl:in-data-[slot=button-group]:rounded-lg qsl:[&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "qsl:size-7 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
+        "icon-xs": "qsl:size-6 qsl:rounded-[min(--theme(--radius-md),10px)] qsl:in-data-[slot=button-group]:rounded-lg qsl:[&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "qsl:size-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "qsl:size-9"
       }
     },
@@ -223,9 +222,10 @@ function PopoverContent({
   anchor,
   collisionPadding,
   keepMounted,
+  portalContainer,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { keepMounted, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { container: portalContainer, keepMounted, children: /* @__PURE__ */ jsx3(
     PopoverPrimitive.Positioner,
     {
       align,
@@ -239,6 +239,7 @@ function PopoverContent({
         PopoverPrimitive.Popup,
         {
           "data-quassel": "",
+          "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",
@@ -285,7 +286,7 @@ var toggleVariants = cva2(
       },
       size: {
         default: "qsl:h-8 qsl:min-w-8 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2",
-        sm: "qsl:h-7 qsl:min-w-7 qsl:rounded-[min(var(--qsl-radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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",
+        sm: "qsl:h-7 qsl:min-w-7 qsl:rounded-[min(--theme(--radius-md),12px)] qsl:px-2.5 qsl:text-[0.8rem] 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:min-w-9 qsl:px-2.5 qsl:has-data-[icon=inline-end]:pr-2 qsl:has-data-[icon=inline-start]:pl-2"
       }
     },
@@ -316,16 +317,22 @@ function Toggle({
 import { jsx as jsx7 } from "react/jsx-runtime";
 var defaultComponents = { Button, Toggle, Card, StopButton, Popover, PopoverContent };
 var QuasselContext = createContext({ components: defaultComponents });
-function QuasselProvider({ components: components2, allowUrl, children }) {
+function QuasselProvider({ components: components2, allowUrl, portalContainer, children }) {
   const outer = useContext(QuasselContext);
   const value = useMemo(() => ({
     components: { ...outer.components, ...components2 },
-    allowUrl: allowUrl ?? outer.allowUrl
-  }), [outer, components2, allowUrl]);
+    allowUrl: allowUrl ?? outer.allowUrl,
+    portalContainer: portalContainer ?? outer.portalContainer
+  }), [outer, components2, allowUrl, portalContainer]);
   return /* @__PURE__ */ jsx7(QuasselContext.Provider, { value, children });
 }
 var useQuasselComponents = () => useContext(QuasselContext).components;
 var useAllowUrl = () => useContext(QuasselContext).allowUrl;
+function useQuasselPortalContainer() {
+  const container = useContext(QuasselContext).portalContainer;
+  const target = typeof container === "function" ? container() : container && "current" in container ? container.current : container;
+  return target ?? void 0;
+}
 
 // packages/quassel/src/useChatAction.ts
 import { useEffect, useRef, useState } from "react";
@@ -506,7 +513,7 @@ function isTableDivider(line) {
 import { useMemo as useMemo2 } from "react";
 import { SparklesIcon, WrenchIcon, XIcon } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var preClasses = "qsl:rounded-lg qsl:bg-secondary qsl:p-3 qsl:font-mono qsl:text-[11px] 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-trace qsl:leading-[1.625] qsl:break-all qsl:whitespace-pre-wrap";
 function StepPopover({
   message,
   position,
@@ -519,6 +526,7 @@ function StepPopover({
     contextElement: document.documentElement
   }), [position]);
   const { Button: Button2, Popover: Popover2, PopoverContent: PopoverContent2 } = useQuasselComponents();
+  const portalContainer = useQuasselPortalContainer();
   const tool = message.tool;
   const thinking = message.role === "thinking";
   const title = thinking ? texts.thinkingTitle : texts.toolTitle;
@@ -531,10 +539,11 @@ 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-[13px] qsl:shadow-pop",
+        "qsl:w-[min(680px,calc(100vw-32px))] qsl:gap-0 qsl:overflow-hidden qsl:p-0 qsl:text-[13px] qsl:leading-normal qsl:shadow-pop",
         thinking ? "qsl:max-h-none" : "qsl:max-h-[min(70vh,620px)]"
       ),
       collisionPadding: 16,
+      portalContainer,
       side: "bottom",
       sideOffset: 10,
       children: [
@@ -554,13 +563,13 @@ function StepPopover({
 }
 function PopoverSection({ label, value, error = false }) {
   return /* @__PURE__ */ jsxs2("section", { children: [
-    /* @__PURE__ */ jsx9("h3", { className: "qsl:mb-1.5 qsl:text-[11px] 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-trace 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 })
   ] });
 }
 
 // packages/quassel/src/PendingActionCard.tsx
-import { CheckIcon as CheckIcon2 } from "lucide-react";
+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 resultText = (result) => typeof result === "string" ? result : result === null || result === void 0 ? "" : JSON.stringify(result);
@@ -577,7 +586,7 @@ function PendingActionCard({
     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(CheckIcon2, { className: "qsl:text-success", size: 12 }),
+        action.status === "approved" ? /* @__PURE__ */ jsx10(CheckIcon2, { className: "qsl:text-success", size: 12 }) : /* @__PURE__ */ jsx10(XIcon2, { size: 12 }),
         action.status === "approved" ? resultText(action.result) : dismissedLabel
       ] })
     ] });
@@ -1005,7 +1014,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,16px)]";
 var denseStepClasses = "qsl:mt-[var(--qsl-chat-dense-message-gap,8px)]";
-var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-[11px] qsl:leading-[1.375] qsl:text-muted-foreground";
+var traceClasses = "qsl:flex qsl:w-full qsl:gap-2 qsl:pl-6 qsl:text-left qsl:text-trace qsl:leading-[1.375] qsl:text-muted-foreground";
 var traceButtonClasses = "qsl:cursor-pointer qsl:rounded-md qsl:py-1 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";
@@ -1013,7 +1022,7 @@ var traceLineClasses = "qsl:min-w-0 qsl:self-baseline qsl:font-mono qsl:[overflo
 var traceRunningClasses = "qsl:ml-1.5 qsl:opacity-60";
 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:font-mono qsl:text-[10.5px] qsl:leading-[1.6] qsl:text-muted-foreground qsl:transition-colors",
+  "qsl:font-mono qsl:text-meta qsl:leading-[1.6] 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))]",
@@ -1044,6 +1053,7 @@ function ChatMessages({
   onLinkClick,
   emptyState,
   className,
+  scrollerClassName,
   showTimestamps = false,
   announce: announce2,
   scrollerRef,
@@ -1153,7 +1163,7 @@ function ChatMessages({
   );
   const mitZeit = (inhalt, key, at, dicht = false) => showTimestamps ? /* @__PURE__ */ jsxs6("div", { className: cn("qsl:flex qsl:items-baseline qsl:gap-2", dicht ? denseStepClasses : stepClasses), children: [
     /* @__PURE__ */ jsx13("time", { dateTime: messageDate(at)?.toISOString(), className: cn(
-      "qsl:flex-none qsl:text-[10.5px] qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
+      "qsl:flex-none qsl:text-meta qsl:tabular-nums qsl:text-muted-foreground qsl:opacity-85",
       timestampOptions?.format && timestampOptions.format !== "time" ? "qsl:w-[clamp(60px,20%,120px)]" : "qsl:w-[34px]"
     ), 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: inhalt })
@@ -1259,8 +1269,10 @@ function ChatMessages({
           "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))]",
-          "qsl:in-data-[tone=material]:p-0"
+          "qsl:in-data-[tone=material]:p-0",
+          scrollerClassName
         ),
+        "data-quassel-transcript": "",
         onScroll: pruefeEnde,
         onWheel: (event) => {
           if (!event.ctrlKey && event.deltaY < 0) pauseUp(event.currentTarget, event.target);
@@ -1508,9 +1520,9 @@ function Bubble({
       /* @__PURE__ */ jsxs6("div", { className: "qsl:min-w-0 qsl:flex-1", children: [
         /* @__PURE__ */ jsx13("div", { className: cn(traceLineClasses, thinking && "qsl:font-sans qsl:italic qsl:whitespace-pre-wrap"), children: zeile }),
         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:font-mono qsl:text-[10.5px] 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:font-mono qsl:text-meta qsl:leading-[1.375] 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:font-mono qsl:text-[10.5px] 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:font-mono qsl:text-meta qsl:leading-[1.375] qsl:break-all qsl:whitespace-pre-wrap qsl:opacity-80",
             tool.isError && "qsl:text-destructive qsl:opacity-100"
           ), children: prettyJson(tool.result) })
         ] })
@@ -1545,12 +1557,12 @@ 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-[0.72rem] qsl:leading-[1.45] qsl:font-semibold",
+      "qsl:mb-[5px] qsl:table qsl:text-label qsl:leading-[1.45] 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(Markdown, { text: message.text, streaming: message.role === "assistant" && !message.closed }),
     /* @__PURE__ */ jsx13(MessageAttachments, { label: texts.attachments, message }),
-    message.steered && /* @__PURE__ */ jsx13("small", { className: "qsl:mt-1 qsl:block qsl:text-[0.72rem] 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-label qsl:leading-[1.45] qsl:opacity-70", "data-chat": "steered", children: texts.steered }),
     /* @__PURE__ */ jsx13(MessageActions, { message, options: messageActions, texts })
   ] });
   const cursor = message.role === "assistant" && message.textCursor ? JSON.stringify(message.textCursor) : void 0;
@@ -1565,7 +1577,7 @@ function Bubble({
       children: /* @__PURE__ */ jsx13(
         "div",
         {
-          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[10px_10px_4px_10px] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)] qsl:in-data-[tone=material]:rounded-[9px] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15 qsl:in-data-[tone=material]:text-foreground"),
+          className: cn(bubbleBodyClasses, "qsl:group", message.bubble ? "qsl:rounded-lg qsl:text-white qsl:[--qsl-scroll-cover:var(--qsl-primary)]" : "qsl:rounded-[var(--qsl-bubble-radius,10px_10px_4px_10px)] qsl:border qsl:border-border qsl:bg-secondary qsl:text-foreground qsl:[--qsl-scroll-cover:var(--qsl-secondary)] qsl:in-data-[tone=material]:rounded-[var(--qsl-bubble-radius,9px)] qsl:in-data-[tone=material]:border-glass-edge/20 qsl:in-data-[tone=material]:bg-primary/15 qsl:in-data-[tone=material]:text-foreground"),
           "data-tone": message.bubble ? "on-color" : void 0,
           style: { background: message.bubble?.color, maxWidth: bubbleOptions?.maxWidth },
           children: content
@@ -1650,7 +1662,7 @@ function ChatPanel({
 }
 
 // packages/quassel/src/ChatInputToolbar.tsx
-import { PaperclipIcon, SendIcon, XIcon as XIcon2 } from "lucide-react";
+import { PaperclipIcon, SendIcon, XIcon as XIcon3 } from "lucide-react";
 
 // packages/quassel/src/ui/useFileInput.ts
 import { useRef as useRef5, useState as useState6 } from "react";
@@ -1851,7 +1863,7 @@ function ChatInputToolbar({
   const inputRows = inline || toolbar ? 1 : rows;
   const inputMaxRows = inline || toolbar ? 1 : maxRows;
   const rootClasses = cn(
-    "qsl:flex qsl:shrink-0 qsl:flex-col qsl:overflow-hidden qsl:rounded-[var(--qsl-input-card-radius,var(--qsl-radius-xl))] qsl:border qsl:border-border-strong qsl:bg-background qsl:shadow-bar qsl:transition-colors qsl:focus-within:border-primary",
+    "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",
     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"
@@ -2041,7 +2053,7 @@ function ChatInputToolbar({
         size: "icon-sm",
         title: fillText(alleTexte.removeAttachment, { name: entry.file.name }),
         variant: "outline",
-        children: /* @__PURE__ */ jsx15(XIcon2, {})
+        children: /* @__PURE__ */ jsx15(XIcon3, {})
       }
     )
   ] }, entry.id)) });
@@ -2291,6 +2303,7 @@ export {
   timestampLabel,
   useChatAction,
   useQuasselComponents,
+  useQuasselPortalContainer,
   validateAttachmentSelection
 };
 //# sourceMappingURL=index.js.map