@uipath/apollo-wind 2.67.1 → 2.69.0

package/dist/components/ui/index.d.ts

@@ -14,6 +14,7 @@ export * from './calendar';
 export * from './card';
 export * from './chart';
 export * from './checkbox';
+export * from './code-block';
 export * from './collapsible';
 export * from './combobox';
 export * from './command';
@@ -37,7 +38,10 @@ export * from './input-group';
 export * from './json-tree-view';
 export * from './label';
 export * from './layout';
+export * from './live-region';
+export * from './loading-dots';
 export * from './lockable-value-field';
+export * from './markdown';
 export * from './marker';
 export * from './message';
 export * from './message-scroller';
@@ -66,10 +70,13 @@ export * from './stats-card';
 export * from './stepper';
 export * from './switch';
 export * from './table';
+export * from './panel-tabs';
 export * from './tabs';
 export * from './textarea';
+export * from './thinking-indicator';
 export * from './toggle';
 export * from './toggle-group';
+export * from './tool-call';
 export * from './tooltip';
 export type { FileTreeViewIconMap, FileTreeViewItem, FileTreeViewItemAction, FileTreeViewMenuItem, FileTreeViewProps, FileTreeViewSelectionMode, TreeViewIconMap, TreeViewItem, TreeViewItemAction, TreeViewMenuItem, TreeViewProps, TreeViewSelectionMode, } from './tree-view';
 export { default as FileTreeView, TreeView } from './tree-view';

package/dist/components/ui/index.js

@@ -15,6 +15,7 @@ export * from "./calendar.js";
 export * from "./card.js";
 export * from "./chart.js";
 export * from "./checkbox.js";
+export * from "./code-block.js";
 export * from "./collapsible.js";
 export * from "./combobox.js";
 export * from "./command.js";
@@ -38,7 +39,10 @@ export * from "./input-group.js";
 export * from "./json-tree-view/index.js";
 export * from "./label.js";
 export * from "./layout/index.js";
+export * from "./live-region.js";
+export * from "./loading-dots.js";
 export * from "./lockable-value-field/index.js";
+export * from "./markdown.js";
 export * from "./marker.js";
 export * from "./message.js";
 export * from "./message-scroller/index.js";
@@ -67,10 +71,13 @@ export * from "./stats-card.js";
 export * from "./stepper.js";
 export * from "./switch.js";
 export * from "./table.js";
+export * from "./panel-tabs.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
+export * from "./thinking-indicator.js";
 export * from "./toggle.js";
 export * from "./toggle-group.js";
+export * from "./tool-call.js";
 export * from "./tooltip.js";
 export * from "./variable-picker/index.js";
 export * from "./variable-value-control.js";

package/dist/components/ui/json-tree-view/JsonTree.cjs

@@ -30,8 +30,8 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_virtual_namespaceObject = require("@tanstack/react-virtual");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const clipboard_cjs_namespaceObject = require("../../../lib/clipboard.cjs");
 const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
-const external_clipboard_cjs_namespaceObject = require("./clipboard.cjs");
 const external_JsonTreeRow_cjs_namespaceObject = require("./JsonTreeRow.cjs");
 const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
 const external_strings_cjs_namespaceObject = require("./strings.cjs");
@@ -153,7 +153,7 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
             if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
         }, []);
     const copy = (node, kind, text)=>{
-        (0, external_clipboard_cjs_namespaceObject.copyTextToClipboard)(text).then((ok)=>{
+        (0, clipboard_cjs_namespaceObject.copyTextToClipboard)(text).then((ok)=>{
             if (!ok) return;
             setCopied({
                 path: node.path,

package/dist/components/ui/json-tree-view/JsonTree.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../../../lib/index.js";
+import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { flattenJsonTree } from "./buildJsonTree.js";
-import { copyTextToClipboard } from "./clipboard.js";
 import { JsonTreeRow, JsonTreeRowContextProvider, ROW_MIN_HEIGHT_PX } from "./JsonTreeRow.js";
 import { JsonTreeTooltipProvider } from "./JsonTreeTooltip.js";
 import { JsonTreeViewProvider, useJsonTreeViewStrings } from "./strings.js";

package/dist/components/ui/json-tree-view/JsonTree.types.d.ts

@@ -127,6 +127,11 @@ export interface NodeDecoration {
     label?: string;
     /** Small muted text after the key label (e.g. an identifier). */
     sublabel?: string;
+    /**
+     * Shows the sublabel only while the row is hovered or holds focus. It sits
+     * in the row's flexible space, so revealing it never moves the trailing cluster.
+     */
+    sublabelOnHover?: boolean;
     /** Replaces the type badge's icon and/or color. */
     badge?: NodeDecorationBadge;
     /** Small pill rendered next to the key (e.g. "mocked"). */
@@ -135,6 +140,17 @@ export interface NodeDecoration {
      * Hides the built-in keys/items count on a container row.
      */
     hideCount?: boolean;
+    /**
+     * Hides the value cell on a scalar row, for a row that names something
+     * (e.g. a node with no output yet) rather than holding a value.
+     */
+    hideValue?: boolean;
+    /**
+     * Content in the row's trailing cluster, between the `start` and `end`
+     * actions (e.g. a count). The cluster never shrinks, so it stays in place
+     * while the key and sublabel truncate.
+     */
+    meta?: ReactNode;
 }
 /** Context passed to a custom value cell renderer. */
 export interface RenderValueContext {
@@ -176,6 +192,16 @@ export interface NodeAction {
     disabled?: boolean;
     /** Color tone; `error` tints a destructive action. Defaults to neutral. */
     tone?: NodeDecorationTone;
+    /**
+     * Keeps the action visible at rest instead of revealing it on row hover.
+     * For a row's primary action. Ignored once actions collapse into the menu.
+     */
+    persistent?: boolean;
+    /**
+     * Where the action sits in the row's trailing cluster: `start` renders it
+     * before the decoration `meta`, `end` (the default) after it.
+     */
+    placement?: 'start' | 'end';
 }
 /** Context passed to `nodeActions`, mirroring the value-cell edit context. */
 export interface NodeActionContext {

package/dist/components/ui/json-tree-view/JsonTreeRow.cjs

@@ -42,12 +42,12 @@ const external_JsonTypeBadge_cjs_namespaceObject = require("./JsonTypeBadge.cjs"
 const external_NodeKey_cjs_namespaceObject = require("./NodeKey.cjs");
 const external_RowActions_cjs_namespaceObject = require("./RowActions.cjs");
 const external_ScalarValueCell_cjs_namespaceObject = require("./ScalarValueCell.cjs");
-const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-1.5 py-1 pr-1 transition hover:bg-surface-overlay';
+const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-2 py-1 pr-1 transition hover:bg-surface-overlay';
 const ROW_MIN_HEIGHT_PX = 28;
 const VALUE_CELL_CLASS = 'flex min-w-8 flex-1 items-center';
 function rowIndent(depth, extra = 0) {
     return {
-        paddingLeft: `${6 + 12 * depth + extra}px`
+        paddingLeft: `${8 + 16 * depth + extra}px`
     };
 }
 const KEY_ALIGN_OFFSET = 44;
@@ -138,12 +138,13 @@ function JsonTreeRow({ node, depth }) {
                     isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                         type: "button",
                         onClick: ()=>onToggleCollapsed?.(node.path),
-                        "aria-label": collapsed[node.path] ? strings.expandKey(node.key) : strings.collapseKey(node.key),
-                        "aria-expanded": !collapsed[node.path],
-                        className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground",
+                        disabled: !onToggleCollapsed,
+                        "aria-label": (0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path) ? strings.expandKey(node.key) : strings.collapseKey(node.key),
+                        "aria-expanded": !(0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path),
+                        className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground disabled:cursor-default disabled:hover:text-foreground-subtle",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
                             size: 10,
-                            className: (0, index_cjs_namespaceObject.cn)('transition-transform duration-100', collapsed[node.path] && '-rotate-90')
+                            className: (0, index_cjs_namespaceObject.cn)('transition-transform duration-100', (0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path) && '-rotate-90')
                         })
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "size-2.5 shrink-0"
@@ -168,7 +169,7 @@ function JsonTreeRow({ node, depth }) {
                         "aria-label": strings.pathCopied
                     }),
                     decoration?.sublabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4",
+                        className: (0, index_cjs_namespaceObject.cn)('min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4', decoration.sublabelOnHover && 'hidden group-hover:block group-focus-within:block'),
                         children: decoration.sublabel
                     }),
                     node.required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {
@@ -191,12 +192,13 @@ function JsonTreeRow({ node, depth }) {
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
                                 node: node,
                                 actions: actions,
-                                maxInline: maxInlineActions
+                                maxInline: maxInlineActions,
+                                meta: decoration?.meta
                             })
                         ]
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
-                            !wrapped && (null != customCell ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            !wrapped && !decoration?.hideValue && (null != customCell ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                 className: VALUE_CELL_CLASS,
                                 children: customCell
                             }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
@@ -226,7 +228,8 @@ function JsonTreeRow({ node, depth }) {
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
                                         node: node,
                                         actions: actions,
-                                        maxInline: maxInlineActions
+                                        maxInline: maxInlineActions,
+                                        meta: decoration?.meta
                                     })
                                 ]
                             })

package/dist/components/ui/json-tree-view/JsonTreeRow.js

@@ -4,7 +4,7 @@ import { RequiredIndicator } from "../label.js";
 import { ChevronDown, CircleCheck, Copy, Pencil, WrapText } from "lucide-react";
 import { createContext, useContext } from "react";
 import { useJsonTreeViewStrings } from "./strings.js";
-import { formatLeafValue, isArrayItemTemplateRoot } from "./buildJsonTree.js";
+import { formatLeafValue, isArrayItemTemplateRoot, isPathCollapsed } from "./buildJsonTree.js";
 import { DecorationChip } from "./DecorationChip.js";
 import { JsonContainerEditor } from "./JsonContainerEditor.js";
 import { JsonMultilineLeafEditor } from "./JsonMultilineLeafEditor.js";
@@ -12,12 +12,12 @@ import { JsonTypeBadge } from "./JsonTypeBadge.js";
 import { NodeKey } from "./NodeKey.js";
 import { RowActions } from "./RowActions.js";
 import { ScalarValueCell, valueColorClass } from "./ScalarValueCell.js";
-const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-1.5 py-1 pr-1 transition hover:bg-surface-overlay';
+const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-2 py-1 pr-1 transition hover:bg-surface-overlay';
 const ROW_MIN_HEIGHT_PX = 28;
 const VALUE_CELL_CLASS = 'flex min-w-8 flex-1 items-center';
 function rowIndent(depth, extra = 0) {
     return {
-        paddingLeft: `${6 + 12 * depth + extra}px`
+        paddingLeft: `${8 + 16 * depth + extra}px`
     };
 }
 const KEY_ALIGN_OFFSET = 44;
@@ -108,12 +108,13 @@ function JsonTreeRow({ node, depth }) {
                     isContainer ? /*#__PURE__*/ jsx("button", {
                         type: "button",
                         onClick: ()=>onToggleCollapsed?.(node.path),
-                        "aria-label": collapsed[node.path] ? strings.expandKey(node.key) : strings.collapseKey(node.key),
-                        "aria-expanded": !collapsed[node.path],
-                        className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground",
+                        disabled: !onToggleCollapsed,
+                        "aria-label": isPathCollapsed(collapsed, node.path) ? strings.expandKey(node.key) : strings.collapseKey(node.key),
+                        "aria-expanded": !isPathCollapsed(collapsed, node.path),
+                        className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground disabled:cursor-default disabled:hover:text-foreground-subtle",
                         children: /*#__PURE__*/ jsx(ChevronDown, {
                             size: 10,
-                            className: cn('transition-transform duration-100', collapsed[node.path] && '-rotate-90')
+                            className: cn('transition-transform duration-100', isPathCollapsed(collapsed, node.path) && '-rotate-90')
                         })
                     }) : /*#__PURE__*/ jsx("div", {
                         className: "size-2.5 shrink-0"
@@ -138,7 +139,7 @@ function JsonTreeRow({ node, depth }) {
                         "aria-label": strings.pathCopied
                     }),
                     decoration?.sublabel && /*#__PURE__*/ jsx("span", {
-                        className: "min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4",
+                        className: cn('min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4', decoration.sublabelOnHover && 'hidden group-hover:block group-focus-within:block'),
                         children: decoration.sublabel
                     }),
                     node.required && /*#__PURE__*/ jsx(RequiredIndicator, {
@@ -161,12 +162,13 @@ function JsonTreeRow({ node, depth }) {
                             /*#__PURE__*/ jsx(RowActions, {
                                 node: node,
                                 actions: actions,
-                                maxInline: maxInlineActions
+                                maxInline: maxInlineActions,
+                                meta: decoration?.meta
                             })
                         ]
                     }) : /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            !wrapped && (null != customCell ? /*#__PURE__*/ jsx("span", {
+                            !wrapped && !decoration?.hideValue && (null != customCell ? /*#__PURE__*/ jsx("span", {
                                 className: VALUE_CELL_CLASS,
                                 children: customCell
                             }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ jsxs(Fragment, {
@@ -196,7 +198,8 @@ function JsonTreeRow({ node, depth }) {
                                     /*#__PURE__*/ jsx(RowActions, {
                                         node: node,
                                         actions: actions,
-                                        maxInline: maxInlineActions
+                                        maxInline: maxInlineActions,
+                                        meta: decoration?.meta
                                     })
                                 ]
                             })

package/dist/components/ui/json-tree-view/JsonTreeToolbar.cjs

@@ -45,7 +45,7 @@ function JsonTreeToolbar({ strings, tooltipContentClassName, ...props }) {
         })
     });
 }
-function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filters, activeFilterId = null, onFilterChange, allCollapsed = false, onToggleAll, leading, controlsHidden = false, className }) {
+function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filters, activeFilterId = null, onFilterChange, allCollapsed = false, onToggleAll, leading, trailing, controlsHidden = false, className }) {
     const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
     const [searchOpen, setSearchOpen] = (0, external_react_namespaceObject.useState)(false);
     const activeFilter = filters?.find((f)=>f.id === activeFilterId);
@@ -67,7 +67,7 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                         className: "relative flex min-w-0 flex-1 items-center overflow-hidden",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
-                                size: 13,
+                                size: 12,
                                 className: "pointer-events-none absolute left-2 text-foreground-subtle"
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
@@ -78,7 +78,10 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                 value: query,
                                 onChange: (e)=>onQueryChange(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if ('Escape' === e.key) closeSearch();
+                                    if ('Escape' !== e.key) return;
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    closeSearch();
                                 },
                                 "aria-label": resolvedSearchPlaceholder,
                                 placeholder: resolvedSearchPlaceholder,
@@ -86,7 +89,7 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                     paddingLeft: '1.75rem',
                                     paddingRight: '1.5rem'
                                 },
-                                className: "h-6 w-full text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
+                                className: "h-5 w-full text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                 type: "button",
@@ -109,13 +112,13 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                 delay: true,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                                     variant: "ghost",
-                                    size: "3xs",
+                                    size: "4xs",
                                     icon: true,
                                     onClick: ()=>setSearchOpen(true),
                                     "aria-label": searchActionLabel,
                                     className: "rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
-                                        size: 14
+                                        size: 12
                                     })
                                 })
                             })
@@ -131,13 +134,13 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                     asChild: true,
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
                                         variant: "ghost",
-                                        size: "3xs",
+                                        size: "4xs",
                                         icon: true,
                                         "aria-label": filterLabel,
                                         className: "relative rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                                         children: [
                                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Filter, {
-                                                size: 14
+                                                size: 12
                                             }),
                                             activeFilter && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                                 className: "absolute right-0.5 top-0.5 size-1.5 rounded-full bg-primary ring-1 ring-surface"
@@ -183,19 +186,27 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                         delay: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                             variant: "ghost",
-                            size: "3xs",
+                            size: "4xs",
                             icon: true,
                             onClick: onToggleAll,
                             "aria-label": toggleAllLabel,
                             className: "rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                             children: allCollapsed ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
-                                size: 14
+                                size: 12
                             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsDownUp, {
-                                size: 14
+                                size: 12
                             })
                         })
                     })
                 ]
+            }),
+            trailing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                children: [
+                    controlsHidden && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "flex-1"
+                    }),
+                    trailing
+                ]
             })
         ]
     });

package/dist/components/ui/json-tree-view/JsonTreeToolbar.d.ts

@@ -21,7 +21,12 @@ export interface JsonTreeToolbarProps {
      */
     leading?: ReactNode;
     /**
-     * Hides the search / filter / collapse controls, keeping only `leading`.
+     * Content rendered at the end of the row, after the tree controls (e.g. a
+     * node output mode select). Stays visible when `controlsHidden` is set.
+     */
+    trailing?: ReactNode;
+    /**
+     * Hides the search / filter / collapse controls, keeping only `leading` and `trailing`.
      * Use when a non-tree tab is active and the controls would be inert.
      */
     controlsHidden?: boolean;

package/dist/components/ui/json-tree-view/JsonTreeToolbar.js

@@ -17,7 +17,7 @@ function JsonTreeToolbar({ strings, tooltipContentClassName, ...props }) {
         })
     });
 }
-function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filters, activeFilterId = null, onFilterChange, allCollapsed = false, onToggleAll, leading, controlsHidden = false, className }) {
+function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filters, activeFilterId = null, onFilterChange, allCollapsed = false, onToggleAll, leading, trailing, controlsHidden = false, className }) {
     const strings = useJsonTreeViewStrings();
     const [searchOpen, setSearchOpen] = useState(false);
     const activeFilter = filters?.find((f)=>f.id === activeFilterId);
@@ -39,7 +39,7 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                         className: "relative flex min-w-0 flex-1 items-center overflow-hidden",
                         children: [
                             /*#__PURE__*/ jsx(Search, {
-                                size: 13,
+                                size: 12,
                                 className: "pointer-events-none absolute left-2 text-foreground-subtle"
                             }),
                             /*#__PURE__*/ jsx(Input, {
@@ -50,7 +50,10 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                 value: query,
                                 onChange: (e)=>onQueryChange(e.target.value),
                                 onKeyDown: (e)=>{
-                                    if ('Escape' === e.key) closeSearch();
+                                    if ('Escape' !== e.key) return;
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    closeSearch();
                                 },
                                 "aria-label": resolvedSearchPlaceholder,
                                 placeholder: resolvedSearchPlaceholder,
@@ -58,7 +61,7 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                     paddingLeft: '1.75rem',
                                     paddingRight: '1.5rem'
                                 },
-                                className: "h-6 w-full text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
+                                className: "h-5 w-full text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
                             }),
                             /*#__PURE__*/ jsx("button", {
                                 type: "button",
@@ -81,13 +84,13 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                 delay: true,
                                 children: /*#__PURE__*/ jsx(Button, {
                                     variant: "ghost",
-                                    size: "3xs",
+                                    size: "4xs",
                                     icon: true,
                                     onClick: ()=>setSearchOpen(true),
                                     "aria-label": searchActionLabel,
                                     className: "rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                                     children: /*#__PURE__*/ jsx(Search, {
-                                        size: 14
+                                        size: 12
                                     })
                                 })
                             })
@@ -103,13 +106,13 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                                     asChild: true,
                                     children: /*#__PURE__*/ jsxs(Button, {
                                         variant: "ghost",
-                                        size: "3xs",
+                                        size: "4xs",
                                         icon: true,
                                         "aria-label": filterLabel,
                                         className: "relative rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                                         children: [
                                             /*#__PURE__*/ jsx(Filter, {
-                                                size: 14
+                                                size: 12
                                             }),
                                             activeFilter && /*#__PURE__*/ jsx("span", {
                                                 className: "absolute right-0.5 top-0.5 size-1.5 rounded-full bg-primary ring-1 ring-surface"
@@ -155,19 +158,27 @@ function JsonTreeToolbarContent({ query, onQueryChange, searchPlaceholder, filte
                         delay: true,
                         children: /*#__PURE__*/ jsx(Button, {
                             variant: "ghost",
-                            size: "3xs",
+                            size: "4xs",
                             icon: true,
                             onClick: onToggleAll,
                             "aria-label": toggleAllLabel,
                             className: "rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground",
                             children: allCollapsed ? /*#__PURE__*/ jsx(ChevronsUpDown, {
-                                size: 14
+                                size: 12
                             }) : /*#__PURE__*/ jsx(ChevronsDownUp, {
-                                size: 14
+                                size: 12
                             })
                         })
                     })
                 ]
+            }),
+            trailing && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    controlsHidden && /*#__PURE__*/ jsx("div", {
+                        className: "flex-1"
+                    }),
+                    trailing
+                ]
             })
         ]
     });

package/dist/components/ui/json-tree-view/NodeKey.cjs

@@ -45,6 +45,10 @@ function NodeKey({ node, label, displayPath, onCopyPath, className }) {
         content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
             className: "flex max-w-60 flex-col gap-1",
             children: [
+                null != label && label !== node.key && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-xs font-semibold leading-4",
+                    children: label
+                }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                     className: "break-all font-mono text-xs font-semibold leading-4",
                     children: copyPathText

package/dist/components/ui/json-tree-view/NodeKey.js

@@ -17,6 +17,10 @@ function NodeKey({ node, label, displayPath, onCopyPath, className }) {
         content: /*#__PURE__*/ jsxs("div", {
             className: "flex max-w-60 flex-col gap-1",
             children: [
+                null != label && label !== node.key && /*#__PURE__*/ jsx("span", {
+                    className: "text-xs font-semibold leading-4",
+                    children: label
+                }),
                 /*#__PURE__*/ jsx("span", {
                     className: "break-all font-mono text-xs font-semibold leading-4",
                     children: copyPathText

package/dist/components/ui/json-tree-view/RowActions.cjs

@@ -41,32 +41,38 @@ const ACTION_TONE_CLASS = {
     warning: 'text-warning hover:text-warning',
     error: 'text-error hover:text-error'
 };
-function RowActions({ node, actions, maxInline }) {
+function RowActions({ node, actions, maxInline, meta }) {
     const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
     const [menuOpen, setMenuOpen] = (0, external_react_namespaceObject.useState)(false);
-    if (0 === actions.length) return null;
+    if (0 === actions.length && null == meta) return null;
     const overflowing = actions.length > maxInline;
     const inline = overflowing ? [] : actions;
     const overflow = overflowing ? actions : [];
     const moreLabel = strings.moreActions;
+    const renderInline = (action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
+            content: action.tooltip ?? action.label,
+            placement: "top",
+            delay: true,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                variant: "ghost",
+                size: "4xs",
+                icon: true,
+                disabled: action.disabled,
+                onClick: ()=>action.onSelect(node),
+                "aria-label": action.label,
+                className: (0, index_cjs_namespaceObject.cn)(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', action.tone && ACTION_TONE_CLASS[action.tone], action.persistent && 'opacity-100', action.active && 'text-brand opacity-100 hover:text-brand'),
+                children: action.icon
+            })
+        }, action.id);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
         className: "ml-auto flex shrink-0 items-center gap-0.5",
         children: [
-            inline.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
-                    content: action.tooltip ?? action.label,
-                    placement: "top",
-                    delay: true,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                        variant: "ghost",
-                        size: "4xs",
-                        icon: true,
-                        disabled: action.disabled,
-                        onClick: ()=>action.onSelect(node),
-                        "aria-label": action.label,
-                        className: (0, index_cjs_namespaceObject.cn)(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', action.tone && ACTION_TONE_CLASS[action.tone], action.active && 'text-brand opacity-100 hover:text-brand'),
-                        children: action.icon
-                    })
-                }, action.id)),
+            inline.filter((action)=>'start' === action.placement).map(renderInline),
+            null != meta && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "mx-1.5 flex shrink-0 items-center",
+                children: meta
+            }),
+            inline.filter((action)=>'start' !== action.placement).map(renderInline),
             overflow.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
                 open: menuOpen,
                 onOpenChange: setMenuOpen,

package/dist/components/ui/json-tree-view/RowActions.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { JsonTreeNode, NodeAction } from './JsonTree.types';
 export interface RowActionsProps {
     node: JsonTreeNode;
@@ -5,6 +6,8 @@ export interface RowActionsProps {
     actions: NodeAction[];
     /** When the action count exceeds this cap, all actions collapse into one menu. */
     maxInline: number;
+    /** Decoration `meta`, rendered between the `start` and `end` actions. */
+    meta?: ReactNode;
 }
 /**
  * The trailing icon-button group for a row. Renders `actions` uniformly (icon,
@@ -12,4 +15,4 @@ export interface RowActionsProps {
  * inline; when the count exceeds that cap, every action moves into one menu so
  * the row has a single, predictable overflow state.
  */
-export declare function RowActions({ node, actions, maxInline }: RowActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RowActions({ node, actions, maxInline, meta }: RowActionsProps): import("react/jsx-runtime").JSX.Element | null;