@uipath/apollo-wind 2.60.0 → 2.61.0

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

@@ -0,0 +1,284 @@
+"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__, {
+    JsonTreeRowContextProvider: ()=>JsonTreeRowContextProvider,
+    JsonTreeRow: ()=>JsonTreeRow,
+    ROW_MIN_HEIGHT_PX: ()=>ROW_MIN_HEIGHT_PX
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_label_cjs_namespaceObject = require("../label.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_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
+const external_DecorationChip_cjs_namespaceObject = require("./DecorationChip.cjs");
+const external_JsonContainerEditor_cjs_namespaceObject = require("./JsonContainerEditor.cjs");
+const external_JsonMultilineLeafEditor_cjs_namespaceObject = require("./JsonMultilineLeafEditor.cjs");
+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_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`
+    };
+}
+const KEY_ALIGN_OFFSET = 44;
+const JsonTreeRowContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+const JsonTreeRowContextProvider = JsonTreeRowContext.Provider;
+function useJsonTreeRowContext() {
+    const ctx = (0, external_react_namespaceObject.useContext)(JsonTreeRowContext);
+    if (!ctx) throw new Error('JsonTreeRow must be rendered inside a JsonTreeRowContext provider');
+    return ctx;
+}
+function JsonTreeRow({ node, depth }) {
+    const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
+    const { collapsed, onToggleCollapsed, readOnly, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, canEdit, RowWrapper, templateItemLabel, editingPath, jsonEditingPath, wrappedPaths, copied, setEditingPath, setJsonEditingPath, copyPath, copyValue, toggleWrapped, commitEdit } = useJsonTreeRowContext();
+    const buildDefaultActions = (node, flags)=>{
+        const actions = [];
+        if (flags.wrappable) actions.push({
+            id: 'wrap',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.WrapText, {}),
+            active: flags.wrapped,
+            tooltip: flags.wrapped ? strings.unwrapValue : strings.wrapValue,
+            label: flags.wrapped ? strings.unwrapValueOf(node.key) : strings.wrapValueOf(node.key),
+            onSelect: ()=>toggleWrapped(node)
+        });
+        if (flags.isContainer && canEdit && !node.isArrayItemTemplate) actions.push({
+            id: 'edit-json',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Pencil, {}),
+            tooltip: strings.editAsJson,
+            label: strings.editKeyAsJson(node.key),
+            onSelect: ()=>setJsonEditingPath(node.path)
+        });
+        if (flags.canCopyValue) actions.push({
+            id: 'copy-value',
+            icon: flags.copiedValue ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CircleCheck, {
+                className: "text-brand"
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {}),
+            tooltip: strings.copyValue,
+            label: strings.copyValueOf(node.key),
+            onSelect: ()=>copyValue(node)
+        });
+        return actions;
+    };
+    const isContainer = void 0 !== node.children;
+    const isTemplate = !!node.isArrayItemTemplate;
+    const isTemplateItem = (0, external_buildJsonTree_cjs_namespaceObject.isArrayItemTemplateRoot)(node);
+    const childCount = node.children?.filter((c)=>!(0, external_buildJsonTree_cjs_namespaceObject.isArrayItemTemplateRoot)(c)).length ?? 0;
+    const decoration = decorateNode?.(node);
+    const customCell = renderValue?.(node, {
+        readOnly,
+        commit: (value)=>commitEdit(node, value),
+        clear: ()=>commitEdit(node, void 0)
+    });
+    const canCopyValue = void 0 !== node.value;
+    const wrappable = !isContainer && null == customCell && void 0 !== node.value && 'boolean' !== node.type && !node.schema?.enum?.length;
+    const wrapped = wrappable && !!wrappedPaths[node.path];
+    const copiedValue = copied?.path === node.path && 'value' === copied.kind;
+    let builtDefaults;
+    const getDefaultActions = ()=>{
+        builtDefaults ??= buildDefaultActions(node, {
+            isContainer,
+            wrappable,
+            wrapped,
+            canCopyValue,
+            copiedValue
+        });
+        return builtDefaults;
+    };
+    const actions = nodeActions?.(node, {
+        readOnly,
+        get defaultActions () {
+            return getDefaultActions();
+        },
+        commit: (value)=>commitEdit(node, value),
+        clear: ()=>commitEdit(node, void 0)
+    }) ?? getDefaultActions();
+    const rowClickable = isContainer && !!onToggleCollapsed;
+    const handleRowClick = (event)=>{
+        if (event.target.closest('button, a, input, textarea, select, [contenteditable="true"]')) return;
+        onToggleCollapsed?.(node.path);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(RowWrapper, {
+                node: node,
+                className: (0, index_cjs_namespaceObject.cn)(ROW_CLASS, rowClickable && 'cursor-pointer'),
+                style: rowIndent(depth),
+                onClick: rowClickable ? handleRowClick : void 0,
+                children: [
+                    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",
+                        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')
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "size-2.5 shrink-0"
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTypeBadge_cjs_namespaceObject.JsonTypeBadge, {
+                        type: node.type,
+                        icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
+                        className: decoration?.badge?.className
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeKey_cjs_namespaceObject.NodeKey, {
+                        node: node,
+                        label: isTemplateItem ? templateItemLabel : decoration?.label,
+                        displayPath: pathForCopy?.(node.path) ?? node.path,
+                        onCopyPath: copyPath,
+                        className: isTemplateItem ? 'font-normal italic text-foreground-subtle' : void 0
+                    }),
+                    copied?.path === node.path && 'path' === copied.kind && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CircleCheck, {
+                        size: 11,
+                        className: "shrink-0 text-brand",
+                        role: "img",
+                        "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",
+                        children: decoration.sublabel
+                    }),
+                    node.required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {
+                        className: "ml-0 shrink-0 text-[10px] text-foreground",
+                        srLabel: strings.requiredMarker
+                    }),
+                    isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            !decoration?.hideCount && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "shrink-0 whitespace-nowrap font-mono italic text-[10px] text-foreground-subtle",
+                                children: 'array' === node.type ? strings.itemCount(childCount) : strings.keyCount(childCount)
+                            }),
+                            null != customCell && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: VALUE_CELL_CLASS,
+                                children: customCell
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
+                                decoration: decoration
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
+                                node: node,
+                                actions: actions,
+                                maxInline: maxInlineActions
+                            })
+                        ]
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            !wrapped && (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, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "shrink-0 font-mono text-xs text-foreground-subtle",
+                                        children: "="
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: (0, index_cjs_namespaceObject.cn)(VALUE_CELL_CLASS, 'shrink-3'),
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ScalarValueCell_cjs_namespaceObject.ScalarValueCell, {
+                                            node: node,
+                                            readOnly: readOnly,
+                                            editing: editingPath === node.path,
+                                            onStartEdit: (n)=>setEditingPath(n.path),
+                                            onStopEdit: ()=>setEditingPath(null),
+                                            onEdit: canEdit ? commitEdit : void 0
+                                        })
+                                    })
+                                ]
+                            })),
+                            editingPath !== node.path && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
+                                        decoration: decoration
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
+                                        node: node,
+                                        actions: actions,
+                                        maxInline: maxInlineActions
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            wrapped && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "pb-1.5 pr-3.5",
+                style: rowIndent(depth, KEY_ALIGN_OFFSET),
+                children: editingPath === node.path && canEdit ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonMultilineLeafEditor_cjs_namespaceObject.JsonMultilineLeafEditor, {
+                    node: node,
+                    onCommit: (value)=>{
+                        setEditingPath(null);
+                        commitEdit(node, value);
+                    },
+                    onCancel: ()=>setEditingPath(null)
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                    type: "button",
+                    disabled: !canEdit,
+                    onClick: ()=>setEditingPath(node.path),
+                    "aria-label": strings.editValueOf(node.key),
+                    title: canEdit ? strings.editHint : void 0,
+                    className: (0, index_cjs_namespaceObject.cn)('w-full whitespace-pre-wrap break-all rounded text-left font-mono text-xs leading-5', canEdit && 'cursor-text', (0, external_ScalarValueCell_cjs_namespaceObject.valueColorClass)(node.type, node.value)),
+                    children: (0, external_buildJsonTree_cjs_namespaceObject.formatLeafValue)(node.type, node.value, {
+                        preserveStringWhitespace: true
+                    })
+                })
+            }),
+            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "py-1.5 pr-3.5",
+                style: rowIndent(depth, KEY_ALIGN_OFFSET),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonContainerEditor_cjs_namespaceObject.JsonContainerEditor, {
+                    node: node,
+                    onCommit: (value)=>{
+                        setJsonEditingPath(null);
+                        commitEdit(node, value);
+                    },
+                    onCancel: ()=>setJsonEditingPath(null),
+                    renderCodeEditor: renderCodeEditor
+                })
+            })
+        ]
+    });
+}
+exports.JsonTreeRow = __webpack_exports__.JsonTreeRow;
+exports.JsonTreeRowContextProvider = __webpack_exports__.JsonTreeRowContextProvider;
+exports.ROW_MIN_HEIGHT_PX = __webpack_exports__.ROW_MIN_HEIGHT_PX;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "JsonTreeRow",
+    "JsonTreeRowContextProvider",
+    "ROW_MIN_HEIGHT_PX"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,50 @@
+import type { CopyEvent, DeriveTypeIcon, JsonTreeNode, JsonTreeRowWrapper, JsonValue, NodeActionsResolver, NodeDecoration, RenderCodeEditor, RenderValueCell } from './JsonTree.types';
+/** `min-h-7` above (1.75rem) in px at the default root size: the virtualizer's estimate
+ *  until each row is measured, so a different root size costs accuracy but not correctness. */
+export declare const ROW_MIN_HEIGHT_PX = 28;
+/**
+ * Shared, node-invariant context every row needs: the tree config, the mutable
+ * edit/copy state, and the handlers that mutate it. Held once by `JsonTreeView` so
+ * each `JsonTreeRow` only takes its own `node`/`depth`.
+ */
+export interface JsonTreeRowContextValue {
+    collapsed: Record<string, boolean>;
+    onToggleCollapsed?: (path: string) => void;
+    readOnly: boolean;
+    decorateNode?: (node: JsonTreeNode) => NodeDecoration | undefined;
+    deriveTypeIcon?: DeriveTypeIcon;
+    renderValue?: RenderValueCell;
+    nodeActions?: NodeActionsResolver;
+    maxInlineActions: number;
+    renderCodeEditor?: RenderCodeEditor;
+    pathForCopy?: (path: string) => string;
+    /** Editability is row-invariant (props only), so it is resolved once. */
+    canEdit: boolean;
+    RowWrapper: JsonTreeRowWrapper;
+    /** Localized label for the synthesized array-item preview row. */
+    templateItemLabel: string;
+    editingPath: string | null;
+    jsonEditingPath: string | null;
+    wrappedPaths: Record<string, boolean>;
+    copied: {
+        path: string;
+        kind: CopyEvent['kind'];
+    } | null;
+    setEditingPath: (path: string | null) => void;
+    setJsonEditingPath: (path: string | null) => void;
+    copyPath: (node: JsonTreeNode) => void;
+    copyValue: (node: JsonTreeNode) => void;
+    toggleWrapped: (node: JsonTreeNode) => void;
+    commitEdit: (node: JsonTreeNode, value: JsonValue | undefined) => void;
+}
+export declare const JsonTreeRowContextProvider: import("react").Provider<JsonTreeRowContextValue | null>;
+/**
+ * A single flattened tree row: the collapse chevron, type badge, field name,
+ * decorations, and either the value cell (leaf) or key/item count (container),
+ * plus the expanded wrapped-scalar and edit-as-JSON surfaces below it. All
+ * shared state and handlers come from `JsonTreeRowContext`.
+ */
+export declare function JsonTreeRow({ node, depth }: {
+    node: JsonTreeNode;
+    depth: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,244 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/index.js";
+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 { DecorationChip } from "./DecorationChip.js";
+import { JsonContainerEditor } from "./JsonContainerEditor.js";
+import { JsonMultilineLeafEditor } from "./JsonMultilineLeafEditor.js";
+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_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`
+    };
+}
+const KEY_ALIGN_OFFSET = 44;
+const JsonTreeRowContext = /*#__PURE__*/ createContext(null);
+const JsonTreeRowContextProvider = JsonTreeRowContext.Provider;
+function useJsonTreeRowContext() {
+    const ctx = useContext(JsonTreeRowContext);
+    if (!ctx) throw new Error('JsonTreeRow must be rendered inside a JsonTreeRowContext provider');
+    return ctx;
+}
+function JsonTreeRow({ node, depth }) {
+    const strings = useJsonTreeViewStrings();
+    const { collapsed, onToggleCollapsed, readOnly, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, canEdit, RowWrapper, templateItemLabel, editingPath, jsonEditingPath, wrappedPaths, copied, setEditingPath, setJsonEditingPath, copyPath, copyValue, toggleWrapped, commitEdit } = useJsonTreeRowContext();
+    const buildDefaultActions = (node, flags)=>{
+        const actions = [];
+        if (flags.wrappable) actions.push({
+            id: 'wrap',
+            icon: /*#__PURE__*/ jsx(WrapText, {}),
+            active: flags.wrapped,
+            tooltip: flags.wrapped ? strings.unwrapValue : strings.wrapValue,
+            label: flags.wrapped ? strings.unwrapValueOf(node.key) : strings.wrapValueOf(node.key),
+            onSelect: ()=>toggleWrapped(node)
+        });
+        if (flags.isContainer && canEdit && !node.isArrayItemTemplate) actions.push({
+            id: 'edit-json',
+            icon: /*#__PURE__*/ jsx(Pencil, {}),
+            tooltip: strings.editAsJson,
+            label: strings.editKeyAsJson(node.key),
+            onSelect: ()=>setJsonEditingPath(node.path)
+        });
+        if (flags.canCopyValue) actions.push({
+            id: 'copy-value',
+            icon: flags.copiedValue ? /*#__PURE__*/ jsx(CircleCheck, {
+                className: "text-brand"
+            }) : /*#__PURE__*/ jsx(Copy, {}),
+            tooltip: strings.copyValue,
+            label: strings.copyValueOf(node.key),
+            onSelect: ()=>copyValue(node)
+        });
+        return actions;
+    };
+    const isContainer = void 0 !== node.children;
+    const isTemplate = !!node.isArrayItemTemplate;
+    const isTemplateItem = isArrayItemTemplateRoot(node);
+    const childCount = node.children?.filter((c)=>!isArrayItemTemplateRoot(c)).length ?? 0;
+    const decoration = decorateNode?.(node);
+    const customCell = renderValue?.(node, {
+        readOnly,
+        commit: (value)=>commitEdit(node, value),
+        clear: ()=>commitEdit(node, void 0)
+    });
+    const canCopyValue = void 0 !== node.value;
+    const wrappable = !isContainer && null == customCell && void 0 !== node.value && 'boolean' !== node.type && !node.schema?.enum?.length;
+    const wrapped = wrappable && !!wrappedPaths[node.path];
+    const copiedValue = copied?.path === node.path && 'value' === copied.kind;
+    let builtDefaults;
+    const getDefaultActions = ()=>{
+        builtDefaults ??= buildDefaultActions(node, {
+            isContainer,
+            wrappable,
+            wrapped,
+            canCopyValue,
+            copiedValue
+        });
+        return builtDefaults;
+    };
+    const actions = nodeActions?.(node, {
+        readOnly,
+        get defaultActions () {
+            return getDefaultActions();
+        },
+        commit: (value)=>commitEdit(node, value),
+        clear: ()=>commitEdit(node, void 0)
+    }) ?? getDefaultActions();
+    const rowClickable = isContainer && !!onToggleCollapsed;
+    const handleRowClick = (event)=>{
+        if (event.target.closest('button, a, input, textarea, select, [contenteditable="true"]')) return;
+        onToggleCollapsed?.(node.path);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxs(RowWrapper, {
+                node: node,
+                className: cn(ROW_CLASS, rowClickable && 'cursor-pointer'),
+                style: rowIndent(depth),
+                onClick: rowClickable ? handleRowClick : void 0,
+                children: [
+                    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",
+                        children: /*#__PURE__*/ jsx(ChevronDown, {
+                            size: 10,
+                            className: cn('transition-transform duration-100', collapsed[node.path] && '-rotate-90')
+                        })
+                    }) : /*#__PURE__*/ jsx("div", {
+                        className: "size-2.5 shrink-0"
+                    }),
+                    /*#__PURE__*/ jsx(JsonTypeBadge, {
+                        type: node.type,
+                        icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
+                        className: decoration?.badge?.className
+                    }),
+                    /*#__PURE__*/ jsx(NodeKey, {
+                        node: node,
+                        label: isTemplateItem ? templateItemLabel : decoration?.label,
+                        displayPath: pathForCopy?.(node.path) ?? node.path,
+                        onCopyPath: copyPath,
+                        className: isTemplateItem ? 'font-normal italic text-foreground-subtle' : void 0
+                    }),
+                    copied?.path === node.path && 'path' === copied.kind && /*#__PURE__*/ jsx(CircleCheck, {
+                        size: 11,
+                        className: "shrink-0 text-brand",
+                        role: "img",
+                        "aria-label": strings.pathCopied
+                    }),
+                    decoration?.sublabel && /*#__PURE__*/ jsx("span", {
+                        className: "min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4",
+                        children: decoration.sublabel
+                    }),
+                    node.required && /*#__PURE__*/ jsx(RequiredIndicator, {
+                        className: "ml-0 shrink-0 text-[10px] text-foreground",
+                        srLabel: strings.requiredMarker
+                    }),
+                    isContainer ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            !decoration?.hideCount && /*#__PURE__*/ jsx("span", {
+                                className: "shrink-0 whitespace-nowrap font-mono italic text-[10px] text-foreground-subtle",
+                                children: 'array' === node.type ? strings.itemCount(childCount) : strings.keyCount(childCount)
+                            }),
+                            null != customCell && /*#__PURE__*/ jsx("span", {
+                                className: VALUE_CELL_CLASS,
+                                children: customCell
+                            }),
+                            /*#__PURE__*/ jsx(DecorationChip, {
+                                decoration: decoration
+                            }),
+                            /*#__PURE__*/ jsx(RowActions, {
+                                node: node,
+                                actions: actions,
+                                maxInline: maxInlineActions
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            !wrapped && (null != customCell ? /*#__PURE__*/ jsx("span", {
+                                className: VALUE_CELL_CLASS,
+                                children: customCell
+                            }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "shrink-0 font-mono text-xs text-foreground-subtle",
+                                        children: "="
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: cn(VALUE_CELL_CLASS, 'shrink-3'),
+                                        children: /*#__PURE__*/ jsx(ScalarValueCell, {
+                                            node: node,
+                                            readOnly: readOnly,
+                                            editing: editingPath === node.path,
+                                            onStartEdit: (n)=>setEditingPath(n.path),
+                                            onStopEdit: ()=>setEditingPath(null),
+                                            onEdit: canEdit ? commitEdit : void 0
+                                        })
+                                    })
+                                ]
+                            })),
+                            editingPath !== node.path && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(DecorationChip, {
+                                        decoration: decoration
+                                    }),
+                                    /*#__PURE__*/ jsx(RowActions, {
+                                        node: node,
+                                        actions: actions,
+                                        maxInline: maxInlineActions
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            wrapped && /*#__PURE__*/ jsx("div", {
+                className: "pb-1.5 pr-3.5",
+                style: rowIndent(depth, KEY_ALIGN_OFFSET),
+                children: editingPath === node.path && canEdit ? /*#__PURE__*/ jsx(JsonMultilineLeafEditor, {
+                    node: node,
+                    onCommit: (value)=>{
+                        setEditingPath(null);
+                        commitEdit(node, value);
+                    },
+                    onCancel: ()=>setEditingPath(null)
+                }) : /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    disabled: !canEdit,
+                    onClick: ()=>setEditingPath(node.path),
+                    "aria-label": strings.editValueOf(node.key),
+                    title: canEdit ? strings.editHint : void 0,
+                    className: cn('w-full whitespace-pre-wrap break-all rounded text-left font-mono text-xs leading-5', canEdit && 'cursor-text', valueColorClass(node.type, node.value)),
+                    children: formatLeafValue(node.type, node.value, {
+                        preserveStringWhitespace: true
+                    })
+                })
+            }),
+            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ jsx("div", {
+                className: "py-1.5 pr-3.5",
+                style: rowIndent(depth, KEY_ALIGN_OFFSET),
+                children: /*#__PURE__*/ jsx(JsonContainerEditor, {
+                    node: node,
+                    onCommit: (value)=>{
+                        setJsonEditingPath(null);
+                        commitEdit(node, value);
+                    },
+                    onCancel: ()=>setJsonEditingPath(null),
+                    renderCodeEditor: renderCodeEditor
+                })
+            })
+        ]
+    });
+}
+export { JsonTreeRow, JsonTreeRowContextProvider, ROW_MIN_HEIGHT_PX };