@uipath/apollo-react 6.23.0 → 6.24.0

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.cjs

@@ -0,0 +1,156 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    CanvasTakeoverModal: ()=>CanvasTakeoverModal
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_react_focus_lock_namespaceObject = require("react-focus-lock");
+var external_react_focus_lock_default = /*#__PURE__*/ __webpack_require__.n(external_react_focus_lock_namespaceObject);
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
+    const titleId = (0, external_react_namespaceObject.useId)();
+    const expandButtonRef = (0, external_react_namespaceObject.useRef)(null);
+    const previouslyFocusedElementRef = (0, external_react_namespaceObject.useRef)(null);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = (0, external_react_namespaceObject.useState)(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) return;
+        previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key) onOpenChange?.(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            cancelAnimationFrame(animationFrame);
+            document.removeEventListener('keydown', handleKeyDown);
+            previouslyFocusedElementRef.current?.focus();
+            previouslyFocusedElementRef.current = null;
+        };
+    }, [
+        onOpenChange,
+        open
+    ]);
+    if (!open) return null;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const handleBackdropClick = (event)=>{
+        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        onMouseDown: handleBackdropClick,
+        "data-testid": "canvas-takeover-backdrop",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
+            autoFocus: false,
+            className: "contents",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("section", {
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": titleId,
+                "data-expanded": expanded,
+                className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                                id: titleId,
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: title
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        ref: expandButtonRef,
+                                        type: "button",
+                                        onClick: ()=>setExpanded(!expanded),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        children: expanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Minimize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        type: "button",
+                                        onClick: ()=>onOpenChange?.(false),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": "Close modal",
+                                        title: "Close modal",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
+                                className: (0, apollo_wind_namespaceObject.cn)('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+exports.CanvasTakeoverModal = __webpack_exports__.CanvasTakeoverModal;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasTakeoverModal"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface CanvasTakeoverModalProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    headerActions?: ReactNode;
+    sidebar?: ReactNode;
+    children: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    sidebarClassName?: string;
+    closeOnBackdropClick?: boolean;
+}
+export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CanvasTakeoverModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IAEvC,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,SAAS,CAAC;IAEjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EAAE,kBAAkB,EAC5B,eAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,kDA2G1B"}

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { Maximize2, Minimize2, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import react_focus_lock from "react-focus-lock";
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
+    const titleId = useId();
+    const expandButtonRef = useRef(null);
+    const previouslyFocusedElementRef = useRef(null);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    useEffect(()=>{
+        if (!open) return;
+        previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key) onOpenChange?.(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            cancelAnimationFrame(animationFrame);
+            document.removeEventListener('keydown', handleKeyDown);
+            previouslyFocusedElementRef.current?.focus();
+            previouslyFocusedElementRef.current = null;
+        };
+    }, [
+        onOpenChange,
+        open
+    ]);
+    if (!open) return null;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const handleBackdropClick = (event)=>{
+        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        onMouseDown: handleBackdropClick,
+        "data-testid": "canvas-takeover-backdrop",
+        children: /*#__PURE__*/ jsx(react_focus_lock, {
+            autoFocus: false,
+            className: "contents",
+            children: /*#__PURE__*/ jsxs("section", {
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": titleId,
+                "data-expanded": expanded,
+                className: cn('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                id: titleId,
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: title
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ jsx("button", {
+                                        ref: expandButtonRef,
+                                        type: "button",
+                                        onClick: ()=>setExpanded(!expanded),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        children: expanded ? /*#__PURE__*/ jsx(Minimize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        }) : /*#__PURE__*/ jsx(Maximize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>onOpenChange?.(false),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": "Close modal",
+                                        title: "Close modal",
+                                        children: /*#__PURE__*/ jsx(X, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ jsx("aside", {
+                                className: cn('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ jsx("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+export { CanvasTakeoverModal };

package/dist/canvas/components/CanvasTakeoverModal/index.cjs

@@ -0,0 +1,36 @@
+"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__, {
+    CanvasTakeoverModal: ()=>external_CanvasTakeoverModal_cjs_namespaceObject.CanvasTakeoverModal
+});
+const external_CanvasTakeoverModal_cjs_namespaceObject = require("./CanvasTakeoverModal.cjs");
+exports.CanvasTakeoverModal = __webpack_exports__.CanvasTakeoverModal;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasTakeoverModal"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasTakeoverModal/index.d.ts

@@ -0,0 +1,3 @@
+export type { CanvasTakeoverModalProps } from './CanvasTakeoverModal';
+export { CanvasTakeoverModal } from './CanvasTakeoverModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/CanvasTakeoverModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/canvas/components/CanvasTakeoverModal/index.js

@@ -0,0 +1,2 @@
+import { CanvasTakeoverModal } from "./CanvasTakeoverModal.js";
+export { CanvasTakeoverModal };

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

@@ -147,7 +147,7 @@ function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredi
                                 depth: depth
                             }, node.path)),
                         0 === rows.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "py-4 text-center text-xs text-foreground-subtle",
+                            className: "p-4 text-center text-xs text-foreground-subtle",
                             children: resolvedEmptyMessage
                         })
                     ]

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

@@ -119,7 +119,7 @@ function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredi
                                 depth: depth
                             }, node.path)),
                         0 === rows.length && /*#__PURE__*/ jsx("span", {
-                            className: "py-4 text-center text-xs text-foreground-subtle",
+                            className: "p-4 text-center text-xs text-foreground-subtle",
                             children: resolvedEmptyMessage
                         })
                     ]

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

@@ -41,7 +41,7 @@ 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 CUSTOM_CELL_CLASS = 'flex min-w-0 flex-1 items-center overflow-hidden';
+const VALUE_CELL_CLASS = 'flex min-w-8 flex-1 items-center';
 function rowIndent(depth, extra = 0) {
     return {
         paddingLeft: `${6 + 12 * depth + extra}px`
@@ -253,7 +253,7 @@ function JsonTreeRow({ node, depth }) {
                                 })
                             }),
                             null != customCell && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: CUSTOM_CELL_CLASS,
+                                className: VALUE_CELL_CLASS,
                                 children: customCell
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
@@ -268,7 +268,7 @@ function JsonTreeRow({ node, depth }) {
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
                             !wrapped && (null != customCell ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: CUSTOM_CELL_CLASS,
+                                className: VALUE_CELL_CLASS,
                                 children: customCell
                             }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                 children: [
@@ -276,13 +276,16 @@ function JsonTreeRow({ node, depth }) {
                                         className: "shrink-0 font-mono text-xs text-foreground-subtle",
                                         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
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: (0, apollo_wind_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
+                                        })
                                     })
                                 ]
                             })),
@@ -328,7 +331,9 @@ function JsonTreeRow({ node, depth }) {
                         message: 'Click to edit'
                     }) : void 0,
                     className: (0, apollo_wind_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: 'string' == typeof node.value ? node.value : (0, external_buildJsonTree_cjs_namespaceObject.formatLeafValue)(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", {

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

@@ -1 +1 @@
-{"version":3,"file":"JsonTreeRow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonTreeRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EAET,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAiC1B,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,SAAS,CAAC;IAClE,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,kBAAkB,CAAC;IAE/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACxE;AAID,eAAO,MAAM,0BAA0B,0DAA8B,CAAC;AAgBtE,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CA6WjF"}
+{"version":3,"file":"JsonTreeRow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonTreeRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EAET,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AA+B1B,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,SAAS,CAAC;IAClE,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,kBAAkB,CAAC;IAE/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACxE;AAID,eAAO,MAAM,0BAA0B,0DAA8B,CAAC;AAgBtE,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CA+WjF"}

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

@@ -12,7 +12,7 @@ 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 CUSTOM_CELL_CLASS = 'flex min-w-0 flex-1 items-center overflow-hidden';
+const VALUE_CELL_CLASS = 'flex min-w-8 flex-1 items-center';
 function rowIndent(depth, extra = 0) {
     return {
         paddingLeft: `${6 + 12 * depth + extra}px`
@@ -224,7 +224,7 @@ function JsonTreeRow({ node, depth }) {
                                 })
                             }),
                             null != customCell && /*#__PURE__*/ jsx("span", {
-                                className: CUSTOM_CELL_CLASS,
+                                className: VALUE_CELL_CLASS,
                                 children: customCell
                             }),
                             /*#__PURE__*/ jsx(DecorationChip, {
@@ -239,7 +239,7 @@ function JsonTreeRow({ node, depth }) {
                     }) : /*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             !wrapped && (null != customCell ? /*#__PURE__*/ jsx("span", {
-                                className: CUSTOM_CELL_CLASS,
+                                className: VALUE_CELL_CLASS,
                                 children: customCell
                             }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ jsxs(Fragment, {
                                 children: [
@@ -247,13 +247,16 @@ function JsonTreeRow({ node, depth }) {
                                         className: "shrink-0 font-mono text-xs text-foreground-subtle",
                                         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
+                                    /*#__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
+                                        })
                                     })
                                 ]
                             })),
@@ -299,7 +302,9 @@ function JsonTreeRow({ node, depth }) {
                         message: 'Click to edit'
                     }) : 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: 'string' == typeof node.value ? node.value : formatLeafValue(node.type, node.value)
+                    children: formatLeafValue(node.type, node.value, {
+                        preserveStringWhitespace: true
+                    })
                 })
             }),
             isContainer && jsonEditingPath === node.path && /*#__PURE__*/ jsx("div", {

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

@@ -34,7 +34,7 @@ function NodeKey({ node, label, displayPath, onCopyPath, className }) {
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const text = label ?? node.key;
     const copyPathText = displayPath ?? node.path;
-    const keyClass = (0, apollo_wind_namespaceObject.cn)('max-w-[45%] shrink-0 truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
+    const keyClass = (0, apollo_wind_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

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

@@ -1 +1 @@
-{"version":3,"file":"NodeKey.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/NodeKey.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,YAAY,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,YAAY,2CAuDxF"}
+{"version":3,"file":"NodeKey.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/NodeKey.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,YAAY,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,YAAY,2CA4DxF"}

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

@@ -6,7 +6,7 @@ function NodeKey({ node, label, displayPath, onCopyPath, className }) {
     const { _ } = useSafeLingui();
     const text = label ?? node.key;
     const copyPathText = displayPath ?? node.path;
-    const keyClass = cn('max-w-[45%] shrink-0 truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
+    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

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

@@ -39,7 +39,7 @@ function valueColorClass(type, value) {
     if ('boolean' === type) return value ? 'text-success' : 'text-error';
     return 'text-foreground';
 }
-const VALUE_CELL_CLASS = 'min-w-0 shrink-3 truncate rounded font-mono text-xs transition hover:bg-surface-raised';
+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 { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const missing = void 0 === node.value;
@@ -59,7 +59,7 @@ function ScalarValueCell({ node, readOnly, editing, onStartEdit, onStopEdit, onE
         onCancel: onStopEdit
     });
     if (readOnly || !onEdit) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-        className: (0, apollo_wind_namespaceObject.cn)('min-w-0 shrink-3 truncate font-mono text-xs', colorClass),
+        className: (0, apollo_wind_namespaceObject.cn)('min-w-0 truncate font-mono text-xs', colorClass),
         children: display
     });
     const editTitle = _({

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarValueCell.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/ScalarValueCell.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlF,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAM5F;AAOD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAQD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,2CAsHtB"}
+{"version":3,"file":"ScalarValueCell.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/ScalarValueCell.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlF,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAM5F;AASD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAQD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,2CAkHtB"}

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

@@ -10,7 +10,7 @@ function valueColorClass(type, value) {
     if ('boolean' === type) return value ? 'text-success' : 'text-error';
     return 'text-foreground';
 }
-const VALUE_CELL_CLASS = 'min-w-0 shrink-3 truncate rounded font-mono text-xs transition hover:bg-surface-raised';
+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 { _ } = useSafeLingui();
     const missing = void 0 === node.value;
@@ -30,7 +30,7 @@ function ScalarValueCell({ node, readOnly, editing, onStartEdit, onStopEdit, onE
         onCancel: onStopEdit
     });
     if (readOnly || !onEdit) return /*#__PURE__*/ jsx("span", {
-        className: cn('min-w-0 shrink-3 truncate font-mono text-xs', colorClass),
+        className: cn('min-w-0 truncate font-mono text-xs', colorClass),
         children: display
     });
     const editTitle = _({

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

@@ -285,9 +285,9 @@ function removeValueAtPath(root, segments) {
         [head]: child
     };
 }
-function formatLeafValue(type, value) {
+function formatLeafValue(type, value, options) {
     if (null == value) return 'null';
-    if ('string' === type) return JSON.stringify(value);
+    if ('string' === type) return options?.preserveStringWhitespace ? `"${value}"` : JSON.stringify(value);
     return String(value);
 }
 exports.appendPathSegment = __webpack_exports__.appendPathSegment;

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

@@ -33,5 +33,7 @@ export declare function collectContainerPaths(nodes: JsonTreeNode[], depth?: num
 export declare function getValueAtPath(root: JsonValue | undefined, segments: PathSegment[]): JsonValue | undefined;
 export declare function setValueAtPath(root: JsonValue | undefined, segments: PathSegment[], value: JsonValue): JsonValue;
 export declare function removeValueAtPath(root: JsonValue | undefined, segments: PathSegment[]): JsonValue | undefined;
-export declare function formatLeafValue(type: JsonTreeNodeType, value: JsonValue | undefined): string;
+export declare function formatLeafValue(type: JsonTreeNodeType, value: JsonValue | undefined, options?: {
+    preserveStringWhitespace?: boolean;
+}): string;
 //# sourceMappingURL=buildJsonTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buildJsonTree.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/buildJsonTree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,UAAU,EAEV,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAI1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,IAAI,UAAU,CAE9E;AAGD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,CAI5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAajE;AAQD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,CASlF;AAuJD,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,YAAY,EAAE,CAc3E;AASD,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAEnE;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,MAAM,gBAAgB,GAAG,CAC7B,IAAI,EAAE,YAAY,KACf;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC;AAoCvD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAElD,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAGD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EAAE,EACrB,OAAO,GAAE,cAAmB,EAC5B,KAAK,SAAI,GACR,eAAe,EAAE,CAsCnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAI,GAAG,aAAa,EAAE,CASvF;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,GACtB,SAAS,GAAG,SAAS,CAcvB;AAOD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,EACvB,KAAK,EAAE,SAAS,GACf,SAAS,CAoBX;AAOD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,GACtB,SAAS,GAAG,SAAS,CAyBvB;AAGD,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAI5F"}
+{"version":3,"file":"buildJsonTree.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/buildJsonTree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,UAAU,EAEV,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAI1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,IAAI,UAAU,CAE9E;AAGD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,CAI5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAajE;AAQD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,CASlF;AAuJD,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,YAAY,EAAE,CAc3E;AASD,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAEnE;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,MAAM,gBAAgB,GAAG,CAC7B,IAAI,EAAE,YAAY,KACf;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC;AAoCvD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAElD,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAGD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,YAAY,EAAE,EACrB,OAAO,GAAE,cAAmB,EAC5B,KAAK,SAAI,GACR,eAAe,EAAE,CAsCnB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAI,GAAG,aAAa,EAAE,CASvF;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,GACtB,SAAS,GAAG,SAAS,CAcvB;AAOD,wBAAgB,cAAc,CAC5B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,EACvB,KAAK,EAAE,SAAS,GACf,SAAS,CAoBX;AAOD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,EAC3B,QAAQ,EAAE,WAAW,EAAE,GACtB,SAAS,GAAG,SAAS,CAyBvB;AAGD,wBAAgB,eAAe,CAC7B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,GAAG,SAAS,EAC5B,OAAO,CAAC,EAAE;IAAE,wBAAwB,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/C,MAAM,CAMR"}

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

@@ -246,9 +246,9 @@ function removeValueAtPath(root, segments) {
         [head]: child
     };
 }
-function formatLeafValue(type, value) {
+function formatLeafValue(type, value, options) {
     if (null == value) return 'null';
-    if ('string' === type) return JSON.stringify(value);
+    if ('string' === type) return options?.preserveStringWhitespace ? `"${value}"` : JSON.stringify(value);
     return String(value);
 }
 export { appendPathSegment, buildJsonTree, collectContainerPaths, flattenJsonTree, formatLeafValue, getValueAtPath, inferValueType, isArrayItemTemplateRoot, isJsonObject, removeValueAtPath, schemaDisplayType, setValueAtPath };