@tangle-network/ui 11.11.3 → 11.11.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.11.4
+
+### Patch Changes
+
+- 720de9a: Normalize the shared neutral palette and regenerate standalone chart tokens so charts follow the palette. Make user message cards wrap in narrow layouts.
+
 ## 11.11.3
 
 ### Patch Changes

package/dist/{chat-BUJhNpx2.js → chat-CpzvkA6m.js}

@@ -17,8 +17,8 @@ function formatTime$1(date) {
 	});
 }
 /**
-* The single user message bubble — a quiet, right-aligned fill on the muted
-* surface (no border, no loud fill, no uppercase label). The timestamp sits
+* The single user message bubble — a quiet, right-aligned card with a subtle
+* semantic border (no loud fill, no uppercase label). The timestamp sits
 * beside the bubble and appears on hover, so it costs no height. Used by both
 * the run/message list (session-model `parts`) and AgentTimeline (direct
 * `content`/`timestamp`).
@@ -29,15 +29,15 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "group flex max-w-[78%] flex-col items-end gap-2",
+			className: "group flex min-w-0 max-w-[78%] flex-col items-end gap-2",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative w-full rounded-2xl bg-muted/50 px-4 py-3",
+				className: "relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3",
 				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",
 					children: formatTime$1(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground",
+					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground",
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx("div", {

package/dist/chat.d.ts

@@ -1,2 +1,2 @@
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-CUhfHT_V.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-aoBxiKex.js";
 export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -1,2 +1,2 @@
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-BUJhNpx2.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-CpzvkA6m.js";
 export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };

package/dist/{index-CUhfHT_V.d.ts → index-aoBxiKex.d.ts}

@@ -87,8 +87,8 @@ interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble — a quiet, right-aligned fill on the muted
- * surface (no border, no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble — a quiet, right-aligned card with a subtle
+ * semantic border (no loud fill, no uppercase label). The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { t as AgentBranding } from "./branding-26d5ARIr.js";
 import { n as DisplayVariant, r as ToolDisplayMetadata, t as CustomToolRenderer } from "./tool-display-DgmL5rIU.js";
 import { a as Run, i as MessageUser, n as GroupedMessage, o as RunStats, r as MessageRun, s as ToolCategory, t as FinalTextPart } from "./run-OyWmIDqu.js";
 import { _ as OpenUITableNode, a as OpenUIBadgeNode, c as OpenUIComponentNode, d as OpenUIKeyValueNode, f as OpenUIMarkdownNode, g as OpenUIStatNode, h as OpenUIStackNode, i as OpenUIArtifactRendererProps, l as OpenUIGridNode, m as OpenUISeparatorNode, n as OpenUIActionsNode, o as OpenUICardNode, p as OpenUIPrimitive, r as OpenUIArtifactRenderer, s as OpenUICodeNode, t as OpenUIAction, u as OpenUIHeadingNode, v as OpenUITextNode } from "./openui-artifact-renderer-D3E5bIAI.js";
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-CUhfHT_V.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-aoBxiKex.js";
 import { a as parseToolEvent, i as ToolCallFeedProps, n as ToolCallData, o as ToolCallStatus, r as ToolCallFeed, s as ToolCallType, t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
 import { n as ArtifactPaneProps, t as ArtifactPane } from "./artifact-pane-BL_DFWNl.js";
 import { C as FileNode, D as filterFileTree, E as FileTreeVisibilityOptions, S as RichFileTreeThemeVars, T as FileTreeProps, _ as parseCsv, a as getCodeLanguage, b as RichFileTreeGitStatus, c as resolveFilePreviewKind, d as FileTabData, f as FileTabs, g as FilePreviewProps, h as FilePreview, i as fileExtension, l as FileArtifactPane, m as CSV_PREVIEW_ROW_LIMIT, n as FilePreviewKind, o as getFormatLabel, p as FileTabsProps, r as detectFileFormat, s as getSyntaxLanguage, t as FileFormat, u as FileArtifactPaneProps, v as RichFileTree, w as FileTree, x as RichFileTreeProps, y as RichFileTreeGitEntry } from "./index-CyGSLGVF.js";

package/dist/index.js

@@ -18,7 +18,7 @@ import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as I
 import { t as Markdown } from "./markdown-BGqicV82.js";
 import { n as InlineThinkingItem, t as RunGroup } from "./run-group-CxNskmHd.js";
 import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-C3bmqfjX.js";
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-BUJhNpx2.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-CpzvkA6m.js";
 import { t as LiveDuration } from "./run-ZsIKPA6J.js";
 import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-Djt2q11V.js";
 import "./openui.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.11.3",
+  "version": "11.11.4",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -139,7 +139,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.8.2",
+    "@tangle-network/brand": "^1.9.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/chat/user-message.test.tsx

@@ -3,13 +3,19 @@ import { describe, expect, it } from "vitest"
 import { UserMessage } from "./user-message"
 
 describe("UserMessage", () => {
-  it("renders the text in a borderless muted bubble", () => {
+  it("renders the text in a bordered card that wraps in narrow panes", () => {
     const { container } = render(<UserMessage content="Run the tests." />)
     expect(screen.getByText("Run the tests.")).toBeInTheDocument()
     const bubble = container.querySelector(".rounded-2xl")
     expect(bubble).not.toBeNull()
-    expect(bubble!.className).toContain("bg-muted/50")
-    expect(bubble!.className).not.toMatch(/(^|\s)border(\s|$)/)
+    expect(bubble!.className).toContain("bg-card")
+    expect(bubble!.className).toContain("border-border")
+    expect(container.querySelector(".group")?.className).toContain(
+      "min-w-0",
+    )
+    expect(screen.getByText("Run the tests.").className).toContain(
+      "break-words",
+    )
   })
 
   it("keeps the timestamp beside the bubble as a hover-revealed label", () => {

package/src/chat/user-message.tsx

@@ -17,8 +17,8 @@ function formatTime(date: Date): string {
 }
 
 /**
- * The single user message bubble — a quiet, right-aligned fill on the muted
- * surface (no border, no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble — a quiet, right-aligned card with a subtle
+ * semantic border (no loud fill, no uppercase label). The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).
@@ -36,8 +36,10 @@ export const UserMessage = memo(
 
     return (
       <div className="flex justify-end">
-        <div className="group flex max-w-[78%] flex-col items-end gap-2">
-          <div className="relative w-full rounded-2xl bg-muted/50 px-4 py-3">
+        <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
+          <div
+            className="relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3"
+          >
             {timestamp ? (
               <span
                 data-user-message-time=""
@@ -46,7 +48,7 @@ export const UserMessage = memo(
                 {formatTime(timestamp)}
               </span>
             ) : null}
-            <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
+            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
               {text}
             </div>
           </div>