@tangle-network/ui 9.1.3 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

package/dist/chat.js

@@ -5,7 +5,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-7BMLW3H2.js";
+} from "./chunk-KHO7DYXH.js";
 import "./chunk-AZWDI2JG.js";
 import "./chunk-HHYUPAOJ.js";
 import "./chunk-INMWNFAS.js";

package/dist/{chunk-7BMLW3H2.js → chunk-KHO7DYXH.js}

@@ -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/index.js

@@ -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-7BMLW3H2.js";
+} from "./chunk-KHO7DYXH.js";
 import {
   useAutoScroll,
   useRunCollapseState,

package/dist/primitives.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "9.1.3",
+  "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.2"
+    "@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/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"
     >