@tangle-network/ui 9.1.2 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @tangle-network/ui
 
+## 10.0.0
+
+### Patch Changes
+
+- 68e5053: Transcript spacing, markdown styling, and the remaining WCAG AA fixes.
+
+  - **Markdown was unstyled**: `@tailwindcss/typography` isn't loaded and `tangle-prose` was undefined, so structured markdown had no styling — table cells collided (no dividers/padding) and text ran flush into code blocks. Defined `tangle-prose` (self-contained, theme-tokened): tables get border-collapse hairline dividers + cell padding, and blocks (headings, paragraphs, lists, `pre`, code) get proper vertical rhythm. Links use `--accent-text` (readable in every theme).
+  - **Timeline spacing**: user messages sat flush against the status/tool/agent row below them. They're off-spine, so they now carry their own vertical rhythm (`mt-6 mb-4`).
+  - **WCAG AA (measured live across 7 themes)**: `--btn-primary-*` (dark + all named themes were 4.47/2.98 → now ≥5.9 via `#5B4ED4`/`#4F46E5`); `--hsl-destructive` button/badge (3.67 → ≥4.5); named light themes now carry light-tuned `--hsl-destructive`/`--hsl-secondary-foreground`/`--surface-neutral-text` (were inheriting dark values, secondary badge ~1.05); input borders (`--input` → `--hsl-muted-foreground`) now clear 1.4.11 3:1 as visible field boundaries.
+
+- Updated dependencies [68e5053]
+  - @tangle-network/brand@0.9.0
+
+## 9.1.3
+
+### Patch Changes
+
+- 26cc012: Give run/timeline tool rows a proper elevation ladder. Rows read as the same value as the canvas: `InlineToolItem` used `bg-card/40` (near-transparent) and RunGroup's OpenUI/running blocks used `bg-[var(--bg-root)]` (literally the page background). Both now use `--md3-surface-container` — one clear step above the `--bg-root` canvas — with hover/open stepping to `--md3-surface-container-high`. Rows now separate from the background instead of blending into it.
+- 26cc012: One user-message bubble. There were two: the exported `UserMessage` (a loud filled purple bubble with an uppercase "You" label + shadow, used by the run/message list) and a separate cleaner inline bubble inside `AgentTimeline`. Unify on the clean one — `UserMessage` is now a quiet right-aligned bordered bubble on the muted surface (no fill, no uppercase label), and `AgentTimeline` renders through it instead of its own copy. `UserMessage` accepts either session-model `parts` or a direct `content`/`timestamp`, so both call sites share it.
+- 26cc012: WCAG 1.4.3 AA contrast fixes across all 7 themes (measured with a cascade-resolved contrast audit).
+
+  - **Primary buttons**: `text-primary-foreground` on `bg-primary` was below 4.5:1 in `dark` (4.41) and `arena-light` (4.20). Darkened those two primaries (dark L 67%→62%, arena-light L 30%→27%) — all 7 themes now ≥5.0:1, hue unchanged.
+  - **Status colors in the named light themes**: `aubergine-light` / `arena-light` / `tangle-light` inherited the dark `:root` bright status palette (`#f87171`/`#34D399`/…), so danger/success text + glyphs dropped to ~2.5:1 on their light surfaces. Added a shared light-tuned status palette (dark-on-light text, mirroring the base light theme) — status text now passes AA and glyphs pass 1.4.11.
+  - **Running tool state**: the "running" label + spinner used `text-primary`, which fell to 2.98:1 on the dark row surface. Switched to `--accent-text` (the readable accent tier) — passes in every theme.
+  - **Thinking timer**: the elapsed-seconds counter used the faint `--text-dim` tier (~3:1). Moved it to `--text-muted` (passes AA everywhere).
+
+  Text now meets AA in all 7 themes; most pairs are AAA.
+
+- Updated dependencies [26cc012]
+  - @tangle-network/brand@0.8.2
+
 ## 9.1.2
 
 ### Patch Changes

package/dist/chat.js

@@ -5,10 +5,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-BQVQGDDV.js";
+} from "./chunk-KHO7DYXH.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-KWRLQ3MR.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-HHYUPAOJ.js";
+import "./chunk-INMWNFAS.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/{chunk-IVQYFG5D.js → chunk-CCM2KRQH.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-V6BF4AZ7.js";
+} from "./chunk-KBOD47AW.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-KWRLQ3MR.js → chunk-HHYUPAOJ.js}

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   formatDuration,
   truncateText

package/dist/{chunk-WVW4KHEH.js → chunk-INMWNFAS.js}

@@ -236,7 +236,7 @@ var InlineToolItem = memo2(
               /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5 px-3 py-2.5", children: [
                 /* @__PURE__ */ jsx3("div", { className: cn(
                   "shrink-0",
-                  isRunning && "text-primary",
+                  isRunning && "text-[var(--accent-text)]",
                   isComplete && "text-[var(--surface-success-text)]",
                   isError && "text-[var(--surface-danger-text)]",
                   !isRunning && !isComplete && !isError && "text-muted-foreground"
@@ -247,7 +247,7 @@ var InlineToolItem = memo2(
                   isRunning && startTime ? /* @__PURE__ */ jsx3(LiveDuration, { startTime }) : null,
                   !isRunning && durationMs != null ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
                   isError ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-[var(--surface-danger-text)]", children: "failed" }) : null,
-                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-primary", children: "running" }) : null,
+                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-medium text-[var(--accent-text)]", children: "running" }) : null,
                   open ? /* @__PURE__ */ jsx3(ChevronDown, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx3(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
                 ] })
               ] }),

package/dist/{chunk-V6BF4AZ7.js → chunk-KBOD47AW.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   Markdown
 } from "./chunk-FJBTCTZM.js";

package/dist/{chunk-BQVQGDDV.js → chunk-KHO7DYXH.js}

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
@@ -126,7 +126,7 @@ function ThinkingIndicator({ className }) {
       /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
       /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
     ] }),
-    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-[var(--text-dim)]", children: [
+    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
       elapsed,
       "s"
     ] })
@@ -242,7 +242,7 @@ function AgentTimeline({
   const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
   return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
     if (item.kind === "message" && item.role === "user") {
-      return /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }, item.id);
+      return /* @__PURE__ */ jsx4("div", { className: "mt-6 mb-4 first:mt-0", children: /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) }, item.id);
     }
     const timelineIndex = timelineItems.indexOf(item);
     const isLast = timelineIndex === timelineItems.length - 1;

package/dist/{chunk-XY2FP763.js → chunk-XZFJAF6G.js}

@@ -610,6 +610,7 @@ function ToastContainer({ toasts, onDismiss }) {
   return /* @__PURE__ */ jsx8(
     "div",
     {
+      role: "region",
       className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
       "aria-label": "Notifications",
       children: toasts.map((toast) => /* @__PURE__ */ jsx8(ToastComponent, { ...toast, onDismiss }, toast.id))

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-V6BF4AZ7.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-KBOD47AW.js";
+import "./chunk-INMWNFAS.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import {
   addMessage,
   addParts,
@@ -109,7 +109,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XY2FP763.js";
+} from "./chunk-XZFJAF6G.js";
 import {
   Avatar,
   AvatarFallback,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-BQVQGDDV.js";
+} from "./chunk-KHO7DYXH.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,16 +147,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-V6BF4AZ7.js";
+} from "./chunk-KBOD47AW.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,

package/dist/primitives.js

@@ -44,7 +44,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XY2FP763.js";
+} from "./chunk-XZFJAF6G.js";
 import {
   Avatar,
   AvatarFallback,

package/dist/run.js

@@ -2,16 +2,16 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-V6BF4AZ7.js";
+} from "./chunk-KBOD47AW.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-KWRLQ3MR.js";
+} from "./chunk-HHYUPAOJ.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   LiveDuration
-} from "./chunk-WVW4KHEH.js";
+} from "./chunk-INMWNFAS.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-IVQYFG5D.js";
+} from "./chunk-CCM2KRQH.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-V6BF4AZ7.js";
-import "./chunk-WVW4KHEH.js";
+import "./chunk-KBOD47AW.js";
+import "./chunk-INMWNFAS.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "9.1.2",
+  "version": "10.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.8.1"
+    "@tangle-network/brand": "^0.9.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/agent-timeline.tsx

@@ -265,9 +265,14 @@ export function AgentTimeline({
   return (
     <div className={cn("mx-auto w-full max-w-5xl px-4 py-4", className)}>
       {renderedItems.map((item, index) => {
-        // User messages: right-aligned bubble, no connector
+        // User messages: right-aligned bubble, off-spine — needs its own vertical
+        // rhythm so it doesn't sit flush against the status/tool/agent row below.
         if (item.kind === "message" && item.role === "user") {
-          return <UserMessage key={item.id} content={item.content} timestamp={item.timestamp} />;
+          return (
+            <div key={item.id} className="mt-6 mb-4 first:mt-0">
+              <UserMessage content={item.content} timestamp={item.timestamp} />
+            </div>
+          );
         }
 
         const timelineIndex = timelineItems.indexOf(item);

package/src/chat/thinking-indicator.tsx

@@ -21,7 +21,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-[var(--text-dim)]">
+        <span className="text-[var(--font-size-xs)] tabular-nums text-muted-foreground">
           {elapsed}s
         </span>
       )}

package/src/primitives/toast.tsx

@@ -93,6 +93,11 @@ interface ToastContainerProps {
 export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
   return (
     <div
+      // A generic div can't carry aria-label (WCAG 4.1.2 / axe
+      // aria-prohibited-attr); role="region" makes it a valid, navigable
+      // landmark. Live announcement stays on each toast (role="alert"
+      // aria-live="polite"), so the region itself is not a live region.
+      role="region"
       className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2"
       aria-label="Notifications"
     >

package/src/run/inline-tool-item.tsx

@@ -118,7 +118,7 @@ export const InlineToolItem = memo(
               <div className="flex items-center gap-2.5 px-3 py-2.5">
                 <div className={cn(
                   "shrink-0",
-                  isRunning && "text-primary",
+                  isRunning && "text-[var(--accent-text)]",
                   isComplete && "text-[var(--surface-success-text)]",
                   isError && "text-[var(--surface-danger-text)]",
                   !isRunning && !isComplete && !isError && "text-muted-foreground",
@@ -156,7 +156,7 @@ export const InlineToolItem = memo(
                     </span>
                   ) : null}
                   {isRunning ? (
-                    <span className="text-[10px] font-medium text-primary">
+                    <span className="text-[10px] font-medium text-[var(--accent-text)]">
                       running
                     </span>
                   ) : null}