@kitn.ai/ui 0.25.2 → 0.27.0

package/src/components/message.tsx

@@ -8,8 +8,19 @@ import { actionIcon, BUILTIN_ACTION_LABEL } from "../ui/action-icons";
 import type { ChatMessageAction, CustomAction, FeedbackVote, MessagePart, MessageSource } from "../elements/chat-types";
 import { useChatConfig, textClass } from "../primitives/chat-config";
 import { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning";
+import { Loader } from "./loader";
 import { Tool } from "./tool";
-import { Attachments, Attachment, AttachmentPreview, AttachmentInfo } from "./attachments";
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  getAttachmentLabel,
+  getMediaCategory,
+} from "./attachments";
 import { Source, SourceTrigger, SourceContent, SourceList } from "./source";
 import { CardRenderer, type CardSchemaMap } from "./card-renderer";
 import type { CardComponentMap } from "../primitives/card-registry";
@@ -318,6 +329,12 @@ export interface MessageBodyProps {
    *  the kit checks its own seven built-ins and leaves your own card type
    *  unvalidated. A schema here WINS over a built-in of the same name. */
   cardSchemas?: CardSchemaMap;
+  /** The custom-element host node to emit card events off when no `CardProvider`
+   *  is above this body, forwarded to `CardRenderer` as `hostElement`. The
+   *  `<kai-chat>`/`<kai-message>`/`<kai-thread>` facades pass their own element,
+   *  so a `card` part's events leave as the bubbling `kai-card` CustomEvent
+   *  instead of being silently discarded. */
+  cardHostElement?: HTMLElement;
   /** Whether this is a user message (right-aligned bubble) vs an assistant
    *  message (full-width transparent). */
   isUser: boolean;
@@ -336,6 +353,29 @@ export interface MessageBodyProps {
   activeFeedback?: FeedbackVote;
   /** When true, the copy button shows its "copied" check icon. */
   copied?: boolean;
+  /** Whether this message is the one currently streaming. Forwarded to each
+   *  reasoning part's `<Reasoning>` so the disclosure auto-opens while the
+   *  model is thinking and settles back once the stream ends. Without it the
+   *  user watches a static collapsed "Reasoning" label for the whole thinking
+   *  window. The caller owns the definition of "streaming" — for
+   *  `ChatThread` that is `loading` + being the last assistant message. */
+  isStreaming?: boolean;
+  /** How a `reasoning` part renders. `'full'` (default) is the current
+   *  behavior: the collapsible `<Reasoning>` disclosure, with the "Thinking…"
+   *  shimmer on its trigger while `isStreaming`. `'compact'` drops the
+   *  disclosure entirely and shows only a shimmer loader while the part is
+   *  streaming — nothing once it settles, so there is no expandable detail to
+   *  open. `'off'` renders the part not at all, in either state. Kit-decides-
+   *  HOW: this is a display-mode fact about the medium, not a per-message
+   *  toggle, so it applies uniformly to every reasoning part in the body. */
+  reasoningMode?: 'full' | 'compact' | 'off';
+  /** Seeds the reasoning disclosure open AND keeps it tracking the stream
+   *  (open while streaming, closes when it settles): the pre-Task-19f `full`
+   *  behavior. Default false/absent: the panel starts closed (just the
+   *  "Thinking" shimmer chip) and only opens on click, the current default
+   *  (owner ruling, 2026-08-26). Meaningless when `reasoningMode` is
+   *  `'compact'`/`'off'` (no disclosure exists to open). */
+  reasoningDefaultOpen?: boolean;
   /** INJECT slot projected at the TOP of the body — above the reasoning / tools /
    *  content. A per-message header: a model-name label, a role + timestamp line.
    *  In the `<kai-message>` shadow this is `<slot name="before-body" />`. */
@@ -477,15 +517,68 @@ function MessageBody(props: MessageBodyProps) {
           <Switch fallback={null}>
             <Match when={groupAs(group(), 'files')}>
               {(g) => (
-                <Attachments variant="inline" class={props.isUser ? 'mb-2 justify-end' : 'mb-2'}>
+                /* `grid`, NOT `inline`. The inline chip gives an image a 20x20
+                   preview — a thumbnail nobody can read — while the 96px tile
+                   and the hover-card full preview both already existed here and
+                   the thread used neither.
+
+                   WHY GRID AND NOT LIST, since `list` shows the filename
+                   outright: `list` stacks (`flex-col`), so a message carrying
+                   four attachments becomes four full-width rows and pushes the
+                   conversation off screen. `grid` is `flex-wrap w-fit`, so the
+                   same four are one 96px-tall row of tiles. Density is what
+                   keeps a thread readable, and it is the whole reason the
+                   thread is not the composer's chip strip.
+
+                   A grid tile draws no filename of its own, and hiding one
+                   behind the hover card is not good enough: that serves a
+                   pointer and nothing else. So `<AttachmentInfo>` renders a
+                   VISIBLE truncated caption on every non-image tile — no hover,
+                   no focus, no tap required — and the hover card is an upgrade
+                   to the full name and media type rather than the only way to
+                   get either. */
+                <Attachments variant="grid" class={props.isUser ? 'mb-2 ml-auto' : 'mb-2'}>
                   {/* Reference-keyed <For> is right HERE: the run's part objects
                       are carried over untouched by the folds, and an attachment
                       holds no state worth preserving. */}
                   <For each={g().parts}>
                     {(fp) => (
                       <Attachment data={fp.attachment}>
-                        <AttachmentPreview />
-                        <AttachmentInfo />
+                        <AttachmentHoverCard>
+                          <AttachmentHoverCardTrigger class="block size-full">
+                            <AttachmentPreview />
+                            <AttachmentInfo />
+                          </AttachmentHoverCardTrigger>
+                          <AttachmentHoverCardContent>
+                            {/* An image gets the full preview; everything else
+                                gets the name and type the tile could not fit. */}
+                            <Show
+                              when={
+                                getMediaCategory(fp.attachment) === 'image' &&
+                                fp.attachment.type === 'file' &&
+                                fp.attachment.url
+                              }
+                              fallback={
+                                <>
+                                  <div class="text-body font-medium">
+                                    {getAttachmentLabel(fp.attachment)}
+                                  </div>
+                                  <Show when={fp.attachment.mediaType}>
+                                    <div class="text-muted-foreground text-caption">
+                                      {fp.attachment.mediaType}
+                                    </div>
+                                  </Show>
+                                </>
+                              }
+                            >
+                              <img
+                                alt={getAttachmentLabel(fp.attachment)}
+                                class="block max-h-64 max-w-xs rounded object-contain"
+                                src={fp.attachment.url}
+                              />
+                            </Show>
+                          </AttachmentHoverCardContent>
+                        </AttachmentHoverCard>
                       </Attachment>
                     )}
                   </For>
@@ -543,7 +636,17 @@ function MessageBody(props: MessageBodyProps) {
                           part="bubble content"
                           markdown={props.markdown}
                           class={props.isUser
-                            ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+                            // Content token, not the brand token: `--color-primary`
+                            // is the documented consumer brand override
+                            // (theme.css `--kai-color-primary`), so toking message
+                            // TEXT to it means every consumer that brands primary
+                            // gets brand-colored message text. `text-foreground` is
+                            // already `MessageContent`'s base color (matches the
+                            // assistant path's `bg-transparent p-0`, which carries
+                            // no color override and falls through to the same
+                            // base) — dropping `text-primary` here just lets that
+                            // base apply on the user bubble too.
+                            ? 'bg-muted max-w-[85%] rounded-2xl px-4 py-2'
                             : 'bg-transparent p-0'}
                         >
                           {p().text}
@@ -552,18 +655,45 @@ function MessageBody(props: MessageBodyProps) {
                     </Match>
                     <Match when={carrierOnly()}>{null}</Match>
                     <Match when={shownReasoning()}>
-                      {(p) => (
-                        <Reasoning class="mb-2 w-full">
-                          <ReasoningTrigger>{p().label ?? 'Reasoning'}</ReasoningTrigger>
-                          <ReasoningContent markdown>{p().text}</ReasoningContent>
-                        </Reasoning>
-                      )}
+                      {(p) => {
+                        // Default 'full' is the pre-existing DISPLAY MODE byte
+                        // for byte; the OPEN behavior changed under Task 19f —
+                        // it no longer auto-opens while streaming by default
+                        // (owner ruling 2026-08-26). `reasoningDefaultOpen`
+                        // reproduces the old always-auto-opens behavior when set.
+                        const mode = () => props.reasoningMode ?? 'full';
+                        return (
+                          <Switch fallback={null}>
+                            <Match when={mode() === 'full'}>
+                              <Reasoning
+                                class="mb-2 w-full"
+                                isStreaming={props.isStreaming}
+                                defaultOpen={props.reasoningDefaultOpen}
+                                openOnStream={props.reasoningDefaultOpen}
+                              >
+                                <ReasoningTrigger>{p().label ?? 'Reasoning'}</ReasoningTrigger>
+                                <ReasoningContent markdown>{p().text}</ReasoningContent>
+                              </Reasoning>
+                            </Match>
+                            {/* 'compact': the same "Thinking…" shimmer the full
+                                disclosure's trigger shows while streaming — no
+                                <Reasoning>/<ReasoningContent>, so there is no
+                                expandable detail and nothing left once the part
+                                settles (isStreaming false → this Match doesn't
+                                fire, matching 'off'). 'off' never reaches here:
+                                its Match doesn't fire either. */}
+                            <Match when={mode() === 'compact' && props.isStreaming}>
+                              <Loader variant="text-shimmer" text={p().label ?? 'Reasoning'} class="mb-2" />
+                            </Match>
+                          </Switch>
+                        );
+                      }}
                     </Match>
                     <Match when={partAs(part(), 'tool')}>
                       {(p) => <Tool toolPart={p().tool} class="mb-2 w-full" />}
                     </Match>
                     <Match when={partAs(part(), 'card')}>
-                      {(p) => <CardRenderer envelope={p().envelope} types={props.cardTypes} schemas={props.cardSchemas} />}
+                      {(p) => <CardRenderer envelope={p().envelope} types={props.cardTypes} schemas={props.cardSchemas} hostElement={props.cardHostElement} />}
                     </Match>
                     {/* No `source` match here on purpose: source parts never
                         reach a 'single' group — they are collapsed into a

package/src/components/prompt-input.tsx

@@ -115,9 +115,15 @@ function PromptInputTextarea(props: PromptInputTextareaProps) {
   // the contenteditable composer is visually identical. The frame (PromptInput
   // root) still owns radius/bg/padding/focus-ring; auto-grow is native to a
   // contenteditable block (capped via max-height on the editable).
+  // `text-start` is a PIN, not a style choice: `text-align` inherits, so any
+  // centered ancestor (`Empty`'s root did exactly this) reached in and centered
+  // the placeholder AND the typed text. An input control's text alignment is a
+  // fact about the control, so it states it rather than inheriting it. LOGICAL
+  // (`start`), not `text-left` — in RTL the correct edge is the right one, and
+  // pinning the physical value would be a worse bug than the one it fixes.
   const editableClass = () =>
     cn(
-      'text-foreground min-h-[44px] w-full bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto whitespace-pre-wrap break-words',
+      'text-foreground min-h-[44px] w-full bg-transparent text-start shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto whitespace-pre-wrap break-words',
       textClass(config.proseSize()),
       local.class,
     );

package/src/components/prompt-suggestion.tsx

@@ -136,7 +136,10 @@ function renderHighlighted(text: string, highlight: string) {
       <Show when={before}>
         <span class="text-foreground/70 whitespace-pre-wrap">{before}</span>
       </Show>
-      <span class="text-primary font-medium whitespace-pre-wrap">{matched}</span>
+      {/* Matched-substring highlight is CONTENT, not a control — was the BRAND
+          token. Full-strength `text-foreground` against the `/70`-opacity
+          siblings above/below is what actually carries the highlight. */}
+      <span class="text-foreground font-medium whitespace-pre-wrap">{matched}</span>
       <Show when={after}>
         <span class="text-foreground/70 whitespace-pre-wrap">{after}</span>
       </Show>

package/src/components/reasoning.tsx

@@ -3,6 +3,7 @@ import { cn } from '../utils/cn';
 import { ChevronDown } from 'lucide-solid';
 import { Markdown } from './markdown';
 import { observeContentHeight } from '../primitives/use-resize-observer';
+import { TextShimmer } from './text-shimmer';
 
 interface ReasoningContextValue {
   isOpen: () => boolean;
@@ -18,6 +19,11 @@ interface ReasoningContextValue {
   /** The registered trigger. Deliberately a plain getter over a mutable
    *  variable, NOT a signal — registration must not re-run the content effect. */
   trigger: () => HTMLElement | undefined;
+  /** Whether the reasoning is currently streaming — read by `ReasoningTrigger`
+   *  to decide how its own label renders (shimmer while streaming, plain
+   *  neutral text once settled). Kit-decides-HOW: every consumer gets the same
+   *  "Thinking…" shimmer behavior for free, with no prop of their own. */
+  isStreaming: () => boolean;
 }
 
 /** Imperative open controller, handed to a parent (the kai-reasoning facade) via
@@ -49,10 +55,16 @@ export interface ReasoningProps {
   disabled?: boolean;
   /** Receive the open controller (open accessor + setOpen) once mounted. */
   controllerRef?: (api: ReasoningController) => void;
+  /** Keep auto-opening while streaming and auto-closing when it settles (the
+   *  pre-Task-19f `full` behavior). Default false: the panel starts per
+   *  `defaultOpen` and stays exactly where the user leaves it — streaming only
+   *  changes the trigger's label (shimmer), never the open state, matching the
+   *  "closed chip, expand on click" default (owner ruling, 2026-08-26). */
+  openOnStream?: boolean;
 }
 
 function Reasoning(props: ReasoningProps) {
-  const [local] = splitProps(props, ['children', 'class', 'open', 'defaultOpen', 'onOpenChange', 'isStreaming', 'disabled', 'controllerRef']);
+  const [local] = splitProps(props, ['children', 'class', 'open', 'defaultOpen', 'onOpenChange', 'isStreaming', 'disabled', 'controllerRef', 'openOnStream']);
   const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
   const [wasAutoOpened, setWasAutoOpened] = createSignal(false);
 
@@ -72,6 +84,7 @@ function Reasoning(props: ReasoningProps) {
   };
 
   createEffect(() => {
+    if (!local.openOnStream) return;
     const streaming = local.isStreaming;
     if (streaming && !wasAutoOpened()) {
       if (!isControlled()) setInternalOpen(true);
@@ -104,6 +117,7 @@ function Reasoning(props: ReasoningProps) {
         contentId,
         registerTrigger: (el) => { triggerEl = el; },
         trigger: () => triggerEl,
+        isStreaming: () => !!local.isStreaming,
       }}
     >
       <div class={local.class}>{local.children}</div>
@@ -122,7 +136,7 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
   // to register as the panel's focus-return target, and a spread `ref` would
   // silently replace it. The consumer's ref is forwarded below instead.
   const [local, rest] = splitProps(props, ['children', 'class', 'ref']);
-  const { isOpen, onOpenChange, disabled, contentId, registerTrigger } = useReasoningContext();
+  const { isOpen, onOpenChange, disabled, contentId, registerTrigger, isStreaming } = useReasoningContext();
 
   return (
     // The same disclosure contract as CollapsibleTrigger: an explicit
@@ -149,7 +163,20 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
       onClick={() => { if (!disabled()) onOpenChange(!isOpen()); }}
       {...rest}
     >
-      <span class="text-primary">{local.children}</span>
+      {/* Content/chrome, not a control: was `text-primary`, the BRAND token, so
+          a consumer's branded --kai-color-primary bled onto the "Thinking"
+          label. `text-foreground` matches the sibling `<Tool>` disclosure
+          trigger's label (rendered via `Button variant="ghost"`, itself
+          `text-foreground`) — the established neutral for a disclosure
+          trigger's own label text in this codebase.
+          Kit-decides-HOW: while streaming, the label renders with the kit's
+          own `TextShimmer` (the common "Thinking…" shimmer, already used by
+          `Loader`'s `text-shimmer` variant) instead of static text; once
+          settled it's the plain neutral span above. Every consumer gets this
+          for free — no prop of their own. */}
+      <Show when={isStreaming()} fallback={<span class="text-foreground">{local.children}</span>}>
+        <TextShimmer class="font-medium">{local.children}</TextShimmer>
+      </Show>
       <div
         class={cn(
           'transform transition-transform',

package/src/components/response-compare.tsx

@@ -365,7 +365,7 @@ function CompareColumn(props: ColumnProps): JSX.Element {
   return (
     <div
       class={cn(
-        'flex min-w-0 flex-col gap-3 rounded-lg border border-input bg-background/40 p-3',
+        'flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-background/40 p-3',
         props.hiddenClass?.(),
       )}
     >
@@ -432,7 +432,7 @@ function CollapsedWinner(props: {
 }): JSX.Element {
   return (
     <div
-      class="flex flex-col gap-2 rounded-lg border border-input bg-accent/40 p-3"
+      class="flex flex-col gap-2 rounded-lg border border-border bg-accent/40 p-3"
       role={props.optimistic ? 'status' : undefined}
     >
       <div class="flex items-center gap-2 text-sm font-medium text-accent-foreground">

package/src/components/response-stream.tsx

@@ -1,6 +1,7 @@
 import { splitProps, Show, For, createEffect, on } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 import { cn } from '../utils/cn';
-import { useTextStream } from '../primitives/use-text-stream';
+import { useTextStream, defaultFadeDuration, defaultSegmentDelay } from '../primitives/use-text-stream';
 
 export type Mode = 'typewriter' | 'fade';
 
@@ -30,6 +31,7 @@ function ResponseStream(props: ResponseStreamProps) {
     speed: speed(),
     characterChunkSize: local.characterChunkSize,
     fadeDuration: local.fadeDuration,
+    segmentDelay: local.segmentDelay,
   });
 
   createEffect(on(
@@ -39,15 +41,20 @@ function ResponseStream(props: ResponseStreamProps) {
     }
   ));
 
+  // Deferred: `isComplete` INITIALISES true (nothing has streamed yet), so an
+  // undeferred first run would announce completion at mount — the same
+  // no-event-on-mount contract kai-tool pins for kai-open-change. Only the
+  // false -> true transition of a real stream may call onComplete.
   createEffect(on(
     () => stream.isComplete(),
     (complete) => {
       if (complete) local.onComplete?.();
-    }
+    },
+    { defer: true }
   ));
 
   const fadeStyle = () => {
-    const dur = local.fadeDuration ?? Math.round(1000 / Math.sqrt(Math.min(100, Math.max(1, speed()))));
+    const dur = local.fadeDuration ?? defaultFadeDuration(speed());
     return `
       @keyframes fadeIn {
         from { opacity: 0; }
@@ -66,12 +73,11 @@ function ResponseStream(props: ResponseStreamProps) {
 
   const segDelay = () => {
     if (typeof local.segmentDelay === 'number') return Math.max(0, local.segmentDelay);
-    const normalizedSpeed = Math.min(100, Math.max(1, speed()));
-    return Math.max(1, Math.round(100 / Math.sqrt(normalizedSpeed)));
+    return defaultSegmentDelay(speed());
   };
 
   return (
-    <div class={local.class}>
+    <Dynamic component={local.as ?? 'div'} class={local.class}>
       <Show
         when={mode() === 'fade'}
         fallback={<>{stream.displayedText()}</>}
@@ -96,7 +102,7 @@ function ResponseStream(props: ResponseStreamProps) {
           </For>
         </div>
       </Show>
-    </div>
+    </Dynamic>
   );
 }
 

package/src/components/screen.tsx

@@ -144,6 +144,11 @@ export function Screen(props: ScreenProps) {
         data-expanded={presence.state() === 'open' ? '' : undefined}
         data-closed={presence.state() === 'closed' ? '' : undefined}
         onKeyDown={onKeyDown}
+        // `outline-none` is DELIBERATE here and must stay: this is the
+        // `tabindex="-1"` screen container, focused programmatically on open so
+        // keyboard and screen-reader context follows the screen. It is not a
+        // tab stop, so a ring around the whole surface would be noise. Its
+        // interactive children carry their own.
         class={cn(
           'absolute inset-0 z-40 flex flex-col bg-background text-foreground outline-none',
           'animate-in fade-in-0 slide-in-from-bottom-2 motion-reduce:animate-none',

package/src/components/scroll-button.tsx

@@ -1,24 +1,74 @@
+import { Show } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
 import { useChatContainer } from './chat-container';
-import { ChevronDown } from 'lucide-solid';
+import { ArrowDown } from 'lucide-solid';
+
+/** The accessible name used when the consumer does not supply one. */
+const DEFAULT_LABEL = 'Scroll to bottom';
 
 export interface ScrollButtonProps {
   class?: string;
   variant?: 'outline' | 'ghost' | 'default';
   size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /**
+   * The button's accessible name. Used whether or not the label is visible, so
+   * the announced text is always localisable. Defaults to `"Scroll to bottom"`.
+   */
+  label?: string;
+  /**
+   * Also render `label` visibly beside the icon. Defaults to `false` (icon
+   * only). When it is visible the text IS the accessible name, so nothing is
+   * announced twice.
+   */
+  showLabel?: boolean;
+}
+
+/**
+ * The floating chip surface.
+ *
+ * The shared `outline` button variant is `bg-muted/50` — half-transparent, so
+ * message text showed through a control that floats over scrolling content, and
+ * its edge measured 1.05:1 against the thread behind it (SC 1.4.11 wants 3:1).
+ * `bg-card` is the same opaque surface popovers, dropdowns and hover cards sit
+ * on; `border-input` is the kit's control edge and clears 3:1 in both themes;
+ * `kai-elevation` is the shared, themeable float shadow (`--kai-shadow-color`),
+ * which is what keeps an opaque button reading as ABOVE the content.
+ *
+ * `ghost` and `default` are explicit consumer choices about the fill, so they
+ * keep theirs; every variant gets the elevation and the rounded-square radius.
+ */
+function surfaceClasses(variant: ScrollButtonProps['variant']) {
+  return (variant ?? 'outline') === 'outline'
+    ? 'border border-input bg-card text-card-foreground kai-elevation'
+    : 'kai-elevation';
 }
 
 function ScrollButton(props: ScrollButtonProps) {
   const { isAtBottom, scrollToBottom } = useChatContainer();
+  const label = () => props.label ?? DEFAULT_LABEL;
+  const showLabel = () => props.showLabel === true;
 
   return (
     <Button
       variant={props.variant ?? 'outline'}
       size={props.size ?? 'sm'}
-      aria-label="Scroll to bottom"
+      // When the label is visible it IS the accessible name. An aria-label on
+      // top of it would override the visible text and leave the two able to
+      // disagree, so it is only set for the icon-only case.
+      aria-label={showLabel() ? undefined : label()}
+      // At the bottom of the thread this button is fully transparent and
+      // pointer-inert, but it stayed in the tab order — a keyboard user landed
+      // on a control they could not see, with a focus ring painted on nothing.
+      // Take it out of the tab order and hide it from assistive tech while it
+      // is invisible; both revert the moment it animates back in.
+      tabindex={isAtBottom() ? -1 : 0}
+      aria-hidden={isAtBottom() ? 'true' : undefined}
       class={cn(
-        'h-10 w-10 rounded-full transition-all duration-150 ease-out',
+        'rounded-lg transition-all duration-150 ease-out',
+        surfaceClasses(props.variant),
+        // Square while icon-only; a pill-ish labelled button once the text is in.
+        showLabel() ? 'h-10 w-auto gap-1.5 px-3.5 text-sm' : 'h-10 w-10 px-0',
         !isAtBottom()
           ? 'translate-y-0 scale-100 opacity-100'
           : 'pointer-events-none translate-y-4 scale-95 opacity-0',
@@ -26,7 +76,16 @@ function ScrollButton(props: ScrollButtonProps) {
       )}
       onClick={() => scrollToBottom()}
     >
-      <ChevronDown class="h-5 w-5" />
+      {/* h-4, not the h-5 the chevron used. A ChevronDown only inks the lower
+          part of its 24px viewBox, so at a 20px box its visible mass is small;
+          ArrowDown inks the full height (stem + head), and at 20px inside a 40px
+          button it read as half the button wide and crowded the padding. 16px
+          balances the icon-only square and is the size lucide pairs with
+          text-sm, which is what the label renders at. */}
+      <ArrowDown class="h-4 w-4 shrink-0" aria-hidden="true" />
+      <Show when={showLabel()}>
+        <span>{label()}</span>
+      </Show>
     </Button>
   );
 }

package/src/components/source.tsx

@@ -152,7 +152,12 @@ function SourceContent(props: SourceContentProps) {
               width={16}
               height={16}
             />
-            <div class="text-primary truncate text-sm">
+            {/* Citation title/domain is CONTENT, not a control — was the BRAND
+                token. `text-foreground/80` matches how `SourceTrigger` above
+                already renders this same domain text (inherited from its `<a
+                class="... text-foreground/80 ...">`), so the hover-card header
+                and the trigger chip agree on the same domain's color. */}
+            <div class="text-foreground/80 truncate text-sm">
               {ctx.domain.replace('www.', '')}
             </div>
           </div>