@tangle-network/ui 9.1.2 → 9.1.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @tangle-network/ui
 
+## 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-7BMLW3H2.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-BQVQGDDV.js → chunk-7BMLW3H2.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"
     ] })

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/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,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-BQVQGDDV.js";
+} from "./chunk-7BMLW3H2.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/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": "9.1.3",
   "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.8.2"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

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/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}