@goplasmatic/datalogic-ui 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -21,147 +21,6 @@ const CATEGORY_COLORS = {
   literal: "#6B7280"
 };
 
-function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function getValueType$1(value) {
-  if (value === null) return "null";
-  if (typeof value === "boolean") return "boolean";
-  if (typeof value === "number") return "number";
-  if (typeof value === "string") return "string";
-  if (Array.isArray(value)) return "array";
-  return "string";
-}
-function looksLikeDate(str) {
-  const datePatterns = [
-    /^\d{4}-\d{2}-\d{2}/,
-    // ISO date
-    /^\d{2}\/\d{2}\/\d{4}/,
-    // MM/DD/YYYY
-    /^\d{2}-\d{2}-\d{4}/
-    // DD-MM-YYYY
-  ];
-  return datePatterns.some((pattern) => pattern.test(str));
-}
-function isSimpleOperand(operand) {
-  if (operand === null || typeof operand !== "object") {
-    return true;
-  }
-  if (Array.isArray(operand)) {
-    return operand.length === 0;
-  }
-  return false;
-}
-
-const COMPARISON_OPERATORS$1 = ["==", "===", "!=", "!==", ">", ">=", "<", "<="];
-const ITERATOR_OPERATORS = ["map", "reduce", "filter", "some", "none", "all"];
-const UNARY_OPERATORS$2 = ["!", "!!"];
-const ARITHMETIC_BINARY_OPERATORS = ["+", "-", "*", "/", "%"];
-function generateExpressionText(value, maxLength = 100) {
-  function getOperator(val) {
-    if (isPlainObject(val)) {
-      const keys = Object.keys(val);
-      if (keys.length === 1) return keys[0];
-    }
-    return null;
-  }
-  function needsParens(subVal, parentOp) {
-    const subOp = getOperator(subVal);
-    if (!subOp) return false;
-    if (parentOp === "and" && subOp === "or" || parentOp === "or" && subOp === "and") {
-      return true;
-    }
-    if (COMPARISON_OPERATORS$1.includes(parentOp) && (subOp === "and" || subOp === "or")) {
-      return true;
-    }
-    if ((parentOp === "*" || parentOp === "/") && (subOp === "+" || subOp === "-")) {
-      return true;
-    }
-    return false;
-  }
-  function toText(val, _parentOp) {
-    if (val === null) return "null";
-    if (typeof val === "boolean") return String(val);
-    if (typeof val === "number") return String(val);
-    if (typeof val === "string") return `"${val}"`;
-    if (Array.isArray(val)) {
-      if (val.length === 0) return "[]";
-      const items = val.map((v) => toText(v)).join(", ");
-      return `[${items}]`;
-    }
-    if (isPlainObject(val)) {
-      const keys = Object.keys(val);
-      if (keys.length !== 1) return JSON.stringify(val);
-      const op = keys[0];
-      const operands = val[op];
-      if (op === "var") {
-        const path = Array.isArray(operands) ? operands[0] : operands;
-        return String(path ?? "");
-      }
-      if (op === "val") {
-        const path = Array.isArray(operands) ? operands[0] : operands;
-        return `val(${path ?? ""})`;
-      }
-      if (op === "exists") {
-        return `exists(${operands})`;
-      }
-      const args = Array.isArray(operands) ? operands : [operands];
-      const wrapIfNeeded = (subVal) => {
-        const text2 = toText(subVal);
-        return needsParens(subVal, op) ? `(${text2})` : text2;
-      };
-      if ([...COMPARISON_OPERATORS$1, ...ARITHMETIC_BINARY_OPERATORS].includes(op)) {
-        if (args.length === 2) {
-          return `${wrapIfNeeded(args[0])} ${op} ${wrapIfNeeded(args[1])}`;
-        }
-        if (args.length > 2) {
-          return args.map(wrapIfNeeded).join(` ${op} `);
-        }
-      }
-      if (op === "and") {
-        return args.map(wrapIfNeeded).join(" AND ");
-      }
-      if (op === "or") {
-        return args.map(wrapIfNeeded).join(" OR ");
-      }
-      if (UNARY_OPERATORS$2.includes(op)) {
-        const argText = toText(args[0]);
-        const subOp = getOperator(args[0]);
-        if (subOp && (subOp === "and" || subOp === "or" || COMPARISON_OPERATORS$1.includes(subOp))) {
-          return `${op}(${argText})`;
-        }
-        return `${op}${argText}`;
-      }
-      if (ITERATOR_OPERATORS.includes(op)) {
-        const [arr] = args;
-        return `${op}(${toText(arr)}, ...)`;
-      }
-      if (op === "if" || op === "?:") {
-        const parts = [];
-        let i = 0;
-        while (i < args.length) {
-          if (i + 1 < args.length) {
-            const prefix = i === 0 ? "if" : "else if";
-            parts.push(`${prefix} ${toText(args[i])} then ${toText(args[i + 1])}`);
-            i += 2;
-          } else {
-            parts.push(`else ${toText(args[i])}`);
-            i++;
-          }
-        }
-        return parts.join(" ");
-      }
-      return `${op}(${args.map((a) => toText(a)).join(", ")})`;
-    }
-    return String(val);
-  }
-  const text = toText(value);
-  if (text.length > maxLength) {
-    return text.slice(0, maxLength - 3) + "...";
-  }
-  return text;
-}
-
 const OPERATORS = {
   // Variable operators
   var: {
@@ -658,6 +517,162 @@ function getOperatorMeta(operator) {
     description: `Unknown operator: ${operator}`
   };
 }
+function isOperator(key) {
+  return key in OPERATORS;
+}
+
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isJsonLogicExpression(value) {
+  if (!isPlainObject(value)) return false;
+  const keys = Object.keys(value);
+  return keys.length === 1 && isOperator(keys[0]);
+}
+function isDataStructure(value) {
+  if (Array.isArray(value)) return value.length > 0;
+  if (!isPlainObject(value)) return false;
+  const keys = Object.keys(value);
+  if (keys.length > 1) return true;
+  return keys.length === 1 && !isOperator(keys[0]);
+}
+function getValueType$1(value) {
+  if (value === null) return "null";
+  if (typeof value === "boolean") return "boolean";
+  if (typeof value === "number") return "number";
+  if (typeof value === "string") return "string";
+  if (Array.isArray(value)) return "array";
+  return "string";
+}
+function looksLikeDate(str) {
+  const datePatterns = [
+    /^\d{4}-\d{2}-\d{2}/,
+    // ISO date
+    /^\d{2}\/\d{2}\/\d{4}/,
+    // MM/DD/YYYY
+    /^\d{2}-\d{2}-\d{4}/
+    // DD-MM-YYYY
+  ];
+  return datePatterns.some((pattern) => pattern.test(str));
+}
+function isSimpleOperand(operand) {
+  if (operand === null || typeof operand !== "object") {
+    return true;
+  }
+  if (Array.isArray(operand)) {
+    return operand.length === 0;
+  }
+  return false;
+}
+
+const COMPARISON_OPERATORS$1 = ["==", "===", "!=", "!==", ">", ">=", "<", "<="];
+const ITERATOR_OPERATORS = ["map", "reduce", "filter", "some", "none", "all"];
+const UNARY_OPERATORS$2 = ["!", "!!"];
+const ARITHMETIC_BINARY_OPERATORS = ["+", "-", "*", "/", "%"];
+function generateExpressionText(value, maxLength = 100) {
+  function getOperator(val) {
+    if (isPlainObject(val)) {
+      const keys = Object.keys(val);
+      if (keys.length === 1) return keys[0];
+    }
+    return null;
+  }
+  function needsParens(subVal, parentOp) {
+    const subOp = getOperator(subVal);
+    if (!subOp) return false;
+    if (parentOp === "and" && subOp === "or" || parentOp === "or" && subOp === "and") {
+      return true;
+    }
+    if (COMPARISON_OPERATORS$1.includes(parentOp) && (subOp === "and" || subOp === "or")) {
+      return true;
+    }
+    if ((parentOp === "*" || parentOp === "/") && (subOp === "+" || subOp === "-")) {
+      return true;
+    }
+    return false;
+  }
+  function toText(val, _parentOp) {
+    if (val === null) return "null";
+    if (typeof val === "boolean") return String(val);
+    if (typeof val === "number") return String(val);
+    if (typeof val === "string") return `"${val}"`;
+    if (Array.isArray(val)) {
+      if (val.length === 0) return "[]";
+      const items = val.map((v) => toText(v)).join(", ");
+      return `[${items}]`;
+    }
+    if (isPlainObject(val)) {
+      const keys = Object.keys(val);
+      if (keys.length !== 1) return JSON.stringify(val);
+      const op = keys[0];
+      const operands = val[op];
+      if (op === "var") {
+        const path = Array.isArray(operands) ? operands[0] : operands;
+        return String(path ?? "");
+      }
+      if (op === "val") {
+        const path = Array.isArray(operands) ? operands[0] : operands;
+        return `val(${path ?? ""})`;
+      }
+      if (op === "exists") {
+        return `exists(${operands})`;
+      }
+      const args = Array.isArray(operands) ? operands : [operands];
+      const wrapIfNeeded = (subVal) => {
+        const text2 = toText(subVal);
+        return needsParens(subVal, op) ? `(${text2})` : text2;
+      };
+      if ([...COMPARISON_OPERATORS$1, ...ARITHMETIC_BINARY_OPERATORS].includes(op)) {
+        if (args.length === 2) {
+          return `${wrapIfNeeded(args[0])} ${op} ${wrapIfNeeded(args[1])}`;
+        }
+        if (args.length > 2) {
+          return args.map(wrapIfNeeded).join(` ${op} `);
+        }
+      }
+      if (op === "and") {
+        return args.map(wrapIfNeeded).join(" AND ");
+      }
+      if (op === "or") {
+        return args.map(wrapIfNeeded).join(" OR ");
+      }
+      if (UNARY_OPERATORS$2.includes(op)) {
+        const argText = toText(args[0]);
+        const subOp = getOperator(args[0]);
+        if (subOp && (subOp === "and" || subOp === "or" || COMPARISON_OPERATORS$1.includes(subOp))) {
+          return `${op}(${argText})`;
+        }
+        return `${op}${argText}`;
+      }
+      if (ITERATOR_OPERATORS.includes(op)) {
+        const [arr] = args;
+        return `${op}(${toText(arr)}, ...)`;
+      }
+      if (op === "if" || op === "?:") {
+        const parts = [];
+        let i = 0;
+        while (i < args.length) {
+          if (i + 1 < args.length) {
+            const prefix = i === 0 ? "if" : "else if";
+            parts.push(`${prefix} ${toText(args[i])} then ${toText(args[i + 1])}`);
+            i += 2;
+          } else {
+            parts.push(`else ${toText(args[i])}`);
+            i++;
+          }
+        }
+        return parts.join(" ");
+      }
+      return `${op}(${args.map((a) => toText(a)).join(", ")})`;
+    }
+    return String(val);
+  }
+  const text = toText(value);
+  if (text.length > maxLength) {
+    return text.slice(0, maxLength - 3) + "...";
+  }
+  return text;
+}
 
 const TRUNCATION_LIMITS = {
   shortLabel: 20,
@@ -829,11 +844,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$v = [
+const __iconNode$w = [
   ["path", { d: "M4.929 4.929 19.07 19.071", key: "196cmz" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Ban = createLucideIcon("ban", __iconNode$v);
+const Ban = createLucideIcon("ban", __iconNode$w);
 
 /**
  * @license lucide-react v0.562.0 - ISC
@@ -843,7 +858,7 @@ const Ban = createLucideIcon("ban", __iconNode$v);
  */
 
 
-const __iconNode$u = [
+const __iconNode$v = [
   [
     "path",
     {
@@ -854,7 +869,7 @@ const __iconNode$u = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$u);
+const Box = createLucideIcon("box", __iconNode$v);
 
 /**
  * @license lucide-react v0.562.0 - ISC
@@ -864,7 +879,7 @@ const Box = createLucideIcon("box", __iconNode$u);
  */
 
 
-const __iconNode$t = [
+const __iconNode$u = [
   [
     "path",
     {
@@ -896,7 +911,30 @@ const __iconNode$t = [
   ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
   ["path", { d: "M12 13.5V8", key: "1io7kd" }]
 ];
-const Boxes = createLucideIcon("boxes", __iconNode$t);
+const Boxes = createLucideIcon("boxes", __iconNode$u);
+
+/**
+ * @license lucide-react v0.562.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$t = [
+  [
+    "path",
+    { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
+  ],
+  [
+    "path",
+    {
+      d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
+      key: "e1hn23"
+    }
+  ]
+];
+const Braces = createLucideIcon("braces", __iconNode$t);
 
 /**
  * @license lucide-react v0.562.0 - ISC
@@ -1404,7 +1442,8 @@ const ICON_COMPONENTS = {
   "git-commit-horizontal": GitCommitHorizontal,
   "search": Search,
   "divide": Divide,
-  "quote": Quote
+  "quote": Quote,
+  "braces": Braces
 };
 function Icon({ name, size = 14, className, style }) {
   const IconComponent = ICON_COMPONENTS[name];
@@ -1905,7 +1944,8 @@ function convertIfElse(ifArgs, context, convertValue) {
       edges: context.edges,
       parentId: parentInfo.parentId,
       argIndex: parentInfo.argIndex,
-      branchType: parentInfo.branchType
+      branchType: parentInfo.branchType,
+      preserveStructure: context.preserveStructure
     });
   }
   const cells = [];
@@ -1920,7 +1960,8 @@ function convertIfElse(ifArgs, context, convertValue) {
       nodes: context.nodes,
       edges: context.edges,
       parentId: nodeId,
-      argIndex: idx
+      argIndex: idx,
+      preserveStructure: context.preserveStructure
     });
     context.edges.push({
       id: `${nodeId}-cond-${conditionBranchId}`,
@@ -1945,7 +1986,8 @@ function convertIfElse(ifArgs, context, convertValue) {
       edges: context.edges,
       parentId: nodeId,
       argIndex: idx + 1,
-      branchType: "yes"
+      branchType: "yes",
+      preserveStructure: context.preserveStructure
     });
     context.edges.push({
       id: `${nodeId}-then-${thenBranchId}`,
@@ -1975,7 +2017,8 @@ function convertIfElse(ifArgs, context, convertValue) {
       edges: context.edges,
       parentId: nodeId,
       argIndex: ifArgs.length - 1,
-      branchType: "no"
+      branchType: "no",
+      preserveStructure: context.preserveStructure
     });
     context.edges.push({
       id: `${nodeId}-else-${elseBranchId}`,
@@ -2049,7 +2092,8 @@ function convertToVerticalCell(operator, operandArray, context, convertValue) {
         nodes: context.nodes,
         edges: context.edges,
         parentId: nodeId,
-        argIndex: idx
+        argIndex: idx,
+        preserveStructure: context.preserveStructure
       });
       const summary = generateArgSummary(operand);
       summary.label = generateExpressionText(operand, TRUNCATION_LIMITS.expressionText);
@@ -2137,7 +2181,8 @@ function convertOperatorWithChildren(operator, operandArray, value, context, con
       nodes: context.nodes,
       edges: context.edges,
       parentId: nodeId,
-      argIndex: idx
+      argIndex: idx,
+      preserveStructure: context.preserveStructure
     });
     childIds.push(childId);
   });
@@ -2172,7 +2217,120 @@ function isUnaryOperator(operator) {
   return UNARY_OPERATORS$1.includes(operator);
 }
 
+const EXPR_PLACEHOLDER$1 = "{{EXPR}}";
+const EXPR_PLACEHOLDER_QUOTED$1 = `"${EXPR_PLACEHOLDER$1}"`;
+function convertStructure(value, context, convertValue) {
+  const parentInfo = getParentInfo(context);
+  const nodeId = v4();
+  const isArray = Array.isArray(value);
+  const elements = [];
+  let expressionIndex = 0;
+  const structureWithPlaceholders = walkAndCollect(
+    value,
+    [],
+    (path, item, key) => {
+      if (isJsonLogicExpression(item)) {
+        const branchId = convertValue(item, {
+          nodes: context.nodes,
+          edges: context.edges,
+          parentId: nodeId,
+          argIndex: expressionIndex,
+          preserveStructure: context.preserveStructure
+        });
+        elements.push({
+          type: "expression",
+          path,
+          key,
+          branchId,
+          startOffset: 0,
+          // Will be calculated after formatting
+          endOffset: 0
+        });
+        expressionIndex++;
+        return EXPR_PLACEHOLDER$1;
+      } else {
+        return item;
+      }
+    }
+  );
+  const formattedJson = JSON.stringify(structureWithPlaceholders, null, 2);
+  let searchPos = 0;
+  for (const element of elements) {
+    if (element.type === "expression") {
+      const placeholderPos = formattedJson.indexOf(EXPR_PLACEHOLDER_QUOTED$1, searchPos);
+      if (placeholderPos !== -1) {
+        element.startOffset = placeholderPos;
+        element.endOffset = placeholderPos + EXPR_PLACEHOLDER_QUOTED$1.length;
+        searchPos = element.endOffset;
+      }
+    }
+  }
+  const expressionText = generateExpressionText(value, 100);
+  const node = {
+    id: nodeId,
+    type: "structure",
+    position: { x: 0, y: 0 },
+    data: {
+      type: "structure",
+      isArray,
+      formattedJson,
+      elements,
+      collapsed: false,
+      expressionText,
+      expression: value,
+      parentId: parentInfo.parentId,
+      argIndex: parentInfo.argIndex,
+      branchType: parentInfo.branchType
+    }
+  };
+  context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    const edge = createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0);
+    context.edges.push(edge);
+  }
+  let branchIdx = 0;
+  for (const element of elements) {
+    if (element.type === "expression" && element.branchId) {
+      const edge = createBranchEdge(nodeId, element.branchId, branchIdx);
+      context.edges.push(edge);
+      branchIdx++;
+    }
+  }
+  return nodeId;
+}
+function walkAndCollect(value, path, onValue) {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => {
+      const itemPath = [...path, String(index)];
+      if (isJsonLogicExpression(item)) {
+        return onValue(itemPath, item);
+      } else if (typeof item === "object" && item !== null) {
+        return walkAndCollect(item, itemPath, onValue);
+      }
+      return item;
+    });
+  }
+  if (typeof value === "object" && value !== null) {
+    const result = {};
+    for (const [key, item] of Object.entries(value)) {
+      const itemPath = [...path, key];
+      if (isJsonLogicExpression(item)) {
+        result[key] = onValue(itemPath, item, key);
+      } else if (typeof item === "object" && item !== null) {
+        result[key] = walkAndCollect(item, itemPath, onValue);
+      } else {
+        result[key] = item;
+      }
+    }
+    return result;
+  }
+  return value;
+}
+
 function convertValue(value, context) {
+  if (context.preserveStructure && isDataStructure(value)) {
+    return convertStructure(value, context, convertValue);
+  }
   if (!isPlainObject(value)) {
     return convertPrimitive(value, context);
   }
@@ -2202,13 +2360,17 @@ function convertValue(value, context) {
   return convertOperatorWithChildren(operator, operandArray, value, context, convertValue);
 }
 
-function jsonLogicToNodes(expr) {
+function jsonLogicToNodes(expr, options = {}) {
   if (expr === null || expr === void 0) {
     return { nodes: [], edges: [], rootId: null };
   }
   const nodes = [];
   const edges = [];
-  const rootId = convertValue(expr, { nodes, edges });
+  const rootId = convertValue(expr, {
+    nodes,
+    edges,
+    preserveStructure: options.preserveStructure
+  });
   return { nodes, edges, rootId };
 }
 
@@ -2239,14 +2401,20 @@ function buildEvaluationResultsFromTrace(trace) {
   }
   return results;
 }
-function traceToNodes(trace) {
+function traceToNodes(trace, options = {}) {
   if (!trace.expression_tree) {
     return { nodes: [], edges: [], rootId: null, traceNodeMap: /* @__PURE__ */ new Map() };
   }
   const nodes = [];
   const edges = [];
   const traceNodeMap = /* @__PURE__ */ new Map();
-  processExpressionNode(trace.expression_tree, { nodes, edges, traceNodeMap });
+  const rootExpression = options.originalValue ?? JSON.parse(trace.expression_tree.expression);
+  processExpressionNode(trace.expression_tree, {
+    nodes,
+    edges,
+    traceNodeMap,
+    preserveStructure: options.preserveStructure ?? false
+  }, {}, rootExpression);
   return {
     nodes,
     edges,
@@ -2263,11 +2431,11 @@ function mapInlinedChildren(children, parentVisualId, traceNodeMap) {
     }
   }
 }
-function processExpressionNode(exprNode, context, parentInfo = {}) {
+function processExpressionNode(exprNode, context, parentInfo = {}, originalExpression) {
   const nodeId = traceIdToNodeId(exprNode.id);
-  const expression = JSON.parse(exprNode.expression);
+  const expression = originalExpression ?? JSON.parse(exprNode.expression);
   context.traceNodeMap.set(nodeId, nodeId);
-  const nodeType = determineNodeType(expression);
+  const nodeType = determineNodeType(expression, context.preserveStructure);
   switch (nodeType) {
     case "literal":
       createLiteralNodeFromTrace(nodeId, expression, exprNode.children, context, parentInfo);
@@ -2284,10 +2452,39 @@ function processExpressionNode(exprNode, context, parentInfo = {}) {
     case "operator":
       createOperatorNodeFromTrace(nodeId, expression, exprNode.children, context, parentInfo);
       break;
+    case "structure":
+      createStructureNodeFromTrace(nodeId, expression, exprNode.children, context, parentInfo);
+      break;
   }
   return nodeId;
 }
-function determineNodeType(expr) {
+function createFallbackNode(nodeId, value, context, parentInfo) {
+  const nodeType = determineNodeType(value, context.preserveStructure);
+  switch (nodeType) {
+    case "literal":
+      createLiteralNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+    case "variable":
+      createVariableNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+    case "if":
+      createIfElseNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+    case "verticalCell":
+      createVerticalCellNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+    case "operator":
+      createOperatorNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+    case "structure":
+      createStructureNodeFromTrace(nodeId, value, [], context, parentInfo);
+      break;
+  }
+}
+function determineNodeType(expr, preserveStructure) {
+  if (preserveStructure && isDataStructure(expr)) {
+    return "structure";
+  }
   if (expr === null || typeof expr !== "object" || Array.isArray(expr)) {
     return "literal";
   }
@@ -2326,6 +2523,9 @@ function createLiteralNodeFromTrace(nodeId, value, children, context, parentInfo
     }
   };
   context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
 }
 function createVariableNodeFromTrace(nodeId, expression, children, context, parentInfo) {
   if (children && children.length > 0) {
@@ -2358,6 +2558,9 @@ function createVariableNodeFromTrace(nodeId, expression, children, context, pare
     }
   };
   context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
 }
 function createIfElseNodeFromTrace(nodeId, expression, children, context, parentInfo) {
   const obj = expression;
@@ -2382,20 +2585,10 @@ function createIfElseNodeFromTrace(nodeId, expression, children, context, parent
       });
     } else {
       conditionBranchId = `${nodeId}-cond-${idx}`;
-      const condNode = {
-        id: conditionBranchId,
-        type: "literal",
-        position: { x: 0, y: 0 },
-        data: {
-          type: "literal",
-          value: condition,
-          valueType: getValueType$1(condition),
-          expression: condition,
-          parentId: nodeId,
-          argIndex: idx
-        }
-      };
-      context.nodes.push(condNode);
+      createFallbackNode(conditionBranchId, condition, context, {
+        parentId: nodeId,
+        argIndex: idx
+      });
     }
     context.edges.push(createBranchEdge(nodeId, conditionBranchId, branchIndex));
     const conditionText = generateExpressionText(condition, 40);
@@ -2420,21 +2613,11 @@ function createIfElseNodeFromTrace(nodeId, expression, children, context, parent
       });
     } else {
       thenBranchId = `${nodeId}-then-${idx}`;
-      const thenNode = {
-        id: thenBranchId,
-        type: "literal",
-        position: { x: 0, y: 0 },
-        data: {
-          type: "literal",
-          value: thenValue,
-          valueType: getValueType$1(thenValue),
-          expression: thenValue,
-          parentId: nodeId,
-          argIndex: idx + 1,
-          branchType: "yes"
-        }
-      };
-      context.nodes.push(thenNode);
+      createFallbackNode(thenBranchId, thenValue, context, {
+        parentId: nodeId,
+        argIndex: idx + 1,
+        branchType: "yes"
+      });
     }
     context.edges.push(createBranchEdge(nodeId, thenBranchId, branchIndex));
     const thenText = generateExpressionText(thenValue, 40);
@@ -2464,21 +2647,11 @@ function createIfElseNodeFromTrace(nodeId, expression, children, context, parent
       });
     } else {
       elseBranchId = `${nodeId}-else`;
-      const elseNode = {
-        id: elseBranchId,
-        type: "literal",
-        position: { x: 0, y: 0 },
-        data: {
-          type: "literal",
-          value: elseValue,
-          valueType: getValueType$1(elseValue),
-          expression: elseValue,
-          parentId: nodeId,
-          argIndex: ifArgs.length - 1,
-          branchType: "no"
-        }
-      };
-      context.nodes.push(elseNode);
+      createFallbackNode(elseBranchId, elseValue, context, {
+        parentId: nodeId,
+        argIndex: ifArgs.length - 1,
+        branchType: "no"
+      });
     }
     context.edges.push(createBranchEdge(nodeId, elseBranchId, branchIndex));
     const elseText = generateExpressionText(elseValue, 40);
@@ -2513,6 +2686,9 @@ function createIfElseNodeFromTrace(nodeId, expression, children, context, parent
     }
   };
   context.nodes.push(ifElseNode);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
 }
 function findMatchingChild(operand, children, usedIndices) {
   const operandStr = JSON.stringify(operand);
@@ -2573,6 +2749,10 @@ function createVerticalCellNodeFromTrace(nodeId, expression, children, context,
         });
       } else {
         branchId = `${nodeId}-arg-${idx}`;
+        createFallbackNode(branchId, operand, context, {
+          parentId: nodeId,
+          argIndex: idx
+        });
       }
       const summary = generateArgSummary(operand);
       summary.label = generateExpressionText(operand, TRUNCATION_LIMITS.expressionText);
@@ -2608,6 +2788,9 @@ function createVerticalCellNodeFromTrace(nodeId, expression, children, context,
     }
   };
   context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
 }
 function createOperatorNodeFromTrace(nodeId, expression, children, context, parentInfo) {
   const obj = expression;
@@ -2648,6 +2831,9 @@ function createOperatorNodeFromTrace(nodeId, expression, children, context, pare
       }
     };
     context.nodes.push(node2);
+    if (parentInfo.parentId && !parentInfo.branchType) {
+      context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+    }
     return;
   }
   const usedChildIndices = /* @__PURE__ */ new Set();
@@ -2693,6 +2879,121 @@ function createOperatorNodeFromTrace(nodeId, expression, children, context, pare
     }
   };
   context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
+}
+const EXPR_PLACEHOLDER = "{{EXPR}}";
+const EXPR_PLACEHOLDER_QUOTED = `"${EXPR_PLACEHOLDER}"`;
+function createStructureNodeFromTrace(nodeId, expression, children, context, parentInfo) {
+  const isArray = Array.isArray(expression);
+  const elements = [];
+  const usedChildIndices = /* @__PURE__ */ new Set();
+  let expressionIndex = 0;
+  const structureWithPlaceholders = walkAndCollectFromTrace(
+    expression,
+    [],
+    (path, item, key) => {
+      if (isJsonLogicExpression(item)) {
+        const match = findMatchingChild(item, children, usedChildIndices);
+        let branchId;
+        if (match) {
+          usedChildIndices.add(match.index);
+          branchId = processExpressionNode(match.child, context, {
+            parentId: nodeId,
+            argIndex: expressionIndex
+          });
+        } else {
+          branchId = `${nodeId}-expr-${expressionIndex}`;
+          createFallbackNode(branchId, item, context, {
+            parentId: nodeId,
+            argIndex: expressionIndex,
+            branchType: "branch"
+            // Prevents edge creation in fallback
+          });
+        }
+        elements.push({
+          type: "expression",
+          path,
+          key,
+          branchId,
+          startOffset: 0,
+          endOffset: 0
+        });
+        expressionIndex++;
+        return EXPR_PLACEHOLDER;
+      }
+      return item;
+    });
+  const formattedJson = JSON.stringify(structureWithPlaceholders, null, 2);
+  let searchPos = 0;
+  for (const element of elements) {
+    if (element.type === "expression") {
+      const placeholderPos = formattedJson.indexOf(EXPR_PLACEHOLDER_QUOTED, searchPos);
+      if (placeholderPos !== -1) {
+        element.startOffset = placeholderPos;
+        element.endOffset = placeholderPos + EXPR_PLACEHOLDER_QUOTED.length;
+        searchPos = element.endOffset;
+      }
+    }
+  }
+  const expressionText = generateExpressionText(expression, 100);
+  const node = {
+    id: nodeId,
+    type: "structure",
+    position: { x: 0, y: 0 },
+    data: {
+      type: "structure",
+      isArray,
+      formattedJson,
+      elements,
+      collapsed: false,
+      expressionText,
+      expression,
+      parentId: parentInfo.parentId,
+      argIndex: parentInfo.argIndex,
+      branchType: parentInfo.branchType
+    }
+  };
+  context.nodes.push(node);
+  if (parentInfo.parentId && !parentInfo.branchType) {
+    context.edges.push(createArgEdge(parentInfo.parentId, nodeId, parentInfo.argIndex ?? 0));
+  }
+  let branchIdx = 0;
+  for (const element of elements) {
+    if (element.type === "expression" && element.branchId) {
+      context.edges.push(createBranchEdge(nodeId, element.branchId, branchIdx));
+      branchIdx++;
+    }
+  }
+}
+function walkAndCollectFromTrace(value, path, onValue, context) {
+  if (Array.isArray(value)) {
+    return value.map((item, index) => {
+      const itemPath = [...path, String(index)];
+      if (isJsonLogicExpression(item)) {
+        return onValue(itemPath, item);
+      } else if (typeof item === "object" && item !== null) {
+        return walkAndCollectFromTrace(item, itemPath, onValue);
+      }
+      return item;
+    });
+  }
+  if (typeof value === "object" && value !== null) {
+    const result = {};
+    for (const [key, item] of Object.entries(value)) {
+      const itemPath = [...path, key];
+      if (isJsonLogicExpression(item)) {
+        result[key] = onValue(itemPath, item, key);
+      } else if (typeof item === "object" && item !== null) {
+        result[key] = walkAndCollectFromTrace(item, itemPath, onValue);
+      } else {
+        result[key] = item;
+      }
+    }
+    return result;
+  }
+  return value;
 }
 
 function getDefaultExportFromCjs (x) {
@@ -7456,6 +7757,9 @@ function isLiteralNode(node) {
 function isVerticalCellNode(node) {
   return node.data.type === "verticalCell";
 }
+function isStructureNode(node) {
+  return node.data.type === "structure";
+}
 
 function estimateTextWidth(text, isMonospace = false) {
   const charWidth = isMonospace ? TEXT_METRICS.charWidthMono : TEXT_METRICS.charWidthRegular;
@@ -7494,12 +7798,32 @@ function calculateNodeWidth(node) {
       maxCellWidth = Math.max(maxCellWidth, estimateTextWidth(vcData.expressionText, true));
     }
     contentWidth = maxCellWidth;
+  } else if (isStructureNode(node)) {
+    const structData = node.data;
+    if (structData.collapsed && structData.expressionText) {
+      contentWidth = estimateTextWidth(structData.expressionText, true);
+    } else {
+      const lines = structData.formattedJson.split("\n");
+      let maxLineWidth = 0;
+      for (const line of lines) {
+        const lineWidth = estimateTextWidth(line, true);
+        maxLineWidth = Math.max(maxLineWidth, lineWidth);
+      }
+      contentWidth = maxLineWidth;
+    }
   } else {
     contentWidth = FIXED_WIDTHS.fallbackNode;
   }
   const totalWidth = contentWidth + NODE_PADDING.contentPadding;
   return Math.max(NODE_DIMENSIONS.minWidth, Math.min(NODE_DIMENSIONS.maxWidth, totalWidth));
 }
+const STRUCTURE_DIMENSIONS = {
+  headerHeight: 32,
+  lineHeight: 18,
+  bodyPadding: 16,
+  // 8px top + 8px bottom
+  collapsedBodyHeight: 30
+};
 function getNodeDimensions(node) {
   const width = calculateNodeWidth(node);
   if (isVerticalCellNode(node)) {
@@ -7516,6 +7840,20 @@ function getNodeDimensions(node) {
       height: VERTICAL_CELL_DIMENSIONS.headerHeight + cellCount * VERTICAL_CELL_DIMENSIONS.rowHeight
     };
   }
+  if (isStructureNode(node)) {
+    const structData = node.data;
+    if (structData.collapsed) {
+      return {
+        width,
+        height: STRUCTURE_DIMENSIONS.headerHeight + STRUCTURE_DIMENSIONS.collapsedBodyHeight
+      };
+    }
+    const lineCount = structData.formattedJson.split("\n").length;
+    return {
+      width,
+      height: STRUCTURE_DIMENSIONS.headerHeight + STRUCTURE_DIMENSIONS.bodyPadding + lineCount * STRUCTURE_DIMENSIONS.lineHeight
+    };
+  }
   return { width, height: NODE_DIMENSIONS.defaultHeight };
 }
 function applyTreeLayout(nodes, edges) {
@@ -7533,7 +7871,7 @@ function applyTreeLayout(nodes, edges) {
     const { width, height } = getNodeDimensions(node);
     g.setNode(node.id, { width, height });
   });
-  const edgesToUse = edges || buildEdgesFromNodes(nodes);
+  const edgesToUse = edges || buildEdgesFromNodes$1(nodes);
   const nodeIdSet = new Set(nodes.map((n) => n.id));
   const sourceEdgeCount = /* @__PURE__ */ new Map();
   edgesToUse.forEach((edge) => {
@@ -7566,7 +7904,7 @@ function applyTreeLayout(nodes, edges) {
     return node;
   });
 }
-function buildEdgesFromNodes(nodes) {
+function buildEdgesFromNodes$1(nodes) {
   const edges = [];
   nodes.forEach((node) => {
     if (isOperatorNode(node)) {
@@ -7587,38 +7925,34 @@ function buildEdgesFromNodes(nodes) {
       const vcData = node.data;
       if (!vcData.collapsed) {
         const collapsedIndices = vcData.collapsedCellIndices || [];
-        let branchIndex = 0;
         vcData.cells.forEach((cell) => {
           if (collapsedIndices.includes(cell.index)) return;
-          if (cell.branchId) {
-            edges.push({
-              id: `${node.id}-branch-${cell.branchId}`,
-              source: node.id,
-              target: cell.branchId,
-              sourceHandle: `branch-${branchIndex}`,
-              targetHandle: "left"
-            });
-            branchIndex++;
-          }
           if (cell.conditionBranchId) {
             edges.push({
               id: `${node.id}-cond-${cell.conditionBranchId}`,
               source: node.id,
               target: cell.conditionBranchId,
-              sourceHandle: `branch-${branchIndex}`,
+              sourceHandle: `branch-${cell.index}-cond`,
               targetHandle: "left"
             });
-            branchIndex++;
           }
           if (cell.thenBranchId) {
             edges.push({
               id: `${node.id}-then-${cell.thenBranchId}`,
               source: node.id,
               target: cell.thenBranchId,
-              sourceHandle: `branch-${branchIndex}`,
+              sourceHandle: `branch-${cell.index}-then`,
+              targetHandle: "left"
+            });
+          }
+          if (cell.branchId && !cell.conditionBranchId && !cell.thenBranchId) {
+            edges.push({
+              id: `${node.id}-branch-${cell.branchId}`,
+              source: node.id,
+              target: cell.branchId,
+              sourceHandle: `branch-${cell.index}`,
               targetHandle: "left"
             });
-            branchIndex++;
           }
         });
       }
@@ -7646,7 +7980,8 @@ const emptyTraceNodeMap = /* @__PURE__ */ new Map();
 function useLogicEditor({
   value,
   evaluateWithTrace,
-  data
+  data,
+  preserveStructure = false
 }) {
   const [nodes, setNodes] = react.useState([]);
   const [edges, setEdges] = react.useState([]);
@@ -7658,11 +7993,12 @@ function useLogicEditor({
   const [lastExternalValue, setLastExternalValue] = react.useState("");
   const [lastData, setLastData] = react.useState("");
   const [lastHadTrace, setLastHadTrace] = react.useState(false);
+  const [lastPreserveStructure, setLastPreserveStructure] = react.useState(false);
   react.useEffect(() => {
     const valueStr = JSON.stringify(value);
     const dataStr = JSON.stringify(data);
     const hasTrace = !!evaluateWithTrace;
-    if (valueStr === lastExternalValue && dataStr === lastData && hasTrace === lastHadTrace) {
+    if (valueStr === lastExternalValue && dataStr === lastData && hasTrace === lastHadTrace && preserveStructure === lastPreserveStructure) {
       return;
     }
     try {
@@ -7677,12 +8013,13 @@ function useLogicEditor({
         setLastExternalValue(valueStr);
         setLastData(dataStr);
         setLastHadTrace(hasTrace);
+        setLastPreserveStructure(preserveStructure);
         return;
       }
       if (evaluateWithTrace && value) {
         try {
           const trace = evaluateWithTrace(value, data ?? {});
-          const { nodes: newNodes2, edges: newEdges2, traceNodeMap: newTraceNodeMap } = traceToNodes(trace);
+          const { nodes: newNodes2, edges: newEdges2, traceNodeMap: newTraceNodeMap } = traceToNodes(trace, { preserveStructure, originalValue: value });
           const layoutedNodes2 = applyTreeLayout(newNodes2, newEdges2);
           const traceResults = buildEvaluationResultsFromTrace(trace);
           setNodes(layoutedNodes2);
@@ -7695,12 +8032,13 @@ function useLogicEditor({
           setLastExternalValue(valueStr);
           setLastData(dataStr);
           setLastHadTrace(hasTrace);
+          setLastPreserveStructure(preserveStructure);
           return;
         } catch (traceErr) {
           console.warn("Trace conversion failed, falling back to JS:", traceErr);
         }
       }
-      const { nodes: newNodes, edges: newEdges } = jsonLogicToNodes(value);
+      const { nodes: newNodes, edges: newEdges } = jsonLogicToNodes(value, { preserveStructure });
       const layoutedNodes = applyTreeLayout(newNodes, newEdges);
       setNodes(layoutedNodes);
       setEdges(newEdges);
@@ -7722,7 +8060,8 @@ function useLogicEditor({
     setLastExternalValue(valueStr);
     setLastData(dataStr);
     setLastHadTrace(hasTrace);
-  }, [value, data, evaluateWithTrace, lastExternalValue, lastData, lastHadTrace]);
+    setLastPreserveStructure(preserveStructure);
+  }, [value, data, evaluateWithTrace, preserveStructure, lastExternalValue, lastData, lastHadTrace, lastPreserveStructure]);
   return react.useMemo(
     () => ({
       nodes,
@@ -8041,7 +8380,8 @@ function useDebugEvaluation({
   }, [nodes, data, evaluate, enabled]);
 }
 
-function useWasmEvaluator() {
+function useWasmEvaluator(options = {}) {
+  const { preserveStructure = false } = options;
   const [ready, setReady] = react.useState(false);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
@@ -8052,7 +8392,7 @@ function useWasmEvaluator() {
       try {
         setLoading(true);
         setError(null);
-        const wasm = await Promise.resolve().then(() => require('./datalogic_wasm-vS4KZjmk.cjs'));
+        const wasm = await Promise.resolve().then(() => require('./datalogic_wasm-BN8H01AG.cjs'));
         await wasm.default();
         if (!cancelled) {
           moduleRef.current = {
@@ -8082,12 +8422,12 @@ function useWasmEvaluator() {
     try {
       const logicStr = JSON.stringify(logic);
       const dataStr = JSON.stringify(data);
-      const resultStr = moduleRef.current.evaluate(logicStr, dataStr);
+      const resultStr = moduleRef.current.evaluate(logicStr, dataStr, preserveStructure);
       return JSON.parse(resultStr);
     } catch (err) {
       throw new Error(err instanceof Error ? err.message : "Evaluation failed");
     }
-  }, []);
+  }, [preserveStructure]);
   const evaluateWithTrace = react.useCallback((logic, data) => {
     if (!moduleRef.current) {
       throw new Error("WASM module not initialized");
@@ -8098,12 +8438,12 @@ function useWasmEvaluator() {
     try {
       const logicStr = JSON.stringify(logic);
       const dataStr = JSON.stringify(data);
-      const resultStr = moduleRef.current.evaluate_with_trace(logicStr, dataStr);
+      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");
     }
-  }, []);
+  }, [preserveStructure]);
   return {
     ready,
     loading,
@@ -8493,16 +8833,16 @@ const LiteralNode = react.memo(function LiteralNode2({
 
 const CellHandles = react.memo(function CellHandles2({
   cell,
-  branchIndex,
   color
 }) {
+  const cellIndex = cell.index;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     cell.conditionBranchId && /* @__PURE__ */ jsxRuntime.jsx(
       react$1.Handle,
       {
         type: "source",
         position: react$1.Position.Right,
-        id: `branch-${branchIndex}`,
+        id: `branch-${cellIndex}-cond`,
         className: "cell-handle condition-handle",
         style: { background: color, top: `${HANDLE_POSITIONS.conditionTop}px` }
       }
@@ -8512,7 +8852,7 @@ const CellHandles = react.memo(function CellHandles2({
       {
         type: "source",
         position: react$1.Position.Right,
-        id: `branch-${branchIndex + (cell.conditionBranchId ? 1 : 0)}`,
+        id: `branch-${cellIndex}-then`,
         className: "cell-handle then-handle",
         style: { background: "#22C55E", top: `${HANDLE_POSITIONS.thenTop}px` }
       }
@@ -8522,7 +8862,7 @@ const CellHandles = react.memo(function CellHandles2({
       {
         type: "source",
         position: react$1.Position.Right,
-        id: `branch-${branchIndex}`,
+        id: `branch-${cellIndex}`,
         className: "cell-handle",
         style: { background: color, top: `${HANDLE_POSITIONS.centeredTop}px` }
       }
@@ -8530,21 +8870,8 @@ const CellHandles = react.memo(function CellHandles2({
   ] });
 });
 
-function calculateBranchIndex(cells, currentIndex) {
-  let branchIdx = 0;
-  for (let i = 0; i < currentIndex; i++) {
-    const prevCell = cells.find((c) => c.index === i);
-    if (prevCell) {
-      if (prevCell.conditionBranchId) branchIdx++;
-      if (prevCell.thenBranchId) branchIdx++;
-      if (prevCell.branchId) branchIdx++;
-    }
-  }
-  return branchIdx;
-}
 const CellRow = react.memo(function CellRow2({
   cell,
-  cells,
   collapsedIndices,
   color,
   onToggleCollapse
@@ -8553,7 +8880,6 @@ const CellRow = react.memo(function CellRow2({
   const isIfThenCell = cell.conditionBranchId || cell.thenBranchId;
   const hasAnyBranch = cell.type === "branch" || isIfThenCell;
   const isExpanded = hasAnyBranch && !isCellCollapsed;
-  const branchIndex = calculateBranchIndex(cells, cell.index);
   const handleToggle = react.useCallback(
     (e) => {
       onToggleCollapse(cell.index, e);
@@ -8573,7 +8899,7 @@ const CellRow = react.memo(function CellRow2({
         variant: "cell"
       }
     ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(CellHandles, { cell, branchIndex, color: isThenRow ? BRANCH_COLORS.yes : color })
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(CellHandles, { cell, color: isThenRow ? BRANCH_COLORS.yes : color })
   ] });
 });
 
@@ -8633,7 +8959,6 @@ const VerticalCellNode = react.memo(function VerticalCellNode2({
           CellRow,
           {
             cell,
-            cells: data.cells,
             collapsedIndices,
             color,
             onToggleCollapse: toggleCellCollapse
@@ -8645,11 +8970,197 @@ const VerticalCellNode = react.memo(function VerticalCellNode2({
   );
 });
 
+const STRUCTURE_COLOR = "#64748B";
+const LINE_HEIGHT = 18;
+const HEADER_HEIGHT = 32;
+const BODY_PADDING = 8;
+const StructureNode = react.memo(function StructureNode2({
+  id,
+  data,
+  selected
+}) {
+  const debugClassName = useDebugClassName(id);
+  const toggleNodeCollapse = useNodeCollapse(id);
+  const isCollapsed = data.collapsed ?? false;
+  const expressionElements = react.useMemo(
+    () => data.elements.filter((e) => e.type === "expression"),
+    [data.elements]
+  );
+  const hasExpressions = expressionElements.length > 0;
+  const expressionLineNumbers = react.useMemo(() => {
+    return expressionElements.map((element) => {
+      const textBefore = data.formattedJson.slice(0, element.startOffset);
+      const lineNumber = textBefore.split("\n").length;
+      return lineNumber;
+    });
+  }, [expressionElements, data.formattedJson]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `structure-node ${selected ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
+      style: {
+        borderColor: STRUCTURE_COLOR,
+        backgroundColor: `${STRUCTURE_COLOR}10`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NodeDebugBubble, { nodeId: id, position: "top" }),
+        /* @__PURE__ */ jsxRuntime.jsx(NodeInputHandles, { nodeId: id, color: STRUCTURE_COLOR }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "structure-node-header", style: { backgroundColor: STRUCTURE_COLOR }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "structure-node-icon", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: data.isArray ? "list" : "braces", size: 14 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "structure-node-label", children: data.isArray ? "Array" : "Object" }),
+          hasExpressions && /* @__PURE__ */ jsxRuntime.jsx(CollapseToggleButton, { isCollapsed, onClick: toggleNodeCollapse })
+        ] }),
+        isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "structure-node-body collapsed-body", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "expression-text", children: /* @__PURE__ */ jsxRuntime.jsx(ExpressionSyntax, { text: data.expressionText || "..." }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "structure-node-body", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FormattedJson,
+          {
+            json: data.formattedJson,
+            elements: data.elements
+          }
+        ) }),
+        !isCollapsed && expressionElements.map((_element, idx) => {
+          const lineNumber = expressionLineNumbers[idx];
+          const topPosition = HEADER_HEIGHT + BODY_PADDING + (lineNumber - 1) * LINE_HEIGHT + LINE_HEIGHT / 2;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.Handle,
+            {
+              type: "source",
+              position: react$1.Position.Right,
+              id: `branch-${idx}`,
+              className: "structure-branch-handle",
+              style: {
+                background: "#3B82F6",
+                top: `${topPosition}px`,
+                right: "-4px"
+              }
+            },
+            `branch-${idx}`
+          );
+        })
+      ]
+    }
+  );
+});
+function FormattedJson({ json, elements }) {
+  const expressionElements = elements.filter((e) => e.type === "expression").sort((a, b) => a.startOffset - b.startOffset);
+  if (expressionElements.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(JsonSyntax, { text: json });
+  }
+  const parts = [];
+  let lastEnd = 0;
+  let markerIndex = 0;
+  for (const element of expressionElements) {
+    if (element.startOffset > lastEnd) {
+      const textBefore = json.slice(lastEnd, element.startOffset);
+      parts.push(
+        /* @__PURE__ */ jsxRuntime.jsx(JsonSyntax, { text: textBefore }, `text-${lastEnd}`)
+      );
+    }
+    parts.push(
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "structure-expression-marker", children: element.key || `[${markerIndex}]` }, `marker-${markerIndex}`)
+    );
+    lastEnd = element.endOffset;
+    markerIndex++;
+  }
+  if (lastEnd < json.length) {
+    parts.push(
+      /* @__PURE__ */ jsxRuntime.jsx(JsonSyntax, { text: json.slice(lastEnd) }, `text-${lastEnd}`)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts });
+}
+function JsonSyntax({ text }) {
+  const highlighted = highlightJson(text);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: highlighted });
+}
+function highlightJson(text) {
+  const result = [];
+  let i = 0;
+  while (i < text.length) {
+    const char = text[i];
+    if (/\s/.test(char)) {
+      let whitespace = "";
+      while (i < text.length && /\s/.test(text[i])) {
+        whitespace += text[i];
+        i++;
+      }
+      result.push(whitespace);
+      continue;
+    }
+    if (char === '"') {
+      let str = '"';
+      i++;
+      while (i < text.length && text[i] !== '"') {
+        if (text[i] === "\\" && i + 1 < text.length) {
+          str += text[i] + text[i + 1];
+          i += 2;
+        } else {
+          str += text[i];
+          i++;
+        }
+      }
+      if (i < text.length) {
+        str += '"';
+        i++;
+      }
+      let j = i;
+      while (j < text.length && /\s/.test(text[j])) j++;
+      const isKey = text[j] === ":";
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: isKey ? "json-syntax-key" : "json-syntax-string", children: str }, `str-${i}`)
+      );
+      continue;
+    }
+    if (/[-\d]/.test(char)) {
+      let num = "";
+      while (i < text.length && /[-\d.eE+]/.test(text[i])) {
+        num += text[i];
+        i++;
+      }
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json-syntax-number", children: num }, `num-${i}`)
+      );
+      continue;
+    }
+    if (text.slice(i, i + 4) === "true") {
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json-syntax-boolean-true", children: "true" }, `bool-${i}`)
+      );
+      i += 4;
+      continue;
+    }
+    if (text.slice(i, i + 5) === "false") {
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json-syntax-boolean-false", children: "false" }, `bool-${i}`)
+      );
+      i += 5;
+      continue;
+    }
+    if (text.slice(i, i + 4) === "null") {
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json-syntax-null", children: "null" }, `null-${i}`)
+      );
+      i += 4;
+      continue;
+    }
+    if (/[{}[\]:,]/.test(char)) {
+      result.push(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "json-syntax-punctuation", children: char }, `punct-${i}`)
+      );
+      i++;
+      continue;
+    }
+    result.push(char);
+    i++;
+  }
+  return result;
+}
+
 const nodeTypes = {
   operator: OperatorNode,
   variable: VariableNode,
   literal: LiteralNode,
-  verticalCell: VerticalCellNode
+  verticalCell: VerticalCellNode,
+  structure: StructureNode
 };
 
 function collectCellBranchIds(cell, target) {
@@ -8715,6 +9226,82 @@ function getHiddenNodeIds(nodes) {
   return hiddenIds;
 }
 
+function buildEdgesFromNodes(nodes) {
+  const edges = [];
+  nodes.forEach((node) => {
+    if (node.type === "operator") {
+      const opData = node.data;
+      if (!opData.collapsed) {
+        opData.childIds.forEach((childId, idx) => {
+          edges.push({
+            id: `${node.id}-${childId}`,
+            source: node.id,
+            target: childId,
+            sourceHandle: `arg-${idx}`,
+            targetHandle: "left"
+          });
+        });
+      }
+    }
+    if (node.type === "verticalCell") {
+      const vcData = node.data;
+      if (!vcData.collapsed) {
+        const collapsedIndices = vcData.collapsedCellIndices || [];
+        vcData.cells.forEach((cell) => {
+          if (collapsedIndices.includes(cell.index)) return;
+          if (cell.conditionBranchId) {
+            edges.push({
+              id: `${node.id}-cond-${cell.conditionBranchId}`,
+              source: node.id,
+              target: cell.conditionBranchId,
+              sourceHandle: `branch-${cell.index}-cond`,
+              targetHandle: "left"
+            });
+          }
+          if (cell.thenBranchId) {
+            edges.push({
+              id: `${node.id}-then-${cell.thenBranchId}`,
+              source: node.id,
+              target: cell.thenBranchId,
+              sourceHandle: `branch-${cell.index}-then`,
+              targetHandle: "left"
+            });
+          }
+          if (cell.branchId && !cell.conditionBranchId && !cell.thenBranchId) {
+            edges.push({
+              id: `${node.id}-branch-${cell.branchId}`,
+              source: node.id,
+              target: cell.branchId,
+              sourceHandle: `branch-${cell.index}`,
+              targetHandle: "left"
+            });
+          }
+        });
+      }
+    }
+    if (node.type === "structure") {
+      const structData = node.data;
+      if (!structData.collapsed && structData.elements) {
+        const expressionElements = structData.elements.filter(
+          (el) => el.type === "expression" && el.branchId
+        );
+        expressionElements.forEach((element, idx) => {
+          if (element.branchId) {
+            edges.push({
+              id: `${node.id}-expr-${element.branchId}`,
+              source: node.id,
+              target: element.branchId,
+              sourceHandle: `expr-${idx}`,
+              targetHandle: "left"
+            });
+          }
+        });
+      }
+    }
+  });
+  return edges;
+}
+
 function DebuggerControls() {
   const {
     state,
@@ -8888,22 +9475,22 @@ function DataLogicEditorInner({
 }) {
   const bgColor = theme === "dark" ? "#404040" : "#cccccc";
   const [nodes, setNodes, onNodesChange] = react$1.useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(initialEdges);
+  const [, , onEdgesChange] = react$1.useEdgesState(initialEdges);
   react.useEffect(() => {
     setNodes(initialNodes);
-    setEdges(initialEdges);
-  }, [initialNodes, initialEdges, setNodes, setEdges]);
+  }, [initialNodes, setNodes]);
   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(
-    () => edges.filter(
+    () => currentEdges.filter(
       (edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)
     ),
-    [edges, nodeIds, hiddenNodeIds]
+    [currentEdges, nodeIds, hiddenNodeIds]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(EvaluationContext.Provider, { value: evaluationResults, children: /* @__PURE__ */ jsxRuntime.jsxs(ConnectedHandlesProvider, { edges: visibleEdges, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8942,7 +9529,8 @@ function DataLogicEditor({
   data,
   mode = "visualize",
   theme: themeProp,
-  className = ""
+  className = "",
+  preserveStructure = false
 }) {
   if (mode === "edit") {
     console.warn("[DataLogicEditor] Edit mode is not yet implemented. Component will render in read-only mode with debug evaluation if data is provided.");
@@ -8953,14 +9541,15 @@ function DataLogicEditor({
     ready: wasmReady,
     evaluate,
     evaluateWithTrace
-  } = useWasmEvaluator();
+  } = useWasmEvaluator({ preserveStructure });
   const debugEnabled = mode === "debug" && data !== void 0;
   const editor = useLogicEditor({
     value,
     evaluateWithTrace: debugEnabled && wasmReady ? evaluateWithTrace : void 0,
-    data: debugEnabled ? data : void 0
+    data: debugEnabled ? data : void 0,
+    preserveStructure
   });
-  const expressionKey = editor.nodes.length > 0 ? editor.nodes[0].id : "empty";
+  const expressionKey = `${editor.nodes.length}-${editor.edges.length}-${editor.nodes[0]?.id ?? "empty"}`;
   const fallbackResults = useDebugEvaluation({
     nodes: editor.nodes,
     data,
@@ -8975,7 +9564,7 @@ function DataLogicEditor({
     ] }) });
   }
   const showDebugger = debugEnabled && editor.usingTraceMode && editor.steps.length > 0;
-  const readOnly = mode !== "edit";
+  const readOnly = false;
   const editorInner = /* @__PURE__ */ jsxRuntime.jsx(
     DataLogicEditorInner,
     {