@uipath/apollo-wind 2.60.0 → 2.61.0

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { JsonTreeNodeType } from './JsonTree.types';
+export interface JsonTypeBadgeProps {
+    type: JsonTreeNodeType;
+    /** Replaces the default type icon (e.g. a paperclip for file nodes). */
+    icon?: ReactNode;
+    /** Color/chrome overrides (e.g. from a node decoration). */
+    className?: string;
+    /** Tooltip content on hover. Defaults to the capitalized type name. */
+    tooltip?: ReactNode;
+}
+/**
+ * Compact badge for a JSON value type. Deliberately neutral: the value text
+ * carries the color coding, the badge only carries the type icon. Hovering it
+ * shows the type name (override via `tooltip`).
+ */
+export declare function JsonTypeBadge({ type, icon, className, tooltip }: JsonTypeBadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/index.js";
+import { Braces, Brackets, CircleSlash2, Hash, ToggleLeft, Type } from "lucide-react";
+import { JsonTreeTooltip } from "./JsonTreeTooltip.js";
+const TYPE_ICON = {
+    string: Type,
+    number: Hash,
+    boolean: ToggleLeft,
+    object: Braces,
+    array: Brackets,
+    null: CircleSlash2
+};
+const TYPE_LABEL = {
+    string: 'String',
+    number: 'Number',
+    boolean: 'Boolean',
+    object: 'Object',
+    array: 'Array',
+    null: 'Null'
+};
+function JsonTypeBadge({ type, icon, className, tooltip }) {
+    const DefaultIcon = TYPE_ICON[type];
+    return /*#__PURE__*/ jsx(JsonTreeTooltip, {
+        content: /*#__PURE__*/ jsx("span", {
+            className: "break-all font-mono text-xs font-semibold leading-4",
+            children: tooltip ?? TYPE_LABEL[type]
+        }),
+        placement: "top",
+        delay: true,
+        children: /*#__PURE__*/ jsx("span", {
+            className: cn('inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 text-foreground-muted [&_svg]:size-2.75', className),
+            children: icon ?? /*#__PURE__*/ jsx(DefaultIcon, {})
+        })
+    });
+}
+export { JsonTypeBadge };

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

@@ -0,0 +1,77 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    NodeKey: ()=>NodeKey
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_strings_cjs_namespaceObject = require("./strings.cjs");
+const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
+function NodeKey({ node, label, displayPath, onCopyPath, className }) {
+    const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
+    const text = label ?? node.key;
+    const copyPathText = displayPath ?? node.path;
+    const keyClass = (0, index_cjs_namespaceObject.cn)('min-w-4 max-w-[45%] truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
+    if (!onCopyPath) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: keyClass,
+        children: text
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
+        placement: "top",
+        delay: true,
+        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "flex max-w-60 flex-col gap-1",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "break-all font-mono text-xs font-semibold leading-4",
+                    children: copyPathText
+                }),
+                node.schema?.description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-xs leading-4",
+                    children: node.schema.description
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-[11px] leading-4 opacity-70",
+                    children: strings.copyPathHint
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+            type: "button",
+            onClick: ()=>onCopyPath(node),
+            "aria-label": strings.copyPathFor(copyPathText),
+            className: (0, index_cjs_namespaceObject.cn)(keyClass, 'cursor-pointer decoration-foreground-subtle underline-offset-2 hover:underline'),
+            children: text
+        })
+    });
+}
+exports.NodeKey = __webpack_exports__.NodeKey;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "NodeKey"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,16 @@
+import type { JsonTreeNode } from './JsonTree.types';
+export interface NodeKeyProps {
+    node: JsonTreeNode;
+    /** Display text overriding the raw key (decoration label). */
+    label?: string;
+    /** The path as it will be copied (after `pathForCopy`); shown in the tooltip. */
+    displayPath?: string;
+    onCopyPath?: (node: JsonTreeNode) => void;
+    className?: string;
+}
+/**
+ * The field name. Hovering underlines it and (after a short delay) shows a
+ * popover titled with the node's full tree path, plus the schema description
+ * and a copy hint; clicking copies the path.
+ */
+export declare function NodeKey({ node, label, displayPath, onCopyPath, className }: NodeKeyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/index.js";
+import { useJsonTreeViewStrings } from "./strings.js";
+import { JsonTreeTooltip } from "./JsonTreeTooltip.js";
+function NodeKey({ node, label, displayPath, onCopyPath, className }) {
+    const strings = useJsonTreeViewStrings();
+    const text = label ?? node.key;
+    const copyPathText = displayPath ?? node.path;
+    const keyClass = cn('min-w-4 max-w-[45%] truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
+    if (!onCopyPath) return /*#__PURE__*/ jsx("span", {
+        className: keyClass,
+        children: text
+    });
+    return /*#__PURE__*/ jsx(JsonTreeTooltip, {
+        placement: "top",
+        delay: true,
+        content: /*#__PURE__*/ jsxs("div", {
+            className: "flex max-w-60 flex-col gap-1",
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "break-all font-mono text-xs font-semibold leading-4",
+                    children: copyPathText
+                }),
+                node.schema?.description && /*#__PURE__*/ jsx("span", {
+                    className: "text-xs leading-4",
+                    children: node.schema.description
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-[11px] leading-4 opacity-70",
+                    children: strings.copyPathHint
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            onClick: ()=>onCopyPath(node),
+            "aria-label": strings.copyPathFor(copyPathText),
+            className: cn(keyClass, 'cursor-pointer decoration-foreground-subtle underline-offset-2 hover:underline'),
+            children: text
+        })
+    });
+}
+export { NodeKey };

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

@@ -0,0 +1,120 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    RowActions: ()=>RowActions
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_button_cjs_namespaceObject = require("../button.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_strings_cjs_namespaceObject = require("./strings.cjs");
+const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
+const ACTION_BUTTON_CLASS = 'shrink-0 rounded text-foreground-subtle opacity-0 hover:text-foreground hover:bg-surface-raised group-hover:opacity-100 focus-visible:opacity-100';
+const ACTION_TONE_CLASS = {
+    neutral: '',
+    info: 'text-info hover:text-info',
+    warning: 'text-warning hover:text-warning',
+    error: 'text-error hover:text-error'
+};
+function RowActions({ node, actions, maxInline }) {
+    const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
+    const [menuOpen, setMenuOpen] = (0, external_react_namespaceObject.useState)(false);
+    if (0 === actions.length) return null;
+    const overflowing = actions.length > maxInline;
+    const inline = overflowing ? [] : actions;
+    const overflow = overflowing ? actions : [];
+    const moreLabel = strings.moreActions;
+    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)),
+            overflow.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+                open: menuOpen,
+                onOpenChange: setMenuOpen,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeTooltip_cjs_namespaceObject.JsonTreeTooltip, {
+                        content: moreLabel,
+                        placement: "top",
+                        delay: true,
+                        hide: menuOpen,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                variant: "ghost",
+                                size: "4xs",
+                                icon: true,
+                                "aria-label": moreLabel,
+                                className: (0, index_cjs_namespaceObject.cn)(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', menuOpen && 'opacity-100'),
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MoreHorizontal, {})
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                        side: "left",
+                        align: "start",
+                        sideOffset: -12,
+                        className: "min-w-40",
+                        children: overflow.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                                disabled: action.disabled,
+                                onClick: ()=>action.onSelect(node),
+                                className: (0, index_cjs_namespaceObject.cn)('gap-2 text-xs', 'error' === action.tone && 'text-error'),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "grid size-3.5 shrink-0 place-items-center [&_svg]:size-3.5",
+                                        children: action.icon
+                                    }),
+                                    action.label
+                                ]
+                            }, action.id))
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.RowActions = __webpack_exports__.RowActions;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "RowActions"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,15 @@
+import type { JsonTreeNode, NodeAction } from './JsonTree.types';
+export interface RowActionsProps {
+    node: JsonTreeNode;
+    /** Resolved actions for the row, in display order. */
+    actions: NodeAction[];
+    /** When the action count exceeds this cap, all actions collapse into one menu. */
+    maxInline: number;
+}
+/**
+ * The trailing icon-button group for a row. Renders `actions` uniformly (icon,
+ * tooltip, aria, tone, active highlight). Up to `maxInline` actions render
+ * 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;

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

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../button.js";
+import { cn } from "../../../lib/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { MoreHorizontal } from "lucide-react";
+import { useState } from "react";
+import { useJsonTreeViewStrings } from "./strings.js";
+import { JsonTreeTooltip } from "./JsonTreeTooltip.js";
+const ACTION_BUTTON_CLASS = 'shrink-0 rounded text-foreground-subtle opacity-0 hover:text-foreground hover:bg-surface-raised group-hover:opacity-100 focus-visible:opacity-100';
+const ACTION_TONE_CLASS = {
+    neutral: '',
+    info: 'text-info hover:text-info',
+    warning: 'text-warning hover:text-warning',
+    error: 'text-error hover:text-error'
+};
+function RowActions({ node, actions, maxInline }) {
+    const strings = useJsonTreeViewStrings();
+    const [menuOpen, setMenuOpen] = useState(false);
+    if (0 === actions.length) return null;
+    const overflowing = actions.length > maxInline;
+    const inline = overflowing ? [] : actions;
+    const overflow = overflowing ? actions : [];
+    const moreLabel = strings.moreActions;
+    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)),
+            overflow.length > 0 && /*#__PURE__*/ jsxs(DropdownMenu, {
+                open: menuOpen,
+                onOpenChange: setMenuOpen,
+                children: [
+                    /*#__PURE__*/ jsx(JsonTreeTooltip, {
+                        content: moreLabel,
+                        placement: "top",
+                        delay: true,
+                        hide: menuOpen,
+                        children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "4xs",
+                                icon: true,
+                                "aria-label": moreLabel,
+                                className: cn(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', menuOpen && 'opacity-100'),
+                                children: /*#__PURE__*/ jsx(MoreHorizontal, {})
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuContent, {
+                        side: "left",
+                        align: "start",
+                        sideOffset: -12,
+                        className: "min-w-40",
+                        children: overflow.map((action)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                disabled: action.disabled,
+                                onClick: ()=>action.onSelect(node),
+                                className: cn('gap-2 text-xs', 'error' === action.tone && 'text-error'),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "grid size-3.5 shrink-0 place-items-center [&_svg]:size-3.5",
+                                        children: action.icon
+                                    }),
+                                    action.label
+                                ]
+                            }, action.id))
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { RowActions };

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

@@ -0,0 +1,112 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    valueColorClass: ()=>valueColorClass,
+    ScalarValueCell: ()=>ScalarValueCell
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const external_strings_cjs_namespaceObject = require("./strings.cjs");
+const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
+const external_JsonLeafValueEditor_cjs_namespaceObject = require("./JsonLeafValueEditor.cjs");
+function valueColorClass(type, value) {
+    if (null == value) return 'text-foreground-subtle';
+    if ('string' === type) return 'text-success';
+    if ('number' === type) return 'text-info';
+    if ('boolean' === type) return value ? 'text-success' : 'text-error';
+    return 'text-foreground';
+}
+const VALUE_CELL_CLASS = 'min-w-0 truncate rounded font-mono text-xs transition hover:bg-surface-raised';
+function ScalarValueCell({ node, readOnly, editing, onStartEdit, onStopEdit, onEdit }) {
+    const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
+    const missing = void 0 === node.value;
+    const display = missing ? strings.unsetValue : (0, external_buildJsonTree_cjs_namespaceObject.formatLeafValue)(node.type, node.value);
+    const colorClass = missing ? 'italic text-foreground-subtle' : valueColorClass(node.type, node.value);
+    const enumOptions = node.schema?.enum;
+    const isBoolean = 'boolean' === node.type;
+    if (editing) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonLeafValueEditor_cjs_namespaceObject.JsonLeafValueEditor, {
+        node: node,
+        onCommit: (value)=>{
+            onStopEdit();
+            onEdit?.(node, value);
+        },
+        onCancel: onStopEdit
+    });
+    if (readOnly || !onEdit) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        className: (0, index_cjs_namespaceObject.cn)('min-w-0 truncate font-mono text-xs', colorClass),
+        children: display
+    });
+    const editTitle = strings.editValueOf(node.key);
+    if (isBoolean && !enumOptions?.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        onClick: ()=>onEdit(node, true !== node.value),
+        "aria-label": editTitle,
+        title: strings.toggleHint,
+        className: (0, index_cjs_namespaceObject.cn)(VALUE_CELL_CLASS, 'cursor-pointer', colorClass),
+        children: display
+    });
+    if (enumOptions?.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                    type: "button",
+                    "aria-label": editTitle,
+                    title: strings.editHint,
+                    className: (0, index_cjs_namespaceObject.cn)(VALUE_CELL_CLASS, 'cursor-pointer', colorClass),
+                    children: display
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
+                align: "start",
+                className: "min-w-32",
+                children: enumOptions.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
+                        onClick: ()=>onEdit(node, option),
+                        className: (0, index_cjs_namespaceObject.cn)('font-mono text-xs', option === node.value ? 'text-foreground' : 'text-foreground-muted'),
+                        children: (0, external_buildJsonTree_cjs_namespaceObject.formatLeafValue)((0, external_buildJsonTree_cjs_namespaceObject.inferValueType)(option), option)
+                    }, String(option)))
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        type: "button",
+        onClick: ()=>onStartEdit(node),
+        "aria-label": editTitle,
+        title: missing ? strings.unsetEditHint : strings.editHint,
+        className: (0, index_cjs_namespaceObject.cn)(VALUE_CELL_CLASS, 'cursor-text', colorClass),
+        children: display
+    });
+}
+exports.ScalarValueCell = __webpack_exports__.ScalarValueCell;
+exports.valueColorClass = __webpack_exports__.valueColorClass;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ScalarValueCell",
+    "valueColorClass"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,18 @@
+import type { JsonTreeNode, JsonTreeNodeType, JsonValue } from './JsonTree.types';
+/** Semantic color for a rendered leaf value (also used by the wrapped-row view). */
+export declare function valueColorClass(type: JsonTreeNodeType, value: JsonValue | undefined): string;
+export interface ScalarValueCellProps {
+    node: JsonTreeNode;
+    readOnly: boolean;
+    editing: boolean;
+    onStartEdit: (node: JsonTreeNode) => void;
+    onStopEdit: () => void;
+    onEdit?: (node: JsonTreeNode, value: JsonValue) => void;
+}
+/**
+ * The value slot of a leaf row. Booleans toggle on a single click; schema
+ * enums edit through a dropdown; strings, numbers, and null values edit
+ * through an inline input. Missing values render as "unset" and editing them
+ * creates the value.
+ */
+export declare function ScalarValueCell({ node, readOnly, editing, onStartEdit, onStopEdit, onEdit, }: ScalarValueCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { useJsonTreeViewStrings } from "./strings.js";
+import { formatLeafValue, inferValueType } from "./buildJsonTree.js";
+import { JsonLeafValueEditor } from "./JsonLeafValueEditor.js";
+function valueColorClass(type, value) {
+    if (null == value) return 'text-foreground-subtle';
+    if ('string' === type) return 'text-success';
+    if ('number' === type) return 'text-info';
+    if ('boolean' === type) return value ? 'text-success' : 'text-error';
+    return 'text-foreground';
+}
+const VALUE_CELL_CLASS = 'min-w-0 truncate rounded font-mono text-xs transition hover:bg-surface-raised';
+function ScalarValueCell({ node, readOnly, editing, onStartEdit, onStopEdit, onEdit }) {
+    const strings = useJsonTreeViewStrings();
+    const missing = void 0 === node.value;
+    const display = missing ? strings.unsetValue : formatLeafValue(node.type, node.value);
+    const colorClass = missing ? 'italic text-foreground-subtle' : valueColorClass(node.type, node.value);
+    const enumOptions = node.schema?.enum;
+    const isBoolean = 'boolean' === node.type;
+    if (editing) return /*#__PURE__*/ jsx(JsonLeafValueEditor, {
+        node: node,
+        onCommit: (value)=>{
+            onStopEdit();
+            onEdit?.(node, value);
+        },
+        onCancel: onStopEdit
+    });
+    if (readOnly || !onEdit) return /*#__PURE__*/ jsx("span", {
+        className: cn('min-w-0 truncate font-mono text-xs', colorClass),
+        children: display
+    });
+    const editTitle = strings.editValueOf(node.key);
+    if (isBoolean && !enumOptions?.length) return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        onClick: ()=>onEdit(node, true !== node.value),
+        "aria-label": editTitle,
+        title: strings.toggleHint,
+        className: cn(VALUE_CELL_CLASS, 'cursor-pointer', colorClass),
+        children: display
+    });
+    if (enumOptions?.length) return /*#__PURE__*/ jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "aria-label": editTitle,
+                    title: strings.editHint,
+                    className: cn(VALUE_CELL_CLASS, 'cursor-pointer', colorClass),
+                    children: display
+                })
+            }),
+            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                align: "start",
+                className: "min-w-32",
+                children: enumOptions.map((option)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                        onClick: ()=>onEdit(node, option),
+                        className: cn('font-mono text-xs', option === node.value ? 'text-foreground' : 'text-foreground-muted'),
+                        children: formatLeafValue(inferValueType(option), option)
+                    }, String(option)))
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        onClick: ()=>onStartEdit(node),
+        "aria-label": editTitle,
+        title: missing ? strings.unsetEditHint : strings.editHint,
+        className: cn(VALUE_CELL_CLASS, 'cursor-text', colorClass),
+        children: display
+    });
+}
+export { ScalarValueCell, valueColorClass };