@goplasmatic/dataflow-ui 2.0.15 → 2.0.16

package/dist/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useState, useEffect, useContext, forwardRef, createElement, useReducer, useRef, useCallback, useMemo, memo, useLayoutEffect, useImperativeHandle, Component } from "react";
+import React, { createContext, useState, useEffect, useContext, forwardRef, createElement, useReducer, useRef, useCallback, useMemo, memo, useLayoutEffect, createRef, useImperativeHandle, Component } from "react";
 import { createPortal } from "react-dom";
 const ThemeContext = createContext(null);
 function getSystemTheme() {
@@ -24301,6 +24301,21 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       state.currentStepIndex,
       traceNodeMap
     ]);
+    const errorNodeIds = useMemo(() => {
+      const ids = /* @__PURE__ */ new Set();
+      for (let i = 0; i <= state.currentStepIndex; i++) {
+        const step = state.steps[i];
+        if (step == null ? void 0 : step.error) {
+          const traceId = `trace-${step.node_id}`;
+          ids.add(traceNodeMap.get(traceId) ?? traceId);
+        }
+      }
+      return ids;
+    }, [
+      state.steps,
+      state.currentStepIndex,
+      traceNodeMap
+    ]);
     const parentMap = useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       for (const node of nodes) {
@@ -24356,6 +24371,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       currentStep,
       currentNodeId,
       executedNodeIds,
+      errorNodeIds,
       pathNodeIds,
       play,
       pause,
@@ -24370,6 +24386,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       currentStep,
       currentNodeId,
       executedNodeIds,
+      errorNodeIds,
       pathNodeIds,
       play,
       pause,
@@ -24399,12 +24416,14 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       const isCurrent = context.currentNodeId === nodeId;
       const isExecuted = context.executedNodeIds.has(nodeId);
       const isOnPath = context.pathNodeIds.has(nodeId);
+      const isError = context.errorNodeIds.has(nodeId);
       const isPending = !isCurrent && !isExecuted && !isOnPath;
       return {
         isCurrent,
         isExecuted,
         isPending,
         isOnPath,
+        isError,
         step: isCurrent ? context.currentStep : null
       };
     }, [
@@ -24757,8 +24776,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       selectedNodeId
     ]);
     const clearSelection = useCallback(() => {
-      setSelectedNodeId(null);
-      setSelectedNodeIds(/* @__PURE__ */ new Set());
+      setSelectedNodeId((prev) => prev === null ? prev : null);
+      setSelectedNodeIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
     }, []);
     const selectAllNodes = useCallback(() => {
       const allIds = new Set(internalNodes.map((n) => n.id));
@@ -26362,14 +26381,15 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const propertyPanelFocusRef = useRef(null);
     const nodes = isEditMode ? internalNodes : propNodes;
     const selection2 = useSelectionState(nodes, internalNodes);
-    const history = useHistoryState(nodesRef, setInternalNodes, onNodesChange, selection2.clearSelection);
+    const { setSelectedNodeId, setSelectedNodeIds, selectNode: selectionSelectNode, setSelection: selectionSetSelection, toggleNodeSelection: selectionToggleNodeSelection, addToSelection: selectionAddToSelection, clearSelection: selectionClearSelection, selectAllNodes: selectionSelectAllNodes, selectChildren: selectionSelectChildren } = selection2;
+    const history = useHistoryState(nodesRef, setInternalNodes, onNodesChange, selectionClearSelection);
     const clipboard = useClipboardState({
       selectedNode: selection2.selectedNode,
       internalNodes,
       pushToUndoStack: history.pushToUndoStack,
       setInternalNodes,
       onNodesChange,
-      setSelectedNodeId: selection2.setSelectedNodeId,
+      setSelectedNodeId,
       setPanelValues,
       hasEditedRef
     });
@@ -26378,7 +26398,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       setInternalNodes,
       onNodesChange,
       selectedNodeId: selection2.selectedNodeId,
-      setSelectedNodeId: selection2.setSelectedNodeId,
+      setSelectedNodeId,
       setPanelValues,
       hasEditedRef,
       nodes,
@@ -26396,15 +26416,15 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     useEffect(() => {
       setIsEditMode(initialEditMode);
       if (!initialEditMode) {
-        selection2.setSelectedNodeId(null);
-        selection2.setSelectedNodeIds(/* @__PURE__ */ new Set());
-        setPanelValues({});
-        setInternalNodes(propNodes);
+        setSelectedNodeId(null);
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
+        setPanelValues((prev) => Object.keys(prev).length === 0 ? prev : {});
         hasEditedRef.current = false;
       }
     }, [
       initialEditMode,
-      propNodes
+      setSelectedNodeId,
+      setSelectedNodeIds
     ]);
     useEffect(() => {
       nodesRef.current = internalNodes;
@@ -26414,12 +26434,13 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const setEditMode = useCallback((enabled) => {
       setIsEditMode(enabled);
       if (!enabled) {
-        selection2.setSelectedNodeId(null);
-        selection2.setSelectedNodeIds(/* @__PURE__ */ new Set());
+        setSelectedNodeId(null);
+        setSelectedNodeIds(/* @__PURE__ */ new Set());
         setPanelValues({});
       }
     }, [
-      selection2
+      setSelectedNodeId,
+      setSelectedNodeIds
     ]);
     const updatePanelValue = useCallback((fieldId, value2) => {
       setPanelValues((prev) => ({
@@ -26431,50 +26452,50 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       setPanelValues(values ?? {});
     }, []);
     const selectNode = useCallback((nodeId) => {
-      selection2.selectNode(nodeId);
+      selectionSelectNode(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectNode
     ]);
     const setSelectionWrapped = useCallback((nodeIds) => {
-      selection2.setSelection(nodeIds);
+      selectionSetSelection(nodeIds);
       setPanelValues({});
     }, [
-      selection2
+      selectionSetSelection
     ]);
     const toggleNodeSelection = useCallback((nodeId) => {
-      selection2.toggleNodeSelection(nodeId);
+      selectionToggleNodeSelection(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionToggleNodeSelection
     ]);
     const addToSelection = useCallback((nodeId) => {
-      selection2.addToSelection(nodeId);
+      selectionAddToSelection(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionAddToSelection
     ]);
     const clearSelection = useCallback(() => {
-      selection2.clearSelection();
-      setPanelValues({});
+      selectionClearSelection();
+      setPanelValues((prev) => Object.keys(prev).length === 0 ? prev : {});
     }, [
-      selection2
+      selectionClearSelection
     ]);
     const selectAllNodes = useCallback(() => {
-      selection2.selectAllNodes();
+      selectionSelectAllNodes();
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectAllNodes
     ]);
     const selectChildren = useCallback((nodeId) => {
-      selection2.selectChildren(nodeId);
+      selectionSelectChildren(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectChildren
     ]);
     const focusPropertyPanel = useCallback((nodeId, fieldId) => {
-      selection2.setSelectedNodeId(nodeId);
-      selection2.setSelectedNodeIds(/* @__PURE__ */ new Set([
+      setSelectedNodeId(nodeId);
+      setSelectedNodeIds(/* @__PURE__ */ new Set([
         nodeId
       ]));
       setPanelValues({});
@@ -26483,7 +26504,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         (_a = propertyPanelFocusRef.current) == null ? void 0 : _a.focusField(fieldId);
       }, 100);
     }, [
-      selection2
+      setSelectedNodeId,
+      setSelectedNodeIds
     ]);
     const applyPanelChanges = useCallback(() => {
       if (!selection2.selectedNode || Object.keys(panelValues).length === 0) {
@@ -26572,12 +26594,52 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       children: children2
     });
   }
+  const noop2 = (..._2) => {
+  };
+  const noopFalse = (..._2) => false;
+  const readOnlyDefault = {
+    selectedNodeId: null,
+    selectedNodeIds: /* @__PURE__ */ new Set(),
+    isEditMode: false,
+    panelValues: {},
+    selectedNode: null,
+    selectedNodes: [],
+    nodes: [],
+    selectNode: noop2,
+    setSelection: noop2,
+    toggleNodeSelection: noop2,
+    addToSelection: noop2,
+    clearSelection: noop2,
+    selectAllNodes: noop2,
+    isNodeSelected: noopFalse,
+    setEditMode: noop2,
+    updatePanelValue: noop2,
+    resetPanelValues: noop2,
+    updateNode: noop2,
+    deleteNode: noop2,
+    applyPanelChanges: noop2,
+    addArgumentToNode: noop2,
+    removeArgumentFromNode: noop2,
+    getChildNodes: (() => []),
+    createNode: noop2,
+    hasNodes: () => false,
+    insertNodeOnEdge: noop2,
+    undo: noop2,
+    redo: noop2,
+    canUndo: false,
+    canRedo: false,
+    copyNode: noop2,
+    pasteNode: noop2,
+    canPaste: false,
+    wrapNodeInOperator: noop2,
+    duplicateNode: noop2,
+    selectChildren: noop2,
+    focusPropertyPanel: noop2,
+    propertyPanelFocusRef: createRef()
+  };
   function useEditorContext() {
     const context = useContext(EditorContext);
-    if (!context) {
-      throw new Error("useEditorContext must be used within an EditorProvider");
-    }
-    return context;
+    return context ?? readOnlyDefault;
   }
   function useDebugClassName(nodeId) {
     const debugState = useNodeDebugState(nodeId);
@@ -26586,7 +26648,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       debugState.isCurrent && "debug-current",
       debugState.isExecuted && "debug-executed",
       debugState.isPending && "debug-pending",
-      debugState.isOnPath && !debugState.isCurrent && "debug-on-path"
+      debugState.isOnPath && !debugState.isCurrent && "debug-on-path",
+      debugState.isError && "debug-error"
     ].filter(Boolean).join(" ");
   }
   function useNodeCollapse(nodeId) {
@@ -26611,6 +26674,11 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       setNodes
     ]);
   }
+  function extractErrorMessage(err, fallback) {
+    if (err instanceof Error) return err.message;
+    if (typeof err === "string") return err;
+    return fallback;
+  }
   function useWasmEvaluator(options = {}) {
     const { preserveStructure = false } = options;
     const [ready, setReady] = useState(false);
@@ -26623,7 +26691,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         try {
           setLoading(true);
           setError(null);
-          const wasm2 = await import("./datalogic_wasm-CrfXtaOs-CXAvQXKl.js");
+          const wasm2 = await import("./datalogic_wasm-RwP1VzMM-Tde_T26r.js");
           await wasm2.default();
           if (!cancelled) {
             moduleRef.current = {
@@ -26656,7 +26724,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         const resultStr = moduleRef.current.evaluate(logicStr, dataStr, preserveStructure);
         return JSON.parse(resultStr);
       } catch (err) {
-        throw new Error(err instanceof Error ? err.message : "Evaluation failed");
+        throw new Error(extractErrorMessage(err, "Evaluation failed"));
       }
     }, [
       preserveStructure
@@ -26674,7 +26742,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         const resultStr = moduleRef.current.evaluate_with_trace(logicStr, dataStr, preserveStructure);
         return JSON.parse(resultStr);
       } catch (err) {
-        throw new Error(err instanceof Error ? err.message : "Trace evaluation failed");
+        throw new Error(extractErrorMessage(err, "Trace evaluation failed"));
       }
     }, [
       preserveStructure
@@ -26691,7 +26759,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const { focusPropertyPanel, nodes: editorNodes } = useEditorContext();
     const [contextMenu, setContextMenu] = useState(null);
     const handleNodeContextMenu = useCallback((event, node) => {
-      if (!isEditMode) return;
       event.preventDefault();
       setContextMenu({
         type: "node",
@@ -26703,7 +26770,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       isEditMode
     ]);
     const handlePaneContextMenu = useCallback((event) => {
-      if (!isEditMode) return;
       event.preventDefault();
       setContextMenu({
         type: "canvas",
@@ -26714,7 +26780,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       isEditMode
     ]);
     const handleNodeDoubleClick = useCallback((_event, node) => {
-      if (!isEditMode) return;
       let fieldId;
       switch (node.data.type) {
         case "literal":
@@ -26772,6 +26837,33 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       contextMenuNode
     };
   }
+  function useSystemTheme() {
+    const [systemTheme, setSystemTheme] = useState(() => {
+      if (typeof window === "undefined") return "light";
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    });
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = (e) => {
+        setSystemTheme(e.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    return systemTheme;
+  }
+  const MOBILE_BREAKPOINT = 1024;
+  function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" ? window.innerWidth <= MOBILE_BREAKPOINT : false);
+    useEffect(() => {
+      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+      const handler = (e) => setIsMobile(e.matches);
+      mql.addEventListener("change", handler);
+      return () => mql.removeEventListener("change", handler);
+    }, []);
+    return isMobile;
+  }
   const NodeInputHandles = memo(function NodeInputHandles2({ nodeId, color: color2 }) {
     const hasTopConnection = useIsHandleConnected(nodeId, "top");
     const hasLeftConnection = useIsHandleConnected(nodeId, "left");
@@ -26985,7 +27077,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
           children: [
             jsx("span", {
               className: "debug-info-label",
-              children: hasError ? "Error:" : "Result:"
+              children: hasError ? "⚠ Error:" : "Result:"
             }),
             hasError ? jsx("pre", {
               className: "debug-info-value debug-info-error",
@@ -27496,7 +27588,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     let enabledIndex = -1;
     return jsx("div", {
       ref: menuRef,
-      className: "context-menu",
+      className: "dl-context-menu",
       style: {
         left: position.x,
         top: position.y
@@ -27506,7 +27598,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       children: filteredItems.map((item, itemIndex) => {
         if (item.id === "divider") {
           return jsx("div", {
-            className: "context-menu-divider",
+            className: "dl-context-menu-divider",
             role: "separator"
           }, `divider-${itemIndex}`);
         }
@@ -27516,14 +27608,14 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         const currentEnabledIndex = enabledIndex;
         const isFocused = !item.disabled && focusedIndex === currentEnabledIndex;
         return jsxs("div", {
-          className: item.submenu ? "context-menu-submenu" : void 0,
+          className: item.submenu ? "dl-context-menu-submenu" : void 0,
           children: [
             jsxs("button", {
               type: "button",
               className: [
-                "context-menu-item",
-                item.danger && "context-menu-item--danger",
-                isFocused && "context-menu-item--focused"
+                "dl-context-menu-item",
+                item.danger && "dl-context-menu-item--danger",
+                isFocused && "dl-context-menu-item--focused"
               ].filter(Boolean).join(" "),
               disabled: item.disabled,
               onClick: () => handleItemClick(item),
@@ -27532,19 +27624,19 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               tabIndex: -1,
               children: [
                 item.icon && jsx("span", {
-                  className: "context-menu-item-icon",
+                  className: "dl-context-menu-item-icon",
                   children: item.icon
                 }),
                 jsx("span", {
-                  className: "context-menu-item-label",
+                  className: "dl-context-menu-item-label",
                   children: item.label
                 }),
                 item.shortcut && jsx("span", {
-                  className: "context-menu-item-shortcut",
+                  className: "dl-context-menu-item-shortcut",
                   children: item.shortcut
                 }),
                 item.submenu && jsx("span", {
-                  className: "context-menu-item-arrow",
+                  className: "dl-context-menu-item-arrow",
                   children: jsx(ChevronRight2, {
                     size: 14
                   })
@@ -27552,7 +27644,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               ]
             }),
             item.submenu && openSubmenuId === item.id && jsx("div", {
-              className: "context-menu-submenu-content",
+              className: "dl-context-menu-submenu-content",
               children: jsx(ContextMenuSubmenu, {
                 items: item.submenu,
                 onClose
@@ -27585,23 +27677,23 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       }
     }, []);
     return jsx("div", {
-      className: "context-menu",
+      className: "dl-context-menu",
       role: "menu",
       children: items.map((item, itemIndex) => {
         if (item.id === "divider") {
           return jsx("div", {
-            className: "context-menu-divider",
+            className: "dl-context-menu-divider",
             role: "separator"
           }, `divider-${itemIndex}`);
         }
         return jsxs("div", {
-          className: item.submenu ? "context-menu-submenu" : void 0,
+          className: item.submenu ? "dl-context-menu-submenu" : void 0,
           children: [
             jsxs("button", {
               type: "button",
               className: [
-                "context-menu-item",
-                item.danger && "context-menu-item--danger"
+                "dl-context-menu-item",
+                item.danger && "dl-context-menu-item--danger"
               ].filter(Boolean).join(" "),
               disabled: item.disabled,
               onClick: () => handleItemClick(item),
@@ -27610,19 +27702,19 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               tabIndex: -1,
               children: [
                 item.icon && jsx("span", {
-                  className: "context-menu-item-icon",
+                  className: "dl-context-menu-item-icon",
                   children: item.icon
                 }),
                 jsx("span", {
-                  className: "context-menu-item-label",
+                  className: "dl-context-menu-item-label",
                   children: item.label
                 }),
                 item.shortcut && jsx("span", {
-                  className: "context-menu-item-shortcut",
+                  className: "dl-context-menu-item-shortcut",
                   children: item.shortcut
                 }),
                 item.submenu && jsx("span", {
-                  className: "context-menu-item-arrow",
+                  className: "dl-context-menu-item-arrow",
                   children: jsx(ChevronRight2, {
                     size: 14
                   })
@@ -27630,7 +27722,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               ]
             }),
             item.submenu && openSubmenuId === item.id && jsx("div", {
-              className: "context-menu-submenu-content",
+              className: "dl-context-menu-submenu-content",
               children: jsx(ContextMenuSubmenu2, {
                 items: item.submenu,
                 onClose
@@ -28325,7 +28417,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const canCollapse = data.cells.length > 1;
     const isCollapsed = canCollapse ? data.collapsed ?? false : false;
     return jsxs("div", {
-      className: `vertical-cell-node ${selected2 ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
+      className: `dl-node vertical-cell-node ${selected2 ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
       style: {
         borderColor: color2,
         backgroundColor: `${color2}10`
@@ -28380,7 +28472,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             canAddArg && jsxs("button", {
               ref: addButtonRef,
               type: "button",
-              className: "add-arg-button add-arg-button--vertical",
+              className: "dl-add-arg-button dl-add-arg-button--vertical",
               onClick: handleAddArgumentClick,
               title: remainingSlots ? `${addArgumentLabel} (${remainingSlots} more available)` : addArgumentLabel,
               children: [
@@ -28388,7 +28480,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                   size: 12
                 }),
                 jsx("span", {
-                  className: "add-arg-button-label",
+                  className: "dl-add-arg-button-label",
                   children: remainingSlots ? `${addArgumentLabel} (${remainingSlots} more)` : addArgumentLabel
                 })
               ]
@@ -28410,7 +28502,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const typeIcon = LITERAL_TYPE_ICONS[data.valueType];
     const debugClassName = useDebugClassName(id2);
     return jsxs("div", {
-      className: `literal-node ${selected2 ? "selected" : ""} ${debugClassName}`,
+      className: `dl-node literal-node ${selected2 ? "selected" : ""} ${debugClassName}`,
       style: {
         borderColor: color2,
         backgroundColor: `${color2}20`
@@ -28469,7 +28561,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       data.formattedJson
     ]);
     return jsxs("div", {
-      className: `structure-node ${selected2 ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
+      className: `dl-node structure-node ${selected2 ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
       style: {
         borderColor: STRUCTURE_COLOR,
         backgroundColor: `${STRUCTURE_COLOR}10`
@@ -29058,21 +29150,21 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       return null;
     }
     return jsx("div", {
-      className: `debugger-controls--${variant}`,
+      className: `dl-debugger-controls--${variant}`,
       children: jsxs("div", {
-        className: "debugger-controls-inner",
+        className: "dl-debugger-controls-inner",
         children: [
           jsx("div", {
-            className: "debugger-icon",
+            className: "dl-debugger-icon",
             children: jsx(Bug, {
               size: variant === "inline" ? 15 : 18
             })
           }),
           jsxs("div", {
-            className: "debugger-buttons",
+            className: "dl-debugger-buttons",
             children: [
               jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: reset,
                 disabled: isAtStart,
                 title: "Reset to start (Home)",
@@ -29081,7 +29173,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: stepBackward,
                 disabled: isAtStart,
                 title: "Step backward (Left Arrow)",
@@ -29090,7 +29182,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsx("button", {
-                className: "debugger-btn debugger-btn-primary",
+                className: "dl-debugger-btn dl-debugger-btn-primary",
                 onClick: isPlaying ? pause : play,
                 title: isPlaying ? "Pause (Space)" : "Play (Space)",
                 children: isPlaying ? jsx(Pause2, {
@@ -29100,7 +29192,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: stepForward,
                 disabled: isAtEnd,
                 title: "Step forward (Right Arrow)",
@@ -29109,7 +29201,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: () => goToStep(totalSteps - 1),
                 disabled: isAtEnd,
                 title: "Jump to end (End)",
@@ -29120,32 +29212,32 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             ]
           }),
           jsxs("div", {
-            className: "debugger-step-counter",
+            className: "dl-debugger-step-counter",
             children: [
               jsx("span", {
-                className: "step-current",
+                className: "dl-step-current",
                 children: isAtInitial ? 0 : currentStepIndex + 1
               }),
               jsx("span", {
-                className: "step-separator",
+                className: "dl-step-separator",
                 children: "/"
               }),
               jsx("span", {
-                className: "step-total",
+                className: "dl-step-total",
                 children: totalSteps
               })
             ]
           }),
           jsxs("div", {
-            className: "debugger-speed",
+            className: "dl-debugger-speed",
             children: [
               jsx("label", {
-                className: "speed-label",
+                className: "dl-speed-label",
                 children: "Speed"
               }),
               jsx("input", {
                 type: "range",
-                className: "speed-slider",
+                className: "dl-speed-slider",
                 min: 100,
                 max: 2e3,
                 step: 100,
@@ -30613,33 +30705,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       ]
     });
   });
-  function useSystemTheme() {
-    const [systemTheme, setSystemTheme] = useState(() => {
-      if (typeof window === "undefined") return "light";
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    });
-    useEffect(() => {
-      if (typeof window === "undefined") return;
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      const handler = (e) => {
-        setSystemTheme(e.matches ? "dark" : "light");
-      };
-      mediaQuery.addEventListener("change", handler);
-      return () => mediaQuery.removeEventListener("change", handler);
-    }, []);
-    return systemTheme;
-  }
-  const MOBILE_BREAKPOINT = 1024;
-  function useIsMobile() {
-    const [isMobile, setIsMobile] = useState(() => window.innerWidth <= MOBILE_BREAKPOINT);
-    useEffect(() => {
-      const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
-      const handler = (e) => setIsMobile(e.matches);
-      mql.addEventListener("change", handler);
-      return () => mql.removeEventListener("change", handler);
-    }, []);
-    return isMobile;
-  }
   const literalPanelConfig = {
     sections: [
       {
@@ -31240,7 +31305,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       children: [
         jsx("button", {
           type: "button",
-          className: "toolbar-btn",
+          className: "dl-toolbar-btn",
           onClick: undo,
           disabled: !canUndo,
           title: "Undo (Cmd/Ctrl+Z)",
@@ -31250,7 +31315,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         }),
         jsx("button", {
           type: "button",
-          className: "toolbar-btn",
+          className: "dl-toolbar-btn",
           onClick: redo,
           disabled: !canRedo,
           title: "Redo (Cmd/Ctrl+Shift+Z)",
@@ -31274,7 +31339,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
           className: "logic-editor-toolbar-spacer"
         }),
         onPreserveStructureChange && jsxs("label", {
-          className: "preserve-structure-toggle",
+          className: "dl-preserve-structure-toggle",
           children: [
             jsx("input", {
               type: "checkbox",
@@ -31290,9 +31355,87 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     });
   });
   const emptyResults = /* @__PURE__ */ new Map();
-  function DataLogicEditorInner({ initialNodes, initialEdges, readOnly, evaluationResults, theme, showDebugger, isEditMode }) {
+  function ReadOnlyEditorInner({ initialNodes, initialEdges, theme, showDebugger }) {
+    const bgColor = theme === "dark" ? "#404040" : "#cccccc";
+    const [nodes, , onNodesChange] = useNodesState(initialNodes);
+    const [, , onEdgesChange] = useEdgesState(initialEdges);
+    const hiddenNodeIds = useMemo(() => getHiddenNodeIds(nodes), [
+      nodes
+    ]);
+    const nodeIds = useMemo(() => new Set(nodes.map((n) => n.id)), [
+      nodes
+    ]);
+    const visibleNodes = useMemo(() => nodes.filter((node) => !hiddenNodeIds.has(node.id)), [
+      nodes,
+      hiddenNodeIds
+    ]);
+    const currentEdges = useMemo(() => buildEdgesFromNodes(nodes), [
+      nodes
+    ]);
+    const visibleEdges = useMemo(() => currentEdges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)), [
+      currentEdges,
+      nodeIds,
+      hiddenNodeIds
+    ]);
+    return jsx(EvaluationContext.Provider, {
+      value: emptyResults,
+      children: jsxs(ConnectedHandlesProvider, {
+        edges: visibleEdges,
+        children: [
+          jsx(ReactFlowProvider, {
+            children: jsxs(index$1, {
+              nodes: visibleNodes,
+              edges: visibleEdges,
+              onNodesChange,
+              onEdgesChange,
+              nodeTypes: nodeTypes2,
+              edgeTypes,
+              fitView: true,
+              fitViewOptions: {
+                padding: REACT_FLOW_OPTIONS.fitViewPadding,
+                maxZoom: REACT_FLOW_OPTIONS.maxZoom
+              },
+              minZoom: 0.1,
+              maxZoom: 2,
+              defaultEdgeOptions: {
+                type: "default",
+                animated: false
+              },
+              children: [
+                jsx(Background, {
+                  color: bgColor,
+                  gap: 20,
+                  size: 1
+                }),
+                jsx(Controls, {
+                  showInteractive: false
+                }),
+                showDebugger && jsx(DebuggerControls2, {}),
+                jsx(AutoFitView, {
+                  nodeCount: initialNodes.length
+                })
+              ]
+            })
+          }),
+          visibleNodes.length === 0 && jsxs("div", {
+            className: "logic-editor-empty",
+            children: [
+              jsx("p", {
+                children: "No expression"
+              }),
+              jsx("p", {
+                className: "logic-editor-empty-hint",
+                children: "Enter valid JSONLogic in the input panel to visualize it"
+              })
+            ]
+          })
+        ]
+      })
+    });
+  }
+  function EditableEditorInner({ initialNodes, initialEdges, evaluationResults, theme, showDebugger }) {
     const bgColor = theme === "dark" ? "#404040" : "#cccccc";
-    const { contextMenu, handleNodeContextMenu, handlePaneContextMenu, handleNodeDoubleClick, handleCloseContextMenu, handleEditProperties, contextMenuNode } = useContextMenu(isEditMode);
+    const { contextMenu, handleNodeContextMenu, handlePaneContextMenu, handleNodeDoubleClick, handleCloseContextMenu, handleEditProperties, contextMenuNode } = useContextMenu(true);
     const { nodes: editorNodes } = useEditorContext();
     const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
     const [, , onEdgesChange] = useEdgesState(initialEdges);
@@ -31304,7 +31447,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     ]);
     const prevNodeIdsRef = useRef(new Set(initialNodes.map((n) => n.id)));
     useEffect(() => {
-      if (!isEditMode) return;
       const currentIds = new Set(editorNodes.map((n) => n.id));
       const prevIds = prevNodeIdsRef.current;
       const structureChanged = currentIds.size !== prevIds.size || [
@@ -31318,7 +31460,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       }
     }, [
       editorNodes,
-      isEditMode,
       setNodes
     ]);
     const hiddenNodeIds = useMemo(() => getHiddenNodeIds(nodes), [
@@ -31334,14 +31475,13 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const currentEdges = useMemo(() => buildEdgesFromNodes(nodes), [
       nodes
     ]);
-    const visibleEdges = useMemo(() => currentEdges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)).map((edge) => isEditMode ? {
+    const visibleEdges = useMemo(() => currentEdges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)).map((edge) => ({
       ...edge,
       type: "editable"
-    } : edge), [
+    })), [
       currentEdges,
       nodeIds,
-      hiddenNodeIds,
-      isEditMode
+      hiddenNodeIds
     ]);
     return jsx(EvaluationContext.Provider, {
       value: evaluationResults,
@@ -31352,8 +31492,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             children: jsxs(index$1, {
               nodes: visibleNodes,
               edges: visibleEdges,
-              onNodesChange: readOnly ? void 0 : onNodesChange,
-              onEdgesChange: readOnly ? void 0 : onEdgesChange,
+              onNodesChange,
+              onEdgesChange,
               nodeTypes: nodeTypes2,
               edgeTypes,
               fitView: true,
@@ -31377,7 +31517,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                   size: 1
                 }),
                 jsx(Controls, {
-                  showInteractive: !readOnly
+                  showInteractive: true
                 }),
                 showDebugger && jsx(DebuggerControls2, {}),
                 jsx(NodeSelectionHandler, {}),
@@ -31433,7 +31573,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     });
     const expressionKey = `${editor.nodes.length}-${editor.edges.length}-${((_a = editor.nodes[0]) == null ? void 0 : _a.id) ?? "empty"}`;
     const hasDebugger = evalEnabled && editor.usingTraceMode && editor.steps.length > 0;
-    const readOnly = false;
     const handleNodesChange = useCallback((nodes) => {
       if (!onChange) return;
       if (onChangeTimerRef.current) {
@@ -31473,25 +31612,71 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         })
       });
     }
-    const editorInner = jsx(DataLogicEditorInner, {
+    const editorClassName = [
+      "logic-editor",
+      className
+    ].filter(Boolean).join(" ");
+    if (!isEditMode) {
+      const readOnlyInner = jsx(ReadOnlyEditorInner, {
+        initialNodes: editor.nodes,
+        initialEdges: editor.edges,
+        theme: resolvedTheme,
+        showDebugger: false
+      }, expressionKey);
+      return jsx("div", {
+        className: editorClassName,
+        "data-theme": resolvedTheme,
+        children: hasDebugger ? jsxs(DebuggerProvider2, {
+          steps: editor.steps,
+          traceNodeMap: editor.traceNodeMap,
+          nodes: editor.nodes,
+          children: [
+            jsx(EditorToolbar, {
+              isEditMode: false,
+              hasDebugger,
+              preserveStructure,
+              onPreserveStructureChange
+            }),
+            jsx("div", {
+              className: "logic-editor-body",
+              children: jsx("div", {
+                className: "logic-editor-main",
+                children: readOnlyInner
+              })
+            })
+          ]
+        }) : jsxs(Fragment, {
+          children: [
+            jsx(EditorToolbar, {
+              isEditMode: false,
+              hasDebugger,
+              preserveStructure,
+              onPreserveStructureChange
+            }),
+            jsx("div", {
+              className: "logic-editor-body",
+              children: jsx("div", {
+                className: "logic-editor-main",
+                children: readOnlyInner
+              })
+            })
+          ]
+        })
+      });
+    }
+    const editableInner = jsx(EditableEditorInner, {
       initialNodes: editor.nodes,
       initialEdges: editor.edges,
-      readOnly,
       evaluationResults: emptyResults,
       theme: resolvedTheme,
-      showDebugger: false,
-      isEditMode
+      showDebugger: false
     }, expressionKey);
-    const editorClassName = [
-      "logic-editor",
-      className
-    ].filter(Boolean).join(" ");
     return jsxs(EditorProvider, {
       nodes: editor.nodes,
       initialEditMode: isEditMode,
       onNodesChange: handleNodesChange,
       children: [
-        isEditMode && jsx(KeyboardHandler, {}),
+        jsx(KeyboardHandler, {}),
         jsx("div", {
           className: editorClassName,
           "data-theme": resolvedTheme,
@@ -31511,9 +31696,9 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 children: [
                   jsx("div", {
                     className: "logic-editor-main",
-                    children: editorInner
+                    children: editableInner
                   }),
-                  isEditMode && jsx(PropertiesPanel, {})
+                  jsx(PropertiesPanel, {})
                 ]
               })
             ]
@@ -31530,9 +31715,9 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 children: [
                   jsx("div", {
                     className: "logic-editor-main",
-                    children: editorInner
+                    children: editableInner
                   }),
-                  isEditMode && jsx(PropertiesPanel, {})
+                  jsx(PropertiesPanel, {})
                 ]
               })
             ]
@@ -32286,12 +32471,14 @@ function WorkflowFlowView({
 }
 function DataLogicView({ value, data }) {
   const { resolvedTheme } = useTheme();
+  const [preserveStructure, setPreserveStructure] = useState(true);
   return /* @__PURE__ */ jsx("div", { className: "df-details-content", children: /* @__PURE__ */ jsx("div", { className: "df-details-logic-editor", "data-theme": resolvedTheme, children: /* @__PURE__ */ jsx(
     DataLogicEditor,
     {
       value,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data
     }
@@ -32308,6 +32495,7 @@ function TaskContent({ selection: selection2 }) {
   const { task } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
   const functionName = task.function.name;
   const input = task.function.input;
   let debugData;
@@ -32329,7 +32517,8 @@ function TaskContent({ selection: selection2 }) {
       {
         value: visualData,
         theme: resolvedTheme,
-        preserveStructure: true,
+        preserveStructure,
+        onPreserveStructureChange: setPreserveStructure,
         className: "df-datalogic-viewer",
         data: debugData
       }
@@ -32345,7 +32534,8 @@ function TaskContent({ selection: selection2 }) {
       {
         value: andExpression,
         theme: resolvedTheme,
-        preserveStructure: true,
+        preserveStructure,
+        onPreserveStructureChange: setPreserveStructure,
         className: "df-datalogic-viewer",
         data: debugData
       }
@@ -32356,7 +32546,8 @@ function TaskContent({ selection: selection2 }) {
     {
       value: task.function.input,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer"
     }
   ) }) });
@@ -32365,6 +32556,7 @@ function MappingContent({ selection: selection2 }) {
   const { mapping } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
   const visualData = {
     [mapping.path]: mapping.logic
   };
@@ -32380,7 +32572,8 @@ function MappingContent({ selection: selection2 }) {
     {
       value: visualData,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data: debugData
     }
@@ -32390,6 +32583,7 @@ function ValidationRuleContent({ selection: selection2 }) {
   const { rule } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
   let debugData;
   if ((dbgContext == null ? void 0 : dbgContext.state.isActive) && dbgContext.currentStep) {
     const step = dbgContext.currentStep;
@@ -32402,7 +32596,8 @@ function ValidationRuleContent({ selection: selection2 }) {
     {
       value: rule.logic,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data: debugData
     }