@uipath/apollo-react 6.0.0 → 6.2.0

package/dist/canvas/components/JsonTree/JsonLeafValueEditor.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { useEffect, useRef, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { isNumericEdit, parseLeafValue, resolveLeafEditType } from "./leafEditTypes.js";
+function JsonLeafValueEditor({ node, onCommit, onCancel, className }) {
+    const { _ } = useSafeLingui();
+    const editType = resolveLeafEditType(node.type, node.schema);
+    const initial = void 0 === node.value || null === node.value ? String(node.schema?.default ?? '') : String(node.value);
+    const [raw, setRaw] = useState(initial);
+    const cancelledRef = useRef(false);
+    const inputRef = useRef(null);
+    const invalid = void 0 === parseLeafValue(raw, editType);
+    useEffect(()=>{
+        inputRef.current?.focus();
+    }, []);
+    const commit = ()=>{
+        const parsed = parseLeafValue(raw, editType);
+        if (void 0 === parsed) return;
+        onCommit(parsed);
+    };
+    return /*#__PURE__*/ jsx("input", {
+        ref: inputRef,
+        type: "text",
+        value: raw,
+        inputMode: 'integer' === editType ? 'numeric' : 'number' === editType ? 'decimal' : void 0,
+        onChange: (e)=>setRaw(e.target.value),
+        onFocus: (e)=>e.target.select(),
+        onBlur: ()=>{
+            if (cancelledRef.current) {
+                cancelledRef.current = false;
+                return;
+            }
+            if (invalid) onCancel();
+            else commit();
+        },
+        onKeyDown: (e)=>{
+            if ('Enter' === e.key) commit();
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                e.stopPropagation();
+                cancelledRef.current = true;
+                onCancel();
+            }
+        },
+        "aria-label": _({
+            id: 'canvas.json_value_panel.edit_value_of',
+            message: 'Edit value of {key}',
+            values: {
+                key: node.key
+            }
+        }),
+        "aria-invalid": invalid || void 0,
+        placeholder: isNumericEdit(editType) ? _({
+            id: 'canvas.json_value_panel.enter_number',
+            message: 'Enter a number'
+        }) : _({
+            id: 'canvas.json_value_panel.enter_value',
+            message: 'Enter a value'
+        }),
+        className: cn('min-w-0 flex-1 rounded bg-transparent font-mono text-xs text-foreground outline-none ring-1', invalid ? 'ring-error' : 'ring-brand', className)
+    });
+}
+export { JsonLeafValueEditor };

package/dist/canvas/components/JsonTree/JsonMultilineLeafEditor.cjs

@@ -0,0 +1,86 @@
+"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__, {
+    JsonMultilineLeafEditor: ()=>JsonMultilineLeafEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_EditorChrome_cjs_namespaceObject = require("./EditorChrome.cjs");
+const external_leafEditTypes_cjs_namespaceObject = require("./leafEditTypes.cjs");
+function JsonMultilineLeafEditor({ node, onCommit, onCancel, className }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const editType = (0, external_leafEditTypes_cjs_namespaceObject.resolveLeafEditType)(node.type, node.schema);
+    const initial = void 0 === node.value || null === node.value ? String(node.schema?.default ?? '') : String(node.value);
+    const [raw, setRaw] = (0, external_react_namespaceObject.useState)(initial);
+    const invalid = void 0 === (0, external_leafEditTypes_cjs_namespaceObject.parseLeafValue)(raw, editType);
+    const apply = ()=>{
+        const parsed = (0, external_leafEditTypes_cjs_namespaceObject.parseLeafValue)(raw, editType);
+        if (void 0 === parsed) return;
+        onCommit(parsed);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('flex flex-col gap-1.5', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EditorChrome_cjs_namespaceObject.EditorTextarea, {
+                value: raw,
+                onChange: setRaw,
+                onApply: apply,
+                onCancel: onCancel,
+                invalid: invalid,
+                rows: Math.min(10, Math.max(3, raw.split('\n').length + 1)),
+                ariaLabel: _({
+                    id: 'canvas.json_value_panel.edit_value_of',
+                    message: 'Edit value of {key}',
+                    values: {
+                        key: node.key
+                    }
+                }),
+                placeholder: (0, external_leafEditTypes_cjs_namespaceObject.isNumericEdit)(editType) ? _({
+                    id: 'canvas.json_value_panel.enter_number',
+                    message: 'Enter a number'
+                }) : _({
+                    id: 'canvas.json_value_panel.enter_value',
+                    message: 'Enter a value'
+                }),
+                className: "whitespace-pre-wrap"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EditorChrome_cjs_namespaceObject.EditorActions, {
+                onApply: apply,
+                onCancel: onCancel,
+                applyDisabled: invalid
+            })
+        ]
+    });
+}
+exports.JsonMultilineLeafEditor = __webpack_exports__.JsonMultilineLeafEditor;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "JsonMultilineLeafEditor"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/JsonTree/JsonMultilineLeafEditor.d.ts

@@ -0,0 +1,9 @@
+import type { JsonTreeNode, JsonValue } from './JsonTree.types';
+export interface JsonMultilineLeafEditorProps {
+    node: JsonTreeNode;
+    onCommit: (value: JsonValue) => void;
+    onCancel: () => void;
+    className?: string;
+}
+export declare function JsonMultilineLeafEditor({ node, onCommit, onCancel, className, }: JsonMultilineLeafEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonMultilineLeafEditor.d.ts.map

package/dist/canvas/components/JsonTree/JsonMultilineLeafEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonMultilineLeafEditor.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonMultilineLeafEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGhE,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,2CA8C9B"}

package/dist/canvas/components/JsonTree/JsonMultilineLeafEditor.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { EditorActions, EditorTextarea } from "./EditorChrome.js";
+import { isNumericEdit, parseLeafValue, resolveLeafEditType } from "./leafEditTypes.js";
+function JsonMultilineLeafEditor({ node, onCommit, onCancel, className }) {
+    const { _ } = useSafeLingui();
+    const editType = resolveLeafEditType(node.type, node.schema);
+    const initial = void 0 === node.value || null === node.value ? String(node.schema?.default ?? '') : String(node.value);
+    const [raw, setRaw] = useState(initial);
+    const invalid = void 0 === parseLeafValue(raw, editType);
+    const apply = ()=>{
+        const parsed = parseLeafValue(raw, editType);
+        if (void 0 === parsed) return;
+        onCommit(parsed);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex flex-col gap-1.5', className),
+        children: [
+            /*#__PURE__*/ jsx(EditorTextarea, {
+                value: raw,
+                onChange: setRaw,
+                onApply: apply,
+                onCancel: onCancel,
+                invalid: invalid,
+                rows: Math.min(10, Math.max(3, raw.split('\n').length + 1)),
+                ariaLabel: _({
+                    id: 'canvas.json_value_panel.edit_value_of',
+                    message: 'Edit value of {key}',
+                    values: {
+                        key: node.key
+                    }
+                }),
+                placeholder: isNumericEdit(editType) ? _({
+                    id: 'canvas.json_value_panel.enter_number',
+                    message: 'Enter a number'
+                }) : _({
+                    id: 'canvas.json_value_panel.enter_value',
+                    message: 'Enter a value'
+                }),
+                className: "whitespace-pre-wrap"
+            }),
+            /*#__PURE__*/ jsx(EditorActions, {
+                onApply: apply,
+                onCancel: onCancel,
+                applyDisabled: invalid
+            })
+        ]
+    });
+}
+export { JsonMultilineLeafEditor };

package/dist/canvas/components/JsonTree/JsonTree.cjs

@@ -0,0 +1,165 @@
+"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__, {
+    JsonTree: ()=>JsonTree
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const tooltip_namespaceObject = require("@uipath/apollo-wind/components/ui/tooltip");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
+const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
+const external_clipboard_cjs_namespaceObject = require("./clipboard.cjs");
+const external_JsonTreeRow_cjs_namespaceObject = require("./JsonTreeRow.cjs");
+function valueAsText(node) {
+    if ('string' == typeof node.value) return node.value;
+    if (void 0 === node.value) return 'null';
+    return JSON.stringify(node.value, null, 2);
+}
+const DefaultRowWrapper = ({ className, style, onClick, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: className,
+        style: style,
+        onClick: onClick,
+        children: children
+    });
+function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const RowWrapper = rowWrapper ?? DefaultRowWrapper;
+    const [editingPath, setEditingPath] = (0, external_react_namespaceObject.useState)(null);
+    const [jsonEditingPath, setJsonEditingPath] = (0, external_react_namespaceObject.useState)(null);
+    const [wrappedPaths, setWrappedPaths] = (0, external_react_namespaceObject.useState)({});
+    const [copied, setCopied] = (0, external_react_namespaceObject.useState)(null);
+    const copyTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+        }, []);
+    const copy = (node, kind, text)=>{
+        (0, external_clipboard_cjs_namespaceObject.copyTextToClipboard)(text).then((ok)=>{
+            if (!ok) return;
+            setCopied({
+                path: node.path,
+                kind
+            });
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+            copyTimerRef.current = setTimeout(()=>setCopied(null), 1500);
+            onCopy?.({
+                kind,
+                path: node.path,
+                text
+            });
+        });
+    };
+    const copyPath = (node)=>copy(node, 'path', pathForCopy?.(node.path) ?? node.path);
+    const copyValue = (node)=>copy(node, 'value', valueAsText(node));
+    const toggleWrapped = (node)=>{
+        setWrappedPaths((prev)=>({
+                ...prev,
+                [node.path]: !prev[node.path]
+            }));
+        if (editingPath === node.path) setEditingPath(null);
+    };
+    const commitEdit = (node, value)=>onEdit?.(node, value);
+    const canEdit = !readOnly && !!onEdit;
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>(0, external_buildJsonTree_cjs_namespaceObject.flattenJsonTree)(nodes, {
+            collapsed,
+            query,
+            filterPredicate,
+            displayTexts: decorateNode
+        }), [
+        nodes,
+        collapsed,
+        query,
+        filterPredicate,
+        decorateNode
+    ]);
+    const templateItemLabel = _({
+        id: 'canvas.json_value_panel.array_item',
+        message: 'item'
+    });
+    const filtering = !!query?.trim() || !!filterPredicate;
+    const resolvedEmptyMessage = filtering ? _({
+        id: 'canvas.json_value_panel.empty_search',
+        message: 'No fields match your search.'
+    }) : emptyMessage ?? _({
+        id: 'canvas.json_value_panel.empty_default',
+        message: 'No fields to display.'
+    });
+    const rowContext = {
+        collapsed,
+        onToggleCollapsed,
+        readOnly,
+        decorateNode,
+        deriveTypeIcon,
+        renderValue,
+        nodeActions,
+        maxInlineActions,
+        renderCodeEditor,
+        pathForCopy,
+        canEdit,
+        RowWrapper,
+        templateItemLabel,
+        editingPath,
+        jsonEditingPath,
+        wrappedPaths,
+        copied,
+        setEditingPath,
+        setJsonEditingPath,
+        copyPath,
+        copyValue,
+        toggleWrapped,
+        commitEdit
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipProvider, {
+        delayDuration: 300,
+        skipDelayDuration: 100,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltipProviderMarker, {
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRowContextProvider, {
+                value: rowContext,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: (0, apollo_wind_namespaceObject.cn)('h-full overflow-y-auto overflow-x-hidden', className),
+                    children: [
+                        rows.map(({ node, depth })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRow, {
+                                node: node,
+                                depth: depth
+                            }, node.path)),
+                        0 === rows.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "py-4 text-center text-xs text-foreground-subtle",
+                            children: resolvedEmptyMessage
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+exports.JsonTree = __webpack_exports__.JsonTree;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "JsonTree"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/JsonTree/JsonTree.d.ts

@@ -0,0 +1,23 @@
+import type { CopyEvent, DeriveTypeIcon, JsonTreeNode, JsonTreeRowWrapper, JsonValue, NodeActionsResolver, NodeDecoration, RenderCodeEditor, RenderValueCell } from './JsonTree.types';
+export interface JsonTreeProps {
+    nodes: JsonTreeNode[];
+    collapsed?: Record<string, boolean>;
+    onToggleCollapsed?: (path: string) => void;
+    query?: string;
+    filterPredicate?: (node: JsonTreeNode) => boolean;
+    readOnly?: boolean;
+    onEdit?: (node: JsonTreeNode, value: JsonValue | undefined) => void;
+    rowWrapper?: JsonTreeRowWrapper;
+    decorateNode?: (node: JsonTreeNode) => NodeDecoration | undefined;
+    deriveTypeIcon?: DeriveTypeIcon;
+    renderValue?: RenderValueCell;
+    nodeActions?: NodeActionsResolver;
+    maxInlineActions?: number;
+    renderCodeEditor?: RenderCodeEditor;
+    pathForCopy?: (path: string) => string;
+    onCopy?: (event: CopyEvent) => void;
+    emptyMessage?: string;
+    className?: string;
+}
+export declare function JsonTree({ nodes, collapsed, onToggleCollapsed, query, filterPredicate, readOnly, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className, }: JsonTreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonTree.d.ts.map

package/dist/canvas/components/JsonTree/JsonTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonTree.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonTree.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAO1B,MAAM,WAAW,aAAa;IAE5B,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAElD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAMpE,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,SAAS,CAAC;IAElE,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,WAAW,CAAC,EAAE,eAAe,CAAC;IAM9B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAKlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAc,EACd,iBAAiB,EACjB,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,gBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,MAAM,EACN,YAAY,EACZ,SAAS,GACV,EAAE,aAAa,2CA4Hf"}

package/dist/canvas/components/JsonTree/JsonTree.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { TooltipProvider } from "@uipath/apollo-wind/components/ui/tooltip";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { CanvasTooltipProviderMarker } from "../CanvasTooltip.js";
+import { flattenJsonTree } from "./buildJsonTree.js";
+import { copyTextToClipboard } from "./clipboard.js";
+import { JsonTreeRow, JsonTreeRowContextProvider } from "./JsonTreeRow.js";
+function valueAsText(node) {
+    if ('string' == typeof node.value) return node.value;
+    if (void 0 === node.value) return 'null';
+    return JSON.stringify(node.value, null, 2);
+}
+const DefaultRowWrapper = ({ className, style, onClick, children })=>/*#__PURE__*/ jsx("div", {
+        className: className,
+        style: style,
+        onClick: onClick,
+        children: children
+    });
+function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className }) {
+    const { _ } = useSafeLingui();
+    const RowWrapper = rowWrapper ?? DefaultRowWrapper;
+    const [editingPath, setEditingPath] = useState(null);
+    const [jsonEditingPath, setJsonEditingPath] = useState(null);
+    const [wrappedPaths, setWrappedPaths] = useState({});
+    const [copied, setCopied] = useState(null);
+    const copyTimerRef = useRef(null);
+    useEffect(()=>()=>{
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+        }, []);
+    const copy = (node, kind, text)=>{
+        copyTextToClipboard(text).then((ok)=>{
+            if (!ok) return;
+            setCopied({
+                path: node.path,
+                kind
+            });
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+            copyTimerRef.current = setTimeout(()=>setCopied(null), 1500);
+            onCopy?.({
+                kind,
+                path: node.path,
+                text
+            });
+        });
+    };
+    const copyPath = (node)=>copy(node, 'path', pathForCopy?.(node.path) ?? node.path);
+    const copyValue = (node)=>copy(node, 'value', valueAsText(node));
+    const toggleWrapped = (node)=>{
+        setWrappedPaths((prev)=>({
+                ...prev,
+                [node.path]: !prev[node.path]
+            }));
+        if (editingPath === node.path) setEditingPath(null);
+    };
+    const commitEdit = (node, value)=>onEdit?.(node, value);
+    const canEdit = !readOnly && !!onEdit;
+    const rows = useMemo(()=>flattenJsonTree(nodes, {
+            collapsed,
+            query,
+            filterPredicate,
+            displayTexts: decorateNode
+        }), [
+        nodes,
+        collapsed,
+        query,
+        filterPredicate,
+        decorateNode
+    ]);
+    const templateItemLabel = _({
+        id: 'canvas.json_value_panel.array_item',
+        message: 'item'
+    });
+    const filtering = !!query?.trim() || !!filterPredicate;
+    const resolvedEmptyMessage = filtering ? _({
+        id: 'canvas.json_value_panel.empty_search',
+        message: 'No fields match your search.'
+    }) : emptyMessage ?? _({
+        id: 'canvas.json_value_panel.empty_default',
+        message: 'No fields to display.'
+    });
+    const rowContext = {
+        collapsed,
+        onToggleCollapsed,
+        readOnly,
+        decorateNode,
+        deriveTypeIcon,
+        renderValue,
+        nodeActions,
+        maxInlineActions,
+        renderCodeEditor,
+        pathForCopy,
+        canEdit,
+        RowWrapper,
+        templateItemLabel,
+        editingPath,
+        jsonEditingPath,
+        wrappedPaths,
+        copied,
+        setEditingPath,
+        setJsonEditingPath,
+        copyPath,
+        copyValue,
+        toggleWrapped,
+        commitEdit
+    };
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        skipDelayDuration: 100,
+        children: /*#__PURE__*/ jsx(CanvasTooltipProviderMarker, {
+            children: /*#__PURE__*/ jsx(JsonTreeRowContextProvider, {
+                value: rowContext,
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: cn('h-full overflow-y-auto overflow-x-hidden', className),
+                    children: [
+                        rows.map(({ node, depth })=>/*#__PURE__*/ jsx(JsonTreeRow, {
+                                node: node,
+                                depth: depth
+                            }, node.path)),
+                        0 === rows.length && /*#__PURE__*/ jsx("span", {
+                            className: "py-4 text-center text-xs text-foreground-subtle",
+                            children: resolvedEmptyMessage
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+export { JsonTree };

package/dist/canvas/components/JsonTree/JsonTree.types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__);
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/JsonTree/JsonTree.types.d.ts

@@ -0,0 +1,110 @@
+import type { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+export type JsonValue = string | number | boolean | null | JsonValue[] | JsonObject;
+export interface JsonObject {
+    [key: string]: JsonValue;
+}
+export type JsonContainer = JsonObject | JsonValue[];
+export type JsonSchemaTypeName = 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | 'null';
+export interface JsonSchema {
+    type?: JsonSchemaTypeName | JsonSchemaTypeName[];
+    title?: string;
+    description?: string;
+    format?: string;
+    enum?: Array<string | number | boolean | null>;
+    default?: JsonValue;
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    items?: JsonSchema;
+    additionalProperties?: boolean | JsonSchema;
+}
+export type JsonTreeNodeType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+export type PathSegment = string | number;
+export interface JsonTreeNode {
+    key: string;
+    path: string;
+    segments: PathSegment[];
+    type: JsonTreeNodeType;
+    value?: JsonValue;
+    schema?: JsonSchema;
+    required?: boolean;
+    children?: JsonTreeNode[];
+    isArrayItemTemplate?: boolean;
+}
+export interface JsonTreeFilterOption {
+    id: string;
+    label: string;
+    predicate: (node: JsonTreeNode) => boolean;
+    count?: number;
+}
+export type NodeDecorationTone = 'neutral' | 'info' | 'warning' | 'error';
+export type DeriveTypeIcon = (node: JsonTreeNode) => ReactNode;
+export interface NodeDecorationChip {
+    label?: string;
+    icon?: ReactNode;
+    tooltip?: string;
+    tone?: NodeDecorationTone;
+}
+export interface NodeDecorationBadge {
+    icon?: ReactNode;
+    className?: string;
+}
+export interface NodeDecoration {
+    label?: string;
+    sublabel?: string;
+    badge?: NodeDecorationBadge;
+    chip?: NodeDecorationChip;
+    hideCount?: boolean;
+}
+export interface RenderValueContext {
+    readOnly: boolean;
+    commit: (value: JsonValue) => void;
+    clear: () => void;
+}
+export type RenderValueCell = (node: JsonTreeNode, ctx: RenderValueContext) => ReactNode;
+export interface NodeAction {
+    id: string;
+    icon: ReactNode;
+    label: string;
+    tooltip?: string;
+    onSelect: (node: JsonTreeNode) => void;
+    active?: boolean;
+    disabled?: boolean;
+    tone?: NodeDecorationTone;
+}
+export interface NodeActionContext {
+    readOnly: boolean;
+    defaultActions: NodeAction[];
+    commit: (value: JsonValue) => void;
+    clear: () => void;
+}
+export type NodeActionsResolver = (node: JsonTreeNode, ctx: NodeActionContext) => NodeAction[] | undefined;
+export interface CopyEvent {
+    kind: 'path' | 'value';
+    path: string;
+    text: string;
+}
+export interface JsonTreeChange {
+    path: string;
+    segments: PathSegment[];
+    value?: JsonValue;
+    previous?: JsonValue;
+}
+export interface JsonTreeRowWrapperProps {
+    node: JsonTreeNode;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent) => void;
+    children: ReactNode;
+}
+export type JsonTreeRowWrapper = ComponentType<JsonTreeRowWrapperProps>;
+export interface JsonCodeEditorRenderProps {
+    value: string;
+    onChange: (value: string) => void;
+    onApply: () => void;
+    onCancel: () => void;
+    invalid: boolean;
+    language: 'json';
+    autoFocus: boolean;
+}
+export type RenderCodeEditor = (props: JsonCodeEditorRenderProps) => ReactNode;
+//# sourceMappingURL=JsonTree.types.d.ts.map