@tangle-network/ui 6.0.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @tangle-network/ui
 
+## 8.0.0
+
+### Major Changes
+
+- 831e935: One composer, no zombie API. `ChatInput` is deleted — the canonical composer is `AgentComposer` in `@tangle-network/sandbox-ui`, composed below the transcript by the app. `ChatContainer` is now transcript-only: the input props (`onSend`, `onCancel`, `placeholder`, `hideInput`, `modelLabel`, `onModelClick`, `pendingFiles`, `onRemoveFile`, `onAttach`, `disabled`) and the `PendingFile` type are removed. `ChatMessage` drops the no-op `avatar`/`hideAvatar` props. `ToolCallStep`/`ToolCallGroup` are no longer exported (internal adapters over `InlineToolItem`); the `ToolCallType`/`ToolCallStatus` types stay public via `ToolCallData`, and `ToolCallFeed` is unchanged.
+
+## 7.0.0
+
+### Minor Changes
+
+- 46592b3: Calmer chat/run design + named multi-theme system.
+
+  - `ChatMessage`/`RunGroup`: role labels move above the bubble (plain text-xs), avatar circles removed (`avatar`/`hideAvatar` are deprecated no-ops), `InlineToolItem` rows are taller with quiet inline failed/running text instead of uppercase pills. `ToolCallStep`/`ToolCallFeed` stories leave Storybook (source adapters remain).
+  - `@tangle-network/brand` adds `themes.css`: `[data-theme]` scopes (`aubergine`, `aubergine-light`, `arena`, `arena-light`, `tangle-light`) that re-skin every component through the `@theme` semantic mappings, plus a `Foundations/Theme Showcase` story.
+
+### Patch Changes
+
+- Updated dependencies [46592b3]
+  - @tangle-network/brand@0.8.0
+
 ## 6.0.0
 
 ### Patch Changes

package/README.md

@@ -2,6 +2,8 @@
 
 Generic React UI components for Tangle products. Imports tokens from `@tangle-network/brand` (peer dep). Tailwind v4-native.
 
+Component visual precedent is governed by the repo-level [brand guidelines](../../docs/brand-guidelines.md) and [component audit](../../docs/component-audit.md). Storybook examples are test surfaces; they are not automatically approved brand patterns.
+
 ## Install
 
 ```sh

package/dist/chat.d.ts

@@ -7,83 +7,23 @@ import { AgentBranding } from './types.js';
 import { C as CustomToolRenderer } from './tool-display-z4JcDmMQ.js';
 import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
 import { OpenUIAction } from './openui.js';
-import { T as ToolCallData } from './tool-call-feed-Bs3MyQMT.js';
+import { T as ToolCallData } from './tool-call-feed-D9iofJgW.js';
 
 /**
- * ChatInput — message input bar with file attach, drag-and-drop, send/cancel.
- *
- * - Auto-resizing textarea (up to max height)
- * - Enter to send, Shift+Enter for newline
- * - Drag-and-drop files onto the input with styled overlay
- * - File attachment button (files) + folder attachment button
- * - Pending file/folder chips
- * - Cancel button when streaming
- * - Optional model selector pill
+ * Transcript-only container: message list + auto-scroll. Composers are
+ * composed BELOW this by the app (the canonical one is `AgentComposer` in
+ * `@tangle-network/sandbox-ui`) — this component never renders an input.
  */
-interface PendingFile {
-    id: string;
-    name: string;
-    size: number;
-    type: "file" | "folder";
-    /** Number of files inside (for folders) */
-    fileCount?: number;
-    status: "pending" | "uploading" | "ready" | "error";
-}
-interface ChatInputProps {
-    onSend: (message: string, files?: File[]) => void;
-    onCancel?: () => void;
-    isStreaming?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    /** Currently selected model label */
-    modelLabel?: string;
-    onModelClick?: () => void;
-    /** Pending uploaded files */
-    pendingFiles?: PendingFile[];
-    onRemoveFile?: (id: string) => void;
-    /** Called when files are attached (via button or drag-and-drop) */
-    onAttach?: (files: FileList) => void;
-    /** Called when a folder is selected via the folder button */
-    onAttachFolder?: (files: FileList) => void;
-    /** Accepted file types for the file input (e.g. ".pdf,.csv") */
-    accept?: string;
-    /** Drop zone overlay title */
-    dropTitle?: string;
-    /** Drop zone overlay description */
-    dropDescription?: string;
-    className?: string;
-    /** Label above the input. Set to null to hide. Default: "Agent Command Deck" */
-    inputLabel?: string | null;
-    /** Status text shown when idle. Set to null to hide. Default: "Ready for next instruction" */
-    idleStatus?: string | null;
-    /** Status text shown when streaming. Set to null to hide. Default: "Streaming response" */
-    streamingStatus?: string | null;
-    /** Hide the Cmd+L focus shortcut hint */
-    hideShortcutHint?: boolean;
-}
-declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, inputLabel, idleStatus, streamingStatus, hideShortcutHint, }: ChatInputProps): react_jsx_runtime.JSX.Element;
-
 interface ChatContainerProps {
     messages: SessionMessage[];
     partMap: Record<string, SessionPart[]>;
     isStreaming: boolean;
-    onSend?: (text: string) => void;
-    onCancel?: () => void;
     branding?: AgentBranding;
-    placeholder?: string;
     className?: string;
-    /** Hide the input area (useful for read-only views). */
-    hideInput?: boolean;
     /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
     renderToolDetail?: CustomToolRenderer;
     /** Presentation mode for the session view. */
     presentation?: "runs" | "timeline";
-    modelLabel?: string;
-    onModelClick?: () => void;
-    pendingFiles?: PendingFile[];
-    onRemoveFile?: (id: string) => void;
-    onAttach?: (files: FileList) => void;
-    disabled?: boolean;
     /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
     onOpenUIAction?: (action: OpenUIAction) => void;
     /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
@@ -100,10 +40,10 @@ interface ChatContainerProps {
     }) => ReactNode;
 }
 /**
- * Full chat container: message list + auto-scroll + input area.
+ * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, onCancel, branding, placeholder, className, hideInput, renderToolDetail, presentation, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, disabled, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
 
 interface MessageListProps {
     groups: GroupedMessage[];
@@ -158,12 +98,8 @@ interface ChatMessageProps {
     assistantLabel?: string;
     /** Hide the role label row entirely */
     hideRoleLabel?: boolean;
-    /** Hide the avatar icon */
-    hideAvatar?: boolean;
-    /** Custom avatar element (replaces default User/Bot icon) */
-    avatar?: ReactNode;
 }
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, hideAvatar, avatar, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
 
 interface ThinkingIndicatorProps {
     className?: string;
@@ -229,4 +165,4 @@ interface AgentTimelineProps {
  */
 declare function AgentTimeline({ items, isThinking, emptyState, className, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
 
-export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, type PendingFile, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };
+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,15 +1,14 @@
 import {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-SJ6IL4HI.js";
+} from "./chunk-UOLL2YHG.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-LASW7CYH.js";
-import "./chunk-EOGJX2TU.js";
+import "./chunk-QIRVZMQY.js";
+import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";
@@ -22,7 +21,6 @@ import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,

package/dist/{chunk-PN3S2MTV.js → chunk-DLSGUNRD.js}

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

package/dist/{chunk-O6NUUCT2.js → chunk-IWQZXL6A.js}

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

package/dist/{chunk-LASW7CYH.js → chunk-QIRVZMQY.js}

@@ -1,7 +1,7 @@
 import {
   InlineToolItem,
   LiveDuration
-} from "./chunk-EOGJX2TU.js";
+} from "./chunk-RKQDBRTC.js";
 import {
   formatDuration,
   truncateText
@@ -142,18 +142,15 @@ function AssistantShell({
   isStreaming,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex gap-2.5", children: [
-    /* @__PURE__ */ jsx2("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white", children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsxs2("div", { className: ASSISTANT_SHELL, children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", children: [
-        /* @__PURE__ */ jsx2("span", { children: branding.label }),
-        isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 text-[var(--text-muted)]", children: [
-          /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
-          "Thinking"
-        ] }) : null
-      ] }),
-      children
-    ] })
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx2("span", { children: branding.label }),
+      isStreaming ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx2(Loader2, { className: "h-3 w-3 animate-spin" }),
+        "Thinking"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: ASSISTANT_SHELL, children })
   ] });
 }
 var CATEGORY_ICON_MAP = {
@@ -378,16 +375,7 @@ var RunGroup = memo2(
               "bg-transparent hover:bg-transparent"
             ),
             children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  className: cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white"
-                  ),
-                  children: /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5" })
-                }
-              ),
-              /* @__PURE__ */ jsx2("span", { className: cn("text-sm font-semibold", branding.textClass), children: branding.label }),
+              /* @__PURE__ */ jsx2("span", { className: cn("font-semibold text-sm", branding.textClass), children: branding.label }),
               renderSummary(run) ? /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: renderSummary(run) }) : null,
               collapsed && run.summaryText ? /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[11px] text-foreground/70", children: run.summaryText }) : null,
               /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [

package/dist/{chunk-EOGJX2TU.js → chunk-RKQDBRTC.js}

@@ -233,7 +233,7 @@ var InlineToolItem = memo2(
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [
+              /* @__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",
@@ -246,8 +246,8 @@ var InlineToolItem = memo2(
                 /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
                   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: "rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]", children: "Failed" }) : null,
-                  isRunning ? /* @__PURE__ */ jsx3("span", { className: "rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary", children: "Running" }) : 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,
                   open ? /* @__PURE__ */ jsx3(ChevronDown, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx3(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
                 ] })
               ] }),