@goplasmatic/dataflow-ui 2.0.15 → 2.0.16

package/dist/index.cjs

@@ -24303,6 +24303,21 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       state.currentStepIndex,
       traceNodeMap
     ]);
+    const errorNodeIds = React.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 = React.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       for (const node of nodes) {
@@ -24358,6 +24373,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       currentStep,
       currentNodeId,
       executedNodeIds,
+      errorNodeIds,
       pathNodeIds,
       play,
       pause,
@@ -24372,6 +24388,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       currentStep,
       currentNodeId,
       executedNodeIds,
+      errorNodeIds,
       pathNodeIds,
       play,
       pause,
@@ -24401,12 +24418,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
       };
     }, [
@@ -24759,8 +24778,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       selectedNodeId
     ]);
     const clearSelection = React.useCallback(() => {
-      setSelectedNodeId(null);
-      setSelectedNodeIds(/* @__PURE__ */ new Set());
+      setSelectedNodeId((prev) => prev === null ? prev : null);
+      setSelectedNodeIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
     }, []);
     const selectAllNodes = React.useCallback(() => {
       const allIds = new Set(internalNodes.map((n) => n.id));
@@ -26364,14 +26383,15 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const propertyPanelFocusRef = React.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
     });
@@ -26380,7 +26400,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       setInternalNodes,
       onNodesChange,
       selectedNodeId: selection2.selectedNodeId,
-      setSelectedNodeId: selection2.setSelectedNodeId,
+      setSelectedNodeId,
       setPanelValues,
       hasEditedRef,
       nodes,
@@ -26398,15 +26418,15 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     React.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
     ]);
     React.useEffect(() => {
       nodesRef.current = internalNodes;
@@ -26416,12 +26436,13 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const setEditMode = React.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 = React.useCallback((fieldId, value2) => {
       setPanelValues((prev) => ({
@@ -26433,50 +26454,50 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       setPanelValues(values ?? {});
     }, []);
     const selectNode = React.useCallback((nodeId) => {
-      selection2.selectNode(nodeId);
+      selectionSelectNode(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectNode
     ]);
     const setSelectionWrapped = React.useCallback((nodeIds) => {
-      selection2.setSelection(nodeIds);
+      selectionSetSelection(nodeIds);
       setPanelValues({});
     }, [
-      selection2
+      selectionSetSelection
     ]);
     const toggleNodeSelection = React.useCallback((nodeId) => {
-      selection2.toggleNodeSelection(nodeId);
+      selectionToggleNodeSelection(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionToggleNodeSelection
     ]);
     const addToSelection = React.useCallback((nodeId) => {
-      selection2.addToSelection(nodeId);
+      selectionAddToSelection(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionAddToSelection
     ]);
     const clearSelection = React.useCallback(() => {
-      selection2.clearSelection();
-      setPanelValues({});
+      selectionClearSelection();
+      setPanelValues((prev) => Object.keys(prev).length === 0 ? prev : {});
     }, [
-      selection2
+      selectionClearSelection
     ]);
     const selectAllNodes = React.useCallback(() => {
-      selection2.selectAllNodes();
+      selectionSelectAllNodes();
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectAllNodes
     ]);
     const selectChildren = React.useCallback((nodeId) => {
-      selection2.selectChildren(nodeId);
+      selectionSelectChildren(nodeId);
       setPanelValues({});
     }, [
-      selection2
+      selectionSelectChildren
     ]);
     const focusPropertyPanel = React.useCallback((nodeId, fieldId) => {
-      selection2.setSelectedNodeId(nodeId);
-      selection2.setSelectedNodeIds(/* @__PURE__ */ new Set([
+      setSelectedNodeId(nodeId);
+      setSelectedNodeIds(/* @__PURE__ */ new Set([
         nodeId
       ]));
       setPanelValues({});
@@ -26485,7 +26506,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         (_a = propertyPanelFocusRef.current) == null ? void 0 : _a.focusField(fieldId);
       }, 100);
     }, [
-      selection2
+      setSelectedNodeId,
+      setSelectedNodeIds
     ]);
     const applyPanelChanges = React.useCallback(() => {
       if (!selection2.selectedNode || Object.keys(panelValues).length === 0) {
@@ -26574,12 +26596,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: React.createRef()
+  };
   function useEditorContext() {
     const context = React.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);
@@ -26588,7 +26650,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) {
@@ -26613,6 +26676,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] = React.useState(false);
@@ -26625,7 +26693,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         try {
           setLoading(true);
           setError(null);
-          const wasm2 = await Promise.resolve().then(() => require("./datalogic_wasm-CrfXtaOs-Bn3jizlo.cjs"));
+          const wasm2 = await Promise.resolve().then(() => require("./datalogic_wasm-RwP1VzMM-CRoSygcJ.cjs"));
           await wasm2.default();
           if (!cancelled) {
             moduleRef.current = {
@@ -26658,7 +26726,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
@@ -26676,7 +26744,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
@@ -26693,7 +26761,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const { focusPropertyPanel, nodes: editorNodes } = useEditorContext();
     const [contextMenu, setContextMenu] = React.useState(null);
     const handleNodeContextMenu = React.useCallback((event, node) => {
-      if (!isEditMode) return;
       event.preventDefault();
       setContextMenu({
         type: "node",
@@ -26705,7 +26772,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       isEditMode
     ]);
     const handlePaneContextMenu = React.useCallback((event) => {
-      if (!isEditMode) return;
       event.preventDefault();
       setContextMenu({
         type: "canvas",
@@ -26716,7 +26782,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       isEditMode
     ]);
     const handleNodeDoubleClick = React.useCallback((_event, node) => {
-      if (!isEditMode) return;
       let fieldId;
       switch (node.data.type) {
         case "literal":
@@ -26774,6 +26839,33 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       contextMenuNode
     };
   }
+  function useSystemTheme() {
+    const [systemTheme, setSystemTheme] = React.useState(() => {
+      if (typeof window === "undefined") return "light";
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    });
+    React.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] = React.useState(() => typeof window !== "undefined" ? window.innerWidth <= MOBILE_BREAKPOINT : false);
+    React.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 = React.memo(function NodeInputHandles2({ nodeId, color: color2 }) {
     const hasTopConnection = useIsHandleConnected(nodeId, "top");
     const hasLeftConnection = useIsHandleConnected(nodeId, "left");
@@ -26987,7 +27079,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
           children: [
             jsxRuntime.jsx("span", {
               className: "debug-info-label",
-              children: hasError ? "Error:" : "Result:"
+              children: hasError ? "⚠ Error:" : "Result:"
             }),
             hasError ? jsxRuntime.jsx("pre", {
               className: "debug-info-value debug-info-error",
@@ -27498,7 +27590,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     let enabledIndex = -1;
     return jsxRuntime.jsx("div", {
       ref: menuRef,
-      className: "context-menu",
+      className: "dl-context-menu",
       style: {
         left: position.x,
         top: position.y
@@ -27508,7 +27600,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       children: filteredItems.map((item, itemIndex) => {
         if (item.id === "divider") {
           return jsxRuntime.jsx("div", {
-            className: "context-menu-divider",
+            className: "dl-context-menu-divider",
             role: "separator"
           }, `divider-${itemIndex}`);
         }
@@ -27518,14 +27610,14 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         const currentEnabledIndex = enabledIndex;
         const isFocused = !item.disabled && focusedIndex === currentEnabledIndex;
         return jsxRuntime.jsxs("div", {
-          className: item.submenu ? "context-menu-submenu" : void 0,
+          className: item.submenu ? "dl-context-menu-submenu" : void 0,
           children: [
             jsxRuntime.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),
@@ -27534,19 +27626,19 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               tabIndex: -1,
               children: [
                 item.icon && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-icon",
+                  className: "dl-context-menu-item-icon",
                   children: item.icon
                 }),
                 jsxRuntime.jsx("span", {
-                  className: "context-menu-item-label",
+                  className: "dl-context-menu-item-label",
                   children: item.label
                 }),
                 item.shortcut && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-shortcut",
+                  className: "dl-context-menu-item-shortcut",
                   children: item.shortcut
                 }),
                 item.submenu && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-arrow",
+                  className: "dl-context-menu-item-arrow",
                   children: jsxRuntime.jsx(ChevronRight2, {
                     size: 14
                   })
@@ -27554,7 +27646,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               ]
             }),
             item.submenu && openSubmenuId === item.id && jsxRuntime.jsx("div", {
-              className: "context-menu-submenu-content",
+              className: "dl-context-menu-submenu-content",
               children: jsxRuntime.jsx(ContextMenuSubmenu, {
                 items: item.submenu,
                 onClose
@@ -27587,23 +27679,23 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       }
     }, []);
     return jsxRuntime.jsx("div", {
-      className: "context-menu",
+      className: "dl-context-menu",
       role: "menu",
       children: items.map((item, itemIndex) => {
         if (item.id === "divider") {
           return jsxRuntime.jsx("div", {
-            className: "context-menu-divider",
+            className: "dl-context-menu-divider",
             role: "separator"
           }, `divider-${itemIndex}`);
         }
         return jsxRuntime.jsxs("div", {
-          className: item.submenu ? "context-menu-submenu" : void 0,
+          className: item.submenu ? "dl-context-menu-submenu" : void 0,
           children: [
             jsxRuntime.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),
@@ -27612,19 +27704,19 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               tabIndex: -1,
               children: [
                 item.icon && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-icon",
+                  className: "dl-context-menu-item-icon",
                   children: item.icon
                 }),
                 jsxRuntime.jsx("span", {
-                  className: "context-menu-item-label",
+                  className: "dl-context-menu-item-label",
                   children: item.label
                 }),
                 item.shortcut && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-shortcut",
+                  className: "dl-context-menu-item-shortcut",
                   children: item.shortcut
                 }),
                 item.submenu && jsxRuntime.jsx("span", {
-                  className: "context-menu-item-arrow",
+                  className: "dl-context-menu-item-arrow",
                   children: jsxRuntime.jsx(ChevronRight2, {
                     size: 14
                   })
@@ -27632,7 +27724,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
               ]
             }),
             item.submenu && openSubmenuId === item.id && jsxRuntime.jsx("div", {
-              className: "context-menu-submenu-content",
+              className: "dl-context-menu-submenu-content",
               children: jsxRuntime.jsx(ContextMenuSubmenu2, {
                 items: item.submenu,
                 onClose
@@ -28327,7 +28419,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const canCollapse = data.cells.length > 1;
     const isCollapsed = canCollapse ? data.collapsed ?? false : false;
     return jsxRuntime.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`
@@ -28382,7 +28474,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             canAddArg && jsxRuntime.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: [
@@ -28390,7 +28482,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                   size: 12
                 }),
                 jsxRuntime.jsx("span", {
-                  className: "add-arg-button-label",
+                  className: "dl-add-arg-button-label",
                   children: remainingSlots ? `${addArgumentLabel} (${remainingSlots} more)` : addArgumentLabel
                 })
               ]
@@ -28412,7 +28504,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const typeIcon = LITERAL_TYPE_ICONS[data.valueType];
     const debugClassName = useDebugClassName(id2);
     return jsxRuntime.jsxs("div", {
-      className: `literal-node ${selected2 ? "selected" : ""} ${debugClassName}`,
+      className: `dl-node literal-node ${selected2 ? "selected" : ""} ${debugClassName}`,
       style: {
         borderColor: color2,
         backgroundColor: `${color2}20`
@@ -28471,7 +28563,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       data.formattedJson
     ]);
     return jsxRuntime.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`
@@ -29060,21 +29152,21 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       return null;
     }
     return jsxRuntime.jsx("div", {
-      className: `debugger-controls--${variant}`,
+      className: `dl-debugger-controls--${variant}`,
       children: jsxRuntime.jsxs("div", {
-        className: "debugger-controls-inner",
+        className: "dl-debugger-controls-inner",
         children: [
           jsxRuntime.jsx("div", {
-            className: "debugger-icon",
+            className: "dl-debugger-icon",
             children: jsxRuntime.jsx(Bug, {
               size: variant === "inline" ? 15 : 18
             })
           }),
           jsxRuntime.jsxs("div", {
-            className: "debugger-buttons",
+            className: "dl-debugger-buttons",
             children: [
               jsxRuntime.jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: reset,
                 disabled: isAtStart,
                 title: "Reset to start (Home)",
@@ -29083,7 +29175,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsxRuntime.jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: stepBackward,
                 disabled: isAtStart,
                 title: "Step backward (Left Arrow)",
@@ -29092,7 +29184,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsxRuntime.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 ? jsxRuntime.jsx(Pause2, {
@@ -29102,7 +29194,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsxRuntime.jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: stepForward,
                 disabled: isAtEnd,
                 title: "Step forward (Right Arrow)",
@@ -29111,7 +29203,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 })
               }),
               jsxRuntime.jsx("button", {
-                className: "debugger-btn",
+                className: "dl-debugger-btn",
                 onClick: () => goToStep(totalSteps - 1),
                 disabled: isAtEnd,
                 title: "Jump to end (End)",
@@ -29122,32 +29214,32 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             ]
           }),
           jsxRuntime.jsxs("div", {
-            className: "debugger-step-counter",
+            className: "dl-debugger-step-counter",
             children: [
               jsxRuntime.jsx("span", {
-                className: "step-current",
+                className: "dl-step-current",
                 children: isAtInitial ? 0 : currentStepIndex + 1
               }),
               jsxRuntime.jsx("span", {
-                className: "step-separator",
+                className: "dl-step-separator",
                 children: "/"
               }),
               jsxRuntime.jsx("span", {
-                className: "step-total",
+                className: "dl-step-total",
                 children: totalSteps
               })
             ]
           }),
           jsxRuntime.jsxs("div", {
-            className: "debugger-speed",
+            className: "dl-debugger-speed",
             children: [
               jsxRuntime.jsx("label", {
-                className: "speed-label",
+                className: "dl-speed-label",
                 children: "Speed"
               }),
               jsxRuntime.jsx("input", {
                 type: "range",
-                className: "speed-slider",
+                className: "dl-speed-slider",
                 min: 100,
                 max: 2e3,
                 step: 100,
@@ -30615,33 +30707,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       ]
     });
   });
-  function useSystemTheme() {
-    const [systemTheme, setSystemTheme] = React.useState(() => {
-      if (typeof window === "undefined") return "light";
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    });
-    React.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] = React.useState(() => window.innerWidth <= MOBILE_BREAKPOINT);
-    React.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: [
       {
@@ -31242,7 +31307,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       children: [
         jsxRuntime.jsx("button", {
           type: "button",
-          className: "toolbar-btn",
+          className: "dl-toolbar-btn",
           onClick: undo,
           disabled: !canUndo,
           title: "Undo (Cmd/Ctrl+Z)",
@@ -31252,7 +31317,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         }),
         jsxRuntime.jsx("button", {
           type: "button",
-          className: "toolbar-btn",
+          className: "dl-toolbar-btn",
           onClick: redo,
           disabled: !canRedo,
           title: "Redo (Cmd/Ctrl+Shift+Z)",
@@ -31276,7 +31341,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
           className: "logic-editor-toolbar-spacer"
         }),
         onPreserveStructureChange && jsxRuntime.jsxs("label", {
-          className: "preserve-structure-toggle",
+          className: "dl-preserve-structure-toggle",
           children: [
             jsxRuntime.jsx("input", {
               type: "checkbox",
@@ -31292,9 +31357,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 = React.useMemo(() => getHiddenNodeIds(nodes), [
+      nodes
+    ]);
+    const nodeIds = React.useMemo(() => new Set(nodes.map((n) => n.id)), [
+      nodes
+    ]);
+    const visibleNodes = React.useMemo(() => nodes.filter((node) => !hiddenNodeIds.has(node.id)), [
+      nodes,
+      hiddenNodeIds
+    ]);
+    const currentEdges = React.useMemo(() => buildEdgesFromNodes(nodes), [
+      nodes
+    ]);
+    const visibleEdges = React.useMemo(() => currentEdges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)), [
+      currentEdges,
+      nodeIds,
+      hiddenNodeIds
+    ]);
+    return jsxRuntime.jsx(EvaluationContext.Provider, {
+      value: emptyResults,
+      children: jsxRuntime.jsxs(ConnectedHandlesProvider, {
+        edges: visibleEdges,
+        children: [
+          jsxRuntime.jsx(ReactFlowProvider, {
+            children: jsxRuntime.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: [
+                jsxRuntime.jsx(Background, {
+                  color: bgColor,
+                  gap: 20,
+                  size: 1
+                }),
+                jsxRuntime.jsx(Controls, {
+                  showInteractive: false
+                }),
+                showDebugger && jsxRuntime.jsx(DebuggerControls2, {}),
+                jsxRuntime.jsx(AutoFitView, {
+                  nodeCount: initialNodes.length
+                })
+              ]
+            })
+          }),
+          visibleNodes.length === 0 && jsxRuntime.jsxs("div", {
+            className: "logic-editor-empty",
+            children: [
+              jsxRuntime.jsx("p", {
+                children: "No expression"
+              }),
+              jsxRuntime.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);
@@ -31306,7 +31449,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     ]);
     const prevNodeIdsRef = React.useRef(new Set(initialNodes.map((n) => n.id)));
     React.useEffect(() => {
-      if (!isEditMode) return;
       const currentIds = new Set(editorNodes.map((n) => n.id));
       const prevIds = prevNodeIdsRef.current;
       const structureChanged = currentIds.size !== prevIds.size || [
@@ -31320,7 +31462,6 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
       }
     }, [
       editorNodes,
-      isEditMode,
       setNodes
     ]);
     const hiddenNodeIds = React.useMemo(() => getHiddenNodeIds(nodes), [
@@ -31336,14 +31477,13 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
     const currentEdges = React.useMemo(() => buildEdgesFromNodes(nodes), [
       nodes
     ]);
-    const visibleEdges = React.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 = React.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 jsxRuntime.jsx(EvaluationContext.Provider, {
       value: evaluationResults,
@@ -31354,8 +31494,8 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
             children: jsxRuntime.jsxs(index$1, {
               nodes: visibleNodes,
               edges: visibleEdges,
-              onNodesChange: readOnly ? void 0 : onNodesChange,
-              onEdgesChange: readOnly ? void 0 : onEdgesChange,
+              onNodesChange,
+              onEdgesChange,
               nodeTypes: nodeTypes2,
               edgeTypes,
               fitView: true,
@@ -31379,7 +31519,7 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                   size: 1
                 }),
                 jsxRuntime.jsx(Controls, {
-                  showInteractive: !readOnly
+                  showInteractive: true
                 }),
                 showDebugger && jsxRuntime.jsx(DebuggerControls2, {}),
                 jsxRuntime.jsx(NodeSelectionHandler, {}),
@@ -31435,7 +31575,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 = React.useCallback((nodes) => {
       if (!onChange) return;
       if (onChangeTimerRef.current) {
@@ -31475,25 +31614,71 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
         })
       });
     }
-    const editorInner = jsxRuntime.jsx(DataLogicEditorInner, {
+    const editorClassName = [
+      "logic-editor",
+      className
+    ].filter(Boolean).join(" ");
+    if (!isEditMode) {
+      const readOnlyInner = jsxRuntime.jsx(ReadOnlyEditorInner, {
+        initialNodes: editor.nodes,
+        initialEdges: editor.edges,
+        theme: resolvedTheme,
+        showDebugger: false
+      }, expressionKey);
+      return jsxRuntime.jsx("div", {
+        className: editorClassName,
+        "data-theme": resolvedTheme,
+        children: hasDebugger ? jsxRuntime.jsxs(DebuggerProvider2, {
+          steps: editor.steps,
+          traceNodeMap: editor.traceNodeMap,
+          nodes: editor.nodes,
+          children: [
+            jsxRuntime.jsx(EditorToolbar, {
+              isEditMode: false,
+              hasDebugger,
+              preserveStructure,
+              onPreserveStructureChange
+            }),
+            jsxRuntime.jsx("div", {
+              className: "logic-editor-body",
+              children: jsxRuntime.jsx("div", {
+                className: "logic-editor-main",
+                children: readOnlyInner
+              })
+            })
+          ]
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [
+            jsxRuntime.jsx(EditorToolbar, {
+              isEditMode: false,
+              hasDebugger,
+              preserveStructure,
+              onPreserveStructureChange
+            }),
+            jsxRuntime.jsx("div", {
+              className: "logic-editor-body",
+              children: jsxRuntime.jsx("div", {
+                className: "logic-editor-main",
+                children: readOnlyInner
+              })
+            })
+          ]
+        })
+      });
+    }
+    const editableInner = jsxRuntime.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 jsxRuntime.jsxs(EditorProvider, {
       nodes: editor.nodes,
       initialEditMode: isEditMode,
       onNodesChange: handleNodesChange,
       children: [
-        isEditMode && jsxRuntime.jsx(KeyboardHandler, {}),
+        jsxRuntime.jsx(KeyboardHandler, {}),
         jsxRuntime.jsx("div", {
           className: editorClassName,
           "data-theme": resolvedTheme,
@@ -31513,9 +31698,9 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 children: [
                   jsxRuntime.jsx("div", {
                     className: "logic-editor-main",
-                    children: editorInner
+                    children: editableInner
                   }),
-                  isEditMode && jsxRuntime.jsx(PropertiesPanel, {})
+                  jsxRuntime.jsx(PropertiesPanel, {})
                 ]
               })
             ]
@@ -31532,9 +31717,9 @@ let CATEGORY_COLORS, DataLogicEditor, operators, applyTreeLayout, jsonLogicToNod
                 children: [
                   jsxRuntime.jsx("div", {
                     className: "logic-editor-main",
-                    children: editorInner
+                    children: editableInner
                   }),
-                  isEditMode && jsxRuntime.jsx(PropertiesPanel, {})
+                  jsxRuntime.jsx(PropertiesPanel, {})
                 ]
               })
             ]
@@ -32288,12 +32473,14 @@ function WorkflowFlowView({
 }
 function DataLogicView({ value, data }) {
   const { resolvedTheme } = useTheme();
+  const [preserveStructure, setPreserveStructure] = React.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-details-content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-details-logic-editor", "data-theme": resolvedTheme, children: /* @__PURE__ */ jsxRuntime.jsx(
     DataLogicEditor,
     {
       value,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data
     }
@@ -32310,6 +32497,7 @@ function TaskContent({ selection: selection2 }) {
   const { task } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = React.useState(true);
   const functionName = task.function.name;
   const input = task.function.input;
   let debugData;
@@ -32331,7 +32519,8 @@ function TaskContent({ selection: selection2 }) {
       {
         value: visualData,
         theme: resolvedTheme,
-        preserveStructure: true,
+        preserveStructure,
+        onPreserveStructureChange: setPreserveStructure,
         className: "df-datalogic-viewer",
         data: debugData
       }
@@ -32347,7 +32536,8 @@ function TaskContent({ selection: selection2 }) {
       {
         value: andExpression,
         theme: resolvedTheme,
-        preserveStructure: true,
+        preserveStructure,
+        onPreserveStructureChange: setPreserveStructure,
         className: "df-datalogic-viewer",
         data: debugData
       }
@@ -32358,7 +32548,8 @@ function TaskContent({ selection: selection2 }) {
     {
       value: task.function.input,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer"
     }
   ) }) });
@@ -32367,6 +32558,7 @@ function MappingContent({ selection: selection2 }) {
   const { mapping } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = React.useState(true);
   const visualData = {
     [mapping.path]: mapping.logic
   };
@@ -32382,7 +32574,8 @@ function MappingContent({ selection: selection2 }) {
     {
       value: visualData,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data: debugData
     }
@@ -32392,6 +32585,7 @@ function ValidationRuleContent({ selection: selection2 }) {
   const { rule } = selection2;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = React.useState(true);
   let debugData;
   if ((dbgContext == null ? void 0 : dbgContext.state.isActive) && dbgContext.currentStep) {
     const step = dbgContext.currentStep;
@@ -32404,7 +32598,8 @@ function ValidationRuleContent({ selection: selection2 }) {
     {
       value: rule.logic,
       theme: resolvedTheme,
-      preserveStructure: true,
+      preserveStructure,
+      onPreserveStructureChange: setPreserveStructure,
       className: "df-datalogic-viewer",
       data: debugData
     }