@tangle-network/ui 11.16.3 → 11.16.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @tangle-network/ui
 
+## 11.16.4
+
+### Patch Changes
+
+- 11fbba5: Chat text renders at the 15px body size. The user bubble, assistant prose, legacy `ChatMessage` and thinking timer wrote their size tokens as `text-[var(--font-size-*)]`, which Tailwind compiles to a color, so assistant prose fell back to the Markdown default of 14px and the user bubble inherited 16px. They now use `text-[length:var(...)]`, and the dist check fails on the untyped form.
+  
+  The streaming caret follows the last word instead of starting a new line. A code block that scrolls sideways takes keyboard focus as a named region (axe `scrollable-region-focusable`). The Show more toggle under a tool's output or error sits inside the card's inset instead of against its edge.
+
 ## 11.16.3
 
 ### Patch Changes

package/dist/chat/agent-timeline.js

@@ -53,13 +53,14 @@ function spacingBefore(prev, next) {
 	return "mt-3";
 }
 const ROW_BLEED = "-mx-3";
+const STREAMING_CARET = "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] [&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
 function AssistantMessage({ item }) {
 	return /* @__PURE__ */ jsxs("div", { children: [
 		item.content && /* @__PURE__ */ jsx(Markdown, {
-			className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]",
+			className: cn("tangle-prose text-[length:var(--font-size-base)] leading-[1.5]", item.isStreaming && STREAMING_CARET),
 			children: item.content
 		}),
-		item.isStreaming && /* @__PURE__ */ jsx("span", {
+		item.isStreaming && !item.content && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
 			"data-streaming-caret": "",
 			className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"

package/dist/chat/chat-message.js

@@ -19,10 +19,10 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("min-w-0 max-w-[85%] space-y-1", isUser ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
-				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: "whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [content && /* @__PURE__ */ jsx(Markdown, {
-				className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: "tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}), isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })] }), toolCalls]
 		})]

package/dist/chat/thinking-indicator.js

@@ -29,7 +29,7 @@ function ThinkingIndicator({ className }) {
 				})
 			]
 		}), elapsed > 3 && /* @__PURE__ */ jsxs("span", {
-			className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground",
+			className: "text-[length:var(--font-size-xs)] tabular-nums text-muted-foreground",
 			children: [elapsed, "s"]
 		})]
 	});

package/dist/chat/user-message.js

@@ -23,10 +23,10 @@ function UserBubble({ text, timestamp, actions }) {
 				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
-					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
+					className: "break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]

package/dist/markdown/code-block.js

@@ -1,4 +1,4 @@
-import { focusRing } from "../lib/focus.js";
+import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -93,6 +93,12 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 		overflowX: "auto"
 	};
 	const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
+	const scrollRegion = {
+		tabIndex: 0,
+		role: "region",
+		"aria-label": headerLabel ? `${headerLabel} code` : "Code",
+		className: focusRingInset
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
 		...props,
@@ -121,8 +127,10 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 				customStyle,
 				codeTagProps,
 				wrapLines: false,
+				...scrollRegion,
 				children: code
 			}) : /* @__PURE__ */ jsx("pre", {
+				...scrollRegion,
 				style: {
 					...syntaxTheme.hljs,
 					...customStyle

package/dist/run/expandable-content.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * "Show more / Show less" toggle. Content shorter than the cap renders
 * as-is with no toggle.
 */
-function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className }) {
+function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className, toggleClassName }) {
 	const [expanded, setExpanded] = useState(false);
 	const [overflowing, setOverflowing] = useState(false);
 	const contentRef = useRef(null);
@@ -32,7 +32,7 @@ function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "fr
 		}), overflowing ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setExpanded((value) => !value),
-			className: "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+			className: cn("mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground", toggleClassName),
 			children: expanded ? "Show less" : "Show more"
 		}) : null]
 	});

package/dist/run/expanded-tool-detail.js

@@ -13,6 +13,7 @@ import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, ArrowLeft, ArrowRight, FileText, Loader2 } from "lucide-react";
 //#region src/run/expanded-tool-detail.tsx
+const FLUSH_TOGGLE = "mx-3 mb-2";
 const EXT_LANG = {
 	ts: "typescript",
 	tsx: "tsx",
@@ -131,6 +132,7 @@ const ExpandedToolDetail = memo(({ part }) => {
 					})]
 				}), /* @__PURE__ */ jsx(ExpandableContent, {
 					fadeClassName: "from-card",
+					toggleClassName: FLUSH_TOGGLE,
 					children: /* @__PURE__ */ jsx(CodeBlock, {
 						code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
 						language: "json",
@@ -148,6 +150,7 @@ const ExpandedToolDetail = memo(({ part }) => {
 					})]
 				}), /* @__PURE__ */ jsx(ExpandableContent, {
 					fadeClassName: "from-[var(--surface-danger-bg)]",
+					toggleClassName: FLUSH_TOGGLE,
 					children: /* @__PURE__ */ jsx("pre", {
 						className: "bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]",
 						children: error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.3",
+  "version": "11.16.4",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.test.tsx

@@ -253,20 +253,6 @@ describe("AgentTimeline tool actions", () => {
     expect(classes[4]).toContain("mt-4") // prose → user
   })
 
-  it("softens the streaming cursor to a muted caret", () => {
-    const { container } = render(
-      <AgentTimeline
-        items={[
-          { id: "a-1", kind: "message", role: "assistant", content: "Typing", isStreaming: true },
-        ]}
-      />,
-    )
-    const caret = container.querySelector("[data-streaming-caret]")
-    expect(caret).not.toBeNull()
-    expect(caret!.className).toContain("bg-muted-foreground")
-    expect(caret!.className).not.toContain("bg-primary")
-  })
-
   it("renders the source part's real input in the expanded detail", async () => {
     const user = userEvent.setup()
     const probePart: ToolPart = {

package/src/chat/agent-timeline.tsx

@@ -162,13 +162,29 @@ function spacingBefore(prev: StepKind | undefined, next: StepKind): string {
 // wider than the bleed, so nothing clips.
 const ROW_BLEED = "-mx-3";
 
+// The streaming caret ends the last line of text. It is drawn as the `::after`
+// of the prose's last block (the last item of a trailing list), so it follows
+// the final word instead of starting a line of its own below the paragraph.
+const STREAMING_CARET =
+  "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] " +
+  "[&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
+
 function AssistantMessage({ item }: { item: AgentTimelineMessageItem }) {
   return (
     <div>
       {item.content && (
-        <Markdown className="tangle-prose text-[var(--font-size-base)] leading-[1.5]">{item.content}</Markdown>
+        <Markdown
+          // `length:` types the token: a bare `text-[var(--x)]` compiles to a
+          // color, which left the reading size at the Markdown default.
+          className={cn(
+            "tangle-prose text-[length:var(--font-size-base)] leading-[1.5]",
+            item.isStreaming && STREAMING_CARET,
+          )}
+        >
+          {item.content}
+        </Markdown>
       )}
-      {item.isStreaming && (
+      {item.isStreaming && !item.content && (
         <span
           aria-hidden
           data-streaming-caret=""

package/src/chat/chat-message.tsx

@@ -75,12 +75,12 @@ export function ChatMessage({
         )}
       >
         {isUser ? (
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]">
+          <div className="whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">
             {content}
           </div>
         ) : (
           <>
-            {content && <Markdown className="tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]">{content}</Markdown>}
+            {content && <Markdown className="tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">{content}</Markdown>}
             {isStreaming && (
               <span className="ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" />
             )}

package/src/chat/thinking-indicator.tsx

@@ -25,7 +25,7 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
       </div>
       {elapsed > 3 && (
-        <span className="text-[var(--font-size-xs)] tabular-nums text-muted-foreground">
+        <span className="text-[length:var(--font-size-xs)] tabular-nums text-muted-foreground">
           {elapsed}s
         </span>
       )}

package/src/chat/user-message.tsx

@@ -37,12 +37,12 @@ function UserBubble({ text, timestamp, actions }: {
           {timestamp ? (
             <span
               data-user-message-time=""
-              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
+          <div className="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">
             {text}
           </div>
         </div>

package/src/markdown/code-block.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import type SyntaxHighlighter from "react-syntax-highlighter";
 import { Check, Copy } from "lucide-react";
-import { focusRing } from "../lib/focus";
+import { focusRing, focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 // Leave variables unresolved: the browser resolves them on each token span,
@@ -118,6 +118,17 @@ export const CodeBlock = memo(
       overflowX: "auto" as const,
     };
     const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
+    // A long line scrolls the block sideways, which a keyboard reaches only if
+    // the block takes focus (axe scrollable-region-focusable). A label on a bare
+    // <pre> is prohibited ARIA, so the block is a named region, as the terminal
+    // output regions are.
+    const scrollRegion = {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": headerLabel ? `${headerLabel} code` : "Code",
+      // Inset: the rounded, overflow-clipped card would cut an outer ring.
+      className: focusRingInset,
+    } as const;
 
     return (
       <div
@@ -151,11 +162,12 @@ export const CodeBlock = memo(
             customStyle={customStyle}
             codeTagProps={codeTagProps}
             wrapLines={false}
+            {...scrollRegion}
           >
             {code}
           </Highlighter>
         ) : (
-          <pre style={{ ...syntaxTheme.hljs, ...customStyle }}>
+          <pre {...scrollRegion} style={{ ...syntaxTheme.hljs, ...customStyle }}>
             <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
           </pre>
         )}

package/src/run/expandable-content.tsx

@@ -11,6 +11,9 @@ export interface ExpandableContentProps {
    */
   fadeClassName?: string;
   className?: string;
+  /** Classes for the Show more / Show less toggle, e.g. an inset when the
+   *  content sits flush against its card's edges. */
+  toggleClassName?: string;
 }
 
 /**
@@ -23,6 +26,7 @@ export function ExpandableContent({
   collapsedMaxPx = 180,
   fadeClassName = "from-muted",
   className,
+  toggleClassName,
 }: ExpandableContentProps) {
   const [expanded, setExpanded] = useState(false);
   const [overflowing, setOverflowing] = useState(false);
@@ -63,7 +67,10 @@ export function ExpandableContent({
         <button
           type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+          className={cn(
+            "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            toggleClassName,
+          )}
         >
           {expanded ? "Show less" : "Show more"}
         </button>

package/src/run/expanded-tool-detail.tsx

@@ -23,6 +23,10 @@ export interface ExpandedToolDetailProps {
   part: ToolPart;
 }
 
+// The clamped output sits flush against its card's edges; the toggle under it
+// takes the card's 12px content inset so it does not touch the border.
+const FLUSH_TOGGLE = "mx-3 mb-2";
+
 const EXT_LANG: Record<string, string> = {
   ts: "typescript", tsx: "tsx", js: "javascript", jsx: "jsx",
   rs: "rust", py: "python", go: "go", rb: "ruby",
@@ -147,7 +151,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
               Output
             </span>
           </div>
-          <ExpandableContent fadeClassName="from-card">
+          <ExpandableContent fadeClassName="from-card" toggleClassName={FLUSH_TOGGLE}>
             <CodeBlock
               code={
                 outputStr.length > 2000
@@ -170,7 +174,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
               Error
             </span>
           </div>
-          <ExpandableContent fadeClassName="from-[var(--surface-danger-bg)]">
+          <ExpandableContent fadeClassName="from-[var(--surface-danger-bg)]" toggleClassName={FLUSH_TOGGLE}>
             <pre className="bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]">
               {error}
             </pre>