@tangle-network/sandbox-ui 0.86.0 → 0.87.0

package/dist/chat.d.ts

@@ -331,6 +331,13 @@ interface AgentComposerMention {
     renderItem?: (item: MentionItem) => React.ReactNode;
     /** Shown when a fetch resolves to zero items. Default "No matches". */
     emptyText?: string;
+    /**
+     * Extra classes merged onto the suggestion popover's root element
+     * (`role="listbox"`), applied last so they win over the component's own —
+     * the supported way to retheme the popover instead of targeting it by its
+     * ARIA attributes.
+     */
+    popoverClassName?: string;
 }
 /** A staged attachment shown as a chip above the input. */
 interface ComposerFile {
@@ -465,6 +472,17 @@ interface AgentComposerProps {
  */
 declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, mention, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Visual contract for a rendered mention pill. The TipTap editor extension in
+ * `mention-editor.tsx` styles its inline atom node with this, and any other
+ * surface that renders a resolved mention (e.g. a sent-message transcript)
+ * should use the same constant so the two stay one visual contract instead of
+ * silently drifting apart. Kept in its own module (no TipTap import) so
+ * importing it never pulls the lazily-loaded editor chunk into a consumer's
+ * bundle.
+ */
+declare const MENTION_PILL_CLASS: string;
+
 /**
  * Whether `harness` can run `modelId`. Router-backed harnesses, and provider-less
  * sentinel ids (like "default" or an empty selection — "the session's own
@@ -577,4 +595,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles };
+export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles };

package/dist/chat.js

@@ -19,8 +19,11 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-PKZVCCZ6.js";
+} from "./chunk-R5OVYRIY.js";
 import "./chunk-TK46XFLM.js";
+import {
+  MENTION_PILL_CLASS
+} from "./chunk-WGOOQAW3.js";
 import "./chunk-2T6KBMLN.js";
 import "./chunk-R4AR3TKR.js";
 import "./chunk-I3G23XHN.js";
@@ -36,6 +39,7 @@ export {
   ChatMessage,
   DEFAULT_REASONING_LEVEL_OPTIONS,
   HARNESS_REASONING_OPTIONS,
+  MENTION_PILL_CLASS,
   MessageList,
   ReasoningLevelPicker,
   ThinkingIndicator,

package/dist/{chunk-PKZVCCZ6.js → chunk-R5OVYRIY.js}

@@ -1147,7 +1147,7 @@ function imageExtension(file) {
   const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
   return fromName?.toLowerCase() ?? "png";
 }
-var MentionEditor = React4.lazy(() => import("./mention-editor-7FLUUWY5.js"));
+var MentionEditor = React4.lazy(() => import("./mention-editor-6PITHKPR.js"));
 function AgentComposer({
   value,
   onChange,

package/dist/chunk-WGOOQAW3.js

@@ -0,0 +1,12 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/chat/mention-pill.ts
+var MENTION_PILL_CLASS = cn(
+  "rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary"
+);
+
+export {
+  MENTION_PILL_CLASS
+};

package/dist/globals.css

@@ -2037,6 +2037,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
+  .border-primary\/40 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
   .border-primary\/50 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
-export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles } from './chat.js';
+export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';

package/dist/index.js

@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-PKZVCCZ6.js";
+} from "./chunk-R5OVYRIY.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -105,6 +105,9 @@ import {
   timeAgo,
   truncateText
 } from "./chunk-TK46XFLM.js";
+import {
+  MENTION_PILL_CLASS
+} from "./chunk-WGOOQAW3.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -455,6 +458,7 @@ export {
   LiveDuration,
   LoginLayout,
   Logo,
+  MENTION_PILL_CLASS,
   Markdown,
   MessageList,
   MetricAreaChart,

package/dist/{mention-editor-7FLUUWY5.js → mention-editor-6PITHKPR.js}

@@ -1,3 +1,6 @@
+import {
+  MENTION_PILL_CLASS
+} from "./chunk-WGOOQAW3.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -16,7 +19,15 @@ import { Loader2 } from "lucide-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MentionList = React.forwardRef(
-  function MentionList2({ items, loading, error, emptyText = "No matches", renderItem, onSelect }, ref) {
+  function MentionList2({
+    items,
+    loading,
+    error,
+    emptyText = "No matches",
+    renderItem,
+    onSelect,
+    className
+  }, ref) {
     const [selected, setSelected] = React.useState(0);
     const selectedRef = React.useRef(0);
     const move = (next) => {
@@ -55,8 +66,9 @@ var MentionList = React.forwardRef(
         role: "listbox",
         "aria-label": "File mentions",
         className: cn(
-          "max-h-64 min-w-[16rem] max-w-sm overflow-y-auto rounded-xl border border-[var(--md3-outline-variant)]",
-          "bg-surface-container-high p-1 shadow-lg"
+          "max-h-64 min-w-[16rem] max-w-sm overflow-y-auto rounded-xl border border-border",
+          "bg-popover text-popover-foreground p-1 shadow-lg",
+          className
         ),
         children: [
           loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-muted-foreground text-sm", children: [
@@ -207,9 +219,6 @@ function buildComposerStarterKit() {
     underline: false
   });
 }
-var MENTION_PILL_CLASS = cn(
-  "rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary"
-);
 function buildMentionExtension(trigger, suggestion) {
   return Mention.extend({
     addAttributes() {
@@ -460,7 +469,8 @@ function MentionEditor({
             error: errored,
             emptyText: mention.emptyText,
             renderItem: mention.renderItem,
-            onSelect: (item) => commandRef.current?.(item)
+            onSelect: (item) => commandRef.current?.(item),
+            className: mention.popoverClassName
           }
         )
       }

package/dist/styles.css

@@ -2037,6 +2037,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
+  .border-primary\/40 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
   .border-primary\/50 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",