@uipath/apollo-wind 2.67.1 → 2.68.0

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;

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

@@ -13,32 +13,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 = useJsonTreeViewStrings();
     const [menuOpen, setMenuOpen] = 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__*/ jsx(JsonTreeTooltip, {
+            content: action.tooltip ?? action.label,
+            placement: "top",
+            delay: true,
+            children: /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                size: "4xs",
+                icon: true,
+                disabled: action.disabled,
+                onClick: ()=>action.onSelect(node),
+                "aria-label": action.label,
+                className: 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__*/ jsxs("span", {
         className: "ml-auto flex shrink-0 items-center gap-0.5",
         children: [
-            inline.map((action)=>/*#__PURE__*/ jsx(JsonTreeTooltip, {
-                    content: action.tooltip ?? action.label,
-                    placement: "top",
-                    delay: true,
-                    children: /*#__PURE__*/ jsx(Button, {
-                        variant: "ghost",
-                        size: "4xs",
-                        icon: true,
-                        disabled: action.disabled,
-                        onClick: ()=>action.onSelect(node),
-                        "aria-label": action.label,
-                        className: 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__*/ 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__*/ jsxs(DropdownMenu, {
                 open: menuOpen,
                 onOpenChange: setMenuOpen,