feat(ui): Add interactive preserve-structure toggle to DataLogic editors

Wire up `onPreserveStructureChange` callback with local state so users
can toggle the preserve-structure option in all detail views (DataLogic,
Mapping, Task, ValidationRule). Bump package version to 2.0.16.

Author: shankar-gpio

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goplasmatic/dataflow-ui",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "type": "module",
   "description": "React visualization library for dataflow-rs workflow engine",
   "author": "Plasmatic Engineering <shankar@goplasmatic.io>",

ui/src/components/workflow-visualizer/views/detail-views/DataLogicView.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DataLogicEditor } from '@goplasmatic/datalogic-ui';
 import type { JsonLogicValue } from '../../../../types';
 import { useTheme } from '../../context';
@@ -9,14 +10,16 @@ interface DataLogicViewProps {
 
 export function DataLogicView({ value, data }: DataLogicViewProps) {
   const { resolvedTheme } = useTheme();
+  const [preserveStructure, setPreserveStructure] = useState(true);
 
   return (
     <div className="df-details-content">
       <div className="df-details-logic-editor" data-theme={resolvedTheme}>
         <DataLogicEditor
           value={value}
           theme={resolvedTheme}
-          preserveStructure={true}
+          preserveStructure={preserveStructure}
+          onPreserveStructureChange={setPreserveStructure}
           className="df-datalogic-viewer"
           data={data}
         />

ui/src/components/workflow-visualizer/views/detail-views/MappingContent.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DataLogicEditor } from '@goplasmatic/datalogic-ui';
 import type { JsonLogicValue } from '../../../../types';
 import { getMappingContext } from '../../../../types';
@@ -12,6 +13,7 @@ export function MappingContent({ selection }: MappingContentProps) {
   const { mapping } = selection;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
 
   // Show the mapping as { path: logic }
   const visualData: Record<string, JsonLogicValue> = {
@@ -37,7 +39,8 @@ export function MappingContent({ selection }: MappingContentProps) {
         <DataLogicEditor
           value={visualData}
           theme={resolvedTheme}
-          preserveStructure={true}
+          preserveStructure={preserveStructure}
+          onPreserveStructureChange={setPreserveStructure}
           className="df-datalogic-viewer"
           data={debugData}
         />

ui/src/components/workflow-visualizer/views/detail-views/TaskContent.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DataLogicEditor } from '@goplasmatic/datalogic-ui';
 import type { JsonLogicValue, MappingItem, ValidationRule } from '../../../../types';
 import { getMappingContext } from '../../../../types';
@@ -13,6 +14,7 @@ export function TaskContent({ selection }: TaskContentProps) {
   const { task } = selection;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
   const functionName = task.function.name;
   const input = task.function.input as Record<string, unknown> | undefined;
 
@@ -45,7 +47,8 @@ export function TaskContent({ selection }: TaskContentProps) {
           <DataLogicEditor
             value={visualData}
             theme={resolvedTheme}
-            preserveStructure={true}
+            preserveStructure={preserveStructure}
+            onPreserveStructureChange={setPreserveStructure}
             className="df-datalogic-viewer"
             data={debugData}
           />
@@ -66,7 +69,8 @@ export function TaskContent({ selection }: TaskContentProps) {
           <DataLogicEditor
             value={andExpression}
             theme={resolvedTheme}
-            preserveStructure={true}
+            preserveStructure={preserveStructure}
+            onPreserveStructureChange={setPreserveStructure}
             className="df-datalogic-viewer"
             data={debugData}
           />
@@ -82,7 +86,8 @@ export function TaskContent({ selection }: TaskContentProps) {
         <DataLogicEditor
           value={task.function.input as JsonLogicValue}
           theme={resolvedTheme}
-          preserveStructure={true}
+          preserveStructure={preserveStructure}
+          onPreserveStructureChange={setPreserveStructure}
           className="df-datalogic-viewer"
         />
       </div>

ui/src/components/workflow-visualizer/views/detail-views/ValidationRuleContent.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { DataLogicEditor } from '@goplasmatic/datalogic-ui';
 import type { TreeSelectionType } from '../../WorkflowVisualizer';
 import { useTheme, useDebuggerOptional } from '../../context';
@@ -10,6 +11,7 @@ export function ValidationRuleContent({ selection }: ValidationRuleContentProps)
   const { rule } = selection;
   const { resolvedTheme } = useTheme();
   const dbgContext = useDebuggerOptional();
+  const [preserveStructure, setPreserveStructure] = useState(true);
 
   // When debugger is active, pass the task-level message context (validation is read-only)
   let debugData: Record<string, unknown> | undefined;
@@ -31,7 +33,8 @@ export function ValidationRuleContent({ selection }: ValidationRuleContentProps)
         <DataLogicEditor
           value={rule.logic}
           theme={resolvedTheme}
-          preserveStructure={true}
+          preserveStructure={preserveStructure}
+          onPreserveStructureChange={setPreserveStructure}
           className="df-datalogic-viewer"
           data={debugData}
         />